JS functions not working properly

See more:

Javascript

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.