My JS file:
var pos = 0;
var board = document.getElementById('board');
var status = document.getElementById('status');
var questn, choice, A, B, C, D, cor = 0;
var questions = [
["Shortcut of copy", "CTRL+A", "CTRL+S", "CTRL+C", "CTRL+Z", "C"],
["10+10", "20", "30", "40", "50", "A"],
["10+20", "20", "30", "40", "50", "B"],
["10+30", "20", "30", "40", "50", "C"]
];
var incorrectAnswers = [];
function DisplayQuestion() {
board.innerHTML = "";
status.innerHTML = "Question " + (pos + 1) + " of " + questions.length;
questn = questions[pos][0];
A = questions[pos][1];
B = questions[pos][2];
C = questions[pos][3];
D = questions[pos][4];
board.innerHTML += "<h3>" + questn + "</h3>";
board.innerHTML += "<label><input type='radio' name='choices' value='A'>" + A + "</label><br>";
board.innerHTML += "<label><input type='radio' name='choices' value='B'>" + B + "</label><br>";
board.innerHTML += "<label><input type='radio' name='choices' value='C'>" + C + "</label><br>";
board.innerHTML += "<label><input type='radio' name='choices' value='D'>" + D + "</label><br>";
board.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}
function checkAnswer() {
var choice;
var choices = document.getElementsByName("choices");
var choiceSelected = false;
for (var i = 0; i < choices.length; i++) {
if (choices[i].checked) {
choice = choices[i].value;
choiceSelected = true;
break;
}
}
if (!choiceSelected) {
alert("Please select an answer before submitting.");
return;
} else {
var correctAnswer = questions[pos][5];
if (choice === correctAnswer) {
cor++;
} else {
incorrectAnswers.push({
questionIndex: pos,
userChoice: { letter: choice, value: questions[pos][parseInt(choice, 10)] },
correctAnswer: { letter: correctAnswer, value: questions[pos][parseInt(correctAnswer, 10)] }
});
}
pos++;
if (pos >= questions.length) {
DisplayResult();
} else {
DisplayQuestion();
}
}
}
function DisplayResult() {
board.innerHTML = "<h2>You got " + cor + " questions out of " + questions.length + "</h2>";
status.innerHTML = "Quiz completed";
for (var i = 0; i < incorrectAnswers.length; i++) {
var questionIndex = incorrectAnswers[i].questionIndex;
var userChoice = incorrectAnswers[i].userChoice;
var correctAnswer = incorrectAnswers[i].correctAnswer;
board.innerHTML += "<h3>Question: " + questions[questionIndex][0] + "</h3>";
board.innerHTML += "Your Answer: " + userChoice.letter + " (" + userChoice.value + ")" + "<br>";
board.innerHTML += "Correct Answer: " + correctAnswer.letter + " (" + correctAnswer.value + ")" + "<br><br>";
}
}
The output of displayResult is as follows:
You got 2 questions out of 4
Question: Shortcut of copy
Your Answer: A (undefined)
Correct Answer: C (undefined)
Question: 10+20
Your Answer: C (undefined)
Correct Answer: B (undefined)
I want the output of actual values of Answers instead of Option values in the result.
What I have tried:
I tried by creating another function GetAnswerText:
function getAnswerText(choice) {
switch (choice) {
case "A":
return A;
case "B":
return B;
case "C":
return C;
case "D":
return D;
default:
return "";
}
}
But it didn't work.
Edit: Added from comments:
function DisplayQuestion() {
board.innerHTML = "";
status.innerHTML = "Question " + (pos + 1) + " of " + questions.length;
questn = questions[pos][0];
A = questions[pos][1];
B = questions[pos][2];
C = questions[pos][3];
D = questions[pos][4];
board.innerHTML += "<h3>" + questn + "</h3>";
board.innerHTML += "<label><input type='radio' name='choices' value='A'>" + A + "</label><br>";
board.innerHTML += "<label><input type='radio' name='choices' value='B'>" + B + "</label><br>";
board.innerHTML += "<label><input type='radio' name='choices' value='C'>" + C + "</label><br>";
board.innerHTML += "<label><input type='radio' name='choices' value='D'>" + D + "</label><br>";
board.innerHTML += "<button onclick='checkAnswer()'>Submit Answer</button>";
}
becomes:
function DisplayQuestion() {
status.innerHTML = "Question " + (pos + 1) + " of " + questions.length;
question_ = "<h3>" + questions[pos][0] + "</h3>";
question_ += "<label><input type='radio' name='choices' value='A'>" + questions[pos][1] + "</label><br>";
question_ += "<label><input type='radio' name='choices' value='B'>" + questions[pos][2] + "</label><br>";
question_ += "<label><input type='radio' name='choices' value='C'>" + questions[pos][3] + "</label><br>";
question_ += "<label><input type='radio' name='choices' value='D'>" + questions[pos][4] + "</label><br>";
question_ += "<button onclick='checkAnswer()'>Submit Answer</button>";
board.innerHtml = question_ ;
}
var_temp = a_var_[n] ;
hardcode/useless because it's only allocation adding more datas, one more memory slot used for nothing.
"question_" var is use a temporary var, to build the output html/string.
then time comes to modify the DOM by 'innerHtml' function.
question_ is declared as 'local scope' var.