Calculating score for randomized quiz

Question

I'm making a quiz page that could do randomize the questions, but the scoring is not working. There is something wrong with my returnScore() function, but I can't figure out what it is.

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

A few things I see wrong with your returnScore() function.

1. returnScore() does not return anything, you should return pt; at the end of the function.

2. in returnScore() you need to change q3Input.checked to q3Input1.checked (seems like you forgot to update the variable name)

3. Same thing as above for q5Input == "Peter Merholz" should be q5Input1 == "Peter Merholz"

After changing those problems it seems your code works fine.