- 出題 → こたえる → 判定 → 結果、の流れを作れる
- これまでの
ifと DOM とイベントを 合体 できる - 自分だけのクイズが、ちゃんと動く
きょうは Phase 1〜3 の集大成。じつはこのサイトの /kuku（九九アプリ）の、小さい版を自分で作ります。20〜30分。
クイズの流れ＝入力 → しょり → 出力
だい1回で出てきた 入力 → しょり → 出力 を思い出そう。クイズはまさにこれ。ボタンを押す（入力） → 正かいとくらべる（しょり） → ○×を出す（出力）。きょうはこの3つを、自分でつなぎます。
正かいを決めて、くらべる
まず「正かいは何ばん？」を変数で決めておく。そして押されたボタンの番号と if でくらべるだけ。つぎが小さな完成形だよ。
<!-- もんだいと、4つのこたえボタン -->
<p>3 × 2 は？</p>
<button onclick="kotae(1)">5</button>
<button onclick="kotae(2)">8</button>
<button onclick="kotae(3)">6</button>
<button onclick="kotae(4)">9</button>
<!-- 結果がここに出る -->
<p id="result"></p>
<script>
// 正かいは 3ばん
const seikai = 3
function kotae(n) {
if (n === seikai) {
document.getElementById("result").textContent = "⭕ せいかい！"
} else {
document.getElementById("result").textContent = "❌ ざんねん"
}
}
</script>
▼ 3ばんのボタンを押したら⭕ せいかい！
onclick でボタンに「押されたら kotae() を動かして」とつないでいる（だい12回のイベント）。番号を if でくらべて（だい6回）、textContent で画面を書きかえる（だい13回の DOM）。ぜんぶ これまでの合体だね。
1ファイルの HTML を作って、自分の好きな問題でクイズを動かそう。
- 自分の好きな問題で、4択クイズを作る（計算でも、なぞなぞでも OK）
- 正かいの番号を決めて、ボタンの
onclick="kotae(◯)"につなぐ - ブラウザで開いて、○× がちゃんと出るか確かめる
- （よゆうがあれば）問題を 2問に増やしてみる
じつは、このサイトの /kuku も、これを大きくしたものなんだ。問題が10問あって、時間もはかって、記録も残しているだけ。きみが作ったこのクイズが、ちゃんとその仲間だよ。
💡 AI に聞いてみよう：「問題をもっと増やすには、配列を使うとどうなる？」と AI にたずねてみよう。だい7回で出てきた「ならんだデータ（配列）」が、ここでも役に立つはず。
- クイズは何の流れでできている？（→ 入力 → しょり → 出力）
- 正かいかどうかを判定するのは、何の命令？（→
if） - 結果を画面に出すのは何？（→ DOM の
textContent）
ここまでで、自分のページがちゃんと作れるようになった！ つぎは、その作品を世界に公開するための道具 Git / GitHub を学びます。