ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2022/05/26
NEW
週刊ドットインストール(2022/05/26号)を更新しました!
2022/05/26
NEW
プログラミングスクール『256times』にて、待望の『はじめての特訓JavaScript』クラスをリリースしました!
PREMIUM
JavaScriptで三択クイズを作ろう
JavaScriptで簡単な三択クイズを作る方法を学んでいきます。
0%
動画レッスン一覧
(20)
質問と回答
(61)
未完了
#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)
問題の差し替え
出題順のシャッフル
#03 全体のスタイルを整えよう
CSS がうまく反映されません
2022年1月27日
#06 クイズのデータを用意しよう
問題を30問にして、そのうちの10問を出したい場合はどうすればいいですか?
2022年1月27日
質問の下に図も表示させたい場合はどうすればいいですか?
2022年1月27日
#07 JavaScriptで選択肢を表示しよう
console.log で choices がどうなっているか確認しても中身に変化がありません
2022年2月10日
question.textContent = quizSet[currentNum].q; の最後の q はなんですか?
2022年1月27日
'li'とliはどう違うのですか?
2022年1月27日
li.textContent = choiceあたりの処理の流れがわかりません
2022年1月27日
idをclassにしたら動かなくなりました
2022年1月27日
#09 シャッフル処理を関数にまとめよう
i を arr.length にするとうまくいきません
2022年1月27日
なぜ分割代入を使うのでしょうか?
2022年1月27日
j はなぜ const で定義されているのでしょうか?
2022年1月27日
なぜ分割代入が必要なのですか?
2022年1月27日
乱数を生成するときの +1 はどういう意味ですか?
2022年1月27日
最後の要素はなぜ-1になるのですか?
2022年1月27日
引数arrは配列なのですか?
2022年1月27日
#10 選択肢をシャッフルしよう
選択肢の配列がシャッフルされていることを確認したいです
2022年4月4日
コンソールに表示した選択肢と実際に表示される選択肢を両方シャッフルするのはなぜですか?
2022年1月27日
なぜ return arr; がないと選択肢が表示されないのでしょうか?
2022年1月27日
スプレッド演算子をつけたらうまく動かなくなりました
2022年1月27日
#11 解答の正誤判定をしよう
li の代わりに e.target を使って書いてみたのですが、上手くいきません
2022年3月24日
function checkAnswer(li) の時点で li が定義されていないのにエラーにならないのはなぜですか?
2022年1月27日
クリックイベントの設定をforEachのなかでするのはなぜですか?
2022年1月27日
checkAnsewerに引数を渡すのはなぜですか?
2022年1月27日
appendChild()はどのタイミングで実行すべきですか?
2022年1月27日
#12 正解、不正解をわかりやすくしよう
addEventListenerをなぜそこに書いたか教えて下さい
2022年1月27日
マウスホバーしたときの背景色がおかしい
2022年1月27日
CSSの優先順位がわかりません
2022年1月27日
#13 解答状況を管理しよう
関数の中の if 文で return した場合、どこに戻るのですか?
2022年1月27日
「色々な方法がありますが」とコメントしていますが、他の方法を知りたいです
2022年1月27日
= と === の違いは?
2022年1月27日
forEach 内の addEventListener の挙動がよくわかりません
2022年1月27日
isAnsweredがどう動作しているのかわかりません
2022年1月27日
returnをbreakにしたらエラーが出ます
2022年1月27日
#14 次の問題に進めるようにしよう
choices の firstChild が削除されないのはなぜですか?
2022年1月27日
while 文の firstChild を li に変えてもうまくいきません
2022年1月27日
Whileの条件式について教えて下さい
2022年1月27日
なぜ問題文が書き換わるのですか?
2022年1月27日
choices.firstChild.remove()としないのはなぜですか?
2022年1月27日
#15 Nextボタンの有効/無効を切り替えよう
disabledクラスのつけ外しがよくわかりません
2022年1月27日
最後の問題を判定する条件について教えて下さい
2022年1月27日
有効/無効の判定はisAnsweredを使ってもいいですか?
2022年1月27日
quizSet.lengthからなぜ1を引くのですか?
2022年1月27日
#16 スコアを計算しよう
quizSet.length と quizSet.length - 1とするときの違いが分かりません
2022年1月27日
#17 スコアを表示する領域を作ろう
position: relative; を設定するのはなぜですか?
2022年1月27日
#resultの表示位置が下がるのはなぜですか?
2022年1月27日
スコア表示部分が絶対配置されません
2022年1月27日
margin:atuo;だけでは中央揃えにならないのですか?left:0;、right:0;を記述する意味とは?
2022年1月27日
#19 スコア表示を完成させよう
transition に transform は設定しなくてもいいのですか?
2022年1月27日
if と else ではなく、return を使って書いてもよいですか?
2022年1月27日
Replay? を押すと元に戻るのはなぜですか?
2022年1月27日
#記号がつく場合とつかない場合の違いは何ですか?
2022年1月27日
#20 三択クイズを完成させよう
問題番号を表示したいです
2022年3月24日
問題文や選択肢が文字化けしてしまいます
2022年1月27日
関数の定義にアロー関数を使わないのはなぜですか?
2022年1月27日
関数の定義はあとからでもいいのでしょうか?
2022年1月27日
誰でも問題と答えを追加できるようにするにはどうしたらいいですか?
2022年1月27日
Replayを押すとリセットされる仕組みについて教えて下さい
2022年1月27日
点数に応じて画像を表示したい
2022年1月27日
shuffle関数が理解できません
2022年1月27日
arrにletやconstの定義は必要ないのですか?
2022年1月27日
コードを美しく書くコツはありますか?
2022年1月27日
ギャラリー
このレッスンについて
最終更新日
2019年9月10日
バージョン情報
Chrome 76.0 / Visual Studio Code 1.38.0
関連キーワード
(6)
基礎講座
(343)
初心者向け
(342)
HTML
(96)
CSS
(99)
JavaScript (ES2017)
(36)
ミニプログラム
(136)
このレッスンを共有する