【HTML + JavaScript】漢字や読み仮名カードをドラッグ＆ドロップする2字熟語クイズ (PC+スマートフォン両対応)

この記事は、以下の記事で実装したスクリプトを利用して2字熟語クイズを作ったものです。

• 漢字検定を受検予定だが、漢字以前に言葉が難しいという人のために作ったものです。
• 思った動きになるよう実装しただけで、前回に輪をかけて知見も汎用性もないですが、以下の箇所を変更すれば「4字熟語クイズ」「難読地名クイズ」などに応用できます (?)。
  https://github.com/CookieBox26/games/blob/32f03fc/misc/card_3.html#L236-L293

作成物

以下が作成した2字熟語クイズゲームです。
https://cookiebox26.github.io/games/misc/card_3.html

ソースは上のページのソースを表示すればみられますが以下 (1ファイル) です。
https://github.com/CookieBox26/games/blob/32f03fc/misc/card_3.html

お手元のデバイスがスマートフォンであるか、ウィンドウの横幅が狭い場合は、以下のようなレイアウトになります。カードに正しい漢字を置くと漢字が固定されカードが光ります。すべてのカードを正しい置き場に運ぶと次ラウンドに進みます。
　

横長のデバイスだと以下のようなレイアウトになるはずです。

「？」ボタンをクリックするとカード10枚モードに切り替えられます (ただし横幅を一定以上確保しておかないと切り替わりません)。

簡単な説明

JavaScript 部分は以下です。
https://github.com/CookieBox26/games/blob/32f03fc/misc/card_3.html#L230-L710

• クイズのセットアップ (カード置き場やカードや漢字などの要素の作成) は init() からたどってください。
  • 2 * nQ 個の正解漢字に加え、nE - 2 * nQ 個のダミー漢字が用意されます。
• 要素のドラッグドロップを実現する箇所は // ----- パソコン・スマートフォン共通のドラッグドロップ用 ----- 以下をみてください。前回記事からほとんど変わりません。
  • 前回記事からそうしていましたが、関数 isDroppableBox(element) に「そこに要素をドロップできるか」を集約しているので、実装時にパソコンとスマートフォンのイベントの差異を意識する必要はありませんでした。
    • ただし、カードに正しい漢字たちが置かれたらもうドラッグできないようにしたかったため、そこで意識する必要がありました (スマートフォン向けには「item クラスはドラッグできる」としてあるのでこのクラスさえはがせばよいですが、パソコンでは「draggable 属性がドラッグできる」なのでこの属性をはがします)。https://github.com/CookieBox26/games/blob/32f03fc/misc/card_3.html#L489-L497
• 要素が正しい配置にドラッグドロップされたかの正解判定は judge(element) からたどってください。ドラッグ中のものが手放されるたびに (あるいはスマートフォンの画面から指が離れるたびに) これを走らせています。
  • これを書いていて気づきましたが、何か手放すたびに正解判定する必要はなく、その結果要素の appenChild が発生したときだけ正解判定すればよいと思います。
  • それぞれの漢字の要素には ID があるわけではなく、漢字の並びが採点されるので、同じ漢字を含む言葉が同時に出題されても破綻はしません。他方、正解が複数ありうる場合には対応していません (「称賛」でなく「賞賛」でもよいというような)。
  • 判定の結果正解であった場合は、モーダルで画面を多い、その中央に配置した白いメッセージ欄でプレイヤーに「ミッションコンプリート！」と伝えます (下図)。メッセージ欄が body の中央にくるようにモーダルを body の大きさに同期させています。
    
• その他の補足事項として、
  • カード置き場を画面の一番目に付く場所に置き＆画面を有効活用するため、パソコン向けとスマートフォン向けとで order プロパティで要素の順序を変更しています (div#progress-container と div#answer-container が逆になっています)。

備考

• 仮にもしこのスクリプトをカスタマイズして使用される方がいらっしゃった場合、helpMessage の連絡先は変更の上でご使用ください。
• このようなクイズをつくった経緯は、最近ポケポケが登場したので、カードの上にエネルギーをドラッグ＆ドロップするインターフェースにしたかったからなのですが、完成したクイズを想定ユーザである子どもに遊んでもらいポケポケらしさがあるか訊いたら、「エネルギーをつけた結果、攻撃ができるようにしてほしい」といわれました。何を攻撃すればよいのかわかりません。