Submit Button That Shows The Score

Below it's my code with a quiz of 4 questions and with a 'Submit' button in the last question and I tried to add some code that on Submit it will show an alert with the results of

Solution 1:

As mentioned above, your code has some errors but I have written snippets that will achieve your aim with shorter syntax.

//Javascript codelet questionss = [{
    question: "I am a ?",
    options: ["Male", "Female", "Other"],
    correctAnswers: 'Male',
  },
  {
    question: "Football has letters ?",
    options: [8, 5, 6],
    correctAnswers: 8,
  },
  {
    question: "VW stands for ?",
    options: ["BMW", "Volkswagen", "Audi"],
    correctAnswers: 'Volkswagen',
  },
  {
    question: "What year is it ?",
    options: [2017, 2015, 2019],
    correctAnswers: 2019,
  }
];

let questionText = document.getElementById('cd-questions');
let optiontext = document.querySelectorAll('.optiontext');
let options = document.querySelectorAll('.options');
let nextBtn = document.getElementById('next-btn');
let currentQuestion = 0;
var score = 0;
var checkedStatus = false;


setQuestion(currentQuestion); // set default question

nextBtn.addEventListener('click', e => {
  e.preventDefault();
  if (valForm()) setQuestion(currentQuestion); //validates and next question
});

functionsetQuestion(currentQuestion) {
  questionText.innerText = questionss[currentQuestion].question; //set current question to the DOMfor (let i = 0; i < 3; i++) {
    options[i].value = questionss[currentQuestion].options[i]; //set options  value for current question

    optiontext[i].innerText = questionss[currentQuestion].options[i]; //set options for current question

  }
}

functionvalForm() {
  for (let i = 0; i < 3; i++) {
    if (options[i].checked) {
      let userans = options[i].value;
      if (questionss[currentQuestion].correctAnswers == userans) {
        score++;
      }

      options[i].checked = false;
      if (currentQuestion < questionss.length - 1) {

        currentQuestion++;
        if (currentQuestion == questionss.length - 1) {
          nextBtn.innerText = 'Submit';
        }
      } else {
        alert('Your total score is ' + score);
        currentQuestion = 0;
        nextBtn.innerText = 'Start';
      }
      returntrue;
    }
  }
  if (checkedStatus == false) {
    alert('please choose an answer');
    setQuestion(currentQuestion);
  }

  returnfalse;
}

<form><divid="cd-questions"></div><inputclass="options"name="answer"type="radio" /><spanclass="optiontext"></span><inputclass="options"name="answer"type="radio" /><spanclass="optiontext"></span><inputclass="options"name="answer"type="radio" /><spanclass="optiontext"></span><div><buttonid="next-btn">Next</button></div></form>

Solution 2:

I'm happy it worked. I want to believe your other question is from the second loop.

for (let i = 0; i < 3; i++) {
if (options[i].checked) { //iterates through the radio buttons for the checked optionlet userans = options[i].value; // get the value of the checked if (questionss[currentQuestion].correctAnswers == userans) {
    score++; //increment score by 1 if the chosen answer is the correct answer
  }
  options[i].checked = false; //reset button to avoid next question being checked by default.
  if (currentQuestion < questionss.length - 1) {

    currentQuestion++; // increment current question indexif (currentQuestion == questionss.length - 1) {
      nextBtn.innerText = 'Submit'; // Changed submit button text if it's the last question.
    }
  } else {
    alert('Your total score is ' + score);
    currentQuestion = 0;
    nextBtn.innerText = 'Start';
  }
  returntrue; // return true which was  tested when the function was involked before nexting the question.
}
}

I hope that helps.