Javascript - Quiz

Question

I’m studying Javascript, beginner level. So, I’m trying to assemble a quiz according to a tutorial I found but find the following error while running:

["SyntaxError: expected expression, got '<'",
  "filename": "https://stacksnippets.net/js",
  "lineno": 45,
  "colno": 8]

I understood that the problem is the one <label>, but what would be the right way to implement, then?

var myQuestions = [
    {
        question:"Quem é o primeiro ministro do Reino Unido?", 
        answers: {
            a:"David Cameron", 
            b:"Gordon Brown", 
            c:"Winston Churchill", 
            d:"Tony Blair"
        }, 
            correctAnswer:"d"
    },
    
    {
        question:"Quem descobriu o Brasil?", 
        answers: {
            a:"Pedro Álvares Cabral", 
            b:"Cristovao Colombo", 
            c:"Floriano Peixoto", 
            d:"Jorge Amado", 
        },
            correctAnswer:"a"
    }
];

function buildQuiz(){
    var output = [];
    
    myQuestions.forEach((currentQuestion, questionNumber) => {
        const answers = [];
        
    for (letter in currentQuestion.answers) {
        answers.push(
        <HTMLLabelElement>
            <input type="radio" name="questions${questionNumber}" value="${letter}">
            ${letter} :
            ${currentQuestion.answers[letter]}
            </HTMLLabelElement>
            );
    }
        output.push(
        <div class="question"> ${currentQuestion.question} </div>
        <div class="answers"> ${answers.join('')} </div>
    );
});

quizContainer.innerHTML = output.join('');

};
            
function showResults(){
    const answerContainers = quizContainer.querySelectorAll('.answers');
    
    let numCorrect = 0
    
    myQuestions.forEach( (currentQuestion, questionNumber) => {

    // find selected answer
    const answerContainer = answerContainers[questionNumber];
    const selector = 'input[name=question'+questionNumber+']:checked';
    const userAnswer = (answerContainer.querySelector(selector) || {}).value;

    // if answer is correct
    if(userAnswer===currentQuestion.correctAnswer){
      // add to the number of correct answers
      numCorrect++;

      // color the answers green
      answerContainers[questionNumber].style.color = 'lightgreen';
    }
    // if answer is wrong or blank
    else{
      // color the answers red
      answerContainers[questionNumber].style.color = 'red';
    }
  });

  // show number of correct answers out of total
  resultsContainer.innerHTML = numCorrect + ' out of ' + myQuestions.length;
}



// display quiz right away
buildQuiz();

// on submit, show results
submitButton.addEventListener('click', showResults);

Answer 1

You forgot to use the grave accent in some snippets of code, for example:

answers.push(
    <HTMLLabelElement>
        <input type="radio" name="questions${questionNumber}" value="${letter}">
        ${letter} :
        ${currentQuestion.answers[letter]}
        </HTMLLabelElement>
        );

and

output.push(
    <div class="question"> ${currentQuestion.question} </div>
    <div class="answers"> ${answers.join('')} </div>
);

When we use the Template strings, we need to add the value between the signals ` (severe accent). This way we can work with mathematical operations, use of variables etc in the value we want to pass.

answers.push(`
    <HTMLLabelElement>
        <input type="radio" name="questions${questionNumber}" value="${letter}">
        ${letter} :
        ${currentQuestion.answers[letter]}
        </HTMLLabelElement>
`);

/* E também... */

output.push(`
    <div class="question"> ${currentQuestion.question} </div>
    <div class="answers"> ${answers.join('')} </div>
`);