计算随机测验的分数

Question

我正在制作一个可以随机化问题的测验页面，但评分不起作用。我的returnScore（）函数有问题，但我无法弄清楚它是什么。

/**
 * Author: Khang Trinh
 * Target: register.html
 * Created: 20 Apr 2018
 * Last updated: 23 Apr 2018
 */

"use strict";
//Enhancement 1: Quiz randomizer
var QUsed = [];

function getQuestion(questionNumber) {
  var questionTarget = "question" + questionNumber.toString();
  var questionContent = document.getElementById(questionTarget);

  while (QUsed.length < 5) {
    var QNumber = Math.floor(Math.random() * 9) + 1;
    if (QUsed.indexOf(QNumber) > -1) continue;
    QUsed[QUsed.length] = QNumber;
  }
  if (QUsed[questionNumber] == 1) {
    questionContent.innerHTML = "When was the first Blog created?";
    var dateInput = document.createElement("input");
    dateInput.type = "date";
    dateInput.id = "q1";
    questionContent.parentNode.insertBefore(dateInput, questionContent.nextSibling);
    //mimicing jQuery insertAfter function learned from 
    //https://stackoverflow.com/questions/4793604/how-to-insert-an-element-after-another-element-in-javascript-without-using-a-lib
    questionContent.insertAdjacentText("afterend", "Please select ");
  } else if (QUsed[questionNumber] == 2) {
    questionContent.innerHTML = "A blog is similar to a website to a certain extent.";
    var radioOption = ["True", "False", "Debatable"];

    for (var i = 0; i < 3; i++) {
      var radio = makeRadioButton("2(a)", radioOption[i], radioOption[i]);
      radio.id = ("2" + radioOption[i]).toString();
      questionContent.appendChild(radio);
    }
  } else if (QUsed[questionNumber] == 3) {
    questionContent.innerHTML = "What are the 2 main differences that a blog has but a website doesn't? (needs both answers correct to get marks)";
    var checkboxOption = ["Content is updated on a regular basis", "Contains many smaller webpages", "Interactive", "All of the above", "None of the above"];
    checkboxOption.reverse();

    for (var i = 0; i < 5; i++) {
      var checkbox = makeCheckbox("(2)Main_differences[]", checkboxOption[i], checkboxOption[i]);
      var br = document.createElement("br");
      checkbox.id = ("3_o" + Math.abs(i - 5)).toString();
      questionContent.parentNode.insertBefore(br, questionContent.nextSibling);
      questionContent.parentNode.insertBefore(checkbox, questionContent.nextSibling);
    }
  } else if (QUsed[questionNumber] == 4) {
    questionContent.innerHTML = "Who was considered the founding father of blogs?";
    var inputText = document.createElement("input");
    inputText.id = "q4";
    inputText.name = "(3)Blog founder";
    questionContent.parentNode.insertBefore(inputText, questionContent.nextSibling);
  } else if (QUsed[questionNumber] == 5) {
    questionContent.innerHTML = "Who created the term 'Blog'? (need both answers correct to get marks)";
    var option1 = ["Please select", "Jorn Barger", "Peter Merlolz", "Steven Conway", "Peter Merholz", "David Harris", "No one", "Someone else"];
    var option2 = ["Please select", "28th Jul 1914", "1st Sep 1939", "6th Dec 1964", "13th Jan 1994", "12th Oct 1999", "Date's not listed", "Who knows when"];
    var select1 = document.createElement("select");
    var select2 = document.createElement("select");
    select1.id = "blog_creator";
    select2.id = "blog_date";
    questionContent.parentNode.insertBefore(select2, questionContent.nextSibling);
    questionContent.insertAdjacentText("afterend", " on ");
    questionContent.parentNode.insertBefore(select1, questionContent.nextSibling);
    questionContent.insertAdjacentText("afterend", "The term 'blog' was created by ");

    for (var i = 0; i < option1.length; i++) {
      var optionOne = document.createElement("option");
      optionOne.value = option1[i]; //createElement for select input learned from https://stackoverflow.com/questions/42742761/how-to-create-a-select-in-vues-createelement
      optionOne.text = option1[i];
      select1.appendChild(optionOne);

      var optionTwo = document.createElement("option");
      optionTwo.value = option2[i];
      optionTwo.text = option2[i];
      select2.appendChild(optionTwo);
    }
  } else if (QUsed[questionNumber] == 6) {
    questionContent.innerHTML = "If a shopping site is updated regularly, it is considered a blog.";
    var radioOption = ["True", "False", "Debatable"];

    for (var i = 0; i < 3; i++) {
      var radio = makeRadioButton("(6)a", radioOption[i], radioOption[i]);
      radio.id = ("6" + radioOption[i]).toString();
      questionContent.appendChild(radio);
    }
  } else if (QUsed[questionNumber] == 7) {
    questionContent.innerHTML = "What year was the first Vlog created?";
    var textInput = document.createElement("input");
    textInput.id = "q7";
    questionContent.parentNode.insertBefore(textInput, questionContent.nextSibling);
  } else if (QUsed[questionNumber] == 8) {
    questionContent.innerHTML = "Where was the 'Weblog' created?";
    var inputText = document.createElement("input");
    inputText.id = "q8";
    questionContent.parentNode.insertBefore(inputText, questionContent.nextSibling);
  } else if (QUsed[questionNumber] == 9) {
    questionContent.innerHTML = "Your Facebook personal profile page can be considered a blog.";
    var radioOption = ["True", "False", "Debatable"];

    for (var i = 0; i < 3; i++) {
      var radio = makeRadioButton("9(a)", radioOption[i], radioOption[i]);
      radio.id = ("9" + radioOption[i]).toString();
      questionContent.appendChild(radio);
    }
  }
}


