In the process of constructing a mini quiz, I am utilizing a variable quizScore to store the score. Each question in the quiz is displayed using AJAX. An individual AJAX call captures the ID of the button pressed (for example, on question 2, the button ID is 2a which leads to the subsequent AJAX refresh of question2a.php).
During the final AJAX call, when questionendQuiz.php is summoned, I aim to display the value of the variable quizScore. It is crucial to bind this output to an event ensuring that the loading of this data through AJAX is successful.
/* Outputting the score */
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("quizWrapper").innerHTML=xmlhttp.responseText;
if (buttonID == "question_endQuiz") {
document.getElementById("scoreOut").innerHTML = quizScore;
}
}
Hence, upon the triumphant AJAX content load, the quizScore should be displayed in div id="scoreOut".
After verifying the functionality of the scoring system through console logs, I can confirm that it correctly tallies the score (you can view it displaying the score here:
I am perplexed as to why the success condition is failing to showcase the score?
The following script provides only relevant information for this inquiry, omitting extraneous details like correct answer validation and quiz initiation:
/* Quiz Scoring Mechanism */
var quizScore = 0; /* Advances to the subsequent question based on ButtonID */
function nextQuestion(buttonID) {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("quizWrapper").innerHTML = xmlhttp.responseText;
}
}
var splitID = buttonID.split('_');
var questionID = splitID.pop();
xmlhttp.open("GET", "question" + questionID + ".php", true);
xmlhttp.send(); /* Outputting the score */
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("quizWrapper").innerHTML = xmlhttp.responseText;
if (buttonID == "question_endQuiz") {
document.getElementById("scoreOut").innerHTML = quizScore;
}
}
}
The button signaling the conclusion of the quiz is:
<button id="question_endQuiz" onClick="nextQuestion(this.id)">See your score</button>