在线测试中记录答案的最佳方法

Question

我做了一个在线测试，它接受存储在php数据库中的问题，并通过jQuery的post方法显示它们。用户可以转到下一个问题，也可以返回前一个问题。我想存储用户的答案，以便在最后，我可以计算正确和错误的答案，并显示问题，用户错了。我想以某种方式将用户的答案存储在jQuery中，而不是在php数据库中。做这件事最好的方法是什么？提前谢谢。

HTML和jQuery

<script>
$(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){
$('#prev').css('display','block');
}

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

        $('#questionArea').html(result);
    });

});

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

        $('#questionArea').html(result);
    }); 
});
});
</script>

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

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

getquestions.php文件：

<?php

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

$sql="SELECT * FROM questions WHERE test='1' AND question_number='$question_number' LIMIT 1";
$result=mysqli_query($con,$sql);

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 1

为此，我将使用localStorage。下面是一个人为的例子，说明这可能是什么样子：

这是一个工作jsFiddle演示

在测试结束时，您将得到以下结果：

{"1560":"d","1909":"c","2186":"a","3565":"b","3817":"e"}

其中键是数据库中每个问题的行ids，它们的值是用户选择的答案。

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"/>

Javascript

localStorage.setItem('quizprogress','');
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>';
       questionsAsked.push(rowId);    
       $('#container').html(fakeQuestion);
    }
    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
        $('#container').html('');
        var quizprogress = JSON.parse(localStorage.getItem('quizprogress'));
        $.each(questionsAsked, function(i,qId){
            $('#container').append('Question '+qId+': '+quizprogress[qId]+'<br>');
        });
        // clean up localStorage
        localStorage.removeItem('quizprogress');
    }

}
// load the first question for the demo
loadQuestion();

// listen for change of answer (or submit button etc....)
$('#answerQuestion').click(function(){
    // 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
    loadQuestion();
});

// random numbers, just for the demo, you dont need this
function randomIntFromInterval(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

Answer 2

有两种备选方案：

1. 在提交表单期间将所有先前的答案张贴到下一页，并在最后一页检索它们。
2. 将数据存储在cookie中，并在最后一页检索cookie数据(禁用cookie时不起作用)。

Answer 3

1. 您可以使用jquery或javascript在cookie中使用和存储值。读这里。
2. 您可以使用html本身中的隐藏字段来存储用户值，然后再读取它们。
3. 您还可以使用jquery存储数据。读这里。