user176105 user176105 - 2 years ago 84
Ajax Question

Best Way to Record Answers During Online Quiz

I made an online quiz that takes questions stored in a php database and displays them via jQuery's post method. The user can go to the next question or back to the previous one. I would like to store the user's answers so that at the end I can calculate the right and wrong answers and display the questions the user got wrong. I would like to store the user's answers in jQuery somehow and not in a php database. What would be the best way to go about this? Thanks in advance.

HTML and jQuery

$(document).ready(function() {
var number = 0; //this is the current # of the question the user is working on
$('#next').click(function() {
number = number +1;

if (number > 1){

$.post('getquestions.php', {number: number}, function(result){



$('#prev').click(function() {
number = number -1;
if (number < 2){
$.post('getquestions.php', {number: number}, function(result){


<div id='questionArea'></div>

<input type='button' id='prev' value='previous' style='display: none;'/>
<input type='button' id='next' value='next' />

getquestions.php file:


require '../connect.php';
$question_number = $_POST['number'];

$sql="SELECT * FROM questions WHERE test='1' AND question_number='$question_number' LIMIT 1";

while ($row = mysqli_fetch_array($result)) {
$question = $row['question'];
$chA = $row['choiceA'];
$chB = $row['choiceB'];
$chC = $row['choiceC'];
$chD = $row['choiceD'];
$chE = $row['choiceE'];
$qid = $row['qid'];
$correct = $row['correct'];

echo "<div id='question'>" . $question . "</div>";
echo "<input type='radio' name='a' value=" . $chA ."> " . $chA . "<br>";
echo "<input type='radio' name='b' value=" . $chB ."> " . $chB . "<br>";
echo "<input type='radio' name='c' value=" . $chC ."> " . $chC . "<br>";
echo "<input type='radio' name='d' value=" . $chD ."> " . $chD . "<br>";
echo "<input type='radio' name='e' value=" . $chE ."> " . $chE . "<br>";

Answer Source

I would use localStorage for this. Here is a contrived example of what that might look like:

Here is a working jsFiddle demo

At the end of the quiz, you'll end up with the following:


Where the keys are the row ids for each question from your database and their values are the user's selected answer.


Answer 5 questions and your results will be shown to you:<br><br><br>
<div id="container"></div><br>
<input type="button" id="answerQuestion" value="Submit Answer"/>


var questionsAsked=[]; 

// I know you're loading your questions via php, this is just an example 
function loadQuestion(){
    if(questionsAsked.length< 5){ // this just limits the demo to six questions
        var rowId = randomIntFromInterval(1025,5021);// just getting a random number here, you should use the row id from your database here
        var fakeQuestion = '<div id="question" data-qestion-id="'+rowId+'">Question '+rowId+'</div>'+  // adding in the row id as a data attribute here give us something to track it by
                           '<input type="radio" name="answer" value="a" class="answer">a<br>'+
                           '<input type="radio" name="answer" value="b" class="answer">b<br>'+
                           '<input type="radio" name="answer" value="c" class="answer">c<br>'+
                           '<input type="radio" name="answer" value="d" class="answer">d<br>'+
                           '<input type="radio" name="answer" value="e" class="answer">e<br>';
    else{ // had our six questions, lets look at our answers now
        // when the quiz is done, localstorage `quizprogress` will contain all of our question ids with thier respective answer choice
        var quizprogress = JSON.parse(localStorage.getItem('quizprogress'));
        $.each(questionsAsked, function(i,qId){
            $('#container').append('Question '+qId+': '+quizprogress[qId]+'<br>');
        // clean up localStorage

// load the first question for the demo

// listen for change of answer (or submit button etc....)
    // you'll want some check here to be sure an answer was selected
    // get quizprogress from localstorage
    var quizprogress = localStorage.getItem('quizprogress');
     // if we  have some answers stored already, load the current quizprogress object, or load a new object if we just started
    quizprogress = quizprogress=='' ? {} : JSON.parse(quizprogress);
    // get the database row id from the current question
    var qId = $('#question').data('qestion-id');
    quizprogress[qId] = $('input[name=answer]:checked').val();
    // Put the object back into storage
    localStorage.setItem('quizprogress', JSON.stringify(quizprogress));
    // load the next question for the demo

// random numbers, just for the demo, you dont need this
function randomIntFromInterval(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download