From 15c4bffe3da9692145f441a1e9a314bd2944bdbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Fri, 19 Sep 2025 23:36:53 +0800
Subject: [PATCH] =?UTF-8?q?ux:=20=E5=84=AA=E5=8C=96=E9=81=B8=E6=93=87?=
 =?UTF-8?q?=E9=A1=8C=E6=A8=A1=E5=BC=8F=E7=9A=84=E5=B0=8D=E9=BD=8A=E6=96=B9?=
 =?UTF-8?q?=E5=BC=8F=E5=92=8C=E7=AD=94=E6=A1=88=E5=9B=9E=E9=A5=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 統一選擇題內容為左對齊：問題文字、選項按鈕、答案回饋
- 完善答案顯示：答對和答錯時都顯示詞彙、音標和播放功能
- 改善學習回饋體驗，確保用戶獲得完整的發音資訊
- 優化視覺一致性，與翻卡模式保持統一設計語言

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app/learn/page.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/frontend/app/learn/page.tsx b/frontend/app/learn/page.tsx
index 4e01772..0b9899d 100644
--- a/frontend/app/learn/page.tsx
+++ b/frontend/app/learn/page.tsx
@@ -454,7 +454,7 @@ export default function LearnPage() {
                   <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
                   <p className="text-gray-700 text-left">{currentCard.definition}</p>
                 </div>
-                <p className="text-lg text-gray-700 mb-2 text-center">
+                <p className="text-lg text-gray-700 mb-2 text-left">
                   請選擇符合上述定義的英文詞彙：
                 </p>
               </div>
@@ -465,7 +465,7 @@ export default function LearnPage() {
                   key={idx}
                   onClick={() => !showResult && handleQuizAnswer(option)}
                   disabled={showResult}
-                  className={`w-full p-4 text-center rounded-lg border-2 transition-all ${
+                  className={`w-full p-4 text-left rounded-lg border-2 transition-all ${
                     showResult
                       ? option === currentCard.word
                         ? 'border-green-500 bg-green-50 text-green-700'
@@ -495,13 +495,15 @@ export default function LearnPage() {
                   </p>
                   {selectedAnswer !== currentCard.word && (
                     <p className="text-gray-700 mt-2">
-                      正確答案是：<strong>{currentCard.word}</strong>
+                      正確答案是：<strong>{currentCard.word}</strong> {currentCard.pronunciation}
                     </p>
                   )}
-                  <div className="mt-3 text-center">
-                    <p className="text-gray-600 text-sm mb-2">
-                      翻譯：{currentCard.translation}
+                  {selectedAnswer === currentCard.word && (
+                    <p className="text-gray-700 mt-2">
+                      <strong>{currentCard.word}</strong> {currentCard.pronunciation}
                     </p>
+                  )}
+                  <div className="mt-3 text-left">
                     <AudioPlayer text={currentCard.word} />
                   </div>
                 </div>