function makeRadioButton(name, value, text) {

  var label = document.createElement("label");
  var radio = document.createElement("input");
  radio.type = "radio";
  radio.name = name;
  radio.value = value;

  label.appendChild(radio);

  label.appendChild(document.createTextNode(text));
  return label;
}

function makeCheckbox(name, value, text) {

  var label = document.createElement("label");
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = name;
  checkbox.value = value;

  label.appendChild(checkbox);

  label.appendChild(document.createTextNode(text));
  return label;
}
//End of enhancement 1

function validate() {
  var errMsg = "";
  var result = true;
  var id = document.getElementById("id").value;
  var fName = document.getElementById("fName").value;
  var lName = document.getElementById("lName").value;
  var pt = returnScore();
  if (id == "") {
    errMsg = errMsg + "You need to enter your student ID.\n";
    result = false;
  } else if (!id.match(/[0-9]{7}|[0-9]{10}/)) {
    errMsg = errMsg + "Your ID number can only contain 7 or 10 numbers.\n";
    result = false;
  }
  if (fName == "") {
    errMsg = errMsg + "You need to enter your first name.\n";
    result = false;
  } else if (!fName.match(/^[a-zA-Z- ]{1,25}$/)) {
    errMsg = errMsg + "Your first name can only contain of 25 alpha characters, hyphens or spaces.\n";
  }

  if (lName == "") {
    errMsg = errMsg + "You need to enter your last name.\n";
    result = false;
  } else if (!lName.match(/^[a-zA-Z- ]{1,25}$/)) {
    errMsg = errMsg + "Your last name can only contain 25 alpha characters, hyphens or spaces.\n";
    result = false;
  }


  if (pt == 0) {
    errMsg = errMsg + "Try to attempt at least 1 question.\n";
    result = false;
  }
  if (errMsg != "") {
    alert(errMsg);
  }

  if (result) {
    storeResult(id, fName, lName, pt);
  }

  return result;
}

function returnScore() {
  var pt = 0;
  if (QUsed.includes(1)) {
    var q1Input = document.getElementById("q1").value;
    if (q1Input == "1994-01-23") {
      pt += 2;
    }
  }
  if (QUsed.includes(2)) {
    var q2Input = document.getElementById("2True");
    if (q2Input.checked == true) {
      pt += 2;
    }
  }
  if (QUsed.includes(3)) {
    var q3Input1 = document.getElementById("3_o1").getElementsByTagName("input");
    var q3Input2 = document.getElementById("3_o3").getElementsByTagName("input");
    if (q3Input.checked == true && q3Input2.checked == true) {
      pt += 2;
    }
  }
  if (QUsed.includes(4)) {
    var q4Input = document.getElementById("q4").value;
    if (q4Input == "Justin Hall") {
      pt += 2;
    }
  }
  if (QUsed.includes(5)) {
    var q5Input1 = document.getElementById("blog_creator").value;
    var q5Input2 = document.getElementById("blog_date").value;
    if (q5Input == "Peter Merholz" && q5Input2 == "12th Oct 1999") {
      pt += 2;
    }
  }
  if (QUsed.includes(6)) {
    var q6Input = document.getElementById("6Debatable").value;
    if (q6Input == true) {
      pt += 2;
    }
  }
  if (QUsed.includes(7)) {
    var q7Input = document.getElementById("q7").value;
    if (q7Input == "2004") {
      pt += 2;
    }
  }
  if (QUsed.includes(8)) {
    var q8Input = document.getElementById("q8").value;
    if (q8Input == "Robot Wisdom") {
      pt += 2;
    }
  }
  if (QUsed.includes(9)) {
    var q9Input = document.getElementById("9True").value;
    if (q9Input == true) {
      pt += 2;
    }
  }
}

