【AI教材を用いた加速学習①】v0でメモリカードゲーム教材の開発と無料公開！ーGoogleサイトで作るグループウェア(210)ー
🙇🏻いつも、Googleサイトで作るグループウェアを見ていただき、ありがとうございます！
この記事を読んで欲しい方
AIの利用に悩んでいる方、とくに学校の先生
AIでノーコードWebアプリを作ってみたい方
①v0でメモリカードゲーム教材の開発
以前、Claude3.5Sonnetでメモリカードゲーム教材を作成しましたが、それをv0に移植し、さらにReactにコンバートしました。
結果的に、非常に使いやすく、バージョンアップやデバッグもしやすくなりましたので、こちらに公開します。
内容的には、留学生向けにITパスポート国家試験教材の漢字の読みを覚えさせるメモリカードゲーム（トランプの神経衰弱ゲーム）になっています。
②画面の色とスコア・時間について
学生の中に、ディスレクシアの学生がいたため、見やすいように色やフォントの大きさが調整できるようにしてあります。
スコアは、カードが8枚のペア（計16枚）で表示されます。上手くペアが完成するとカードが消え、+10点がつきます。80点満点が最高得点です。ペアを間違えると-1点になりますが、得点は0点以下にはなりません。
時間は、サイトを開くかリセットボタンが押されてから経過秒数が表示されます。
もちろん、スコアは高い方が良く、秒数は短い方が良いです。一度起動した中での、最高得点と最短秒数が表示されますが、いちど画面を閉じてしまうとデータは消えます。
③問題の作成
タイトルや問題は、アプリの中のJSONファイル(game-data.json)で設定するようにしています。
問題は8問だけではなく、何問でも登録できますが、表示する8問がランダムに選択されます。データが何も入っていないと、カードには表示されません。
それ以外にも、デフォルト表示用のカードの裏面色、テキストの色、フォントの大きさ、カードの表面の色、カードの表面のストライプの色、カード表面の絵文字、カードが消える時の音のONOFFが設定できます。
JSONの内容を変えるときは、そのまま手入力で修正して、SaveすればOKです。（AIに問題を作らせることもできます。）
また、カードが全て開くと、ゲームクリアの文字が表示され、音が鳴り、紙吹雪が落ちるギミックが出ます。
③v0でアプリをフォーク（分岐して保存）できます
このアプリは、v0で動いていますので、v0を使っている方は、そのままフォーク可能です。
以下のリンクをクリックして、自分のv0環境にフォーク（分岐して保存）してください。無料のv0アカウントでもフォークできますし、デプロイ（サーバに保存してネットに公開：無料）もできます。
③まとめ
今回開発したメモリカードゲームは、実際の授業に組み込んで半年間実践した結果、従来のオーラルの授業だけでは身につかないレベルまで、学生は到達していました。
私はこれを、AI教材を用いた加速学習と呼んでいます。
また、このアプリはJSONファイルを書き換えるだけで、いろいろなものに応用可能ですし、こちらでお馴染みのGoogleサイトにアプリのURLを埋め込んで表示させ、動かすこともできます。
結果的には、Googleサイト＋GASで教材を作るよりも、Googleサイト＋v0で、さらに自由度のある仕組みを作ることができました。
学校でGoogleサイトを使って実践している先生方には、ぜひ利用していただきたいと思います。