ボタンを押すことで表示させる

英語の並べ替えをしたいのですが、以下のソースで「解答を見る」というボタンを押すことで
解答が表示されるようにしたいのですが、問題では文章の先頭が小文字でピリオドない状態で回答するのですが
答え合わせの時は、先頭の文字を大文字にしてピリオドも付けたいです。
問題が出る順番がランダムのため、出題順に合わせて表示させていのですがよくわかりません。
どなたか教えてください。

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
42  window.addEventListener('DOMContentLoaded', ()=>{
43  const next=document.querySelector('#next');
44  const q=[...document.querySelectorAll('.q')];
45  next.addEventListener('click',()=>{
46    const active=document.querySelector('.q:not([hidden])');
47    const idx=q.indexOf(active);
48    active.setAttribute('hidden','');
49    q[idx+1].removeAttribute('hidden');
50    if(idx==q.length-2){
51      next.disabled=true;
52    }
53  });
54});
55
56window.addEventListener('DOMContentLoaded', ()=>{
57  const prev=document.querySelector('#prev');
58  const q=[...document.querySelectorAll('.q')];
59  prev.addEventListener('click',()=>{
60    const active=document.querySelector('.q:not([hidden])');
61    const idx=q.indexOf(active);
62    active.setAttribute('hidden','');
63    q[idx-1].removeAttribute('hidden');
64    if(idx==q.length-2){
65      prev.disabled=true;
66    }
67  });
68});
69</script>
70
71<style type="text/css"> 
72    body {
73      font-family: serif;
74      text-align: center;
75    }
76    .quizzes-container {
77      width: 400px;
78      margin: 50px auto;
79    }
80    .quiz-container {
81      border-bottom:1px solid black;
82      padding-bottom: 20px;
83    }
84    #score-container {
85      border: 1px solid black;
86      height: 50px;
87      width: 20%;
88      position: relative;
89      left: 40%;
90    }
91    .btn-score {
92      display: block;
93      margin: 20px auto;
94      font-family: serif;
95      background-color: white;
96    }
97    .view{
98      display:flex;
99      position: relative;
100      left:35%;
101    }
102    .view div{border:solid 2px;padding:8px 16px 8px 16px ;}
103    .view div:not(:first-child){border-left:solid 0px;}
104</style>
105
106<H2>並び替え問題</H2>
107<div class="quiz-container"></div>
108<div class="q">
109<h2>第1問</h2>
110<div class="view"></div><br>
111<div class="quiz-container"></div></div>
112<div class="q" hidden>
113<h2>第2問</h2>
114<div class="view"></div><br>
115<div class="quiz-container"></div></div>
116<div class="q" hidden>
117<h2>第3問</h2>
118<div class="view"></div><br>
119<div class="quiz-container"></div></div><br>
120<input type="button" value="前へ" id="prev">
121<input type="button" value="次へ" id="next"><br><br>
122  <div id="score-container">
123    <p id="score-message"></p>
124  </div><button class="btn-score" type="button">合計得点を見る</button></div>
125</div><button class="ans" type="button">解答を見る</button></div>
126
127

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

回答1件

ベストアンサー

やった事は、

qをシャッフル後に、q_bkにコピーして残す
next prevで位置残すためにpos変数追加して、ボタン押下でプラマイ
どこに解答表示したいのか分かんなかったんで、一番下に表示用の<div class="answer_view"></div>追加
解凍見るボタンイベントで先頭大文字とピリオド付けて表示

