Warning: Undefined array key "steps" in /home/bubudoufu/bubudoufu.com/public_html/wp-content/plugins/amp/src/ReaderThemeSupportFeatures.php on line 501
大きい順に並べ替えるクイズを作ってみる(クライアントサイドJavaScript編) - プログラミングを学習中の私が、アウトプットするためのサイト
サイトアイコン プログラミングを学習中の私が、アウトプットするためのサイト

大きい順に並べ替えるクイズを作ってみる(クライアントサイドJavaScript編)

このページではソースコードの一部分を簡単な解説をしています。

作成したゲームはコチラから
ソースコードはgithubにあります

スポンサーリンク

概要

選択肢四つの中から大きい順にクリックして答えていくクイズゲームです。ジャンルを選びクリックするとクイズが始まります。サーバーサイドにはPHPを使用しデータベースから4つの選択肢をランダムに取得してクイズの作成とクライアント側から送られてきた回答の答え合わせをしています。クライアントサイドはJavaScriptを使用してクイズの表示、回答の送信などをしています。

サーバー側の記事は↓にあります。

サーバーからクイズを取得する

スタート画面でジャンルがクリックされるとクイズを取得するfetchQuiz関数が実行されます。FetchAPIを使用してFormDataをPOSTでリクエストしています。FormDataの中身はキー”genre”にはどのクイズのジャンルが選ばれたか 、キー”init”にはスタート画面でクイズを取得するのかゲームの途中でクイズを取得するのかをサーバーサイドで判定するのに使います。

クイズを表示する

showQuiz関数はサーバーから取得したクイズを表示する関数です。DOMを使用してウェブページとその要素にアクセスしてウェブ上にクイズを表示させています。

回答を送信する

クイズの選択肢がクリックされるとcheckAnswer関数が実行されます。この関数はサーバーへ選択された答えを送信して判定された結果を受け取ります。サーバーからは正解、不正解、正解かつ1問クリア、正解かつ全問クリアの4つのうちどれかが返ってくるので、返ってきた値によってswitch文で分岐させて結果を表示する関数を使い分けています。

回答結果を表示する

関数correctは正解だった場合に呼び出される関数です。DOMを使用して結果を表示させています。WebAnimationAPIを使い、結果によって文字の色や濃さを変えるアニメーションをさせています。

ソースコードはgithubにあります
最後までお読みいただきありがとうございました

モバイルバージョンを終了