How to separate Javascript quiz answers?

Question

I am new(like 4 days ago I was googling how to start an HTML file) to coding and I need help figuring out how to separate my quiz answers into separate lines. Can anyone help me? I tried to find a way to use line breaks but since I am new I have struggled to find a way to do it that doesn't impact the rest of the code. I only included the portion that I need help with. If anyone needs a fuller version, please let me know.

Here is my code:

 var myQuestions = [{ question: "", answers: { A: 'Emily should tell the other members what role she is now going to fulfill.', B: 'Emily cannot do anything until her eight-year term is up.', C: 'Emily needs to talk to the other members about a role swap.' }, correctAnswer: 'c' }, ]; var quizContainer = document.getElementById('quiz'); var resultsContainer = document.getElementById('results'); var submitButton = document.getElementById('submit'); generateQuiz(myQuestions, quizContainer, resultsContainer, submitButton); function generateQuiz(questions, quizContainer, resultsContainer, submitButton) { function showQuestions(questions, quizContainer) { var output = []; var answers; for (var i = 0; i < questions.length; i++) { answers = []; for (letter in questions[i].answers) { answers.push( '<label>' + '<input type="radio" name="question' + i + '" value="' + letter + '">' + letter + ': ' + questions[i].answers[letter] + '</label>' ); } output.push( '<div class="question">' + questions[i].question + '</div>' + '<div class="answers">' + answers.join('') + '</div>' ); } quizContainer.innerHTML = output.join(''); } function showResults(questions, quizContainer, resultsContainer) { var answerContainers = quizContainer.querySelectorAll('.answers'); var userAnswer = ''; var numCorrect = 0; for (var i = 0; i < questions.length; i++) { userAnswer = (answerContainers[i].querySelector('input[name=question' + i + ']:checked') || {}).value; if (userAnswer === questions[i].correctAnswer) { numCorrect++; answerContainers[i].style.color = 'darkgreen'; } else { answerContainers[i].style.color = 'darkred'; } } resultsContainer.innerHTML = numCorrect + ' out of ' + questions.length; } showQuestions(questions, quizContainer); submitButton.onclick = function() { showResults(questions, quizContainer, resultsContainer); } }

Answer 1

you can simply use list items for a separate lines of questions like this check out the documentation and apply css style accordingly. https://www.w3schools.com/html/html_lists.asp

<ul>
   <li>Ans1<li>

   <li>Ans2<li>

   <li>Ans3<li>

</ul>

Answer 2

Just put every answer in a div ; in your code use '<div><label>' and '</label></div>' .