です。
q_bk とposをグローバルにおいて残してますが、この辺の持ち方は作り方次第なので、とりあえずなやり方だと思っといてください。

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  let q_bk;
9  let pos = 0;
10
11  window.addEventListener('DOMContentLoaded', ()=>{
12
13    document.querySelector('.ans').addEventListener('click',()=>{
14        const ansText = q_bk[pos].charAt(0).toUpperCase() + q_bk[pos].slice(1) + ".";
15        document.querySelector('.answer_view').innerHTML = ansText;
16    });
17
18
19    const shuffle=x=>x.map(y=>[y,Math.random()]).sort((y,z)=>y[1]-z[1]).map(y=>y[0]);
20    let q = [
21      "i sometimes watch movies on Sunday",
22      "this book is too difficult for me",
23      "yumi can't stay at her aunt's house",];
24    q=shuffle(q);
25    q_bk = [...q]
26    document.querySelectorAll('.view').forEach((view,idx)=>{
27    shuffle(q[idx].split(' '))
28        .forEach(x=>view.append(Object.assign(document.createElement('div'),{textContent:x})));
29    view.addEventListener('dragover',e=>e.preventDefault());
30    var t=null;
31    view.querySelectorAll('div').forEach(x=>{
32       x.setAttribute("draggable","true");
33       x.addEventListener('drop',e=>{
34        view.insertBefore(t,x.nextElementSibling);
35        });
36        x.addEventListener('dragstart',e=>{
37          t=e.target;
38        });
39      });
40    });
41
42    document.querySelector('.btn-score').addEventListener('click',()=>{
43      let score = 0;
44      const totalScore = document.getElementById('score-message');
45      document.querySelectorAll('.view').forEach((view,idx)=>{
46        const a=[...view.querySelectorAll('div')].map(x=>x.textContent).join(' ');
47        if(q[idx]==a) score++;
48      });
49      totalScore.textContent = score + "点";
50    });
51  });
52
53  window.addEventListener('DOMContentLoaded', ()=>{
54  const next=document.querySelector('#next');
55  const q=[...document.querySelectorAll('.q')];
56  next.addEventListener('click',()=>{
57    pos = pos + 1;
58    document.querySelector('.answer_view').innerHTML = "";
59    const active=document.querySelector('.q:not([hidden])');
60    const idx=q.indexOf(active);
61    active.setAttribute('hidden','');
62    q[idx+1].removeAttribute('hidden');
63    if(idx==q.length-2){
64      next.disabled=true;
65    }
66  });
67});
68
69window.addEventListener('DOMContentLoaded', ()=>{
70  const prev=document.querySelector('#prev');
71  const q=[...document.querySelectorAll('.q')];
72  prev.addEventListener('click',()=>{
73    pos = pos - 1;
74    document.querySelector('.answer_view').innerHTML = "";
75    const active=document.querySelector('.q:not([hidden])');
76    const idx=q.indexOf(active);
77    active.setAttribute('hidden','');
78    q[idx-1].removeAttribute('hidden');
79    if(idx==q.length-2){
80      prev.disabled=true;
81    }
82  });
83});
84</script>
85
86<style type="text/css"> 
87    body {
88      font-family: serif;
89      text-align: center;
90    }
91    .quizzes-container {
92      width: 400px;
93      margin: 50px auto;
94    }
95    .quiz-container {
96      border-bottom:1px solid black;
97      padding-bottom: 20px;
98    }
99    #score-container {
100      border: 1px solid black;
101      height: 50px;
102      width: 20%;
103      position: relative;
104      left: 40%;
105    }
106    .btn-score {
107      display: block;
108      margin: 20px auto;
109      font-family: serif;
110      background-color: white;
111    }
112    .view{
113      display:flex;
114      position: relative;
115      left:35%;
116    }
117    .view div{border:solid 2px;padding:8px 16px 8px 16px ;}
118    .view div:not(:first-child){border-left:solid 0px;}
119</style>
120
121<H2>並び替え問題</H2>
122<div class="quiz-container"></div>
123<div class="q">
124<h2>第1問</h2>
125<div class="view"></div><br>
126<div class="quiz-container"></div></div>
127<div class="q" hidden>
128<h2>第2問</h2>
129<div class="view"></div><br>
130<div class="quiz-container"></div></div>
131<div class="q" hidden>
132<h2>第3問</h2>
133<div class="view"></div><br>
134<div class="quiz-container"></div></div><br>
135<input type="button" value="前へ" id="prev">
136<input type="button" value="次へ" id="next"><br><br>
137  <div id="score-container">
138    <p id="score-message"></p>
139  </div><button class="btn-score" type="button">合計得点を見る</button></div>
140</div><button class="ans" type="button">解答を見る</button></div>
141<div class="answer_view"></div>