简体   繁体   English

如何区分 Javascript 测验答案?

[英]How to separate Javascript quiz answers?

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.我是编码新手(比如 4 天前,我正在谷歌搜索如何启动 HTML 文件),我需要帮助弄清楚如何将我的测验答案分成不同的行。 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.我试图找到一种使用换行符的方法,但由于我是新手,我一直在努力寻找一种不会影响代码的 rest 的方法。 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.您可以简单地将列表项用于单独的问题行,例如查看文档并相应地应用 css 样式。 https://www.w3schools.com/html/html_lists.asp 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 ;只需将每个答案都放在div中; in your code use '<div><label>' and '</label></div>' .在您的代码中使用'<div><label>''</label></div>'

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM