ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/08
NEW
【週刊ドットインストール】 『JavaScript入門 DOM編』リリース、レッスン一覧ページをリニューアルしました
PREMIUM
【旧版】JavaScriptで三択クイズを作ろう
JavaScriptを使って、三択クイズを作る方法を見ていきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptで三択クイズを作ろう
シンプルな三択クイズを作りながらJavaScriptのDOM操作についての理解を深めていきます。
0%
動画レッスン一覧
(15)
未完了
#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)
スコアの表示
動作確認
このレッスンについて
最終更新日
2018年2月28日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript
関連キーワード
(6)
基礎講座
(369)
初心者向け
(368)
HTML
(115)
CSS
(116)
JavaScript
(148)
ミニプログラム
(142)
このレッスンを共有する