如何将相同的JS文件与其他HTML文件一起使用？

Question

I have a tlc-quiz.html, f60-quiz.html, s93-quiz.html and a quizapp.js, which checks the answers, gets the score and displays results. It works with tlc-quiz.html.

How can I make quizapp.js work with the other 2 quiz.html?

 /*====================app js====================*/ var numberOfQuestions = $('.questions').size(); // Insert number of choices in each question var numberOfChoices = 4; var rightAnswers = 0; var correct = []; var wrong =[]; var answers = new Array("Double Parking","The aplicant will have the aplication denied"); function buildList(arr) { var listHTML = '<ol class=boxes-list>'; for (var i = 0; i < arr.length; i++) { listHTML += '<li>' + arr[i] + '</li>'; } listHTML += '</ol>'; return listHTML; } // Do not change anything below here ... function getScore(form) { var currElt; var score = 0; var currSelection; for (i = 0; i < numberOfQuestions; i++) { currElt = i * numberOfChoices; for (j = 0; j < numberOfChoices; j++) { currSelection = form.elements[currElt + j]; if (currSelection.checked) { if (currSelection.value == answers[i]) { score++; correct.push(currSelection.value); } else{ wrong.push(currSelection.value); } } } } score = Math.round(score/numberOfQuestions*100); var userAnswers = '<h1 class="title">You got ' + score + ' % on your test.</h1>'; userAnswers += '<h2 class="subtitle">You got these answers correct:</h2>'; userAnswers += buildList(correct); userAnswers += '<h2 class="subtitle">You got these answers wrong</h2>'; userAnswers += buildList(wrong); print(userAnswers); } /*======================quizEffect app=====================*/ var totalQuestions = $('.questions').size(); var currentQuestion = 0; $questions = $('.questions'); $questions.hide(); shuffle($questions); $($questions.get(currentQuestion)).fadeIn(); $('#next').click(function () { $($questions.get(currentQuestion)).fadeOut(function () { currentQuestion = currentQuestion + 1; progressBar(); questionCounter(); if (currentQuestion == totalQuestions) { var outputDiv = document.getElementById("quizEnds"); outputDiv.innerHTML = '<h2 class="subtitle">Test Complete.</h2>'; $('#next').remove(); $('#slider').remove(); $('#questionCount').remove(); getScore($('form')[0]); } else { $($questions.get(currentQuestion)).fadeIn(); } }); }); function progressBar(){ var barLength = totalQuestions; var progress = currentQuestion; var percentage = Math.round((progress*100)/barLength); document.getElementById("sliderbar").style.width = percentage+'%'; document.getElementById("percentage").innerHTML = percentage+'%'; } function questionCounter(){ document.getElementById("questionCount").innerHTML = (currentQuestion + 1 + "/" + totalQuestions); } function shuffle(array) { var m = array.length, t, i; while (m) { i = Math.floor(Math.random() * m--); t = array[m]; array[m] = array[i]; array[i] = t; } return array; } 

 c-custom { padding: 0 .2em; max-width: 900px; margin: 0 auto; } /*.ac-custom */ .questions h2 { /*color: #3399FF;*/ color: #18BC9C; /*font-size: 2.4em;*/ font-size: 2em; font-weight: 300; /* padding: 0.5em;*/ margin: 0 0 30px; } .ac-custom ul, .ac-custom ol { list-style: none; padding: 0; margin: 0 auto; max-width: 800px; } .ac-custom li { margin: 10px auto; padding: 2em 0; position: relative; border: 1px solid #DDD; border-radius: 10px; } .ac-custom li:hover { background-color: #EBF4FA; } .ac-custom label { display: inline-block; position: relative; /*font-size: 1.8em;*/ font-size: 1.25em; padding: 0 0 0 80px; vertical-align: top; color: #666; cursor: pointer; -webkit-transition: color 0.3s; -moz-transition: color 0.3s; -o-transition: color 0.3s; transition: color 0.3s; } .ac-custom input[type="checkbox"], .ac-custom input[type="radio"], .ac-custom label::before { width: 50px; height: 50px; top: 50%; left: 0; margin-top: -25px; position: absolute; cursor: pointer; } .ac-custom input[type="checkbox"], .ac-custom input[type="radio"] { opacity: 0; -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; display: inline-block; vertical-align: middle; z-index: 100; } .ac-custom label::before { content: ''; /*border: 4px solid #fff;*/ -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; -o-transition: opacity 0.3s; transition: opacity 0.3s; } .ac-radio label::before { border-radius: 50%; } .ac-custom input[type="checkbox"]:checked + label, .ac-custom input[type="radio"]:checked + label { color: #18BC9C; } .ac-custom input[type="checkbox"]:checked + label::before, .ac-custom input[type="radio"]:checked + label::before { opacity: 0.8; } /*end of clickable label*/ /*button, question counter, progress bar*/ /*#questionCount */ .questionCount{ text-align: center; padding: 10px 0; font-weight: 300; font-size: 20px; color: #2C3E50; } button{ border: none; padding: 10px 20px; background-color: #2C3E50; color: #FFF; font-size: 20px; } button:hover { background-color: #18BC9C; } /*#slider*/ .slider{ width:100%; height:15px; border:1px solid #C2C2C2; overflow:hidden; text-align: center; } /*#sliderbar */ .sliderbar{ height:12px; background: #2C3E50; } /*#percentage */ .percentage{ font-size: 15px; font-weight: bold; position: relative; top: -16px; color: #18BC9C; } /*test results*/ ol.boxes-list { list-style-type: none; margin: 10px; margin-left: 3em; padding: 0; counter-reset: li-counter; } ol.boxes-list > li{ position: relative; margin-bottom: 8px; padding: .68em; background-color: #ddd; } ol.boxes-list > li:before { position: absolute; top: 0; left: -1.4em; width: 1.2em; height: 0.94em; font-size: 2.5em; line-height: 0.94; text-align: center; color: #f5f5f5; background-color: #464646; content: counter(li-counter); counter-increment: li-counter; } /*Media Queries*/ @media only screen and (min-width: 1080){ form { width: 80%; margin: 0 auto; } .next, .questionCount, .progress_bar { display: inline-block; } .bttn_bg { width: 100%; content: ""; clear: both; display: table; background-color: #DDD; } button { margin: 8px; float: right; } .questionCount { /* float: left;*/ margin: 8px; width: 67px; } .progress_bar{ width: 40%; margin-left: 20%; margin-bottom: -6px; } } @media only screen and (min-width: 700px) and (max-width : 1080){ .next, .questionCount, .progress_bar { display: block; width: 90%; margin: 10px auto; } } @media only screen and (min-width: 300px) and (max-width : 700px) { body{ font-size: 80%; } .questions, .ac-custom ul, .ac-custom ol{ width: 100%; margin: 0; } .next, .questionCount, .progress_bar{ width: 90%; display: block; margin: 10px auto; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <form class="ac-custom"> <div class="questions"> <h2>Which of the following is not a moving violation?</h2> <ol class="options"> <li> <input id="r1" type="radio" name="q1" value="Double Parking"> <label for="r1">Double Parking</label> </li> <li> <input id="r2" type="radio" name="q1" value="Tailgating"> <label for="r2">Tailgating</label> </li> <li> <input id="r3" type="radio" name="q1" value="Speeding"> <label for="r3">Speeding</label> </li> <li> <input id="r4" type="radio" name="q1" value="Failing to signal a turn"> <label for="r4">Failing to signal a turn</label> </li> </ol> </div> <div class="questions"> <h2>What is the penalty for an aplicant of an TLC driver's license who test positive for drugs and fails the drug test?</h2> <ol class="options"> <li> <input id="r5" type="radio" name="q2" value="The aplicant must take the test again"> <label for="r5">The aplicant must take the test again</label> </li> <li> <input id="r6" type="radio" name="q2" value="The aplicant will have a provationary license"> <label for="6r">The aplicant will have a provationary license</label> </li> <li> <input id="r7" type="radio" name="q2" value="The aplicant will have the aplication denied"> <label for="r7">The aplicant will have the aplication denied</label> </li> <li> <input id="r8" type="radio" name="q2" value="The aplicant will have to drive carefully"> <label for="r8">The aplicant will have to drive carefully</label> </li> </ol> </div> <div class="bttn_bg"> <div id="questionCount" class="questionCount">1/25</div> <div class="progress_bar"> <div id="slider" class="slider" > <div id="sliderbar" class="sliderbar"></div> <div id="percentage" class="percentage"></div> </div> </div> <button class="next" type="button" name="nextButton" id='next' value="Next">Next</button> </div> <form> <div id="quizEnds"></div> <div id="output"></div> 

Answer 1

Same as the script reference to jquery, near the top of your HTML, you can have a script tag load your JS file:

<head>
     <script src="/your-path-here/quizapp.js"></script>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
</head>

Answer 2

Assuming you want to use the same JavaScript file on multiple pages, you can simply include the reference to it in the <head> section of your document :

<head>
  <script src="/path/to/your/file/quizapp.js"></script>
</head>

Hope this is what you meant!