function storeResult(id, fName, lName, pt) {
  localStorage.setItem("id", id);
  localStorage.setItem("fName", fName);
  localStorage.setItem("lName", lName);
  localStorage.setItem("pt", pt);
}

function init() {
  getQuestion(0);
  getQuestion(1);
  getQuestion(2);
  getQuestion(3);
  getQuestion(4);

  var test = document.getElementById("submit");
  test.onclick = validate;
}

window.onload = init;

/*
filename: layout.css
author: Khang Trinh
created: 14/3/2018
last modified: 23/3/2018
description: used for index.html, topic.html, quiz.html and enhancements.html
*/

body {
  margin: 0;
  padding: 0;
  background: url('images/ArticleBackgroundPic.jpg');
  font: 11.5pt Arial;
  width: 100%;
  height: 100%;
}


/*Laying out the divs for the website*/


/*Technique learned from https://colintoh.com/blog/display-table-anti-hero*/

.table {
  display: table;
}

.cell {
  display: table-cell;
}

#welcomeMsg {
  background: url('images/HeaderImage.png');
  background-size: cover;
}

#welcomeMsg p {
  margin: 0;
  text-align: center;
  font-family: "Times New Roman";
  color: #fff;
  height: 10vw;
  background: rgba(64, 64, 64, 0.3);
  /*Opacity background technique learned from https://css-tricks.com/rgba-browser-support/*/
}

#title {
  font-size: 52pt;
  line-height: 7vw;
}

header {
  display: table-row;
  height: 1px;
}

