Q&A
そもそもJavascriptに書いてしまうと答えも解説もカンニングできますけど、それは問題視されないのでしょうか。
質問を見てくださってありがとうございます！
題名のとおりなのですが、
クイズの選択肢を選択したら解説を表示させたいと考えております。
現在、HTML,CSS,JavaScriptでクイズを開発しております。
■やりたいこと
・クイズの選択肢を選択したら解説を表示させたい
・単一選択から複数選択可能にしたい
■悩んでいる箇所
・アコーディオンの展開のイベントをHTML,JavaScriptどちらで実現可能なのかわからず調べ方もわからず実装に詰まっております、、、お力添えいただけると助かります。
HTMLで下記のタグで囲むとアコーディオンで表示できるとGoogleで調べてヒットしてコード追加しましたが、他の要素が悪さをしてアコーディオンで表示ができませんでした。
<details open> <summary>タブ</summary> アコーディオンで表示されます </details>どうぞよろしくお願いいたします。
選択肢、選ぶ前
選択肢、回答後※現在イベントの設定ができていないため選択しても解説が開きません
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 14 <meta name="theme-color"> 15 <style> 16 details { 17 display: block; /*書かないとIEで表示が崩れる*/ 18 border: 1px solid #ccc; 19 font-size: 14px; 20 background: #fff; 21 transition: background 0.3s; 22 } 23 24 details[open] { /*アコーディオンが開いているとき*/ 25 background: #eee; 26 } 27 28 summary { 29 display: block; /*書かないとIEで表示が崩れる*/ 30 padding: 10px; 31 font-size: 20px; 32 cursor: pointer; 33 } 34 #child1 { 35 background-color: rgb(88, 26, 187); 36 display: table; 37 width: 100%; 38 text-align: center; 39 height:80px; 40 line-height: 80px; 41 42 43 } 44 #child2 { 45 width: 100%; 46 text-align: center; 47 } 48 49 @media (min-width: 600px) { 50 #parent { 51 display: flex; 52 } 53 #child1 { 54 flex-grow: 1; 55 } 56 #child2 { 57 flex-grow: 1; 58 } 59 } 60 </style> 61<body> 62 <div id="child1"><font size="7">試験対策サイト</font></div> 63</head> 64 <div class="container"> 65 <div id="parent"> 66 <div class="jumbotron mt-5"> 67 <div class="d-flex justify-content-center"> 68 <div id="js-question" class="alert alert-primary" role="alert"> 69 A simple primary alert—check it out! 70 </div> 71 <div id="js-items" class=""> 72 <div class="m-2"> 73 <input type="checkbox" id="js-btn-1" class="btn btn-primary"> 74 <label for="js-btn-1">Primary</label> 75 <div class="m-2"> 76 <input type="checkbox" id="js-btn-2" class="btn btn-primary"> 77 <label for="js-btn-2">Primary</label> </div> 78</div> 79<div class="m-2"> 80 <input type="checkbox" id="js-btn-3" class="btn btn-primary"> 81 <label for="js-btn-3">Primary</label> </div> 82</div> 83</div> 84 <div class="m-2"> 85 <input type="checkbox" id="js-btn-4" class="btn btn-primary"> 86 <label for="js-btn-4">Primary</label> </div> 87 </div> 88 </div> 89 <details> 90 <summary><div id="child2">解説</div></summary> 91 <p class="txt">マリオカートが正解！</p> 92 </details> 93 94 </div> 95 </div> 96 <script src="app.js"></script> 97</body> 98</html>
teratailでは、マルチポストの推奨はしていないことを知らず申し訳ございません。
他のサイトの質問の削除申請中でまだ未解決のため、URL追記させていただきます。
https://ja.stackoverflow.com/questions/75219/%e3%82%af%e3%82%a4%e3%82%ba%e3%81%ae%e9%81%b8%e6%8a%9e%e8%82%a2%e3%82%92%e9%81%b8%e6%8a%9e%e3%81%97%e3%81%9f%e3%82%89%e8%a7%a3%e8%aa%ac%e3%82%92%e8%a1%a8%e7%a4%ba%e3%81%95%e3%81%9b%e3%81%9f%e3%81%84
ほぼ同じような内容の質問何個も挙げてますけど、回答が付かない理由を考えたらよろしいのでは
m.ts10806さん、K_3578さん、1T2R3M4さん質問への追記・修正依頼ありがとうございます。
同じような内容の質問を続けて投稿失礼いたしました。
ガイドラインのURLの記載もありがとうございます。
いただいた内容すべて目を通して、過去の質問へ自己解決方法の記載をいたしました。
teratailでは、マルチポストの推奨はしていないことを知らず申し訳ございません。
他のサイトの質問については削除申請いたしました。
また何かお気づきの点がありましたら、アドバイスいただければ幸いです。
私の名前は列挙されてますが私のコメントへの返信はないようなので再掲。
--------
そもそもJavascriptに書いてしまうと答えも解説もカンニングできますけど、それは問題視されないのでしょうか。
m.ts10806さん
いただいた質問への返信を失念しておりました。
失礼いたしました。
>そもそもJavascriptに書いてしまうと答えも解説もカンニングできますけど、それは問題視されないのでしょうか。
Javascriptで書いてしまうと答えも解説もカンニング出来てしまう懸念点についてご指摘ありがとうございます。
通常のシステムであれば上記のようにJavascriptに直接問題や答えを書いてしまうとカンニングできてしまうので問題かと思われますが、今回正式にリリースして使うものではなく、勉強とてJavascript,HTML,CSSのみでDBを使わずクイズの実装したいと考えておりますので上記仕様となります。
こちらで回答になっておりますでしょうか。
また何かお気づきの点がありましたら、アドバイスいただければ幸いです。
自分へのコメントじゃありませんが、気になったので。
>勉強とてJavascript,HTML,CSSのみでDBを使わずクイズの実装したいと考えておりますので上記仕様となります。
勉強であるからこそカンニングされないような実装にすべきじゃないでしょうか？
Javascript,HTML,CSSの勉強なら、それにDBを使った実装をした方がDBの勉強にもなりますし。
仮にDBを使わないにしてもカンニングされるようなクイズサイトは良くはないと
思いますが･･･
案件などでなにか納期が有る訳じゃないのだから時間はあるはずです。
勉強の一環だと思ってカンニングされないように実装してみては？
あなたの回答
tips
プレビュー
