クイズの選択肢を横並びから縦に表示させたい

質問を見てくださってありがとうございます！
題名のとおりなのですが、
添付のクイズの選択肢を横並びから縦に表示させたいと考えております。
現在、HTML,CSS,JavaScriptでクイズを開発しております。

■やりたいこと
・クイズの選択肢を横並びから縦に表示
・選択肢とチェックボタンの切り分け(現在ボタンの中に選択肢が表示されているかと思います)

現在のクイズの表示形式

表示させたい形式

JavaScript
1const quiz = [
2  {
3    question: 'ゲーム史上、最も売れたゲーム機はどれ？',
4    answers: [ 'スーパーファミコン', 'PlayStation 2', 'ニンテンドーDS', 'Xbox 360'],
5    correct: 'ニンテンドーDS'
6  }, {
7    question: '糸井重里が企画に関わった、任天堂の看板ゲームといえば？',
8    answers: [ 'MOTHER2', 'スーパーマリオブラザーズ3', 'スーパードンキーコング', '星のカービィ'],
9    correct: 'MOTHER2'
10  }, {
11    question: 'ファイナルファンタジーⅣの主人公の名前は？',
12    answers: [ 'フリオニール', 'クラウド', 'ティーダ', 'セシル'],
13    correct: 'セシル'
14  }
15];
16
17const $window = window;
18const $doc = document;
19const $question = $doc.getElementById('js-question');
20const $buttons = $doc.querySelectorAll('.btn');
21
22const quizLen = quiz.length;
23let quizCount = 0;
24let score = 0;
25
26const init = () => {
27  $question.textContent = quiz[quizCount].question;
28  
29  const buttonLen = $buttons.length;
30  let btnIndex = 0;
31  
32  while(btnIndex < buttonLen){
33    $buttons[btnIndex].nextElementSibling.textContent = quiz[quizCount].answers[btnIndex];
34    btnIndex++;
35  }
36};
37
38const goToNext = () => {
39  quizCount++;
40  if(quizCount < quizLen){
41    init(quizCount);
42  } else {
43    // $window.alert('クイズ終了！');
44    showEnd();
45  }
46};
47
48const judge = (elm) => {
49  if(elm.textContent === quiz[quizCount].correct){
50    $window.alert('正解!');
51    score++;
52  } else {
53    $window.alert('不正解!');
54  }
55  goToNext();
56};
57
58const showEnd = () => {
59  $question.textContent = '終了！あなたのスコアは' + score + '/' + quizLen + 'です';
60  
61  const $items = $doc.getElementById('js-items');
62  $items.style.visibility = 'hidden';
63};
64
65init();
66
67let answersIndex = 0;
68let answersLen = quiz[quizCount].answers.length;
69
70while(answersIndex < answersLen){
71  $buttons[answersIndex].addEventListener('click', (e) => {
72    judge(e.target);
73  });
74  answersIndex++;
75}

HTML
1<!doctype html>
2<html class="no-js" lang="">
3<head>
4  
5  <meta charset="utf-8">
6  <title></title>
7  <meta name="description" content="">
8  <meta name="viewport" content="width=device-width, initial-scale=1">
9  
10  <link rel="manifest" href="site.webmanifest">
11  <link rel="apple-touch-icon" href="icon.png">
12  <!-- Place favicon.ico in the root directory -->
13  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
14
15  <meta name="theme-color" content="#fafafa">
16  <style>
17    #child1 {
18      background-color: rgb(88, 26, 187);
19        display: table;
20        width: 100%;
21        text-align: center;
22        height:80px;
23        line-height: 80px;
24
25
26    }   
27    #child2 {
28      width: 100%;
29      text-align: center;
30    }
31
32    @media (min-width: 600px) {
33      #parent {
34        display: flex;
35      }
36      #child1 {
37        flex-grow: 1;
38      }
39      #child2 {
40        flex-grow: 1;
41      }
42    }
43  </style>
44<body>
45    <div id="child1">子要素1</div>
46</head>
47  <div class="container">
48    <div id="parent">
49
50    <div class="jumbotron mt-5">
51      <div class="d-flex justify-content-center">
52        <div id="js-question" class="alert alert-primary" role="alert">
53          A simple primary alert—check it out!
54        </div>
55      </div>
56
57      <div id="js-items" class="">
58        <div class="m-2">
59            <input type="button" id="js-btn-1" class="btn btn-primary">
60            <label for="js-btn-1">Primary</label>
61        </div>
62        <div class="m-2">
63            <input type="button" id="js-btn-2" class="btn btn-primary">
64            <label for="js-btn-2">Primary</label>        </div>
65        <div class="m-2">
66            <input type="button" id="js-btn-3" class="btn btn-primary">
67            <label for="js-btn-3">Primary</label>        </div>
68        <div class="m-2">
69            <input type="button" id="js-btn-4" class="btn btn-primary">
70            <label for="js-btn-4">Primary</label>    </div>
71         </div>
72      </div>
73      <div id="child2">子要素2</div>
74    </div>
75  </div>
76  
77  <script src="app.js"></script>
78</body>
79</html>

【補足】
添付画像の通り、クイズを囲っているグレーの枠を
子要素２に囲いたいのですが表示方法についてご教示いただけますと幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

・クイズの選択肢を横並びから縦に表示

BootStrap の d-flexクラスで横並びになっているのでそれを削除すればOK。

diff
1-      <div id="js-items" class="d-flex justify-content-center">
2+      <div id="js-items" class="">

・選択肢とチェックボタンの切り分け(現在ボタンの中に選択肢が表示されているかと思います)

HTMLで、
buttonタグを inputタグに変更して、選択肢は label にすればいいでしょう。

diff
1        <div class="m-2">
2-          <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button>
3+          <input type="button" id="js-btn-1" class="btn btn-primary">
4+           <label for="js-btn-1">Primary</label>
5        </div>

以降の選択肢も同様に修正してください。

あと、HTMLが変わったので、それに合わせて、JavsScriptも下記のように変更します。

diff
1  while(btnIndex < buttonLen){
2-    $buttons[btnIndex].textContent = quiz[quizCount].answers[btnIndex];
3+    $buttons[btnIndex].nextElementSibling.textContent = quiz[quizCount].answers[btnIndex];
4    btnIndex++;

diff
1const judge = (elm) => {
2-  if(elm.textContent === quiz[quizCount].correct)
3+  if(elm.nextElementSibling.textContent === quiz[quizCount].correct)

補足質問に対する追記

diff
1-  <div class="container">
2+  <div class="container jumbotron">
3    <div id="parent">
4
5-    <div class="jumbotron mt-5">
6+    <div class="mt-5">