新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 三択クイズを作ってみよう (03:02) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの作成
- main.jsの作成
-
#02 画面を作っていこう (02:37) 無料公開中
- HTMLのマークアップ
- bodyのスタイリング
-
#03 全体のスタイルを整えよう (02:16) 無料公開中
- .containerのスタイリング
- #questionのスタイリング
- #choicesのスタイリング
-
#04 選択肢のスタイルを整えよう (01:44) 無料公開中
- 選択肢のスタイリング
- hover擬似クラス
-
#05 Nextボタンのスタイルを整えよう (02:43) 無料公開中
- ボタンのスタイリング
- disabled時のスタイリング
-
#06 クイズのデータを用意しよう (02:44)
- 要素の取得
- 初期データの設定
-
#07 JavaScriptで選択肢を表示しよう (02:42)
- 問題文の埋込
- 選択肢の埋込
-
#08 シャッフルのアルゴリズムを理解しよう (02:08)
- フィッシャー・イェーツのシャッフル
-
#09 シャッフル処理を関数にまとめよう (02:54)
- shuffle()の実装
-
#10 選択肢をシャッフルしよう (02:51)
- 選択肢のシャッフル
- スプレッド演算子によるオブジェクトのコピー
-
#11 解答の正誤判定をしよう (02:50)
- setQuiz()の実装
- checkAnswer()の実装
-
#12 正解､不正解をわかりやすくしよう (02:23)
- .correctのスタイリング
- .wrongのスタイリング
-
#13 解答状況を管理しよう (02:52)
- after疑似要素
- isAnswered変数による状況の管理
-
#14 次の問題に進めるようにしよう (02:35)
- ボタンクリック時の処理
- 要素の削除
-
#15 Nextボタンの有効/無効を切り替えよう (02:35)
- ボタンの挙動制御
- ボタンラベルの変更
-
#16 スコアを計算しよう (02:20)
- スコアの管理
- スコアの表示
-
#17 スコアを表示する領域を作ろう (03:00)
- スコア表示領域のスタイリング
-
#18 スコアのスタイルを整えよう (02:04)
- スコア表示のスタイリング
- Replyボタンのスタイリング
-
#19 スコア表示を完成させよう (02:56)
- アニメーションの設定
- スコアの埋込
-
#20 具体的な問題を挿入してみよう (02:37)
- 動作確認
- 問題の差し替え
