Creative Lab: WAGOTO Web vol 1 – 百人一首 2

WAGOTO Webは、日本の伝統的なモノコトをテーマにしたシンプルなウェブサイトを、htmlを1から書きおこして制作する試みです。

前回は百人一首をテーマにしたサイトを作成しましたが、Quizのページは構築中としていましたので、今回はそのQuizページを完成させました。

こちらからサイトのTOPページに飛びます。

スクロールした一番下のリンクから、下記のようなQuizのページに行くことができます。今回は3択問題の形式としており、Quizの順番や選択肢の順番がシャッフルされるようにプログラムされているので、訪れるたびに新たな問題からスタートできることがポイントです。

配列をシャッフルするためのコードの元となっているのは、フィッシャー・イェーツのシャッフル（Fisher–Yates shuffle）という、少ない手順でよりランダムに並び変えることができる手法です。

具体的には、一列に並んだ手元のカードからランダムに一枚選び一番右のものと交換します。一番右を除いた残りのカードからランダムに選び、今度は右から二番目のカードと交換します。次は右の二枚を除いた残りから選んで。。と、順にカードの数だけ行うことで、カードの列がかなりランダムにシャッフルされる、というアルゴリズムです。
普段あまりシャッフルする必要性などないかもしれませんが、メンバーのグループ分けの際などに使えそうですね。

↓Clickでanimation