我正在使用 javascript 为我的网站做一个有趣的小测验。我遵循了使用 https://www.sitepoint.com/simple-javascript-quiz/ 的教程，经过一些反复试验后，它可以解决一个问题。但是，由于它是多项选择测验，因此可以单击不同的选项。选择都在一条线上。我怎样才能改变代码，使他们在不同的行？为了帮助消除任何误解，以下是选项和代码:
.答:28。乙:34。丙:33。 d : 需要更多信息
<!DOCTYPE>
<html>
<style>
#sometext {
background-color: black;
border-radius: 10px;
border-left: 2px solid black;
border-right: 2px solid black;
border-top: 2px solid black;
border-bottom: 2px solid black;
color: white;
}
/* Add padding to containers */
.container {
padding: 16px;
background-color: #9999;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: Arial, Helvetica, sans-serif;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar a:hover{
background-color: red;
}
body {
font-family: Verdana, sans-serif;
margin: 0;
text-align: center;
background-color: rgb(150, 175, 200);
}
#p {
position: relative;
font-family: sans-serif;
text-transform: uppercase;
font-size: 2em;
letter-spacing: 4px;
overflow: hidden;
background: linear-gradient(90deg, #000, #fff, #000);
background-repeat: no-repeat;
background-size: 80%;
animation: animate 3s linear infinite;
-webkit-background-clip: text;
-webkit-text-fill-color: rgba(255, 255, 255, 0);
}
#Header {
background-color: rgb(150, 175, 200);
color: Black;
font-family: Courier;
font-size: 50px;
background-position: center;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
@keyframes animate {
0% {
background-position: -500%;
}
100% {
background-position: 500%;
}
}
</style>
<body>
<nav class="navbar">
<a href = "file:///C:/Users/xenia/De
sktop/InfoSpace/Home.html">Home</a>
<a href = "file:///C:/Users/xe
nia/Desktop/InfoSpace/Profile.html">My Profile</a>
<a href = "file:///C:/Users/xenia/Desktop
/InfoSpace/Articles.html">Articles</a>
<a href = "file:///C:/Users/xenia
/Desktop/InfoSpace/Reviews.html">Reviews</a>
<a href = "file:///C:/Users/xenia/Desktop
/InfoSpace/Tutorials.html">Tutorials</a>
<a href = "file:///C:/Users/xe
nia/Desktop/InfoSpace/Help.html">Help</a>
</nav>
<h1 id="Header"><strong>INFOSPACE</strong></h1>
<p id="sometext">
<br />
This site is dedicated to provide information for budding scientists.
We aim to give you
a enjoyable and informative experience. If you experience a bug in
the
site please email Samuel Crawford at samuelhbc@icloud.com. Our blogs are reviews of products.
In each one there is a link to the product. If the link is no longer relevent please email samuelhbc@icloud.com.
Thank you for your attention and enjoy!!!
<br />
<br />
</p>
<br />
<br />
<h1><strong>IQ Test</strong></h1>
<div id = "quiz">
</div>
<button id = "submit"><h1>Submit Quiz</h1></button>
<div id = "results">
</div>
<br />
<br />
<p id="p">A website for young scientists.</p>
</body>
<script>
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [
{
question: "What is the next number in this sequence:
1,1,2,3,5,8,13,21...",
answers: {
a: "28",
b: "34",
c: "33",
d: "More Information needed"
},
correctAnswer: "b"
},
];
function buildQuiz() {
const output = [];
myQuestions.forEach(
(currentQuestion, questionNumber) => {
const answers = [];
for(letter in currentQuestion.answers){
answers.push(
`<label>
<input type="radio" name="question${questionNumber}"
value="${letter}">
${letter} :
${currentQuestion.answers[letter]}
</label>`
);
}
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) => {
const answerContainer = answerContainers[questionNumber];
const selector = 'input[name=question'+questionNumber+']:checked';
const userAnswer = (answerContainer.querySelector(selector) || {}).value;
if(userAnswer===currentQuestion.correctAnswer){
numCorrect++;
answerContainers[questionNumber].style.color = 'lightgreen';
}
else{
answerContainers[questionNumber].style.color = 'red';
}
});
resultsContainer.innerHTML = numCorrect + ' out of ' +
myQuestions.length;
}
buildQuiz();
submitButton.addEventListener('click', showResults);
</script>
</html>
最佳答案
一个相对简单的方法是使用 Flexbox .在这种情况下，您可以将以下样式添加到您的文档中:
.answers {
display: flex;
flex-direction: column;
}
display: flex 使 .answers divs flex 元素，而 flex-direction: column 从上到下显示 div 的内容从左到右。一旦你有了它，你就可以应用其他弹性属性来根据你的喜好更精确地排列答案。如果您想了解更多有关如何使用 Flexbox 的信息，this article是开始的好地方。
关于 Flexbox 的一个注意事项:如果这是一个问题，它在旧版浏览器(例如 IE 11)上工作得不是特别好。
关于javascript - 如何在 javascript 中的(多项选择)答案之间插入一个中断？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56842167/