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

两种选择：

在提交表单中发布所有以前的下一页答案，并在最后一页检索它们。
将数据存储在cookie中并在最后一页检索cookie数据（禁用cookie时不起作用。）

Answer 2

您可以使用jquery或javascript在Cookie中使用和存储值。阅读here。
您可以在html中使用隐藏字段来存储用户值，然后稍后阅读。
您还可以使用jquery存储数据。阅读here。

Answer 3

尝试使用.data();存储，在results array #questionArea处检索.data()。

在#next之前，#prev click事件已定义

$(document).ready(function() {
    $("#questionArea").data("results", []);
    var number = 0;
    // `#next` , `#prev` `click` events
})

在$.post()

$.post("getquestions.php", {number: number}, function(result){    
    $("#questionArea").html(result).data("results").push(results);
});

Answer 4

我会使用localStorage。这是一个人为的例子：

这是working jsFiddle demo

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

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

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

<强> HTML

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);
}

在线测验期间记录答案的最佳方式

4 个答案:

这是working jsFiddle demo