HTMLとCSSとJavaScriptを使って並べ替えクイズを作ってみる

スポンサーリンク

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

完成品で遊ぶにはコチラから
完成品のソースコードはgithubにあります

スポンサーリンク

並べ替えクイズ概要

ユーザーインターフェイスは上記写真のような感じにしたいと思います。1番上に問題文を表示し選択肢をクリックすると数字の書いてある所へ順番に移動し、すべて埋まると正解か判定します。

ユーザーインターフェイスをHTMLとCSSで作成

JavaScriptを使って問題文と選択肢を挿入する

問題文と答えの選択肢はオブジェクト型で作成し、配列に入っている選択肢はあとで正解か判定する時にも使うため左から正解順に並べています。

回答の選択肢が入っている配列は正解順に並んでいるのでFisher–Yatesアルゴリズムを用いてシャッフルをしconcatメソッドで配列を値渡しでコピーして新しい配列を作っています。ここまでのコードで回答の選択肢がブラウザを更新するたびにランダムに配置されるのを確認できると思います。

回答選択肢をクリックされたら回答欄に順番に移動し並べる

クリックされた選択肢はCSSを使って消しています。

正解かどうかの判定

クリックされた数を格納している変数countが答えを格納している並列の要素数と同じになると判定の処理に移ります。JSON.stringifyメソッドを使い、一度JSON文字列に変換してから答えの配列を比較しています。

最後までお読みいただきありがとうございました。
完成品で遊ぶにはコチラから
完成品のソースコードはgithubにあります

タイトルとURLをコピーしました