From a1cf784805c9f9ae5c2a3d8766815beeb2633c62 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=84=AD=E6=B2=9B=E8=BB=92?= <jettcheng1018@gmail.com>
Date: Sat, 27 Sep 2025 21:42:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=84=AA=E5=8C=96FlipMemoryTest?=
 =?UTF-8?q?=E7=B5=84=E4=BB=B6=E7=94=A8=E6=88=B6=E9=AB=94=E9=A9=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 將信心等級按鈕移到翻卡外面，裸露在背景上
- 移除按鈕數字，只顯示文字描述且字體更大
- 修復音頻播放按鈕點擊會觸發翻面的問題
- 增加翻卡容器高度至600px提供更多內容空間
- 翻卡背面只保留純學習內容（定義、例句、同義詞）

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../review/review-tests/FlipMemoryTest.tsx    | 57 ++++++++++---------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/frontend/components/review/review-tests/FlipMemoryTest.tsx b/frontend/components/review/review-tests/FlipMemoryTest.tsx
index d0361dc..0a9ace7 100644
--- a/frontend/components/review/review-tests/FlipMemoryTest.tsx
+++ b/frontend/components/review/review-tests/FlipMemoryTest.tsx
@@ -63,11 +63,11 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
       <div
         className={`card-container ${disabled ? 'pointer-events-none opacity-75' : 'cursor-pointer'}`}
         onClick={handleFlip}
-        style={{ perspective: '1000px', minHeight: '500px' }}
+        style={{ perspective: '1000px', minHeight: '600px' }}
       >
         <div
           className={`card bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-600 ${isFlipped ? 'rotate-y-180' : ''}`}
-          style={{ transformStyle: 'preserve-3d', minHeight: '500px' }}
+          style={{ transformStyle: 'preserve-3d', minHeight: '600px' }}
         >
           {/* 正面 */}
           <div
@@ -94,7 +94,9 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
                       {pronunciation && (
                         <span className="text-lg text-gray-500">{pronunciation}</span>
                       )}
-                      <AudioPlayer text={word} />
+                      <div onClick={(e) => e.stopPropagation()}>
+                        <AudioPlayer text={word} />
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -127,7 +129,7 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
                   <h3 className="font-semibold text-gray-900 mb-2 text-left">例句</h3>
                   <div className="relative">
                     <p className="text-gray-700 italic mb-2 text-left pr-12">"{example}"</p>
-                    <div className="absolute bottom-0 right-0">
+                    <div className="absolute bottom-0 right-0" onClick={(e) => e.stopPropagation()}>
                       <AudioPlayer text={example} />
                     </div>
                   </div>
@@ -151,35 +153,36 @@ export const FlipMemoryTest: React.FC<FlipMemoryTestProps> = ({
                   </div>
                 )}
 
-                {/* 信心等級評估區 */}
-                <div className="bg-blue-50 rounded-lg p-4">
-                  <h3 className="font-semibold text-blue-900 mb-3 text-left">你對這個單字的熟悉程度：</h3>
-                  <div className="grid grid-cols-5 gap-2">
-                    {[1, 2, 3, 4, 5].map(level => (
-                      <button
-                        key={level}
-                        onClick={() => handleConfidenceSelect(level)}
-                        disabled={disabled || selectedConfidence !== null}
-                        className={`py-3 px-4 bg-white border border-blue-200 text-blue-700 rounded-lg transition-all text-center ${
-                          selectedConfidence === level
-                            ? 'bg-blue-500 text-white border-blue-500'
-                            : 'hover:bg-blue-100 hover:border-blue-300'
-                        } ${disabled || selectedConfidence !== null ? 'opacity-50 cursor-not-allowed' : ''}`}
-                      >
-                        <div className="font-bold text-lg">{level}</div>
-                        <div className="text-xs">
-                          {confidenceLabels[level as keyof typeof confidenceLabels]}
-                        </div>
-                      </button>
-                    ))}
-                  </div>
-                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
 
+      {/* 信心等級評估區 - 裸露在背景上 */}
+      {(
+        <div className="mt-6">
+          <div className="grid grid-cols-5 gap-3">
+            {[1, 2, 3, 4, 5].map(level => (
+              <button
+                key={level}
+                onClick={() => handleConfidenceSelect(level)}
+                disabled={disabled || selectedConfidence !== null}
+                className={`py-4 px-3 border-2 rounded-lg transition-all text-center font-medium ${
+                  selectedConfidence === level
+                    ? 'bg-blue-500 text-white border-blue-500 shadow-lg'
+                    : 'bg-white border-gray-300 text-gray-700 hover:bg-blue-50 hover:border-blue-400 shadow-sm'
+                } ${disabled || selectedConfidence !== null ? 'opacity-50 cursor-not-allowed' : 'hover:shadow-md'}`}
+              >
+                <div className="text-lg font-semibold">
+                  {confidenceLabels[level as keyof typeof confidenceLabels]}
+                </div>
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
       <style jsx>{`
         .card-container {
           perspective: 1000px;