Prevent users from skipping my Quiz questions

Question

Right now I have a few issues I need to tweak out with my Quiz Application.

When the user answers the first question, he can skip the proceeding questions.

var usersGuess = -1; //this is the starting value of the userGuess variable

This is because the userGuess variable is updated by the id of the radio button clicked when the user makes a guess, and the default starting variable is what prevents the user from skipping the first question only. I have a few ideas on how to fix it, but not sure how to implement it. One would be to detect IF none of the radio inputs are checked then don't load the next question, else load it.
When a user goes back to the question, the previous checked radio button disappears. I haven't thought of how to fix this yet. Right now I have saved the previous answers into an empty array, but I don't believe it's working properly.

Here is the code that deals with userGuess and how it interacts with the Event Listener for my next button.

nextButton.addEventListener('click', function() { 
  //prevent user from skipping questions
  if (usersGuess === -1) {
    console.log(usersGuess);
    alert('You must choose an answer!');


  } else {
    //if users guess is the id of the correct answer, add one
    if (usersGuess == questions[index].correctAnswer) {
      userScore += 1;
      console.log('Users Score: ' + userScore);
    }
    //store previous user answers into an array
    usersAnswers.push(usersGuess);
    if (index + 1 < questions.length) {
      index++;
      addQuizQuestion(questions[index].question);
      addQuizAnswers(questions[index].choices);
    } else {
      alert('You scored a ' + getPercent() + '%!');

    }
  }
}, false);

Here is a link to the codepen as well for testing: http://codepen.io/laere/pen/KVwBME

Appreciate the help!

*insert generic speech about how you can never do security on the client side, how the user always has better hooks than you, and how you must validate everything (including guesses/results) on the server*. Maybe http://stackoverflow.com/questions/162159/javascript-client-side-vs-server-side-validation ? Can't find a good dupe. — Benjamin Gruenbaum, Dec 19 '15 at 13:43
You know what, I apologize, my last comment is snarky. Sorry, but you can't do it - someone can always write a userscript an extension that will override whatever protection you have in place. You _must_ validate everything a second time on the server - where the user cannot execute arbitrary code. — Benjamin Gruenbaum, Dec 19 '15 at 13:43

score 2 · Answer 1 · answered Dec 19 '15 at 13:43

Don't complicate things too much. All you need here is the index of the current question and, say, an array of boolean (or integers, for points) for each question.

All you need to do is to check whether the current question has been answered, and if so, allow the user to move on.

Of course, since this is Javascript, all this serves for a better user experience and nothing more - if someone WANTS to move on to the next question, they WILL (unless you implement some server-side checking/question loading).

score 0 · Answer 2 · answered Dec 19 '15 at 13:47

0

reset usersGuess to -1 before loading next question.

if (index + 1 < questions.length) {
  index++;
  usersGuess = -1; // reset usersGuess 
  addQuizQuestion(questions[index].question);
  addQuizAnswers(questions[index].choices);
}

answered Dec 19 '15 at 13:47

Venugopal

1,888
1
17
30

Prevent users from skipping my Quiz questions

2 Answers2