javascript functions
Published: 2024-01-31 06:42:08

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 += "<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 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.