ChatGPTに、簡単な2択式クイズゲームを作成してもらった

Python Flask

ChatGPTに、簡単な2択式クイズゲームを作成してもらいました。コードはPythonとhtmlです。

クイズを定義するテキストファイル(csv形式)と、クイズに使う画像(猫と虎を選ばせる画像)は、事前に用意してます。

ChatGPTにプロトコルを投げては訂正を繰り返していたらエラーで止まってしまうようになったので、途中から仕切り直しでBing_AI-Chatを使ってます。少し込み入った処理になってくると、さすがにプロンプト一発OKを出すのは苦しいですね。小一時間ほど試行錯誤していたのですが、その経過を記載するのは面倒なので、ほぼ成功までいけたプロンプトだけ紹介します。

指示文(プロンプト):

A or Bを選択する2択式のクイズゲームをPythonとFlaskで作りたいです。
初めに問題文を定義したテキストファイルを読み込みます。 問題文を定義するテキストファイルは以下のように形式とします。


#問題定義ファイル
文章1,A,画像a1.jpg,画像b1.jpg
文章2,B,画像a2.jpg,画像b2.jpg
文章3,A,画像a3.jpg,画像b3.jpg

最初のカラムが問題文で、2つ目のカラムが正解の選択肢、3つ目のカラムは問題文と一緒に表示する画像で、4つ目のカラムは正解判定時に表示する画像です。

クイズは以下の流れで進みます。
1. 問題1を表示する。
2. 二択(A または B)で回答する。
3. 正解判定。正解判定時用の画像も表示。
4. 次に進むボタンをクリックすると次の問題を表示する。
5. すべての問題が終わったら「終了」と表示する。
6. クイズはWebブラウザで動作する。

回答:

# 2択式クイズゲーム

# Flaskをインポートする
from flask import Flask, render_template, request, session

# 問題文を定義するテキストファイルを読み込む
import csv
with open("questions.csv", encoding="utf-8") as f:
    reader = csv.reader(f)
    questions = list(reader)[1:] # ヘッダーを除く

# Flaskアプリケーションを作る
app = Flask(__name__)

# セッションを使うために秘密鍵を設定する
app.secret_key = "secret"

# ルートパスにアクセスしたときの処理
@app.route("/")
def index():
    # セッションに問題数と正解数を初期化する
    session["count"] = 0
    session["correct"] = 0
    # 問題文をランダムに並び替える
    import random
    random.shuffle(questions)
    # 最初の問題文と画像を取り出す
    text, answer, image1, image2 = questions[0]
    # 問題ページを表示する
    return render_template("question.html", text=text, image=image1)

# /answerパスにアクセスしたときの処理
@app.route("/answer", methods=["POST"])
def answer():
    # ユーザーから回答を受け取る
    user_answer = request.form["answer"]
    # 現在の問題数と正解数をセッションから取り出す
    count = session["count"]
    correct = session["correct"]
    # 正解判定
    if user_answer == questions[count][1]:
        # 正解数を増やす
        correct += 1
        # 正解メッセージと画像を表示する
        message = "正解！"
        image = questions[count][3]
    else:
        # 不正解メッセージと画像を表示する
        message = "不正解..."
        image = questions[count][3]
    # 次の問題があれば次に進むボタンを表示する
    if count < len(questions) - 1:
        next_button = True
    else:
        next_button = False
    # 回答ページを表示する
    return render_template("answer.html", message=message, image=image, next_button=next_button)

# /nextパスにアクセスしたときの処理
@app.route("/next")
def next():
    # 問題数と正解数をセッションから取り出す
    count = session["count"]
    correct = session["correct"]
    # 問題数を増やす
    count += 1
    # 次の問題文と画像を取り出す
    text, answer, image1, image2 = questions[count]
    # セッションに問題数と正解数を更新する
    session["count"] = count
    session["correct"] = correct
    # 問題ページを表示する
    return render_template("question.html", text=text, image=image1)

# /resultパスにアクセスしたときの処理
@app.route("/result")
def result():
    # 正解数をセッションから取り出す
    correct = session["correct"]
    # 結果メッセージを作る
    message = f"{len(questions)}問中{correct}問正解でした！"
    # 結果ページを表示する
    return render_template("result.html", message=message)

# Flaskアプリケーションを実行する
if __name__ == "__main__":
    app.run(debug=True)

question.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>クイズゲーム</title>
</head>
<body>
    <h1>クイズゲーム</h1>
    <p>{{ text }}</p>
    <img src="/static/{{ image }}" alt="画像" width="300">
    <form action="/answer" method="POST">
        <input type="radio" name="answer" value="A">A
        <input type="radio" name="answer" value="B">B
        <input type="submit" value="回答する">
    </form>
</body>
</html>

answer.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>クイズゲーム</title>
</head>
<body>
    <h1>クイズゲーム</h1>
    <p>{{ message }}</p>
    <img src="/static/{{ image }}" alt="画像" width="300">
    {% if next_button %}
        <a href="/next">次の問題へ</a>
    {% else %}
        <a href="/result">結果を見る</a>
    {% endif %}
</body>
</html>

result.html


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>クイズゲーム</title>
</head>
<body>
    <h1>クイズゲーム</h1>
    <p>{{ message }}</p>
    <a href="/">もう一度挑戦する</a>
</body>
</html>
結果:

一応、成功しました。ただ、いろいろ不備もあります。選択肢を選ばずに回答するとエラーになったり、結果画面に正解数が正しく反映されなかったり、画像のパスの指定が変だったり。もう少しプロンプトを練ればいけそうですが。。。