如何将我的 <script> 链接到我的 HTML 测验？答案

【问题标题】：how do i linking my <script> to my HTML Quiz?如何将我的 <script> 链接到我的 HTML 测验？
【发布时间】：2017-05-21 20:16:49
【问题描述】：

所以我正在使用 Java、CSS 和 HTML 在 JavaScript 中开发一个测验应用程序。我需要同一个文档（Notepad++）上的所有代码，并且 JavaScript 没有链接到 HTML Id。有人可以帮忙吗？

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Quiz</title>
</head>
<style>
  body {
    background-color: #eeeeee;
  }
  
  .grid {
    width: 600px;
    height: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 50px 50px 50px;
    border-radius: 50px;
    border: 2px solid #cbcbcb;
    box-shadow: 10px 15px 5px #cbcbcb
  }
  
  .grid h1 {
    font-family: sans-serif;
    background-color: #57636e;
    font-size: 60px;
    text-align: center;
    color: #fff;
    padding: 2px 0px border-radius: 50px
  }
  
  .grid #question {
    font-family: sans-serif;
    font-size: 30px;
    color: #5a6772
  }
  
  .buttons {
    margin-top: 30px;
  }
  
  #btn0,
  #btn1,
  #btn2,
  #btn3 {
    background-color: #778897;
    width: 250px;
    font-size: 20px;
    color: #fff;
    border: 1px solid #1d3c6a;
    border-radius: 50px;
    margin: 10px 40px 10px 0px;
    padding: 10px 10px;
  }
  
  #progress {
    color: #2b2b2b;
    font-size: 18px;
  }
  
  #btn0:hover,
  #btn1:hover,
  #btn2:hover,
  #btn3:hover {
    cursor: pointer;
    background-color: #57636e;
  }
  
  #btn0:focus,
  #btn1:focus,
  #btn2:focus,
  #btn3:focus {
    outline: 0;
  }
</style>

<body>
  <div class="grid">
    <div id="quiz">
      <h1>Quiz</h1>
      <hr style="margin-bottom: 20px">

      <p id="question"></p>

      <div class="buttons">
        <button id="btn0"><span id="choice0"></span></button>
        <button id="btn1"><span id="choice1"></span></button>
        <button id="btn2"><span id="choice2"></span></button>
        <button id="btn3"><span id="choice3"></span></button>
      </div>

      <hr style="margin-top: 50px">
      <footer>
        <p id="progress">Question x of y.</p>
      </footer>
    </div>
  </div>
  <script language="javascript">
    function Quiz(questions) {
      this.score = 0;
      this.questions = questions;
      this.questionIndex = 0;
    }
    Quiz.prototype.getQuestionIndex = function() {
      return this.questions(this.questionIndex);
    }
    Quiz.prototype.isIndex = function() {
      return this.questions.length === this.questionIndex;
    }
    Quiz.prototype.guess = function(answer) {
      this.questionIndex++;
      if (this.getQuestionIndex().correctAnswer(answer)) {
        this.score++;
      }
    }
    //---------------------------------------------------------------
    //Questions.js
    function Question(text, choices, answer) {
      this.text = text;
      this.choices = choices;
      this.answer = answer;
    }
    Question.prototype.correctAnswer = function(choice) {
      return choice === this.answer;
    }
    //---------------------------------------------------------------
    //Apps
    function populate() {
      if (quiz.isEnded()) {
        showScores();
      } else {
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;

        var choices = quiz.getQuestionIndex().choices;
        for (var i = 0; i < choices.length; i++) {
          var element = document.getElementById("choice" + i);
          element.innerHTML = choices[i];
          guess("btn" + i, choices[i]);
        }

      }
    };

    function guess() {
      var button = document.getElementById(id);
      button.onclick = function() {
        quiz.guess(guess);
        populate();
      }
    }

    function showScores() {
      var gameOverHtml = "<h1>Result</h1>";
      gameOverHtml += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
      var element = document.getElementById("quiz");
      element.innerHTML = gameOverHtml;
    }
    var questions = [
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
    ];
    var quiz = new Quiz(questions);
    populate();
  </script>
</body>

</html>

非常感谢

【问题讨论】：

脚本元素的 language 属性在 HTML 4 中已弃用，并在很久以前就被删除了。

标签： javascript html css animation

【解决方案1】：

此应用程序存在大量问题，从缺少参数到缺少功能：

测验中似乎没有名为isEnded 的函数。

我认为应该是在问完所有问题后：

Quiz.prototype.isEnded = function() {
    return this.questionIndex === this.questions.length;
}

this.questions(this.questionIndex)。您正在传递一系列问题。所以 this.questions 实际上是一个数组。我怀疑你想要：

Quiz.prototype.getQuestionIndex = function() {
    return this.questions[this.questionIndex];
}

您实际上并不需要内部跨度，实际上可以稍微更容易地得出答案：

    <button id="btn0"></button>
    <button id="btn1"></button>
    <button id="btn2"></button>
    <button id="btn3"></button>

