past_exam_dropdown = gr.Dropdown(label="選擇考古題", choices=past_exam_choices)

app.py

@@ -464,6 +464,17 @@ def generate_chinese_evaluation_table(sys_content, user_prompt, text):
 
     return gr_update
 
+def load_exam_data():
+    with open("exams.json", "r") as file:
+        data = json.load(file)
+    return data
+
+def update_exam_contents(selected_title):
+    exams = load_exam_data()["exams"]
+    for exam in exams:
+        if exam["title"] == selected_title:
+            return exam["title"], exam["question"], exam["hint"], exam["image_url"]
+
    
 with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary_hue=gr.themes.colors.orange)) as demo:
     # ===== 英文段落寫作練習 =====
@@ -1452,46 +1463,27 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                 with gr.Row():
                     gr.Markdown("## 選擇考古題")
                 with gr.Row():
-                    past_exam_choices = ["98學測","99學測","100學測"]
-                    past_exam_dropdown = gr.Dropdown(label="選擇考古題", choices=past_exam_choices, value="98學測")
+                    exams_data = load_exam_data()
+                    past_exam_choices = [exam["title"] for exam in exams_data["exams"]]
+                    past_exam_dropdown = gr.Dropdown(label="選擇考古題", choices=past_exam_choices)
                 with gr.Row():
-                    gr.Markdown("## 98 學測")
+                    past_exam_title = gr.Markdown()
                 with gr.Row():
                     with gr.Column():
                         with gr.Row():
-                            gr.Markdown("""### 
-                                - 說明︰依提示寫一篇英文作文，文長至少 120 個單詞（words）。
-                                - 提示︰ 請根據右方圖片的場景，描述整個事件發生的前因後果。文
-                                章請分兩段，第一段說明之前發生了什麼事情，並根據圖片內容描
-                                述現在的狀況；第二段請合理說明接下來可能會發生什麼事，或者
-                                未來該做些什麼。
-                            """)
-                        with gr.Row():
-                            with gr.Accordion("下筆提示", open=False):
-                                gr.Textbox("如何下筆：先用常理推敲內容。根據段落提示書寫，必須加入更多細節例證才會生動寫實。", label="",lines=3)
-                        with gr.Row():
-                            gr.Markdown("## 第一段說明之前發生了什麼事情，並根據圖片內容描述現在的狀況")
+                            past_exam_question = gr.Markdown()
                         with gr.Row():
-                            with gr.Accordion("第一段提示", open=False):
-                                gr.Markdown("""
-                                - 之前發生了什麼事情
-                                    - 房子在哪裡？住什麼人？他們的生活（對比災難發生後）。
-                                - 根據圖片內容描述現在的狀況
-                                    - 想像什麼原因造成現在的結果：地震？土石流？
-                                    - 描述災難發生造成現況，如果能用第一人稱描寫災難發生的細
-                                    - 節及自己的感受會更吸引人。                                
-                                """)
-                        with gr.Row():
-                            gr.Markdown("## 第二段請合理說明接下來可能會發生什麼事，或者未來該做些什麼")
-                        with gr.Row():
-                            with gr.Accordion("第一段提示", open=False):
-                                gr.Markdown("""
-                                - 說明接下來可能會發生什麼事，或者未來該做些什麼
-                                    - 災難後可能發生的事，例如重回家園看到破舊的景象、災難損壞、如果災難重建等等。
-                                """)
-                        
+                            with gr.Accordion("提示", open=False):
+                                with gr.Row():
+                                    past_exam_hint = gr.Markdown()
                     with gr.Column():
-                        gr.Image("https://storage.googleapis.com/jutor/98%E5%AD%B8%E6%B8%AC%E4%BD%9C%E6%96%87-%E5%9C%96.png")
+                        past_exam_image = gr.Image()
+                    
+                    past_exam_dropdown.select(
+                        fn=update_exam_contents,
+                        inputs=[past_exam_dropdown],
+                        outputs=[past_exam_title, past_exam_question, past_exam_hint, past_exam_image]
+                    )
 
                 with gr.Row():
                     with gr.Column():

exams.json

