以垂直格式显示问题和答案

Question

我想以垂直格式在屏幕中央显示问题和答案。我还需要在问题旁边显示一个按钮，显示有关该问题的更多信息。我正在尝试做这个:

Which Grade are you in?
    Second
    Third
    Fourth
    Fifth

所有答案都是单选按钮，用户只能选择一个答案。我可以使用bootstrap这样做，但我不确定如何在顶部显示问题，并在问题下方缩进单选按钮。

<ul class="list-group">
  <li class="list-group-item">  <input type="radio" id="Second"  value="Second">
  <label for="huey">Second</label></li>
  <li class="list-group-item"><input type="radio" id="Third"  value="Third">
  <label for="huey">Third</label></li>
  <li class="list-group-item"><input type="radio" id="Fourth"  value="Fourth">
  <label for="huey">Fourth</label></li>
  <li class="list-group-item"><input type="radio" id="Fifth"  value="Fifth">
  <label for="huey">Fifth</label></li>
</ul>
    

我想使用flexbox或bootstrap来显示问题和答案。我必须显示40个问题，每个问题之间有空格。

任何帮助都将不胜感激。

Answer 1

你需要这样的东西吗?

let hintButtons = document.querySelectorAll('.toggleHint')
hintButtons.forEach(button => {
  button.onclick = function() { toggleHide(this.parentElement.parentElement) }
})
function toggleHide(quesContainer) {
  let hint = quesContainer.children[1]
  hint.classList.toggle('hide')
}

.answer-options {
  list-style-type: none;
  margin-top: 10px;
}
.extraInfo {
  margin-top: 5px;
}
.question-container {
  padding: 0 15px;
}
.question {
  display: flex;
  align-items: center;
}
.toggleHint {
  margin-left: auto;
}
.hide {
  display: none;
}

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="question-container">
<div class="question"> What grade are you in? <button class="toggleHint btn btn-primary">Toggle Hint</button> </div>
<div class="extraInfo hide">Here is some extra info about this question.</div>
<ul class="answer-options">
  <li class="form-check">  <input class="form-check-input" type="radio" id="second"  value="Second" name="answer-1">
  <label class="form-check-label" for="second">Second</label></li>
  <li class="form-check"><input class="form-check-input" type="radio" id="third"  value="Third" name="answer-1">
  <label class="form-check-label" for="third">Third</label></li>
  <li class="form-check"><input class="form-check-input" type="radio" id="fourth"  value="Fourth" name="answer-1">
  <label class="form-check-label" for="fourth">Fourth</label></li>
  <li class="form-check"><input type="radio" id="fifth"  value="Fifth" name="answer-1" class="form-check-input">
  <label class="form-check-label" for="fifth">Fifth</label></li>
</ul>
</div>
<div class="question-container">
<div class="question"> Did you raed this properly? <button class="toggleHint btn btn-primary">Toggle Hint</button> </div>
<div class="extraInfo hide">Here is some extra info about this question.</div>
<ul class="answer-options">
  <li class="form-check">  <input class="form-check-input" type="radio" id="yes"  value="Yes" name="answer-2">
  <label class="form-check-label" for="yes">Yes</label></li>
  <li class="form-check"><input class="form-check-input" type="radio" id="no"  value="No" name="answer-2">
  <label class="form-check-label" for="no">No</label></li>
  <li class="form-check"><input class="form-check-input" type="radio" id="obviously"  value="Obviously" name="answer-2">
  <label class="form-check-label" for="obviously">Obviously</label></li>
  <li class="form-check"><input class="form-check-input" type="radio" id="maybe"  value="Maybe" name="answer-2">
  <label class="form-check-label" for="fifth">Maybe</label></li>
</ul>
</div>