Question

我是老师，刚开始编码。我需要为我的学生进行在线测验，我一直在努力寻找一些脚本来进行我们想要的测验。

我试图在网上找到解决方案，我看到有人说当用户点击“提交”按钮或添加jquery等时，我们可以通过隐藏其他问题每页制作一个问题。但我不知道知道我应该把脚本放在哪里，我已经尝试了几次但是它搞砸了我的测验。

是否有人可以帮助我进行每页一个问题的测验，并在每次参加测验时将显示的问题随机化？

这是我的测验：

 answer_list = [
      ["is,was"],
      ["Present tense"],
      ['is','was'],
      ['are','were','used to be'],
      ['am']
    // Note: No comma after final entry
    ];

    response = [];
    function setAnswer(question, answer) { response[question] = answer; }

    function CheckAnswers() {
      var correct = 0;
      var flag, resp, answ;
      for (var i = 0; i < answer_list.length; i++) {
        flag = false;
        for(var j=0; j<answer_list[i].length; j++){
          resp = response[i].toLowerCase();
          answ = answer_list[i][j].toLowerCase();
          if ((resp == answ) || (answ.indexOf(resp) != -1)) { flag = true; }
        }
        if (flag) {
          correct++;
          document.getElementById('ques'+i).style.backgroundColor = '1AFD1A';
        } else {
          document.getElementById('ques'+i).style.backgroundColor = '#ff0000';
        }
      }
    //  alert("You got " + correct + " of " + answer_list.length + " questions correct!");
    }

<HTML>
    <HEAD>
    <TITLE>Quiz</TITLE>
    <style type="text/css">
     .ques { width:50%; border:1px solid black; }
    </style>  
    </HEAD>
    <BODY BGCOLOR = #9DE4F2>
    <FONT FACE="Print bold" SIZE=10>Quiz</FONT><BR>
    <HR SIZE=9 WIDTH=100%>
    <FONT FACE="Print bold" SIZE=5>
    <FORM>

    <div id="ques0" class="ques">
    <B>1.  She <INPUT TYPE=text NAME=question0 size=30
    onChange="setAnswer(0, this.value)" autofocus="autofocus" id="xax"> a girl.</B>
    </div>
    <P><BR><P>

    <div id="ques1" class="ques">
    <B>2. "is", "am", "are" are:</B><P>
     <label><INPUT TYPE=radio NAME=question1 VALUE="Present tense"
     onClick="setAnswer(1,this.value)">Present tense</label><BR>
     <label><INPUT TYPE=radio NAME=question1 VALUE="Past tense"
     onClick="setAnswer(1,this.value)">Past tense</label><BR>
     <label><INPUT TYPE=radio NAME=question1 VALUE="Present perfect tense"
     onClick="setAnswer(1,this.value)">Present perfect tense</label><BR>
     <label><INPUT TYPE=radio NAME=question1 VALUE="Future tense"
     onClick="setAnswer(1,this.value)">Future tense</label>
    </div>
    <BR><P>

    <div id="ques2" class="ques">
    <b>3. He
    <input type="text" name="question2" size="30"
     onchange="setAnswer(2, this.value)"> a police.</b>
    </div>
    <p>

    <div id="ques3" class="ques">
    <b>4. We
    <input type="text" name="question2" size="30"
     onchange="setAnswer(3, this.value)"> friends.</b>
    </div>
    <p>

    <div id="ques4" class="ques">
    <b>5. I
    <input type="text" name="question2" size="30"
     onchange="setAnswer(4, this.value)"> happy</b>
    </div>
    <p>

    <INPUT TYPE="button" NAME="check" VALUE="Check Answers" onClick=CheckAnswers()>
    </FORM>
    </FONT>
    </BODY>
    </HTML>

非常感谢！

Answer 1

这是我的建议：

注意：如评论中所述，不推荐使用您用于页面的HTML版本。在当前的HTML版本（HTML5）中，您应该严格分隔样式和语义，因此不要使用<b>或<font>标记等标记。样式将使用CSS实现。

HTML

这将是纯HTML代码（我遗漏了doctype等的声明。）

<div id="ques0" class="ques">
  <h2>Question 1</h2>
  <p>She
    <input type="text" name="answer0" /> a girl.</p>
</div>

<div id="ques1" class="ques">
  <h2>Question 2</h2>
  <p>"is", "am" and "are" are</p>
  <ul>
    <li>
      <input type="radio" name="answer1" value="Present tense" />
      <label>Present tense</label>
    </li>
    <li>
      <input type="radio" name="answer1" value="Past tense" />
      <label>Past tense</label>
    </li>
    <li>
      <input type="radio" name="answer1" value="Future tense" />
      <label>Future tense</label>
    </li>
  </ul>
</div>

<div id="ques2" class="ques">
  <h2>Question 3</h2>
  <p>He
    <input type="text" name="answer2" /> a police.
  </p>
</div>