@@ -0,0 +1,22 @@
+{
+  "exams": [
+    {
+      "title": "# 98 學測",
+      "question": "### 說明︰依提示寫一篇英文作文，文長至少 120 個單詞（words）。\n### 提示︰ 請根據右方圖片的場景，描述整個事件發生的前因後果。文章請分兩段，第一段說明之前發生了什麼事情，並根據圖片內容描述現在的狀況；第二段請合理說明接下來可能會發生什麼事，或者未來該做些什麼。",
+      "hint": "## 如何下筆：\n- 先用常理推敲內容。根據段落提示書寫，必須加入更多細節例證才會生動寫實。\n## 第一段說明之前發生了什麼事情，並根據圖片內容描述現在的狀況\n- 之前發生了什麼事情\n    - 房子在哪裡？住什麼人？他們的生活（對比災難發生後）。\n- 根據圖片內容描述現在的狀況\n    - 想像什麼原因造成現在的結果：地震？土石流？\n    - 描述災難發生造成現況，如果能用第一人稱描寫災難發生的細節及自己的感受會更吸引人。\n## 第二段請合理說明接下來可能會發生什麼事，或者未來該做些什麼\n- 說明接下來可能會發生什麼事，或者未來該做些什麼\n    - 災難後可能發生的事，例如重回家園看到破舊的景象、災難損壞、如果災難重建等等。",
+      "image_url": "https://storage.googleapis.com/jutor/98%E5%AD%B8%E6%B8%AC%E4%BD%9C%E6%96%87-%E5%9C%96.png"
+    },
+    {
+      "title": "# 99 學測",
+      "question": "### 說明︰依提示寫一篇英文作文，文長至少 120 個單詞（words）。\n### 提示：請仔細觀察以下三幅連環圖片的內容，並想像第四幅圖片可能的發展，寫出一個涵蓋連環圖片內容並有完整結局的故事。",
+      "hint": "### 如何下筆：\n- 先瞭解三幅圖片的內容，找到角色及故事情節。\n- 連環圖畫通常都會有道德教訓 moral lesson, 這故事的教訓是什麼？「拾金不眛」？找到教訓後，就可以決定第四幅圖的內容。\n- 利用故事山的寫法寫成三段。\n\n### 第一段介紹段：\n- 介紹主要角色和背景資訊。\n- 也可以説明故事主旨（道德教訓）\n### 第二段主體段：\n- 引入主要問題或挑戰，主角撿到一個錢包，裡面有許多錢，他該怎麼做？這些錢可以買許多他想要的東西，故事情節向高潮發展。\n- 然後是轉折點，通常是最激動人心或最具戲劇性的部分：他想到丟了錢的人需要這筆錢急用，一定非常著急。\n- 主角做出關鍵決定或行動。\n### 第三段結論段：\n- 重申道德教訓給故事結尾。",
+      "image_url": "https://storage.googleapis.com/jutor/99%E5%AD%B8%E6%B8%AC%E4%BD%9C%E6%96%87-%E5%9C%96.png"
+    },
+		{
+			"title": "# 100 學測",
+			"question": "### 說明︰依提示寫一篇英文作文，文長至少 120 個單詞（words）。\n### 提示︰請仔細觀察以下三幅連環圖片的內容，並想像第四幅圖片可能的發展，寫出一個涵蓋連環圖片內容並有完整結局的故事。",
+			"hint": "### 如何下筆：\n- 瞭解三幅圖片的內容，找到角色及故事情節。\n- 這個故事很能激發想像力，可有各種不同的情節發展。如果時間倉促無法發揮，就按照圖片內容來寫。結局可能是女孩接受了他或拒絕了他。他有什麼感受？\n\n### 第一段介紹段：\n- 介紹主要角色和背景資訊。\n- 也可以寫出故事主旨（勇於表達自己的感情）\n\n### 第二段主體段：\n- 引入主要問題或挑戰，主角在舞會碰到心儀的女孩，不知如何表達愛慕之意，最後決定拿著吉他在她門前彈唱，結果把鄰居都吵醒了，被大罵一頓，非常尷尬，故事情節向高潮發展，\n- 然後是轉折點，通常是最激動人心或最具戲劇性的部分：女孩居然現身接受了他的告白。\n\n### 第三段結論段：\n- 重申道德教訓給故事結尾。",
+			"image_url": "https://storage.googleapis.com/jutor/100%E5%AD%B8%E6%B8%AC%E4%BD%9C%E6%96%87-%E5%9C%96.jpg"
+		}		
+  ]
+}