JavaScripで以下のコードのように英語の問題を作っており、今現在は1ページに
3問表示しているのですが以下のリンクのように次へというボタンを押すことで
問題を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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。