Creating a Quiz in Django and Javascript

Question

I’m doing a quiz in Django and using Javascript as well. However, I want each question to create a dictionary containing the question, options and the correct option. I was doing it that way:

const myQuestions = [
    {
      question: "{{ quiz.0.1 }}",
      answers: {
        "a": "{{ quiz.0.2 }}",
        "b": "{{ quiz.0.3 }}",
        "c": "{{ quiz.0.4 }}",
        "d": "{{ quiz.0.5 }}"
      },
      correctAnswer: "{{ quiz.0.6 }}"
    },
    {
      question: "{{ quiz.1.1 }}",
      answers: {
        "a": "{{ quiz.1.2 }}",
        "b": "{{ quiz.1.3 }}",
        "c": "{{ quiz.1.4 }}",
        "d": "{{ quiz.1.5 }}"
      },
      correctAnswer: "{{ quiz.1.6 }}"
    }

Only that way it would be manual, and wanted, using a for to make it more automatic. But, I’m having trouble trying to do:

const myQuestions = [      
    {% for item in quiz %}
      {
        question: "{{ item.question }}",
        answers: {
          "a": "{{ item.option1 }}",
          "b": "{{ item.option2 }}",
          "c": "{{ item.option3 }}",
          "d": "{{ item.option4 }}"
        },
        correctAnswer: "{{ item.answer }}"
      }      
    {% endfor %}

  ];

This is the part that takes the questions, options and answer:

myQuestions.forEach(
      (currentQuestion, questionNumber) => {

        // variable to store the list of possible answers
        const answers = [];

        // and for each available answer...
        for(letter in currentQuestion.answers){

          // ...add an HTML radio button
          answers.push(
            `<label class="text-sans-serif text-dark radio">
              <input type="radio" name="question${questionNumber}" value="${letter}" required>
              <span>${currentQuestion.answers[letter]}</span> 
            </label>`
          );
        }

        // add this question and its answers to the output
        output.push(
          `<div class="slide">
            <div class="question mt-0 text-center"> ${currentQuestion.question} </div>
            <div class="answers"> ${answers.join("")} </div>
          </div>`
        );
      }
    );
    ```

Simplesmente ele não aparece nada.