ボタンを押すことで問題の切り替えを行いたい

JavaScripで以下のコードのように英語の問題を作っており、今現在は1ページに
３問表示しているのですが以下のリンクのように次へというボタンを押すことで
問題を１問ずつ切り替わるようにしたいです。
displayプロパティとかで表示の切り替えとかを行うと思うのですが
使い方がよくわかりません。
どなたかお願いします。
リンク内容

HTML
1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html>
3<head>
4<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
5<title>並び替え問題</title>
6
7<script>
8  window.addEventListener('DOMContentLoaded', ()=>{
9    const shuffle=x=>x.map(y=>[y,Math.random()]).sort((y,z)=>y[1]-z[1]).map(y=>y[0]);
10    let q = [
11      "I sometimes watch movies on Sunday .",
12      "This book is too difficult for me .",
13      "Yumi can't stay at her aunt's house .",];
14    q=shuffle(q);
15    document.querySelectorAll('.view').forEach((view,idx)=>{
16    shuffle(q[idx].split(' '))
17        .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
18    view.addEventListener('dragover',e=>e.preventDefault());
19    var t=null;
20    view.querySelectorAll('div').forEach(x=>{
21       x.setAttribute("draggable","true");
22       x.addEventListener('drop',e=>{
23        view.insertBefore(t,x.nextElementSibling);
24        });
25        x.addEventListener('dragstart',e=>{
26          t=e.target;
27        });
28      });
29    });
30
31    document.querySelector('.btn-score').addEventListener('click',()=>{
32      let score = 0;
33      const totalScore = document.getElementById('score-message');
34      document.querySelectorAll('.view').forEach((view,idx)=>{
35        const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
36        if(q[idx]==a) score++;
37      });
38      totalScore.textContent = score + "点";
39    });
40  });
41  </script>
42
43  <style type="text/css"> 
44    #kekka{
45        font-size:20px;
46        color: rgb(243, 46, 11);
47         }
48    body {
49      font-family: serif;
50      text-align: center;
51    }
52    .quizzes-container {
53      width: 400px;
54      margin: 50px auto;
55    }
56    .quiz-container {
57      border-bottom:1px solid black;
58      padding-bottom: 20px;
59    }
60    #score-container {
61      border: 1px solid black;
62      height: 50px;
63      width: 20%;
64      position: relative;
65      left: 40%;
66    }
67    .btn-score {
68      display: block;
69      margin: 20px auto;
70      font-family: serif;
71      background-color: white;
72    }
73    .view{
74      display:flex;
75      position: relative;
76      left:35%;
77    }
78    .view div{border:solid 2px;padding:8px 16px 8px 16px ;}
79    .view div:not(:first-child){border-left:solid 0px;}
80    
81    </style>
82
83  <H2>並び替え問題</H2>
84  <div class="quiz-container"></div>
85  <h2>第1問</h2>
86  <div class="view"></div><br>
87  <div class="quiz-container"></div>
88  <h2>第2問</h2>
89  <div class="view"></div><br>
90  <div class="quiz-container"></div>
91  <h2>第3問</h2>
92  <div class="view"></div><br><br><br>
93
94  <div id="kekka" ></div>
95 
96  <div id="score-container">
97    <p id="score-message"></p>
98  </div><button class="btn-score" type="button">合計得点を見る</button></div>
99

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

回答1件

ベストアンサー

2問目、3問目を当初非表示にしておき、nextボタンで切り替えればよいでしょう

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const next=document.querySelector('#next');
4  const q=[...document.querySelectorAll('.q')];
5  next.addEventListener('click',()=>{
6    const active=document.querySelector('.q:not([hidden])');
7    const idx=q.indexOf(active);
8    active.setAttribute('hidden','');
9    q[idx+1].removeAttribute('hidden');
10    if(idx==q.length-2){
11      next.disabled=true;
12    }
13  });
14});
15</script>
16
17<H2>並び替え問題</H2>
18<div class="quiz-container"></div>
19<div class="q">
20<h2>第1問</h2>
21<div class="view"></div><br>
22<div class="quiz-container"></div>
23</div>
24<div class="q" hidden>
25<h2>第2問</h2>
26<div class="view"></div><br>
27<div class="quiz-container"></div>
28</div>
29<div class="q" hidden>
30<h2>第3問</h2>
31<div class="view"></div><br>
32<div class="quiz-container"></div>
33</div>
34<input type="button" value="次へ" id="next">