JavaScriptで三択クイズを作ろう (全20回)

動画レッスン一覧 (20)
質問と回答 (25)

#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)
- 問題の差し替え
- 出題順のシャッフル