Quiz in java script

I tried follow one video on coding for quiz but I am stuck it is giving me final answer as less than total it should be I don’t know …
window.onload = function () {

show(0);

};

//question

let questions = [

{

id: 1,

question:

  "Which one of the following does not represent the submerged portion of the iceberg?",

answer: "Diagnosed cases under treatment",

options: [

  "Diagnosed cases under treatment",

  "Undiagnosed cases",

  "Pre-symptomatic cases",

  "Carriers sub clinical cases",

],

},

{

id: 2,

question:

  "Which of the following is NOT true regarding pathogenesis of a disease?",

answer: "Screening is of no use in changing course of disease",

options: [

  "Screening is of no use in changing course of disease",

  "Tertiary prevention is possible",

  "Entry of organism occurs",

  "Includes subclinical cases",

],

},

{

id: 3,

question: "In Advanced Epidemiological triad, agent is replaced by:",

answer: "Causative factors",

options: [

  "Determinant risk factors",

  "Causative bacterium/virus",

  "Causative factors",

  "Determinant factors",

],

},

{

id: 4,

question: "Triangle of Epidemiology stands for:",

answer: "Interaction & interdependence of agent, host, environment & time",

options: [

  "Interaction of agent, host & environment",

  "Interaction of agent, host, environment & time",

  "Interaction & interdependence of agent, host, environment & time",

  "None of the above",

],

},

{

id: 5,

question: "Epidemiological triad are all included except:",

answer: "Investigator",

options: ["Host", "Environmental factors", "Agent", "Investigator"],

},

];

function submitForm(e) {

e.preventDefault();

let name = document.forms[“welcome_form”][“name”].value;

//save user name

sessionStorage.setItem(“name”, name);

location.href = “quiz.html”;

}

let question_count = 0;

let points = 0;

function next() {

let userAnswer = document.querySelector(“li.options.active”).innerHTML;

//check answer and give points

if (userAnswer === questions[question_count].answer) {

points += 1;

sessionStorage.setItem('points', points);

}

if (question_count === questions.length - 1) {

sessionStorage.setItem('time',`${minutes} minutes and ${seconds} seconds`)

clearInterval(myTime);

return (location.href = "end.html");

}

question_count++;

show(question_count);

}

function show(count) {

let question = document.getElementById(“questions”);

// question.innerHTML="

" + questions[count].question + “

”;

question.innerHTML = `

Q {question_count + 1} {

questions[count].question

}

<ul class="option_group">

<li class="options">${questions[count].options[0]}</li>

<li class="options">${questions[count].options[1]}</li>

<li class="options">${questions[count].options[2]}</li>

<li class="options">${questions[count].options[3]}</li>

</ul>`;

toggleActive();

}

let toggleActive = () => {

let options = document.querySelectorAll(“li.options”);

for (let i = 0; i < options.length; i++) {

options[i].onclick = function () {

  for (let j = 0; j < options.length; j++) {

    if (options[j].classList.contains("active")) {

      options[j].classList.remove("active");

    }

  }

  options[i].classList.add("active");

};

}

};

Can you repost your code after formatting it according to the following guidelines? Additionally, which is the value that is less than expected?

thank you Mam
https://drnareshchauhan.netlify.app/

