ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2025/03/20
NEW
【週刊ドットインストール】 レッスン制作の進捗、社内開発のススメ
2024/05/07
NEW
あなただけの学習ロードマップを作成します 【随時受付中】
PREMIUM
【旧版】JavaScriptで三択クイズを作ろう
JavaScriptで三択クイズを作る方法を学んでいきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptで三択クイズを作ろう
シンプルな三択クイズを作りながらJavaScriptのDOM操作についての理解を深めていきます。
0%
動画レッスン一覧
(20)
#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)
動作確認
問題の差し替え
未完了
リリース情報(note)
『JavaScriptで三択クイズを作ろう (全20回)』をリリースしました
詳細情報
最終更新日
2019年3月28日
バージョン情報
JavaScript (ES2017)