TkinterでAI学習用のGUIクイズアプリ作ってみた！

はじめに

こんなものを作っていきます！

ソースコードはこちら↓
https://github.com/Kentea-Watanabe/Qualification_measures

全体の構成

• 問題の取得
• 問題の表示
• 解答の表示
• 問題の削除

問題の取得

問題と選択肢をcsvファイルで定義します。
答えのindexを最後に指定してますが0からスタートになっていることに注意。

問題文,解答1,解答2,解答3,解答4,答え
第一次AIブームとは？,推論と探索,学習と検証,エッジとノード,裸者と死者,0
第二次AIブームとは？,制御システム,受信システム,エキスパートシステム,輸送システム,2

問題文たちをリストで取得します。

self.quiz_list = [] # クイズデータリスト

df = pd.read_csv(CSV_FILE)
# CSVの各行をリスト化
self.quiz_list = [list(quiz) for quiz in zip(df["問題文"],df["選択肢1"],df["選択肢2"],df["選択肢3"],df["選択肢4"],df["答え"])]

このような2次元リストで取得できます～

[['第一次AIブームとは？', '推論と探索', '学習と検証', 'エッジとノード', '裸者と死者', 0], ['第二次AIブームとは？', '制御システム', '受信システム', 'エキスパートシステム', '輸送システム', 2]]

問題の表示

リストの番号で指定して、問題文を表示します。

def get_quiz(self):   # 問題文の表示
        question = tk.Label(self.master, text=self.quiz_list[0][0], width=20, height=5)
        # question = tk.Message(text=quiz_list[0][0])
        # クリックイベントの指定
        select1 = tk.Button(self.master, text = self.quiz_list[0][1], 
                            command = self.button_click_anser, # クリック時に呼び出されるメソッド名
                            width = 20, height = 2
                            )
        select2 = tk.Button(self.master, text = self.quiz_list[0][2], 
                            command = self.button_click_anser, # クリック時に呼び出されるメソッド名
                            width = 20, height = 2
                            )
        select3 = tk.Button(self.master, text = self.quiz_list[0][3], 
                            command = self.button_click_anser, # クリック時に呼び出されるメソッド名
                            width = 20, height = 2
                            )
        select4 = tk.Button(self.master, text = self.quiz_list[0][4], 
                            command = self.button_click_anser, # クリック時に呼び出されるメソッド名
                            width = 20, height = 2
                            )
        # ボタンの配置
        question.grid(row=0, column=1)
        select1.grid(row=5, column=1)
        select2.grid(row=5, column=2)
        select3.grid(row=5, column=3)
        select4.grid(row=5, column=4)

tk.Buttonの引数にcommandを追加すると、ボタンが押されたときに関数を呼び出せます。
なので、

command = self.button_click_anser

のようにすると、ボタンを押した後にbutton_click_anser()の関数を呼び出せます。
こちらの関数で解答の表示を行います。

解答の表示

ここでは、解答の表示と次の問題へと遷移させるボタンを作成します。

def button_click_anser(self):
        # 答えの表示
        anser_index = self.quiz_list[0][5] + 1
        self.anser = tk.Label(self.master, text="答え : " + self.quiz_list[0][anser_index], width=20, height=5)
        self.next = tk.Button(self.master, text = "Next", command = self.quiz_remove,width = 20, height = 2)
        # ボタンの配置
        self.anser.grid(row=6, column=1)
        self.next.grid(row=7, column=4)

問題の削除

button_click_anser関数でNextボタンが押されたときの処理です。
ここでは、すでに扱った問題を削除します。

def quiz_remove(self):
        # 答えの表示
        self.quiz_list.pop(0)
        self.anser.destroy() # 次の問題に移るので、解答ボタンの削除
        self.next.destroy() # 次の問題に移るので、Nextボタンの削除
        if self.quiz_list:
            # まだクイズがある場合は次のクイズを表示する
            self.get_quiz()
        else:
            # もうクイズがない場合はアプリを終了する
            self.end_app()

pop(0)で問題リストから問題を削除
self.anser.destroy()で解答ボタンの削除
self.next.destroy()でNextボタンの削除
※self.anser.destroy(), self.next.destroy()をしないと問題表示画面に戻った際に、解答のボタンとNextボタンが残ってしまいます。

参考

https://imagingsolution.net/program/python/tkinter/tkinter_create_button/
https://daeudaeu.com/tkinter_quiz/