#28 AIと一問一答アプリを作る②――四択にして、間違いを記録する

前回は、GASで一問一答アプリを作りました。
問題を見て、答えを確かめ、次へ進む。まずは動くものを作る回でした。

今回は、それを少し変えます。

四つの選択肢から答えを選ぶ。
選んだら、その場で○か×が出る。
問題ごとに、間違えた回数が残る。

追加したいのは、この三つです。
「答えを見る」だけだったアプリに、答えて確かめる流れを入れます。

問題は、スプレッドシートに置く

問題を増やすたびにコードを書き換えるのは、手間です。
そこで今回は、前回作ったスプレッドシートを、問題の保管場所として使います。データベースの役割を持たせる、と考えてください。

画面下部のシートタブを「問題」という名前にして（よく忘れます）、次の内容をコピーし、A1セルに貼り付けます。

ID	問題	選択肢1	選択肢2	選択肢3	選択肢4	正解
Q001	「走る」の品詞は？	動詞	形容詞	形容動詞	名詞	1
Q002	「美しい」の品詞は？	動詞	形容詞	形容動詞	名詞	2
Q003	「静かだ」の品詞は？	動詞	形容詞	形容動詞	名詞	3

1行目が見出しで、2行目から問題です。「正解」には、正しい選択肢の番号を1〜4で入れます。

IDは、その問題を区別する番号です。
間違えた回数をこのIDに結びつけます。同じ問題ならIDを残し、別の問題に入れ替える時は、新しいIDにします。

これで、問題や選択肢の修正は、表の中でできるようになります。
シートの変更は、アプリを再読み込みした時に反映する形にします。

今のコードを渡して、変更を頼む

同じスプレッドシートの「拡張機能」→「Apps Script」から、前回のコードを開きます。

書き換える前に、今のGAS側のコードとIndex.htmlを、二つとも控えておきます。動いていた状態に戻すためです。

その上で、次の依頼文と、現在の二つのコード（.gsと.html）をAIへ渡します。

以下のGASのコードとIndex.htmlを修正してください。
今は、問題を表示して「答えを見る」ボタンで答えを確認するアプリです。
これを四択問題に変えたいです。

【変更したいこと】
・問題をスプレッドシートから読み込む。
・四つの選択肢をボタンで表示する。
・選ぶと即座に○または×を表示する。
・間違えた時は、その問題の不正解回数を1増やす。
・同じ問題で連打して回数が増えないよう、回答後は選択肢を押せなくする。
・「次の問題」を押すと、判定を消して次へ進む。
・最後まで進んだら「もう一度」で最初に戻る。記録は残す。

【問題の表】
・シートタブ名は「問題」。1行目は見出し、2行目からデータ。
・A〜G列は、ID、問題、選択肢1、選択肢2、選択肢3、選択肢4、正解。
・正解は1〜4の番号。
・GAS側のSPREADSHEET_IDに、自分のIDを入れる構成にする。
・SpreadsheetApp.openByIdで開き、getDisplayValuesで読み込む。
・完全に空の行は除外する。入力不足、IDの重複、正解番号の誤りは知らせる。
・画面への読み込みはgoogle.script.runを使い、成功・失敗を処理する。
・読み込み中、問題がない時、失敗した時には、状態を表示する。

【記録】
・問題IDごとの不正解回数をlocalStorageに保存する。
・問題と一緒に「この問題の不正解：○回」と表示する。
・同じブラウザの保存領域で、再読み込み後も記録を読めるようにする。
・保存できない場合は、その旨を表示して今回の画面内だけで数える。
・ログインや、スプレッドシートへの学習記録の保存は追加しない。

【残したいこと】
・今の色、文字サイズ、余白など、画面の基本デザイン。
・問題番号の表示と、次へ進む・最初に戻る流れ。
・doGetでIndex.htmlを返す構成。
「答えを見る」ボタンは、今回の四択への変更に合わせて削除する。
それ以外の変更や機能追加は、勝手に行わない。

修正点を短く説明し、GAS側とIndex.htmlの全文を出してください。
IDの設定場所と、確認手順も教えてください。

以下に現在の二つのコードを貼ります。

今回は、間違えた回数をブラウザに保存します。
生徒ごとにログインして、別の端末でも記録を引き継ぐ仕組みは、ここでは作りません。
同じブラウザを複数人で使えば記録は混ざり、保存データを消せば回数も消えます。

まずは、自分で試すための記録です。

書き換えて、三つの動きを確かめる

AIから出てきたコードで、コード.gs とIndex.htmlをそれぞれ置き換えます。

「GAS側とIndex.htmlの全文を出してください。」
と指示文に入れているのは、そのまま「全選択→貼り付け」で全て置き換えることができるという小技です。
細かい箇所を修正してと出されても、コーディング初心者には修正箇所自体を探すのが難しいですから・・・

SPREADSHEET_IDには、スプレッドシートのURLの/d/と/editの間にある文字列を入れます。URL全体ではなく、IDの部分です。

「デプロイ」を行います。

直したファイルを置き換えて保存し、右上の「デプロイ」を選択
「新しいデプロイ」または「デプロイを管理」から編集を行います。

「新しいデプロイ」
この操作をすると、アプリ（サイト）のURLが変わります。

URLを変更したくない時は
「デプロイを管理」→「編集（ペンマーク）」→「バージョン」→「新バージョン」→「デプロイ」
この操作を行うと、URLが変わりません。

二つのファイルを保存し、シートを読み込むために求められる権限を確認します。（初回だけ出るので出ない場合でも安心して進めてください）
末尾が/devのものを開き、動きを見ます。

確認するのは、次の三つです。

- 四つの選択肢が表示され、選ぶとすぐに○か×が出るか。
- 間違えた問題だけ、回数が1増えるか。連打で増えないか。
- 「次の問題」「もう一度」が動き、再読み込み後も回数が残るか。

保存できない旨が出た場合は、今回の画面内での記録にとどまります。

さらに、シートの問題文を一つ直し、再読み込みしてみます。
コードを触らずに表示が変われば、問題の管理場所もつながっています。

うまくいかない時は、「動かない」だけでなく、どの操作で何が起きたかを伝えます。

「間違えて×が出たのに、不正解回数が増えません」
「次の問題に進んでも、前の×が残っています」

こう書くと、直してほしい場所が具体的になります。

「少し直して」が、少しで済まないこともある

ここまで、前回のアプリを後から修正する形で進めました。

ただ、AIに変更を頼むと、思った通りの動きにならなかったり、気に入っていたデザインまで変わったりすることがあります。

四択にしたかっただけなのに、色も配置も変わる。
回数を記録したかっただけなのに、「次の問題」が動かなくなる。

だから、変更したいことと、残したいことを両方伝えます。
依頼文に「デザインを維持する」「それ以外の機能は追加しない」と入れたのも、そのためです。

それでも、指示を書けば必ず守られる、とは限りません。
動いているコードを控え、書き換えた後は、前からできていた操作も確かめる。
後から直す時には、この手間が必要になります。

では、最初から四択にすることや、記録を残すことまで伝えておけばどうか。
途中で作り直す部分を、少し減らせるかもしれません。

次回の#29では、こうした手間を減らすための小技をまとめます。
最初の依頼に何を入れるか。修正する時に何を渡すか。気に入った見た目をどう伝えるか。

作りたいものを、AIと少しずつ具体的にしていくための話です。

スキ、コメントお待ちしております。