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