DEV Community

javascript functions

My js file is given below:
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 += "

" + questn + "

";
board.innerHTML += "" + A + "
";
board.innerHTML += "" + B + "
";
board.innerHTML += "" + C + "
";
board.innerHTML += "" + D + "
";
board.innerHTML += "Submit Answer";
}

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();
    }
}
Enter fullscreen mode Exit fullscreen mode

}

function DisplayResult() {
board.innerHTML = "

You got " + cor + " questions out of " + questions.length + "

";
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>";
Enter fullscreen mode Exit fullscreen mode

}
}

The DisplayResult function works wrongly. It gives output as :
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 to have the actual values of user's choice and correct answer, instead of displaying Option values.
Please help.

Top comments (0)