はじめてのインタラクティブ・クイズアプリ
beginner~15 分0/4 ステップ
はじめてのインタラクティブ・クイズアプリ
講義は一方通行です。クイズは対話です。
自分でテストした学習者は、ただ読み返すだけの学習者より50%多く記憶に定着させられます。このレッスンでは、本物のクリックできるクイズアプリを作ります。問題、クリックすると緑や赤に光る選択肢、スコアカウンター、結果メッセージを備えています。ブラウザで動きます。フレームワーク不要、バックエンド不要。HTMLとほんの少しのJavaScriptだけです。
手順
1
クイズのタイトルを入れた <h1> を追加しましょう — このクイズはどんなテーマを問いますか？
ヒント： 例: `<h1 class="text-3xl font-bold text-white mb-2">クイック知識チェック</h1>`
2
クイズの問題文を入れた <div class="question"> を追加しましょう
3
回答用の <button class="answer-btn"> を3つ以上追加しましょう。正解には data-correct="true" を付けてください
4
下部に「Score: 0」と表示する <div class="score-counter"> を追加しましょう — スターターコードのJavaScriptが正解クリック時に自動で更新します
あなたのコード
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
ViBotでバイブコーディング無料メッセージ 0 / 12
このステップで作りたいものを伝えてください。コードを書きます。あとは「適用」をクリックすればエディタに反映されます。 このステップ：クイズのタイトルを入れた <h1> を追加しましょう — このクイズはどんなテーマを問いますか？
ライブプレビュー
ライブプレビュー