如何使用 Jquery 保存测验的进度
Posted
技术标签:
【中文标题】如何使用 Jquery 保存测验的进度【英文标题】：How to save progress on Quiz using Jquery 【发布时间】：2016-10-31 17:32:06 【问题描述】：你好吗？
我正在做一个测验，并试图监听用户的事件并将其保存以便以后根据 JSON 文件显示。
看，每个问题是：
"question": "How much is two plus two?",
"option1": "Four",
"option2": "Five",
"option3": "Two",
"feedback": "Good"
“反馈”，我希望仅在测验结束时保存并显示给用户。
基本上就是把他们的正确答案保存在后面，然后在最后显示“反馈”JSON变量。
//i'm retrieving the value here, but what should I do with it?
var show = document.getElementById(this.id).innerhtml;
//and appending the values on the words
Check my fiddle
这里是 JS
$(document).ready(function()
var questionNumber = 0;
var wordNumber = 0;
var questionBank = new Array();
var wordsBank = new Array();
var stage = "#game1";
var stage2 = new Object;
var questionLock = false;
var numberOfQuestions;
var score = 0;
var data =
"quizlist": [
"question": "How much is two plus two?",
"option1": "Four",
"option2": "Five",
"option3": "Two",
"feedback": "Good"
,
"question": "Selecione a sentença correta",
"option1": "I am a person",
"option2": "I is a person",
"option3": "I are a person",
"feedback": "Bad"
,
"question": "Select the correct form in the interrogative",
"option1": "Are you a student?",
"option2": "Is you a student?",
"option3": "You are a student?",
"feedback": "Good"
,
"question": "How much is one minus one?",
"option1": "Zero",
"option2": "Two",
"option3": "Four",
"feedback": "Good"
,
"question": "He / She / It usam o verbo To Be ...",
"option1": "is",
"option2": "are",
"option3": "am",
"feedback": "Good"
,
"question": "Selecione a frase correta na afirmativa",
"option1": "We are here.",
"option2": "Are we here.",
"option3": "We are not here.",
"feedback": "Good"
,
"question": "Selecione a forma correta na negativa",
"option1": "He is not here.",
"option2": "He is not here?",
"option3": "He are not here.",
"feedback": "Bad"
,
"question": "You / We / They usam o Verbo To Be ...",
"option1": "are",
"option2": "am",
"option3": "is",
"feedback": "Good"
]
;
numberOfQuestions = data.quizlist.length;
for (i = 0; i < numberOfQuestions; i++)
questionBank[i] = [];
questionBank[i].push(data.quizlist[i].question);
questionBank[i].push(data.quizlist[i].option1);
questionBank[i].push(data.quizlist[i].option2);
questionBank[i].push(data.quizlist[i].option3);
questionBank[i].push(data.quizlist[i].feedback);
displayQuestion();
//gtjson
//Display question and word, if correct
function displayQuestion()
var feedbackMSG = questionBank[questionNumber][4];
var rnd = Math.random() * 3;
rnd = Math.ceil(rnd);
var q1;
var q2;
var q3;
var wordsShow = $('<li class= "center_txt"><p class="bluedark_txt big_txt">' + feedbackMSG + '</p></li>')
if (rnd == 1)
q1 = questionBank[questionNumber][1];
q2 = questionBank[questionNumber][2];
q3 = questionBank[questionNumber][3];
if (rnd == 2)
q2 = questionBank[questionNumber][1];
q3 = questionBank[questionNumber][2];
q1 = questionBank[questionNumber][3];
if (rnd == 3)
q3 = questionBank[questionNumber][1];
q1 = questionBank[questionNumber][2];
q2 = questionBank[questionNumber][3];
//show the options
$(stage).append('<div class="questionText">' + questionBank[questionNumber][0] + '</div><div id="1" class="option">' + q1 + '</div><div id="2" class="option">' + q2 + '</div><div id="3" class="option">' + q3 + '</div>');
$('.option').click(function()
if (questionLock == false)
questionLock = true;
//correct answer
if (this.id == rnd)
$(stage).append('<div class="feedback1">CORRECT</div>');
var show = document.getElementById(this.id).innerHTML;
score++;
//wrong answer
if (this.id != rnd)
$(stage).append('<div class="feedback2">WRONG</div>');
$("#words").append(wordsShow);
setTimeout(function()
changeQuestion()
, 1000);
)
//display question
function changeQuestion()
questionNumber++;
if (stage == "#game1")
stage2 = "#game1";
stage = "#game2";
else
stage2 = "#game2";
stage = "#game1";
if (questionNumber < numberOfQuestions)
displayQuestion();
else
displayFinalSlide();
$(stage2).animate(
"right": "+=800px"
, "slow", function()
$(stage2).css('right', '-800px');
$(stage2).empty();
);
$(stage).animate(
"right": "+=800px"
, "slow", function()
questionLock = false;
);
//change question
);
function displayFinalSlide()
$(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>');
//display final slide
//doc ready
你会帮我吗？
对不起，缩进不好，我正在努力写得更好！
谢谢！
编辑
完全忘记了 displayFinalSlide()。对不起
【问题讨论】：
请尝试将您的问题缩小到minimal reproducible example，并在问题本身中包含所有相关代码，而不是第三方网站。 【参考方案1】：最简单的方法是使用 jQuery $("#words").hide() 隐藏 #words，并在使用 $("#words").show() 回答所有问题后显示它
您没有定义函数 displayFinalSlide，所以现在您可以定义它并在最终幻灯片放映用户反馈，就像我们说的：
function displayFinalSlide()
$("#words").show()
$(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>');
工作代码： https://jsfiddle.net/58rmaaru/1/
【讨论】：
嘿@t_dom93，对不起。忘记了 displayFinalSlide() 。现已更正。 我还更新了小提琴，它会在用户完成所有问题后显示反馈！那是你的问题，对吧？ 谢谢！你摇滚！顺便说一句，您知道如何编写以便用户只看到反馈 + 1（如果反馈重复）？比如“好 [3]”、“坏 [4]”【参考方案2】：一种方法是创建一个用户答案数组，并在我们确定他们的答案是对还是错后将一个新对象推入其中。您没有在小提琴中包含 displayFinalSlide() 的逻辑，所以我删除了该调用并将数组记录到控制台以便您可以看到它。
$(document).ready(function()
var questionNumber = 0;
var wordNumber = 0;
var questionBank = new Array();
var wordsBank = new Array();
var stage = "#game1";
var stage2 = new Object;
var questionLock = false;
var numberOfQuestions;
var score = 0;
var feedbackBank = new Array();
var data =
"quizlist": [
"question": "How much is two plus two?",
"option1": "Four",
"option2": "Five",
"option3": "Two",
"feedback": "Good"
,
"question": "Selecione a sentença correta",
"option1": "I am a person",
"option2": "I is a person",
"option3": "I are a person",
"feedback": "Bad"
,
"question": "Select the correct form in the interrogative",
"option1": "Are you a student?",
"option2": "Is you a student?",
"option3": "You are a student?",
"feedback": "Good"
,
"question": "How much is one minus one?",
"option1": "Zero",
"option2": "Two",
"option3": "Four",
"feedback": "Good"
,
"question": "He / She / It usam o verbo To Be ...",
"option1": "is",
"option2": "are",
"option3": "am",
"feedback": "Good"
,
"question": "Selecione a frase correta na afirmativa",
"option1": "We are here.",
"option2": "Are we here.",
"option3": "We are not here.",
"feedback": "Good"
,
"question": "Selecione a forma correta na negativa",
"option1": "He is not here.",
"option2": "He is not here?",
"option3": "He are not here.",
"feedback": "Bad"
,
"question": "You / We / They usam o Verbo To Be ...",
"option1": "are",
"option2": "am",
"option3": "is",
"feedback": "Good"
]
;
numberOfQuestions = data.quizlist.length;
for (i = 0; i < numberOfQuestions; i++)
questionBank[i] = [];
questionBank[i].push(data.quizlist[i].question);
questionBank[i].push(data.quizlist[i].option1);
questionBank[i].push(data.quizlist[i].option2);
questionBank[i].push(data.quizlist[i].option3);
questionBank[i].push(data.quizlist[i].feedback);
displayQuestion();
//gtjson
//Display question and word, if correct
function displayQuestion()
var feedbackMSG = questionBank[questionNumber][4];
var rnd = Math.random() * 3;
rnd = Math.ceil(rnd);
var wordsShow = $('<li><p>'+feedbackMSG+'</p></li>');
var q1;
var q2;
var q3;
if (rnd == 1)
q1 = questionBank[questionNumber][1];
q2 = questionBank[questionNumber][2];
q3 = questionBank[questionNumber][3];
if (rnd == 2)
q2 = questionBank[questionNumber][1];
q3 = questionBank[questionNumber][2];
q1 = questionBank[questionNumber][3];
if (rnd == 3)
q3 = questionBank[questionNumber][1];
q1 = questionBank[questionNumber][2];
q2 = questionBank[questionNumber][3];
//show the options
$(stage).append('<div class="questionText">' + questionBank[questionNumber][0] + '</div><div id="1" class="option">' + q1 + '</div><div id="2" class="option">' + q2 + '</div><div id="3" class="option">' + q3 + '</div>');
$('.option').click(function()
if (questionLock == false)
questionLock = true;
//correct answer
if (this.id == rnd)
$(stage).append('<div class="feedback1">CORRECT</div>');
var show = document.getElementById(this.id).innerHTML;
score++;
feedbackBank.push(
question: questionNumber,
correct: true
);
//wrong answer
if (this.id != rnd)
$(stage).append('<div class="feedback2">WRONG</div>');
$("#words").append(wordsShow);
feedbackBank.push(
question: questionNumber,
correct: false
);
setTimeout(function()
changeQuestion()
, 1000);
)
//display question
function changeQuestion()
questionNumber++;
if (stage == "#game1")
stage2 = "#game1";
stage = "#game2";
else
stage2 = "#game2";
stage = "#game1";
if (questionNumber < numberOfQuestions)
displayQuestion();
else
console.log(feedbackBank);
$(stage2).animate(
"right": "+=800px"
, "slow", function()
$(stage2).css('right', '-800px');
$(stage2).empty();
);
$(stage).animate(
"right": "+=800px"
, "slow", function()
questionLock = false;
);
//change question
);
jsFiddle
【讨论】：
嘿@AlexYoung 谢谢！我忘记了 displayFinalSlide()，现在更正了。它应该在完成后向用户显示反馈列表。以上是关于如何使用 Jquery 保存测验的进度的主要内容，如果未能解决你的问题，请参考以下文章
当我在另一个视图中使用 CoreData 保存新数据时如何更新模型的另一个实例