このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#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)
- 問題の差し替え
- 出題順のシャッフル
2020年5月14日
2020年5月14日
2020年9月25日
2020年7月6日
2020年5月14日
2020年5月30日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月30日
2020年5月22日
2020年8月2日
2020年6月6日
2020年6月24日
2020年8月2日
2020年8月2日
2020年5月22日
2020年5月14日
2020年5月14日
2020年8月24日
2020年8月2日
2020年5月22日
2020年5月22日
2020年5月14日
2020年5月14日
2020年5月14日
2020年5月14日
