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

时间：2017-05-21 20:16:50

标签： javascript html css animation

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

＆＃xA;＆＃xA;

这是代码：

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;
＆＃xD;＆＃xA; 
  ＆lt;！DOCTYPE html＆gt;＆＃xD;＆＃xA;＆lt; html lang =“en”＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; head＆gt;＆＃xD;＆＃ XA; ＆LT;标题＆GT;测验和LT; /标题＆GT;＆＃的xD;＆＃XA;＆LT; /头＆GT;＆＃的xD;＆＃XA;＆LT;风格＆GT;＆＃的xD;＆＃XA;身体{＆＃xD;＆＃xA; background-color：#eeeeee;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; .grid {＆＃xD;＆＃xA;宽度：600px;＆＃xD;＆＃xA;身高：500px;＆＃xD;＆＃xA; margin：0 auto;＆＃xD;＆＃xA; background-color：#fff;＆＃xD;＆＃xA;填充：10px 50px 50px 50px;＆＃xD;＆＃xA; border-radius：50px;＆＃xD;＆＃xA; border：2px solid #cbcbcb;＆＃xD;＆＃xA; box-shadow：10px 15px 5px＃cbcbcb＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; .grid h1 {＆＃xD;＆＃xA; font-family：sans-serif;＆＃xD;＆＃xA; background-color：＃57636e;＆＃xD;＆＃xA; font-size：60px;＆＃xD;＆＃xA; text-align：center;＆＃xD;＆＃xA;颜色：#fff;＆＃xD;＆＃xA;填充：2px 0px border-radius：50px＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; .grid #question {＆＃xD;＆＃xA; font-family：sans-serif;＆＃xD;＆＃xA; font-size：30px;＆＃xD;＆＃xA;颜色：＃5a6772＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; .buttons {＆＃xD;＆＃xA; margin-top：30px;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; ＃btn0，＆＃的xD;＆＃XA; ＃BTN1，＆＃的xD;＆＃XA; ＃BTN2，＆＃的xD;＆＃XA; ＃btn3 {＆＃xD;＆＃xA; background-color：＃778897;＆＃xD;＆＃xA;宽度：250px;＆＃xD;＆＃xA; font-size：20px;＆＃xD;＆＃xA;颜色：#fff;＆＃xD;＆＃xA; border：1px solid＃1d3c6a;＆＃xD;＆＃xA; border-radius：50px;＆＃xD;＆＃xA;保证金：10px 40px 10px 0px;＆＃xD;＆＃xA;填充：10px 10px;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; #progress {＆＃xD;＆＃xA;颜色：＃2b2b2b;＆＃xD;＆＃xA; font-size：18px;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; ＃btn0：悬停，＆＃的xD;＆＃XA; ＃BTN1：悬停，＆＃的xD;＆＃XA; ＃BTN2：悬停，＆＃的xD;＆＃XA; ＃btn3：悬停{＆＃xD;＆＃xA; cursor：pointer;＆＃xD;＆＃xA; background-color：＃57636e;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; ＃btn0：焦点，＆＃的xD;＆＃XA; ＃BTN1：焦点，＆＃的xD;＆＃XA; ＃BTN2：焦点，＆＃的xD;＆＃XA; ＃btn3：focus {＆＃xD;＆＃xA; outline：0;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA;＆LT; /风格＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA;＆LT;身体GT;＆＃的xD;＆＃XA; ＆lt; div class =“grid”＆gt;＆＃xD;＆＃xA; ＆lt; div id =“quiz”＆gt;＆＃xD;＆＃xA; ＆LT; H1＆GT;测验和LT; / H1＆GT;＆＃的xD;＆＃XA; ＆lt; hr style =“margin-bottom：20px”＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA; ＆lt; p id =“question”＆gt;＆lt; / p＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA; ＆lt; div class =“buttons”＆gt;＆＃xD;＆＃xA; ＆lt; button id =“btn0”＆gt;＆lt; span id =“choice0”＆gt;＆lt; / span＆gt;＆lt; / button＆gt;＆＃xD;＆＃xA; ＆lt; button id =“btn1”＆gt;＆lt; span id =“choice1”＆gt;＆lt; / span＆gt;＆lt; / button＆gt;＆＃xD;＆＃xA; ＆lt; button id =“btn2”＆gt;＆lt; span id =“choice2”＆gt;＆lt; / span＆gt;＆lt; / button＆gt;＆＃xD;＆＃xA; ＆lt; button id =“btn3”＆gt;＆lt; span id =“choice3”＆gt;＆lt; / span＆gt;＆lt; / button＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; ＆lt; hr style =“margin-top：50px”＆gt;＆＃xD;＆＃xA; ＆LT;页脚＆GT;＆＃的xD;＆＃XA; ＆lt; p id =“progress”＆gt; y的问题x。＆lt; / p＆gt;＆＃xD;＆＃xA; ＆LT; /页脚＆GT;＆＃的xD;＆＃XA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA; ＆lt; script language =“javascript”＆gt;＆＃xD;＆＃xA;功能测验（问题）{＆＃xD;＆＃xA; this.score = 0;＆＃xD;＆＃xA; this.questions = questions;＆＃xD;＆＃xA; this.questionIndex = 0;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; Quiz.prototype.getQuestionIndex = function（）{＆＃xD;＆＃xA; return this.questions（this.questionIndex）;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; Quiz.prototype.isIndex = function（）{＆＃xD;＆＃xA; return this.questions.length === this.questionIndex;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; Quiz.prototype.guess = function（answer）{＆＃xD;＆＃xA; this.questionIndex ++;＆＃的xD;＆＃XA; if（this.getQuestionIndex（）。correctAnswer（answer））{＆＃xD;＆＃xA; this.score ++;＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; // ------------------------------------------------ ---------------＆＃的xD;＆＃XA; //Questions.js
功能问题（文字，选择，答案）{＆＃xD;＆＃xA; this.text = text;＆＃xD;＆＃xA; this.choices =选择;＆＃xD;＆＃xA; this.answer = answer;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; Question.prototype.correctAnswer = function（choice）{＆＃xD;＆＃xA;返回选择=== this.answer;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; // ------------------------------------------------ ---------------＆＃的xD;＆＃XA; //应用＆＃的xD;＆＃XA; function populate（）{＆＃xD;＆＃xA; if（quiz.isEnded（））{＆＃xD;＆＃xA; showScores（）;＆＃的xD;＆＃XA; } else {＆＃xD;＆＃xA; var element = document.getElementById（“question”）;＆＃xD;＆＃xA; element.innerHTML = quiz.getQuestionIndex（）。text;＆＃xD;＆＃xA;＆＃xD;＆＃xA; var choices = quiz.getQuestionIndex（）。choices;＆＃xD;＆＃xA; for（var i = 0; i＆lt; choices.length; i ++）{＆＃xD;＆＃xA; var element = document.getElementById（“choice”+ i）;＆＃xD;＆＃xA; element.innerHTML = choices [i];＆＃xD;＆＃xA;猜（“btn”+ i，选择[i]）;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; };＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; function guess（）{＆＃xD;＆＃xA; var button = document.getElementById（id）;＆＃xD;＆＃xA; button.onclick = function（）{＆＃xD;＆＃xA; quiz.guess（猜测）;＆＃的xD;＆＃XA;填充（）;＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; function showScores（）{＆＃xD;＆＃xA; var gameOverHtml =“＆lt; h1＆gt; Result＆lt; / h1＆gt;”;＆＃xD;＆＃xA; gameOverHtml + =“＆lt; h2 id ='score'＆gt;你的分数：”+ quiz.score +“＆lt; / h2＆gt;”;＆＃xD;＆＃xA; var element = document.getElementById（“quiz”）;＆＃xD;＆＃xA; element.innerHTML = gameOverHtml;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; var questions = [＆＃xD;＆＃xA;新问题（“哪个不是对象？”，[“Java”，“C＃”，“C ++”，“C”]，“C”），＆＃xD;＆＃xA;新问题（“哪个不是对象？”，[“Java”，“C＃”，“C ++”，“C”]，“C”），＆＃xD;＆＃xA;新问题（“哪个不是对象？”，[“Java”，“C＃”，“C ++”，“C”]，“C”），＆＃xD;＆＃xA;新问题（“哪个不是对象？”，[“Java”，“C＃”，“C ++”，“C”]，“C”），＆＃xD;＆＃xA;新问题（“哪个不是对象？”，[“Java”，“C＃”，“C ++”，“C”]，“C”），＆＃xD;＆＃xA; ];＆＃的xD;＆＃XA; var quiz = new Quiz（questions）;＆＃xD;＆＃xA;填充（）;＆＃的xD;＆＃XA; ＆LT; /脚本＆GT;＆＃的xD;＆＃XA;＆LT; / BODY＆GT;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA;＆LT; / HTML＆GT;
＆＃的xD ;＆＃xA;
＆＃xD;＆＃xA;
＆＃xD;＆＃xA;

＆＃xA;＆＃xA;

非常感谢

＆＃XA;

1 个答案:

答案 0 :(得分：3)

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

在测验中似乎没有名为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]);
    }

猜测函数没有定义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>

相关问题
最新问题