新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 三択クイズを作ってみよう (02:47) 無料公開中
- 完成版の確認
- index.htmlの作成
- styles.cssの読み込みと作成
- main.jsの読み込みと作成
-
#02 クイズ画面を作っていこう (02:11) 無料公開中
- クイズ画面のマークアップ
- 全体のスタイル設定
-
#03 画面のスタイルを整えよう (02:56) 無料公開中
- 問題のスタイル設定
- 選択肢のスタイル設定
-
#04 ボタンのスタイリングをしよう (02:05) 無料公開中
- ボタンのスタイリング
- ブラウザでの確認
-
#05 クイズのデータを用意しよう (03:00)
- クイズデータの用意
- 問題の表示
-
#06 シャッフルのアルゴリズムを理解しよう (02:45)
- フィッシャー・イェーツのシャッフルアルゴリズム
-
#07 シャッフル処理を実装しよう (02:48)
- シャッフル処理の実装
- 動作確認
-
#08 配列の値を渡せるようにしよう (02:53)
- 配列での値渡し
- console.logでの確認
-
#09 正誤判定をしてみよう (02:43)
- リファクタリング
- 正誤判定の条件分岐
- consoleの確認
-
#10 正解､不正解をわかりやすくしよう (02:40)
- correctクラスの設定
- wrongクラスの設定
- 動作確認
-
#11 回答状況を管理しよう (01:13)
- 回答状況の管理
- 動作確認
-
#12 次の問題に進めるようにしよう (02:51)
- btnのクリックイベント
- リファクタリング
-
#13 クイズの終了処理を実装しよう (02:39)
- 正答数の管理
- ボタンの表記変更
-
#14 スコアを表示させてみよう (02:55)
- スコア画面のマークアップ
- スコア画面のスタイリング
-
#15 三択クイズを完成させよう (02:31)
- スコアの表示
- 動作確認
