組合せクイズの作成ページ

以下の内容をもとに、AB組合せクイズ(マッチング)用の対応リストを作ってください。

【目的】
- 学習者がAとBを対応づけて学べるようにしたいです。
- 出力は、そのままAB組合せクイズ作成ツールに貼り付けやすい形式にしてください。

【出力ルール】
- 1行につき1組
- 形式は「A,B」
- 番号、見出し、余計な説明は書かない
- AもBもできるだけ８文字以内。ただし、専門用語などで短くする余地がない場合は８文字を超えてもよい。
- 必要なら語句を少し整えてよい
- Aの群もBの群も、重複しないようにする
- 組数は10組以上、かつ、20組を超えないようにする

では、以下を素材にして作成してください。添付資料がある場合はそれも素材として参考にしてください。

【素材】
（ここに資料やメモなどの情報をかく。）

似たようなクイズ作成アプリを自分でも作ってみたい方向けの例です。まずは叩き台をつくってもらい、あとから少しずつ、希望を伝えながら直していく形で進めましょう。

「学習用のAB組合せクイズ(マッチング)」を書き出すための簡単な作成ツールを、HTML・CSS・JavaScriptだけで、1つのHTMLファイルとして作ってください。

【やりたいこと】
- 下にA群、上にB群を表示するAB組合せクイズ(マッチング)を作る
- 学習者は対応するもの同士をクリックして選ぶ
- 正解・不正解がわかる
- すべて正解したら終了画面を出す
- スマホでも使いやすくする

【作成ツール側に入れたいこと】
- タイトルを入力できる
- ABリストを入力できる
- 制限時間を設定できる
- 同時に出す組数を設定できる
- 文言を一部編集できる
- プレビューで確認できる
- 完成したゲームを、カスタムHTMLコードとして書き出せる
- 書き出したコードをワンクリックでコピーできる

【仕様】
- 外部ライブラリは使わない
- 日本語UIにする
- HTML・CSS・JavaScriptを1つのHTMLファイルにまとめる
- 保存してブラウザでそのまま開けば動く形にする
- コードには適度にコメントを入れる
- あとから修正しやすいように、構造をわかりやすくする

【進め方】
- まずは動く最小構成の初版を出してください。
- 細かい仕様で決める必要がある点があれば、ユーザーに質問してください。
- ただし、質問がなくても作れる基本部分は先に作ってください。
- 修正案を出すときは、①「保存してそのまま使えるHTML全文を出す」か、もしくは ②「すでに出来上がっているHTMLを検索と置換で編集できるように、該当箇所をコードブロックで示す」のいずれかの方法で行ないます。どちらの方法にするかは、ユーザーの好みを聞いた上で判断しなさい。