footer {
  width: 100%;
  position: absolute;
  display: table-row;
  background-image: linear-gradient(#1b2830, #090e10);
}

footer p {
  color: #fff;
  text-align: center;
  font-size: 0.8em;
}

.mainContent {
  height: 100%;
  width: 100%;
  background: rgba(253, 225, 142, 0.9);
}

.content {
  padding: 0 3vw 1vw 3vw;
}

.Lsidebar,
.Rsidebar {
  width: 13vw;
}

.Lsidebar {
  background: url('images/WebsiteBackgroundPic1.png') left top;
  background-size: contain;
  background-repeat: repeat-y;
}

.Rsidebar {
  background: url('images/WebsiteBackgroundPic2.png') right top;
  background-size: contain;
  background-repeat: repeat-y;
}

div>img {
  width: 100%;
  /*This will make the sidebar images scale with the window*/
}


/*Some general initialization*/

h1 {
  font: bold 24pt Helvetica;
}

p {
  text-align: justify;
}

a {
  text-decoration: none;
}

legend {
  font-weight: bold;
}

sup {
  /*This is here to prevent superscripts from affecting the line height*/
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}

blockquote {
  margin: 0 5vw;
}

.red {
  color: red;
}

.mainContent a:not(.menuEg):hover {
  text-decoration: underline;
}

.mainContent a:not(.menuEg):link,
.mainContent a:not(.menuEg):visited,
.mainContent a:not(.menuEg),
footer a {
  color: #0c92b8;
}

.referrence {
  font-size: 8pt;
}

.whisper {
  font-size: 0.8em;
}


/*Dropdown menu*/


/*Design idea from https://catalin.red/css3-animated-dropdown-menu/ */


/*The container*/

.dbar {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #1b2830;
  color: #fff;
  font: bold 16px Arial;
  list-style-type: none;
}


/*Menu buttons*/

.dbar li {
  display: table-cell;
  width: 25%;
  float: left;
  z-index: 1;
}

.menu,
.menuEg {
  display: block;
  padding: 16px 0;
  color: #fff;
  text-align: center;
  background-image: linear-gradient(#1b2830, #090e10);
  border-right: 1px solid #404040;
}


/*Dropdowns*/

.dropdownLinks {
  display: none;
  position: absolute;
  background-color: #c3c3c3;
  font-size: 14px;
  z-index: 1;
}

.dropdownLinks a {
  display: block;
  padding: 10px;
  color: #000;
  text-align: left;
}


/*This bit makes the dropdown work*/

.dropdown:hover .dropdownLinks {
  display: block;
}

.menu:hover {
  background-color: #2e414f;
  border-bottom: 3px solid #8efdfb;
}

.dropdownLinks a:hover {
  background-color: #f1f1f1;
}


/*This bit shows the user which site they're on*/

.active {
  border-bottom: 3px solid #8efdfb;
}


/*Some animations to make things more interesting*/


/*Concetps learned from https://www.w3schools.com/css/css3_animations.asp*/

.house-with-cloud {
  position: relative;
}

.cloud {
  position: absolute;
  left: 0;
}

.fa-cloud {
  transform: scale(0.01, 0.01);
  /*Hiding the cloud preparing for the animation*/
}

p.ex {
  margin-bottom: 7vw;
}

span.ex {
  font-size: 72pt;
  text-align: center;
}

a:hover .fa-cloud,
.active .fa-cloud,
.egc {
  animation: float 0.8s infinite linear;
}

a:hover .fa-home,
.active .fa-home,
.egh {
  animation: pulse 0.8s infinite linear;
}

a:hover .fa-info-circle:not(.action),
.active .fa-info-circle,
.egi {
  animation: spin 0.8s infinite linear;
}

a:hover .fa-question-circle:not(.action),
.active .fa-question-circle,
.egq {
  animation: rotate 0.8s infinite linear;
}

a:hover .fa-star:not(.action),
.active .fa-star,
.egs {
  animation: teeter 0.5s infinite linear;
}

@keyframes float {
  100% {
    transform: translate(80%, -90%);
  }
}

@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  25% {
    transform: scaleY(0.8);
  }
  45% {
    transform: scaleX(0.8);
  }
  70% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes spin {
  50% {
    transform: scale(0.01, 1);
    color: #8c8c8c;
  }
}

@keyframes rotate {
  100% {
    transform: rotate(359deg);
  }
}

@keyframes teeter {
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}


/*Start actions*/

section.table {
  margin: 0 auto;
  padding: 2vw;
  text-align: center;
  background-color: #121d21;
}

.start {
  transition: transform 0.5s;
  color: #0c92b8;
}

.start i {
  padding: 2vw;
  font-size: 10vw;
}

.start:hover {
  transform: translateY(-1.5vw);
}


/*Content list*/

.contentList li,
.contentList ol,
.contentList h2 {
  margin: 0;
}

.contentList {
  padding: 10px;
  border: 1px solid black;
  background-color: #fce398;
}

.contentList ol {
  padding-left: 20px;
}


/*Aside*/

aside {
  margin-left: 3vw;
  border: 1px solid black;
  width: 25vw;
  float: right;
}

details {
  padding: 0.5vw 0;
  background-color: #fce398;
}

summary {
  text-align: center;
  cursor: pointer;
  /*Would've added -moz-user-select:none; somewhere around here to avoid 
		getting unecessary texts highlighted when clicking on the <details>*/
}

aside ul {
  padding-right: 3vw;
}

aside li:nth-child(odd) {
  text-align: center;
  list-style-type: none;
}


/*Figures and figure captions*/

figure {
  display: block;
}

.center {
  text-align: center;
}

.example {
  display: inline-block;
  width: 45%;
  height: 45%;
}

#mosaic {
  width: 50%;
  height: auto;
}

figcaption {
  text-align: center;
  font-size: 80%;
}


/*Tables*/

#BvW {
  margin-left: auto;
  margin-right: auto;
}

#BvW th {
  background-color: #00c6e5;
  color: #fff;
}

#BvW,
#BvW th {
  border: 2px solid black;
  border-collapse: collapse;
}

#BvW tr,
#BvW td {
  border: 1px solid black;
  border-right: 2px solid black;
}

#BvW tr:nth-child(even) {
  background-color: #f0f0f0;
}

#BvW tr:nth-child(odd) {
  background-color: #fff;
}


/*btt (back to top) button(for big screens) and links(for small screens)*/

.btt {
  font-size: 50%;
  display: inline-block;
}

#btt {
  position: fixed;
  bottom: 0px;
  right: 0px;
  padding: 0 16px;
  background-color: red;
  z-index: 5;
}


/*Quiz buttons*/

.quizButton {
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 10px;
  font-weight: bold;
}

.submit {
  background-color: #53ff1a;
  box-shadow: 3px 3px #1a6600;
}

.reset {
  background-color: #a6a6a6;
  box-shadow: 3px 3px #333333;
}

.submit:hover {
  background-color: #39e600;
  cursor: pointer;
}

.reset:hover {
  background-color: #8c8c8c;
  cursor: pointer;
}

.submit:active,
.reset:active {
  transform: translateY(2px);
}


/*Responsive CSS*/


/*Technique learned from https://www.w3schools.com/css/css_rwd_intro.asp*/

