JavaScriptでクイズアプリケーションを作ろう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、クイズアプリゲーションを作りましょう。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

CSS版

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

JavaScriptの実装

要素を取得

最初に、画面操作に必要な要素を取得します。

クイズデータの定義

画面に表示するクイズデータを定数で定義しましょう。

このアプリケーションでは、クイズデータの最大数は4つまでです。動的に決められるようになったら面白いですね。

クイズのロード

次にクイズのロード処理を実装しましょう。

ここでは、先ほど設定したクイズデータ(quizData)をinnerTextを使ってページに埋め込んでいます。

クイズ選択解除

クイズの選択項目は、HTMLのradioで作成しています。1ページ目のクイズに回答して、2ページ目に行くと前ページで選択した項目がチェックされた状態のままになってしまうため、解除処理が必要です。

radioボックスなどのHTML要素はchecked属性を持っており、これがtrueの場合、選択状態になります。

回答取得

次は、回答を取得する処理を実装します。

回答送信

最後に、回答送信処理を実装します。

location.reload()」は、ページのURLを再読み込みしてくれる便利なメソッドです。リロード処理などでよく使いますね。

これで完成です。

おわりに

クイズ系のアプリケーションは、今まで実装したことがなかったですね。

このアプリが作れるようになるとアンケートアプリなど、類似したアプリケーションにも応用ができそうですよね。

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す