window.onload = function () {
  show(0);
};
//question
let questions = [
  {
    id: 1,
    question:
      "Which one of the following does not represent the submerged portion of the iceberg?",
    answer: "Diagnosed cases under treatment",
    options: [
      "Diagnosed cases under treatment",
      "Undiagnosed cases",
      "Pre-symptomatic cases",
      "Carriers sub clinical cases",
    ],
  },
  {
    id: 2,
    question:
      "Which of the following is NOT true regarding pathogenesis of a disease?",
    answer: "Screening is of no use in changing course of disease",
    options: [
      "Screening is of no use in changing course of disease",
      "Tertiary prevention is possible",
      "Entry of organism occurs",
      "Includes subclinical cases",
    ],
  },
  {
    id: 3,
    question: "In Advanced Epidemiological triad, agent is replaced by:",
    answer: "Causative factors",
    options: [
      "Determinant risk factors",
      "Causative bacterium/virus",
      "Causative factors",
      "Determinant factors",
    ],
  },
  {
    id: 4,
    question: "Triangle of Epidemiology stands for:",
    answer: "Interaction & interdependence of agent, host, environment & time",
    options: [
      "Interaction of agent, host & environment",
      "Interaction of agent, host, environment & time",
      "Interaction & interdependence of agent, host, environment & time",
      "None of the above",
    ],
  },
  {
    id: 5,
    question: "Epidemiological triad are all included except:",
    answer: "Investigator",
    options: ["Host", "Environmental factors", "Agent", "Investigator"],
  },
];
function submitForm(e) {
  e.preventDefault();
  let name = document.forms["welcome_form"]["name"].value;
  //save user name
  sessionStorage.setItem("name", name);
  location.href = "quiz.html";
}
let question_count = 0;
let points = 0;
function next() {
  let userAnswer = document.querySelector("li.options.active").innerHTML;
  //check answer and give points
  if (userAnswer === questions[question_count].answer) {
    points += 1;
    sessionStorage.setItem('points', points);
  }
  if (question_count === questions.length - 1) {
    sessionStorage.setItem('time',`${minutes} minutes and ${seconds} seconds`)
    clearInterval(myTime);
    return (location.href = "end.html");
  }

  question_count++;
  show(question_count);
}
function show(count) {
  let question = document.getElementById("questions");
  // question.innerHTML="<h2>" + questions[count].question + "</h2>";
  question.innerHTML = `<h2>Q ${question_count + 1} ${
    questions[count].question
  }</h2>
    <ul class="option_group">
    <li class="options">${questions[count].options[0]}</li>
    <li class="options">${questions[count].options[1]}</li>
    <li class="options">${questions[count].options[2]}</li>
    <li class="options">${questions[count].options[3]}</li>
    </ul>`;
  toggleActive();
}
let toggleActive = () => {
  let options = document.querySelectorAll("li.options");
  for (let i = 0; i < options.length; i++) {
    options[i].onclick = function () {
      for (let j = 0; j < options.length; j++) {
        if (options[j].classList.contains("active")) {
          options[j].classList.remove("active");
        }
      }
      options[i].classList.add("active");
    };
  }
};

let dt = new Date(new Date().setTime(0))
let time = dt.getTime();
let seconds= Math.floor((time % (100 * 60))/ 1000);
let minutes = Math.floor((time % (1000 * 60 * 60))/ (1000 *60));
let timex = 0
let myTime = setInterval (function() {
    if (seconds <59) {
        seconds++;
    } else{
        minutes++;
        seconds = 0;
    }
    let formattedSec = seconds <10 ? `0${seconds}` : `${seconds}`;
    let formattedMin = minutes <10 ? `0${minutes}` : `${minutes}`;
    document.querySelector('.time').innerHTML= `${formattedMin} : ${formattedSec}`
},1000)
let name = sessionStorage.getItem("name");
let user_points = sessionStorage.getItem("points");
let user_time = sessionStorage.getItem('time')
document.querySelector(".name").innerHTML = name;
document.querySelector(".points").innerHTML=user_points;
document.querySelector('.time').innerHTML=user_time;

Thanks to @selectall for the assist!


Your 4th question will never get marked as correct. In your next() function, you are expecting userAnswer to be the following.

Interaction & interdependence of agent, host, environment & time

In reality, it is the following since a special character (in this case, &) is included and will therefore be encoded as an HTML entity (in this case, &amp;).

Interaction &amp; interdependence of agent, host, environment & time

When userAnswer is compared to the correct answer for the question, you are essentially comparing the following, which evaluates to false.

Interaction &amp; interdependence of agent, host, environment & time === Interaction & interdependence of agent, host, environment & time

thank you for your help,
when I replaced it with another question, it is working correctly ,
so how to correct it or i will not be able to take such question
or shall i write ‘and’ instead of ‘&’ and check
thanks a lot!

There are definitely ways to get around this, you can still use strings with special characters.


One simple way to do this (if you know you are only using the & special character) is to use the .replace() method.

However, for more than a few HTML entities, this wouldn’t be a good solution. You can see some of the resources below for possible solutions (note: some of them come with certain security risks, like vulnerability to cross-site scripting attacks).


This is another way to go about this; it’ll work.