How to add open questions with textbox form Javascript

Question

I am looking to change the following code that I have found and to add questions with textbook or box that the user can fill in the answer in stead of only multiple choice. How ever, every time I am trying to add if or if else the code goes corrupt. I have copied the code and removed all but 3 questions. how can I modify this?

var quizzes = [
  {
    name: "test",
    questions: [
      {
        text: "Test1?",
        choices: [
          { text: "1", correct: false },
          { text: "2", correct: true },
          { text: "3", correct: false },
        ],
      },
      {
        text: "test2",
        choices: [
          { text: "4", correct: false },
          { text: "5", correct: false },
          { text: "6", correct: true },
        ],
      },
      {
        text: "Test3",
        choices: [
          { text: "7", correct: true },
          { text: "8", correct: false },
          { text: "9", correct: false },
        ],
      },
      {
    ]
  

// When the document is ready
window.addEventListener('DOMContentLoaded', function() {
  var $container = document.getElementById('container');
  // Initialize each quiz into the container
  quizzes.forEach(function(quiz) { initQuiz(quiz, $container); });
});

function initQuiz(quiz, $container) {
  // DOM elements
  var $dom = initDOM(quiz, $container),
  // Current question index (starts at 0)
      num = 0,
      score = 0;
  
  nextScreen();
  
  function nextScreen() {
    if (num < quiz.questions.length) {
      displayQuestion();
    } else {
      displayEndResult();
    }
  }
  
  function displayQuestion() {
    clearDisplayArea();
    var question = quiz.questions[num];
    
    // Display the image if there is one
    if (question.image) {
      $dom.display.innerHTML = '<img src="' + question.image + '" class="question-img"/>';
    }
    // Display the question
    $dom.display.innerHTML +=
        '<p>Q' + (num+1) + ': ' + question.text + '</p>'
      + question.choices.map(function(choice, i) {
         return '<label>'
              +   '<input type="radio" name="' + quiz.name + '" value="' + i + '"/>'
              +   choice.text
              + '</label>';
       return  '<form>'
              +   '<input type = "text" id="textbook" name="'  + quiz.name + '" value="' + i + '"/>'
              +   textbox.text  
              + '</form>' ;
       }).join('')
      + '<br>';
    
    // Create Submit button
    $submit = document.createElement('button');
    $submit.addEventListener('click', onAnswerSubmit);
    $submit.innerHTML = 'Submit';
    // Add the submit button
    $dom.display.appendChild($submit);
  }
  
  function onAnswerSubmit() {
    // Get the checked radio button
    var selectedChoice = $dom.display.querySelector('input:checked');
    if (!selectedChoice) {
      alert("You need to select an answer");
    } else {
      // If it's correct
      if (quiz.questions[num].choices[selectedChoice.value].correct) {
        score++; // Add 1 point to the score
      }
      num++;
      nextScreen();
    }
  }
  
  function displayEndResult() {
    clearDisplayArea();
    $dom.display.innerHTML = '<p>End of Quiz</p>'
                    + '<p>Congratulations! Your score is: ' + score + '</p>'
                    + '<p>If you scored lower than 2, please keep practicing</p>';
  }
  
  function clearDisplayArea() {
    $dom.display.innerHTML = '';
  }

  // The "DOM" (Document Object Model) represents HTML elements
  function initDOM(quiz, $container) {
    // Create frame

Answer 1

1. So this is one solution, first make sure you have a input box in your html file.
2. Now with the input box you could give it a class of whatever you want as below

<input class="personAnswer"></input>

3. Now you could go back to your JS code and add the following

document.getElementById("personAnswer").(WHATEVER YOU WANT TO CHECK FOR)

And that's it!