javascript - 如何将同一个 JS 文件与其他 HTML 文件一起使用？

Question

我有一个 tlc-quiz.html、f60-quiz.html、s93-quiz.html 和一个 quizapp.js，它检查答案、获取分数并显示结果。它适用于 tlc-quiz.html。

如何让 quizapp.js 与其他 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

与对 jquery 的脚本引用相同，在您的 HTML 顶部附近，您可以使用脚本标签加载您的 JS 文件:

<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>