JavaScriptでリロードごとに問題がシャッフルされるクイズを作った。
See the Pen Untitled by mkunu (@m-kunugi) on CodePen.
quiz.html
<html>
<head>
<title>損益計算書クイズ</title>
<script type="text/javascript">
// 配列（問題と答えの選択肢）
var array1 = [['販売手数料', 0], ['広告宣伝費', 0],
['受取利息', 1],
['支払利息', 2],
['固定資産売却益', 3],
['固定資産売却損', 4]];
function answer(){
for (const element of array1) {
var choices = document.getElementsByName(element[0]) ;
if(choices[element[1]].checked) document.getElementById('color'+ element[0]).style.color="blue"
else document.getElementById('color'+ element[0]).style.color="red"
}
}
</script>
</head>
<body>
損益計算書クイズ
（リロードするとランダムに表示されます。）
<form name="f">
<!--答え合わせのボタンの配置-->
<input type="button" value="答え合わせ" onclick="answer()">
<div id="order_list">
<script type="text/javascript">
var d1 = document.getElementById('order_list');
// 配列をシャッフル https://teratail.com/questions/81199
function arrayShuffle (array) {
var k, t, len;
len = array.length;
if (len < 2) {
return array;
}
while (len) {
k = Math.floor(Math.random() * len--);
t = array[k];
array[k] = array[len];
array[len] = t;
}
return array;
}
arrayShuffle(array1);
for (const element of array1) { // 問題の作成
d1.insertAdjacentHTML('afterend', '<div class="order">\
<b><p id="color'+ element[0] +'">\
'+ element[0] +'</b><br>\
<input type="radio" name="'+ element[0] +'" > 販売費及び一般管理費\
<input type="radio" name="'+ element[0] +'" > 営業外収益\
<input type="radio" name="'+ element[0] +'" > 営業外費用\
<input type="radio" name="'+ element[0] +'" > 特別利益\
<input type="radio" name="'+ element[0] +'" > 特別損失\
</p></div>');
}
</script>
</div>
<!--答え合わせのボタンの配置-->
<input type="button" value="答え合わせ" onclick="answer()">
</form>
</body>
</html>
参考サイト
ラジオボタン式クイズの作り方
http://www2.kuma.u-tokai.ac.jp/~kfuji/hp/JavaScript/index.html
配列シャッフルの仕方
https://teratail.com/questions/81199