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);
}
}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>
Just put every answer in a div; in your code use '<div><label>' and
'</label></div>'.