@media screen and (max-width: 975px) {
  * {
    font-size: 8pt;
  }
  #title {
    font-size: 26pt;
    line-height: 14vw;
  }
  #welcomeMsg {
    height: 20vw;
  }
  aside {
    display: none;
  }
  .dbar {
    width: 100%;
    font-size: 10pt;
  }
  .dbar li {
    display: inline-block;
    width: 100%;
  }
  .menu,
  .menuEg {
    text-align: center;
    padding: 10px 10px;
  }
  .quiz {
    display: block;
  }
}

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

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Lab03" />
  <meta name="keywords" content="blogs, posts" />
  <meta name="author" content="Khang Trinh" />
  <title>Take a quiz!</title>
  <script src="scripts/validate.js"></script>
  <link rel="stylesheet" href="styles/styles.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body class="table">
  <header>
    <div id="welcomeMsg">
      <p><strong><span id="title">EverythingBlog</span><br/>Everything you need to know about blogs is right here! (hopefully)</strong></p>
    </div>
  </header>
  <nav>
    <ul class="dbar table">
      <li><a class="menu" href="index.html"><span class="house-with-cloud"><i class="fa fa-home"></i><i class="fa fa-cloud cloud"></i></span> HOME</a></li>
      <li class="dropdown"><a href="topic.html" class="menu"><i class="fa fa-info-circle"></i> ABOUT BLOGS <i class="fa fa-caret-down"></i></a>
        <div class="dropdownLinks">
          <a class="dropdownA" href="topic.html#AboutBlogs">What's a blog?</a>
          <a class="dropdownA" href="topic.html#WhyBlog">Why is it called "Blog"?</a>
          <a class="dropdownA" href="topic.html#BlogVsWebsite">Website vs Blog</a>
          <a class="dropdownA" href="topic.html#WhyItMatters">Why blogging matters</a>
        </div>
      </li>
      <li><a class="menu active" href="#"><i class="fa fa-question-circle"></i> QUIZ</a></li>
      <li><a class="menu" href="enhancements.html"><i class="fa fa-star"></i> ENHANCEMENTS</a></li>
    </ul>
  </nav>
  <!--This div is here to contain the side images and the main content in the middle (wouldn't make sense using an <article> here)-->
  <div class="mainContent table">
    <!--Since I don't know how to make images repeat like backgrounds I had to make divs to give them background pictures so I can make them repeat-->
    <div class="cell Lsidebar"></div>

    <article class="cell content quiz">
      <h1>Quiz time!</h1>
      <p>Test your knowledge about blogs!</p>
      <p>If you haven't read the article about blogs yet, then I suggest you do it <a href="topic.html">here</a>. <span class="whisper">(<em>it'll help you do the questions much better</em>)</span></p>
      <form id="test" method="post" action="result.html" novalidate="novalidate">
        <fieldset>
          <legend>Personal Details</legend>
          <label for="id">Student ID</label>
          <input type="text" id="id" name="Student_ID" maxlength="10" size="10" />
          <br/><br/>
          <label for="fName">First name</label>
          <input type="text" id="fName" name="First_Name" size="10" />

          <label for="lName">Last name</label>
          <input type="text" id="lName" name="Last_Name" size="10" />
          <br/><br/>
        </fieldset>
        <fieldset>
          <legend>Question 1</legend>
          <p id="question0"></p>
        </fieldset>
        <fieldset>
          <legend>Question 2</legend>
          <p id="question1"></p>
        </fieldset>
        <fieldset>
          <legend>Question 3</legend>
          <p id="question2"></p>
        </fieldset>
        <fieldset>
          <legend>Question 4</legend>
          <p id="question3"></p>
        </fieldset>
        <fieldset>
          <legend>Question 5</legend>
          <p id="question4"></p>
        </fieldset>
        <br/>
        <button id="submit" class="quizButton submit" type="submit"><i class="fa fa-check"></i> Submit</button>
        <button class="quizButton reset" type="reset"><i class="fa fa-rotate-left"></i> Reset Fields</button>
      </form>
    </article>

    <div class="cell Rsidebar"></div>

  </div>
  <footer>
    <p>Mark up by: <a href="mailto:102118468@student.swin.edu.au">Khang Trinh</a></p>
  </footer>
</body>

</html>

Answer 1

我发现returnScore()功能错误的一些事情。

1. returnScore()不会返回任何内容，您应该在函数末尾return pt;。

在returnScore()中

2. 您需要将q3Input.checked更改为q3Input1.checked（好像您忘记更新变量名称）

3. q5Input == "Peter Merholz"的上述内容应为q5Input1 == "Peter Merholz"

更改这些问题后，您的代码似乎正常。