クイズアプリ
4択クイズに答えるアプリ。Radiobutton・画面遷移・スコア管理の実装を学びます。
1. アプリ概要
Python基礎知識を問う4択クイズアプリです。10問のクイズがランダムな順番で出題され、各問題にラジオボタンで回答します。回答後に正解・不正解のフィードバックが表示され、全問終了するとスコア（得点 / 総問題数）と評価メッセージが表示されます。
このアプリはゲームカテゴリに分類される実践的なGUIアプリです。使用ライブラリは tkinter・random（どちらも標準ライブラリ） で、難易度は ★★☆ 普通 です。
tkinterの Radiobutton（単一選択ウィジェット）と Progressbar（進捗バー）を組み合わせ、クイズ特有の「出題→回答→採点→次の問題」という画面遷移を1クラスで管理します。状態管理（現在の問題番号・スコア）をインスタンス変数で保持する設計を学べます。
ソースコードは完全な動作状態で提供しており、コピーしてそのまま実行できます。まずは実行して動作を確認し、その後コードを読んで仕組みを理解しましょう。カスタマイズセクションでは問題を差し替えたり機能を拡張するアイデアも紹介しています。
2. 機能一覧
- 10問のPython基礎クイズをランダム順で出題
- 4択ラジオボタンによる回答入力
- プログレスバーと「N / 10」表示で進捗を可視化
- 回答直後に正解・不正解フィードバックを色付きで表示
- 回答後に選択肢を無効化して再クリックを防止
- 全問終了後にスコアと評価メッセージを表示
- 「もう一度」ボタンで問題をシャッフルしてリスタート
- 未選択のまま「回答する」を押すとメッセージで案内
3. 事前準備・環境
Python 3.10 以上 / Windows・Mac・Linux すべて対応
以下の環境で動作確認しています。
- Python 3.10 以上
- OS: Windows 10/11・macOS 12+・Ubuntu 20.04+
4. 完全なソースコード
右上の「コピー」ボタンをクリックするとコードをクリップボードにコピーできます。
import tkinter as tk
from tkinter import ttk, messagebox
import random
class App11:
"""クイズアプリ"""
QUESTIONS = [
{"q": "Pythonを作ったのは誰？", "choices": ["グイド・ヴァンロッサム", "ビル・ゲイツ", "リーナス・トーバルズ", "デニス・リッチー"], "ans": 0},
{"q": "Pythonのリストを定義するのに使う括弧は？", "choices": ["( )", "{ }", "[ ]", "< >"], "ans": 2},
{"q": "print() 関数はどのモジュールに含まれる？", "choices": ["os", "sys", "組み込み関数", "math"], "ans": 2},
{"q": "Pythonでコメントを書くときに使う記号は？", "choices": ["//", "#", "/*", "--"], "ans": 1},
{"q": "Pythonの辞書型でキーを取得するメソッドは？", "choices": [".values()", ".items()", ".keys()", ".get()"], "ans": 2},
{"q": "次のうちPythonの整数型はどれ？", "choices": ["float", "int", "str", "bool は違う"], "ans": 1},
{"q": "len([1,2,3]) の結果は？", "choices": ["1", "2", "3", "4"], "ans": 2},
{"q": "range(5) が生成する数列の最初の値は？", "choices": ["0", "1", "5", "-1"], "ans": 0},
{"q": "Pythonでクラスを定義するキーワードは？", "choices": ["function", "class", "def", "struct"], "ans": 1},
{"q": "for i in range(3): の繰り返し回数は？", "choices": ["2回", "3回", "4回", "1回"], "ans": 1},
]
def __init__(self, root):
self.root = root
self.root.title("クイズアプリ")
self.root.geometry("500x420")
self.root.configure(bg="#f8f9fc")
self.questions = random.sample(self.QUESTIONS, len(self.QUESTIONS))
self.current = 0
self.score = 0
self._build_ui()
self._load_question()
def _build_ui(self):
title_frame = tk.Frame(self.root, bg="#3776ab", pady=12)
title_frame.pack(fill=tk.X)
tk.Label(title_frame, text="Pythonクイズ",
font=("Noto Sans JP", 16, "bold"),
bg="#3776ab", fg="white").pack()
main_frame = tk.Frame(self.root, bg="#f8f9fc", padx=24, pady=16)
main_frame.pack(fill=tk.BOTH, expand=True)
# 進捗
self.progress_label = tk.Label(main_frame, text="", bg="#f8f9fc",
font=("Noto Sans JP", 10), fg="#666")
self.progress_label.pack(anchor="e")
self.progress_bar = ttk.Progressbar(main_frame, maximum=len(self.questions),
mode="determinate")
self.progress_bar.pack(fill=tk.X, pady=(2, 12))
# 問題文
self.question_label = tk.Label(main_frame, text="", bg="#f8f9fc",
font=("Noto Sans JP", 13, "bold"),
wraplength=440, justify="left")
self.question_label.pack(anchor="w", pady=(0, 14))
# 選択肢
self.radio_var = tk.IntVar(value=-1)
self.radio_btns = []
for i in range(4):
rb = ttk.Radiobutton(main_frame, text="", variable=self.radio_var, value=i)
rb.pack(anchor="w", pady=3)
self.radio_btns.append(rb)
# フィードバック
self.feedback_label = tk.Label(main_frame, text="", bg="#f8f9fc",
font=("Noto Sans JP", 12, "bold"))
self.feedback_label.pack(pady=8)
self.next_btn = ttk.Button(main_frame, text="回答する", command=self.answer)
self.next_btn.pack()
def _load_question(self):
q = self.questions[self.current]
self.question_label.config(
text=f"Q{self.current + 1}. {q['q']}")
for i, rb in enumerate(self.radio_btns):
rb.config(text=q["choices"][i], state=tk.NORMAL)
self.radio_var.set(-1)
self.feedback_label.config(text="")
self.next_btn.config(text="回答する")
self.progress_label.config(
text=f"{self.current + 1} / {len(self.questions)}")
self.progress_bar["value"] = self.current
def answer(self):
if self.next_btn.cget("text") == "次の問題":
self.current += 1
if self.current >= len(self.questions):
self._show_result()
else:
self._load_question()
return
sel = self.radio_var.get()
if sel == -1:
messagebox.showinfo("情報", "選択肢を選んでください")
return
q = self.questions[self.current]
for rb in self.radio_btns:
rb.config(state=tk.DISABLED)
if sel == q["ans"]:
self.score += 1
self.feedback_label.config(text="✅ 正解！", fg="#27ae60")
else:
correct = q["choices"][q["ans"]]
self.feedback_label.config(text=f"❌ 不正解。正解: {correct}", fg="#e74c3c")
self.next_btn.config(text="次の問題")
def _show_result(self):
total = len(self.questions)
for widget in self.root.winfo_children():
widget.destroy()
frame = tk.Frame(self.root, bg="#f8f9fc")
frame.pack(fill=tk.BOTH, expand=True, padx=40, pady=40)
tk.Label(frame, text="クイズ終了！", font=("Noto Sans JP", 20, "bold"),
bg="#f8f9fc").pack(pady=(0, 20))
tk.Label(frame, text=f"スコア: {self.score} / {total}",
font=("Noto Sans JP", 24, "bold"), bg="#f8f9fc",
fg="#3776ab").pack()
pct = self.score / total * 100
msg = "完璧！" if pct == 100 else "素晴らしい！" if pct >= 80 else "もう少し！" if pct >= 60 else "頑張ろう！"
tk.Label(frame, text=msg, font=("Noto Sans JP", 14), bg="#f8f9fc").pack(pady=10)
ttk.Button(frame, text="もう一度", command=self._restart).pack(pady=20)
def _restart(self):
self.questions = random.sample(self.QUESTIONS, len(self.QUESTIONS))
self.current = 0
self.score = 0
for widget in self.root.winfo_children():
widget.destroy()
self._build_ui()
self._load_question()
if __name__ == "__main__":
root = tk.Tk()
app = App11(root)
root.mainloop()
5. コード解説
クイズアプリのコードを詳しく解説します。クラスベースの設計で「問題データ」「UI構築」「採点ロジック」「結果表示」を明確に分離しています。
クラス定数 QUESTIONS とコンストラクタ
問題データはクラス定数 QUESTIONS（辞書のリスト）として定義します。各辞書は q（問題文）・choices（4択リスト）・ans（正答インデックス）の3キーで構成されます。__init__ では random.sample() で問題順をシャッフルし、self.current と self.score で進行状態を管理します。
QUESTIONS = [
{"q": "Pythonを作ったのは誰？",
"choices": ["グイド・ヴァンロッサム", "ビル・ゲイツ", "リーナス・トーバルズ", "デニス・リッチー"],
"ans": 0},
# ... 残り9問
]
def __init__(self, root):
self.root = root
self.root.title("クイズアプリ")
self.root.geometry("500x420")
self.questions = random.sample(self.QUESTIONS, len(self.QUESTIONS))
self.current = 0 # 現在の問題番号（0始まり）
self.score = 0 # 正解数
self._build_ui()
self._load_question()_build_ui()：Progressbar と Radiobutton の配置
ttk.Progressbar の maximum を問題数に設定し、進捗を視覚化します。4つの ttk.Radiobutton は同じ IntVar（初期値 -1）を共有し、どれが選ばれたかを整数インデックスで管理します。
self.progress_bar = ttk.Progressbar(main_frame,
maximum=len(self.questions),
mode="determinate")
self.radio_var = tk.IntVar(value=-1) # 未選択状態は -1
self.radio_btns = []
for i in range(4):
rb = ttk.Radiobutton(main_frame, text="",
variable=self.radio_var, value=i)
rb.pack(anchor="w", pady=3)
self.radio_btns.append(rb)answer()：ボタンの二役切り替えパターン
「回答する」と「次の問題」を同じボタンで兼用します。cget("text") でボタンのラベルを読み取り、現在のフェーズ（採点中か遷移中か）を判断するシンプルな状態管理パターンです。回答後はすべての選択肢を tk.DISABLED にして二重回答を防ぎます。
def answer(self):
if self.next_btn.cget("text") == "次の問題":
self.current += 1
if self.current >= len(self.questions):
self._show_result()
else:
self._load_question()
return
sel = self.radio_var.get()
if sel == -1:
messagebox.showinfo("情報", "選択肢を選んでください")
return
q = self.questions[self.current]
for rb in self.radio_btns:
rb.config(state=tk.DISABLED) # 回答後は選択肢を無効化
if sel == q["ans"]:
self.score += 1
self.feedback_label.config(text="✅ 正解！", fg="#27ae60")
else:
correct = q["choices"][q["ans"]]
self.feedback_label.config(text=f"❌ 不正解。正解: {correct}", fg="#e74c3c")
self.next_btn.config(text="次の問題")_show_result()：既存ウィジェットを全削除して結果画面に切り替え
winfo_children() で全ウィジェットを取得し destroy() で削除することで、画面をまるごと入れ替えます。スコアに応じた評価メッセージは条件式（三項演算子の連鎖）で1行で記述しています。
def _show_result(self):
total = len(self.questions)
for widget in self.root.winfo_children():
widget.destroy() # 全ウィジェット削除
frame = tk.Frame(self.root, bg="#f8f9fc")
frame.pack(fill=tk.BOTH, expand=True, padx=40, pady=40)
tk.Label(frame, text=f"スコア: {self.score} / {total}",
font=("Noto Sans JP", 24, "bold"), fg="#3776ab",
bg="#f8f9fc").pack()
pct = self.score / total * 100
msg = "完璧！" if pct == 100 else "素晴らしい！" if pct >= 80 else "もう少し！" if pct >= 60 else "頑張ろう！"
tk.Label(frame, text=msg, font=("Noto Sans JP", 14), bg="#f8f9fc").pack(pady=10)
ttk.Button(frame, text="もう一度", command=self._restart).pack(pady=20)6. ステップバイステップガイド
このアプリをゼロから自分で作る手順を解説します。コードをコピーするだけでなく、実際に手順を追って自分で書いてみましょう。
-
1ファイルを作成する
新しいファイルを作成して app011.py と保存します。必要な import 文（tkinter・ttk・messagebox・random）を先頭に記述します。
-
2QUESTIONS リストを定義する
クラス定数として QUESTIONS を定義します。辞書のリスト形式で「q・choices・ans」の3キーを持たせます。まず2〜3問だけ書いて動作確認しましょう。
-
3__init__ と _build_ui() を実装する
ウィンドウ設定・random.sample() によるシャッフル・state 変数（current・score）の初期化を行います。次に _build_ui() でタイトルバー・プログレスバー・問題文ラベル・Radiobutton 4個・フィードバックラベル・ボタンを配置します。
-
4_load_question() を実装する
現在のインデックスから問題データを取得し、question_label・各ラジオボタンのテキスト・プログレスバー値を更新します。ラジオボタンの IntVar を -1 にリセットすることを忘れずに。
-
5answer() で採点ロジックを実装する
sel == -1 なら未選択として案内メッセージを表示します。正誤を判定し feedback_label の色とテキストを切り替えます。ボタンテキストを「次の問題」に変えて、次回クリック時に次の問題へ遷移するようにします。
-
6_show_result() を実装する
winfo_children() で全ウィジェットを削除し、スコアと評価メッセージを表示します。「もう一度」ボタンに _restart() をバインドします。
-
7_restart() を実装して完成
問題をシャッフルし直し、state をリセットして全ウィジェットを再構築します。通しで動作確認し、問題数・テキスト・フォントを好みに調整して完成です。
7. カスタマイズアイデア
基本機能を習得したら、以下のカスタマイズに挑戦してみましょう。少しずつ機能を追加することで、Pythonのスキルが飛躍的に向上します。
💡 問題ジャンルを追加する
QUESTIONS にジャンルキー（例: "genre": "構文"）を追加し、ComboboxやMenubuttonでジャンルを絞り込んで出題できるようにしましょう。
💡 制限時間機能を追加する
root.after(1000, countdown) を使って1問ごとにタイマーを動かし、時間切れで自動的に次の問題に進む機能を実装しましょう。
💡 問題をJSONファイルから読み込む
QUESTIONS の内容を questions.json に書き出し、起動時に json.load() で読み込むようにすると、コードを変更せずに問題を追加できます。
💡 正解した問題・間違えた問題を記録する
苦手問題リストをリストに保存し、「苦手問題のみ再挑戦」モードを追加しましょう。json でファイル保存すれば次回起動時も引き継げます。
8. よくある問題と解決法
❌ 日本語フォントが表示されない・文字化けする
原因：指定したフォント名（Noto Sans JP 等）がシステムに存在しない場合があります。
解決法：font 引数を省略するか、tkinter.font.families() で利用可能なフォントを確認してから指定してください。
❌ ラジオボタンを選ばずに「回答する」を押しても何も起きない
原因：messagebox のウィンドウがメインウィンドウの後ろに隠れることがあります。
解決法：messagebox.showinfo() の親ウィンドウを self.root に指定（parent=self.root）すると前面に表示されます。
❌ 「もう一度」を押しても前回の問題が残って表示が崩れる
原因：_restart() の中で全ウィジェットを destroy() してから再構築する必要があります。
解決法：_restart() 内で for w in self.root.winfo_children(): w.destroy() を必ず呼んでから _build_ui() と _load_question() を呼んでください。
9. 練習問題
アプリの理解を深めるための練習問題です。難易度順に挑戦してみてください。
-
課題1：問題を追加する
QUESTIONS リストに自分でPython問題を3問追加してみましょう。辞書の形式（q・choices・ans）を正しく書けるか確認してください。
-
課題2：正解率を%で表示する
結果画面に「正解率: 80%」のように百分率を表示してみましょう。f文字列と整数変換（
int()）を活用してください。 -
課題3：不正解問題の解説を表示する
不正解時に「正解: ◯◯◯」だけでなく、簡単な解説文も表示できるようにしましょう。QUESTIONS 辞書に
"hint"キーを追加して実装してみてください。