<a href="javascript:checkAnswer()">Check answer!</a>

如您所见，这仅包含纯语义。每个问题都是<div>，其中包含id个问题。问题的标题是<h2>元素。使用无序列表（<ul>）实现多项选择题，其中包含答案可能性作为列表项（<li>）。

最后一行中的链接（<a>）用于触发程序代码以检查答案。

如果您想更改样式，可以使用CSS（可以嵌入css文件，将<link rel="stylesheet" path="path/to/your/stylesheet.css" />放在文档的head部分中。）

CSS

我在这里没有太多关于样式的说法，因为它不是问题的一部分，但如果你想要，你可以在W3Schools上阅读关于CSS的this tutorial例子。

一件事：如果你想从多项选择题中删除列表项目符号，你可以添加

.ques ul {
  list-style: none;
  padding-left: 0;
}

到你的样式CSS文件。

的JavaScript

JavaScript是一种客户端编程语言。客户端意味着在客户端的浏览器中执行（并因此加载）所有内容。因此，您的答案并非真正隐藏＆＃34; - 如果有人想作弊并且对JavaScript有所了解，他们可以打开开发者控制台并查看源代码。因为你只想为一些学生做一个测验，我认为JavaScript会很好。

如果您想创建竞赛（例如高分列表）或隐藏答案，您必须使用像PHP这样的服务器端语言（可能还有像使用SQL访问的MariaDB这样的数据库）。这会使事情变得更复杂，所以我不会讨论它们。如果你想了解更多，我会再次建议看看W3Schools＆＃39;网站 - 他们为大多数流行的网络语言提供了很好的教程。

使用JavaScript时，我建议嵌入jQuery，这样可以更轻松地修改网页（我们需要的）。只需下载当前版本（例如，从此处https://code.jquery.com/jquery-3.1.0.min.js），然后将其添加到您的<script src="/path/to/jquery-3.1.0.min.js"></script>部分中放置head的HTML网站。

脚本必须执行几项任务：

（窗口加载后直接）随机问题顺序
隐藏除了shuffelled order
让用户回答问题
（＆＃34;检查答案！＆＃34;点击）检查答案
显示＆＃34;对＆＃34;或＆＃34;错误＆＃34;
如果答案错误，请重复。如果没有，请继续执行步骤7
如果答案是对的并且还有问题，请从步骤2开始（当然使用下一个问题）。如果没有问题，请退出。

您可以实现这样的任务（以下所有代码都可以放在<script>部分的head标记内）：

window.onload = function() {
  // == Task 1: Shuffle question order ==
  var questionCnt = $("div.ques").length; // $ calls the jQuery function. It returns a list of elements that match the selector "div.ques" (which means, all divs with the ques class). We need the length of the list (the question count)
  questionOrder = []; // The order in which the questions will be shown
  while (questionOrder.length < questionCnt) {
    var rnd = Math.floor(Math.random() * questionCnt); // Get random number between 0 and the question count
    if (questionOrder.indexOf(rnd) == -1) questionOrder.push(rnd); // Add it to the question order, but only if it has not been added
    questionsAsked = 0; // The number of questions asked until now
    hideAllExcept(questionOrder[questionsAsked]); // Start: Hide all questions except one
  }
}

// == Used for Task 2: Hides all questions except the given one ==
function hideAllExcept(question) {
  $("div.ques").hide(); // Hides all questions
  $("#ques" + question).show(); // Shows only the given question
}

// The answers
var answers = [
  ["is", "was"],
  ["Present tense"],
  ["is", "was"]
];

// == Used for Task 4: Triggered by the link, checks an answer ==
function checkAnswer() {

  var questionNumber = questionOrder[questionsAsked]; // The number of the question that is shown at the moment
  var answer; // Get the answer

  if (questionNumber == 1) {
    answer = $("#ques" + questionNumber + " input:checked").val(); // Returns the value of the attribute "value" of the selected radio button
  } else {
    answer = $("#ques" + questionNumber + " input").val(); // The value of the input field that is placed in the given question
  }

  // Check whether the answer is correct
  var correct = answers[questionNumber].indexOf(answer) != -1;

  // Display a message
  window.alert(correct ? "Your answer is correct!" : "Sadly, your answer is not correct.");


  // Continue, if answer is correct
  if (correct) {
    questionsAsked++; //Increase questionsAsked
    if (questionsAsked >= questionOrder.length) {
      window.alert("Well done, you've completed the quiz!");
    } else {
      hideAllExcept(questionOrder[questionsAsked]); // Start over at step 2
    }
  }
}

我已经创建了一个jsfiddle，其中包含测验的实时演示：https://jsfiddle.net/ujLgarus/4/

这只是一个草稿，你可以改变它，就像你想要获得所请求的行为一样。如果您有疑问，只需在答案上发表评论 - 我会尽力帮助您。

每页进行JavaScript测验1Q的问题

1 个答案:

HTML

CSS

的JavaScript