Q&A
コードがものすごく読みにくいので、下記を参考に読みやすくしてください。
https://teratail.com/questions/238564
下記のコードをランダムで重複なしで問題数を指定して出題したいのですが、やり方がわからないので教えて欲しいです。
htmlコード
<!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <title>エヴァンゲリオンクイズ</title> <h1>エヴァンゲリオンクイズ</h1> <h2>その他</h2><h3>初級編</h3> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="./css/style.css"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <meta name="theme-color" content="#fafafa"> </head> <body> <div class="container"></div> <script src="app.js"></script> </body> </html> jsコード const quiz = [ { question: 'マリの正確な名前は次のうちどれ', answers: [ '真理波・マリ・イラストリアス', '真紀波・マリ・イラストリアス', '真希波・マリ・イラストリアス' ], correct: '真希波・マリ・イラストリアス' }, { question: 'NERV本部がある街の名前は次のうちどれ？', answers: [ '第3新東京市', '第1新東京市', '第2新東京市' ], correct: '第3新東京市' }, { question: '綾波レイの乗っているEVA零号機は零号機と零号機（改）があるが、零号機（改）は何色か？', answers: [ 'オレンジ', '山吹色', '青', ], correct: '青' }, { question: '使徒の原動力となっている機関は何機関？', answers: [ 'S2機関', 'S1機関', 'SP機関', ], correct: 'S2機関' }, ];<div class="jumbotron mt-5"> <div class="d-flex justify-content-center"> <div id="js-question" class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> </div> <div id="js-items" class="d-flex justify-content-center"> <div class="m-2"> <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button> </div> <div class="m-2"> <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button> </div> <div class="m-2"> <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button> </div> </div> </div>
const $window = window;
const $doc = document;
const $question = $doc.getElementById('js-question');
const $buttons = $doc.querySelectorAll('.btn');
const quizLen = quiz.length;
let quizCount = 0;
let score = 0;
const init = () => {
$question.textContent = quiz[quizCount].question;
const buttonLen = $buttons.length; let btnIndex = 0; while(btnIndex < buttonLen){ $buttons[btnIndex].textContent = quiz[quizCount].answers[btnIndex]; btnIndex++; }
};
const goToNext = () => {
quizCount++;
if(quizCount < quizLen){
init(quizCount);
} else {
$window.alert('クイズ終了！');
showEnd();
}
};
const judge = (elm) => {
if(elm.textContent === quiz[quizCount].correct){
$window.alert('正解!');
score++;
} else {
$window.alert('不正解!');
}
goToNext();
};
const showEnd = () => {
$question.textContent = '終了！あなたのスコアは' + score + '/' + quizLen + 'です';
const $items = $doc.getElementById('js-items'); $items.style.visibility = 'hidden';
};
init();
let answersIndex = 0;
let answersLen = quiz[quizCount].answers.length;
while(answersIndex < answersLen){
$buttons[answersIndex].addEventListener('click', (e) => {
judge(e.target);
});
answersIndex++;
}
回答1件
0
const quiz = [...]; の次の行あたりで、この配列をシャッフルすればよいでしょう。「javascript 配列 シャッフル」でウェブ検索すると例が見つかると思います。
投稿2022/05/31 03:38
総合スコア20884
あなたの回答
tips
プレビュー
