How are you doing?
I am working on a Quiz and am trying to listen the events of the user and save it to show them later based on the JSON file.
Look, each question is:
{
"question": "How much is two plus two?",
"option1": "Four",
"option2": "Five",
"option3": "Two",
"feedback": "Good"
}
The "feedback", I would like to be saved and showed to the user only on the end of the Quiz.
Basically, it is to save their correct answers on the back, then show the "feedback" JSON variable at the end.
//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
Here the 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
Would you help me?
I'm sorry the bad indentation, I am working to write it better!
Thanks!
EDIT
Totally forgot the displayFinalSlide(). Sorry
Well the easiest way to do that is to hide #words with jQuery $("#words").hide() , and just show it after all question is answered with $("#words").show()
You didn't define function displayFinalSlide, so now you can define it and on a final slide show user feedback, like we said:
function displayFinalSlide(){
$("#words").show()
$(stage).append('<div class="questionText">You have finished the quiz!<br><br>Total questions: '+numberOfQuestions+'<br>Correct answers: '+score+'</div>');
}
Working code on: https://jsfiddle.net/58rmaaru/1/