将 Populate 的渲染选项部分更改为：

    for (var i = 0; i < choices.length; i++) {
      var element = document.getElementById("btn" + i);
      element.innerHTML = choices[i];
      guess("btn" + i, choices[i]);
    }

Guess 函数未定义参数中缺少的 id 变量

function guess(id) {
    var button = document.getElementById(id);
    button.onclick = function(event) {
        quiz.guess(this.innerHTML);
        populate();
    }
}

在检查猜测时，您会在检查答案之前递增。所以最后，你的 questionIndex 比数组中的问题大一，因此未定义：

Quiz.prototype.guess = function(answer) {      
  if (this.getQuestionIndex().correctAnswer(answer)) {
    this.score++;
  }

  this.questionIndex++;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Quiz</title>
</head>
<style>
  body {
    background-color: #eeeeee;
  }
  
  .grid {
    width: 600px;
    height: 500px;
    margin: 0 auto;
    background-color: #fff;
    padding: 10px 50px 50px 50px;
    border-radius: 50px;
    border: 2px solid #cbcbcb;
    box-shadow: 10px 15px 5px #cbcbcb
  }
  
  .grid h1 {
    font-family: sans-serif;
    background-color: #57636e;
    font-size: 60px;
    text-align: center;
    color: #fff;
    padding: 2px 0px border-radius: 50px
  }
  
  .grid #question {
    font-family: sans-serif;
    font-size: 30px;
    color: #5a6772
  }
  
  .buttons {
    margin-top: 30px;
  }
  
  #btn0,
  #btn1,
  #btn2,
  #btn3 {
    background-color: #778897;
    width: 250px;
    font-size: 20px;
    color: #fff;
    border: 1px solid #1d3c6a;
    border-radius: 50px;
    margin: 10px 40px 10px 0px;
    padding: 10px 10px;
  }
  
  #progress {
    color: #2b2b2b;
    font-size: 18px;
  }
  
  #btn0:hover,
  #btn1:hover,
  #btn2:hover,
  #btn3:hover {
    cursor: pointer;
    background-color: #57636e;
  }
  
  #btn0:focus,
  #btn1:focus,
  #btn2:focus,
  #btn3:focus {
    outline: 0;
  }
</style>

<body>
  <div class="grid">
    <div id="quiz">
      <h1>Quiz</h1>
      <hr style="margin-bottom: 20px">

      <p id="question"></p>

      <div class="buttons">
        <button id="btn0"><span id="choice0"></span></button>
        <button id="btn1"><span id="choice1"></span></button>
        <button id="btn2"><span id="choice2"></span></button>
        <button id="btn3"><span id="choice3"></span></button>
      </div>

      <hr style="margin-top: 50px">
      <footer>
        <p id="progress">Question x of y.</p>
      </footer>
    </div>
  </div>
  <script language="text/javascript">
    function Quiz(questions) {
      this.score = 0;
      this.questions = questions;
      this.questionIndex = 0;
    }
    Quiz.prototype.getQuestionIndex = function() {
      return this.questions[this.questionIndex];
    }
    Quiz.prototype.isIndex = function() {
      return this.questions.length === this.questionIndex;
    }
    
    Quiz.prototype.guess = function(answer) {
      if (this.getQuestionIndex().correctAnswer(answer)) {
        this.score++;
      }
      
      this.questionIndex++;
    }
    
    Quiz.prototype.isEnded = function() {
       return this.questionIndex === this.questions.length;
     }
    
    //---------------------------------------------------------------
    //Questions.js
    function Question(text, choices, answer) {
      this.text = text;
      this.choices = choices;
      this.answer = answer;
    }
    
    Question.prototype.correctAnswer = function(choice) {
      return choice === this.answer;
    }
    
    //---------------------------------------------------------------
    //Apps
    function populate() {
      if (quiz.isEnded()) {
        showScores();
      } else {
        var element = document.getElementById("question");
        element.innerHTML = quiz.getQuestionIndex().text;

        var choices = quiz.getQuestionIndex().choices;
        for (var i = 0; i < choices.length; i++) {
          var element = document.getElementById("btn" + i);
          element.innerHTML = choices[i];
          guess("btn" + i, choices[i]);
        }

      }
    };

    function guess(id) {
      var button = document.getElementById(id);
      button.onclick = function(event) {
        quiz.guess(this.innerHTML);
        populate();
      }
    }

    function showScores() {
      var gameOverHtml = "<h1>Result</h1>";
      gameOverHtml += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
      var element = document.getElementById("quiz");
      element.innerHTML = gameOverHtml;
    }
    var questions = [
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
      new Question("Which is not an object?", ["Java", "C#", "C++", "C"], "C"),
    ];
    var quiz = new Quiz(questions);
    populate();
  </script>
</body>

</html>

【讨论】：

非常感谢！问题就这样解决了！
另外，您可能希望将语言更改为“type="text/javascript"”