How to save radio button choices on back and next click

- 1 answer

Ad

So I have this quiz I've been building at https://jsfiddle.net/juligan01/ko5jqhov/. I was able to figure out how to keep the radio button choices when you click the back button, but I can't figure out how to keep them when you click the next button. There has to be an easier way than what I'm doing. Can someone help? Here is the JavaScript:

var correct = 0; //count of correct answers 
var incorrect = 0; //count of incorrect answers
var questionCount = 0; //count of questions
var answers = [];
var choice;

var allQuestions = [{
  question: "What is Elvis Presley's middle name?",
  choices: ["David", "Aaron", "Eric", "Jack"],
  correctAnswer: 1
}, {
  question: "Who is the singer of the Counting Crows?",
  choices: ["Adam Duritz", "John Adams", "Eric Johnson", "Jack Black"],
  correctAnswer: 0
}, {
  question: "Who is the Queen of Soul?",
  choices: ["Mariah Carey", "Whitney Houston", "Aretha Franklin", "Beyonce"],
  correctAnswer: 2
}, {
  question: "Which famous group was once known as The Quarrymen?",
  choices: ["The Beatles", "The Birds", "The Who", "Led Zeppelin"],
  correctAnswer: 0
}];

var totalQuestions = allQuestions.length; //total number of questions

function loadQuestion(questionCount, choice) { //load the next question
  if (questionCount == totalQuestions) { //if you've answered all questions
    $("#next").hide();
    $("#back").hide();
    $("#score").hide().append(correct + "/" + totalQuestions + " correct!").fadeIn("slow");
    $("#restart").show();
    $("#restart").click(function() {
      location.reload(); //reload page when #restart is clicked
    });
  } else {
    $("#next").show();
    $("#restart").hide();
    $("#quiz").hide().fadeIn("slow");
    $("#quiz").append(allQuestions[questionCount].question + "<br><br>");
    for (var i = 0; i < allQuestions[questionCount].choices.length; i++) {
      if (i == choice) {
        $("#quiz").append("<input type='radio' name='questionChoices' value='" + i + "'checked>" + allQuestions[questionCount].choices[i] + "<br>");
      } else {
        $("#quiz").append("<input type='radio' name='questionChoices' value='" + i + "'>" + allQuestions[questionCount].choices[i] + "<br>");
      }

    }

  }
}

$("#next").click(function() { //on click of next button
  if (!$("input").is(":checked")) { //if nothing is checked
    alert("Please make a selection.");
  } else {
    if ($("input:radio[name=questionChoices]:checked").val() == allQuestions[questionCount].correctAnswer) { //if radio button is correct
      correct++; //increase correct number
      $("#symbols").hide().append("<span style='color: green'>√</span>").fadeIn("slow");
    } else {
      incorrect++; //increase incorrect number
      $("#symbols").hide().append("<span style='color: red'>X</span>").fadeIn("slow");
    }
    answers.push($("input:radio[name=questionChoices]:checked").val());
    questionCount++; //increase questionCount
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount); //run loadQuestion again
  }
});

$("#back").click(function() { //on click of back button
  if (questionCount > 0) {
    $("#symbols").children().last().remove(); //remove last span item
    questionCount--; //decrease questionCount
    choice = answers[answers.length - 1];
    answers.pop();
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});

loadQuestion(questionCount); //initialize the function
Ad

Answer

Ad

Here's a working solution, although I noticed a bug that made the final result display the answers out of 5 (e.g. 3/5) but I couldn't reproduce the bug after several tries, be aware though.

Using .pop() on back button removed any information you collected on the next button, so I got rid of that so you keep the information. Changed the way information in the array was created so it's based on the question number not the array length. Made the choice be loaded on the forward button or you would never see a choice, it's undefined if there's no choice to display.

https://jsfiddle.net/ko5jqhov/62/embedded/result/

 $("#next").click(function() { //on click of next button
  if (!$("input").is(":checked")) { //if nothing is checked
    alert("Please make a selection.");
  } else {
    if ($("input:radio[name=questionChoices]:checked").val() == allQuestions[questionCount].correctAnswer) { //if radio button is correct
      correct++; //increase correct number
      $("#symbols").hide().append("<span style='color: green'>√</span>").fadeIn("slow");
    } else {
      incorrect++; //increase incorrect number
      $("#symbols").hide().append("<span style='color: red'>X</span>").fadeIn("slow");
    }
    alert(answers[questionCount+1]);
    answers[questionCount] = ($("input:radio[name=questionChoices]:checked").val());
    choice = answers[questionCount+1];
    questionCount++; //increase questionCount
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});

$("#back").click(function() { //on click of back button
  if (questionCount > 0) {
    $("#symbols").children().last().remove(); //remove last span item
    questionCount--; //decrease questionCount
    choice = answers[questionCount];
    //answers.pop();
    $("#quiz").empty(); //empty #quiz div
    loadQuestion(questionCount, choice); //run loadQuestion again
  }
});
Ad
source: stackoverflow.com
Ad