From 7203346134d4a8164a33ff4ccf8b66d0d12bcc87 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, 20 Sep 2025 04:00:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=8C=E6=88=90=E4=BE=8B=E5=8F=A5?=
 =?UTF-8?q?=E9=87=8D=E7=B5=84=E8=88=87=E4=BE=8B=E5=8F=A5=E5=8F=A3=E8=AA=AA?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E8=A8=AD=E8=A8=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 例句重組功能實現
- 實現完整的點擊式單字重組功能
- 添加例句圖片顯示支援
- 創建直觀的重組區域和可用單字區域
- 實現答案檢查和結果回饋系統
- 提供重新開始功能

## 例句口說功能優化
- 添加例句圖片顯示
- 重新設計為完整例句口說練習
- 使用統一的區塊化布局設計
- 移除單獨的詞彙發音區塊，專注於例句練習
- 調整VoiceRecorder目標為完整例句

## 技術改進
- 改進拖拉操作為更簡單的點擊操作
- 統一所有測驗模式的視覺設計
- 優化用戶互動體驗和學習流程

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

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

diff --git a/frontend/app/learn/page.tsx b/frontend/app/learn/page.tsx
index f663898..36ecd86 100644
--- a/frontend/app/learn/page.tsx
+++ b/frontend/app/learn/page.tsx
@@ -26,6 +26,11 @@ export default function LearnPage() {
   const [quizOptions, setQuizOptions] = useState<string[]>(['brought', 'determine', 'achieve', 'consider'])
   const [cardHeight, setCardHeight] = useState<number>(400)
 
+  // Sentence reorder states
+  const [shuffledWords, setShuffledWords] = useState<string[]>([])
+  const [arrangedWords, setArrangedWords] = useState<string[]>([])
+  const [reorderResult, setReorderResult] = useState<boolean | null>(null)
+
   // Refs for measuring card content heights
   const cardFrontRef = useRef<HTMLDivElement>(null)
   const cardBackRef = useRef<HTMLDivElement>(null)
@@ -143,6 +148,46 @@ export default function LearnPage() {
     setShowResult(false);
   }, [currentCardIndex])
 
+  // Initialize sentence reorder when card changes or mode switches to sentence-reorder
+  useEffect(() => {
+    if (mode === 'sentence-reorder') {
+      const words = currentCard.example.split(/\s+/).filter(word => word.length > 0)
+      const shuffled = [...words].sort(() => Math.random() - 0.5)
+      setShuffledWords(shuffled)
+      setArrangedWords([])
+      setReorderResult(null)
+    }
+  }, [currentCardIndex, mode, currentCard.example])
+
+  // Sentence reorder handlers
+  const handleWordClick = (word: string) => {
+    // Move word from shuffled to arranged
+    setShuffledWords(prev => prev.filter(w => w !== word))
+    setArrangedWords(prev => [...prev, word])
+    setReorderResult(null)
+  }
+
+  const handleRemoveFromArranged = (word: string) => {
+    setArrangedWords(prev => prev.filter(w => w !== word))
+    setShuffledWords(prev => [...prev, word])
+    setReorderResult(null)
+  }
+
+  const handleCheckReorderAnswer = () => {
+    const userSentence = arrangedWords.join(' ')
+    const correctSentence = currentCard.example
+    const isCorrect = userSentence.toLowerCase().trim() === correctSentence.toLowerCase().trim()
+    setReorderResult(isCorrect)
+  }
+
+  const handleResetReorder = () => {
+    const words = currentCard.example.split(/\s+/).filter(word => word.length > 0)
+    const shuffled = [...words].sort(() => Math.random() - 0.5)
+    setShuffledWords(shuffled)
+    setArrangedWords([])
+    setReorderResult(null)
+  }
+
   const handleFlip = () => {
     setIsFlipped(!isFlipped)
   }
@@ -891,39 +936,46 @@ export default function LearnPage() {
                   {currentCard.difficulty}
                 </span>
               </div>
+
+              {/* Example Image */}
+              {currentCard.exampleImage && (
+                <div className="mb-6">
+                  <div className="bg-gray-50 rounded-lg p-4">
+                    <img
+                      src={currentCard.exampleImage}
+                      alt="Example illustration"
+                      className="w-full max-w-md mx-auto rounded-lg cursor-pointer"
+                      onClick={() => setModalImage(currentCard.exampleImage)}
+                    />
+                  </div>
+                </div>
+              )}
+
               <p className="text-lg text-gray-700 mb-2 text-left">
-                請看例句圖片並大聲說出這個英文單字：
+                請看例句圖片並大聲說出完整的例句：
               </p>
 
-              <div className="text-center mb-8">
-                <div className="bg-gray-50 rounded-lg p-6 mb-6">
-                  <p className="text-lg text-gray-700 mb-4">
-                    <strong>中文翻譯：</strong>{currentCard.translation}
-                  </p>
-                  <p className="text-lg text-gray-700 mb-4">
-                    <strong>定義：</strong>{currentCard.definition}
-                  </p>
-                  <p className="text-gray-600">
-                    <strong>發音：</strong>{currentCard.pronunciation}
-                  </p>
-                </div>
-                <p className="text-lg text-gray-700 mb-6">
-                  請說出這個英文單字：
-                </p>
-                <div className="mb-6">
-                  <AudioPlayer text={currentCard.word} />
-                  <p className="text-sm text-gray-500 mt-2">
-                    點擊播放聽一遍正確發音
-                  </p>
+              <div className="space-y-4 mb-8">
+                {/* Example Sentence */}
+                <div className="bg-gray-50 rounded-lg p-4">
+                  <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">"{currentCard.example}"</p>
+                    <div className="absolute bottom-0 right-0">
+                      <AudioPlayer text={currentCard.example} />
+                    </div>
+                  </div>
+                  <p className="text-gray-600 text-sm text-left">"{currentCard.exampleTranslation}"</p>
                 </div>
+
               </div>
 
               <div className="max-w-md mx-auto">
                 <VoiceRecorder
-                  targetText={currentCard.word}
+                  targetText={currentCard.example}
                   onRecordingComplete={() => {
                     // 簡化處理：直接顯示結果
-                    handleSpeakingAnswer(currentCard.word)
+                    handleSpeakingAnswer(currentCard.example)
                   }}
                 />
               </div>
@@ -1072,25 +1124,106 @@ export default function LearnPage() {
                 </div>
               )}
              <p className="text-lg text-gray-700 mb-2 text-left">
-                請將下方的單字重新排列成正確的句子：
+                點擊下方單字，依序重組成正確的句子：
               </p>
               
-              <div className="text-center mb-8">
-                <div className="bg-gray-50 rounded-lg p-6 mb-6">
-                  <p className="text-lg text-gray-700 mb-4">
-                    <strong>詞彙：</strong>{currentCard.word}
-                  </p>
-                  <p className="text-lg text-gray-700">
-                    <strong>翻譯：</strong>{currentCard.exampleTranslation}
-                  </p>
+              {/* Arranged Sentence Area */}
+              <div className="mb-6">
+                <h3 className="text-lg font-semibold text-gray-900 mb-3 text-left">重組區域：</h3>
+                <div className="min-h-[120px] bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
+                  {arrangedWords.length === 0 ? (
+                    <div className="flex items-center justify-center h-full text-gray-400 text-lg">
+                      點擊下方單字來重組句子
+                    </div>
+                  ) : (
+                    <div className="flex flex-wrap gap-2">
+                      {arrangedWords.map((word, index) => (
+                        <div
+                          key={`arranged-${index}`}
+                          className="inline-flex items-center bg-blue-100 text-blue-800 px-3 py-2 rounded-full text-lg font-medium cursor-pointer hover:bg-blue-200 transition-colors"
+                          onClick={() => handleRemoveFromArranged(word)}
+                        >
+                          {word}
+                          <span className="ml-2 text-blue-600 hover:text-blue-800">×</span>
+                        </div>
+                      ))}
+                    </div>
+                  )}
                 </div>
               </div>
 
+              {/* Shuffled Words */}
               <div className="mb-6">
-                <div className="text-center text-gray-500">
-                  [例句重組題功能開發中...]
+                <h3 className="text-lg font-semibold text-gray-900 mb-3 text-left">可用單字：</h3>
+                <div className="bg-white border border-gray-200 rounded-lg p-4 min-h-[80px]">
+                  {shuffledWords.length === 0 ? (
+                    <div className="text-center text-gray-400">
+                      所有單字都已使用
+                    </div>
+                  ) : (
+                    <div className="flex flex-wrap gap-2">
+                      {shuffledWords.map((word, index) => (
+                        <button
+                          key={`shuffled-${index}`}
+                          onClick={() => handleWordClick(word)}
+                          className="bg-gray-100 text-gray-800 px-3 py-2 rounded-full text-lg font-medium cursor-pointer hover:bg-gray-200 active:bg-gray-300 transition-colors select-none"
+                        >
+                          {word}
+                        </button>
+                      ))}
+                    </div>
+                  )}
                 </div>
               </div>
+
+              {/* Control Buttons */}
+              <div className="flex gap-3 mb-6">
+                {arrangedWords.length > 0 && (
+                  <button
+                    onClick={handleCheckReorderAnswer}
+                    className="px-6 py-2 bg-primary text-white rounded-lg hover:bg-primary-dark transition-colors"
+                  >
+                    檢查答案
+                  </button>
+                )}
+                <button
+                  onClick={handleResetReorder}
+                  className="px-6 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
+                >
+                  重新開始
+                </button>
+              </div>
+
+              {/* Result Feedback */}
+              {reorderResult !== null && (
+                <div className={`p-6 rounded-lg w-full mb-6 ${
+                  reorderResult
+                    ? 'bg-green-50 border border-green-200'
+                    : 'bg-red-50 border border-red-200'
+                }`}>
+                  <p className={`font-semibold text-left text-xl mb-4 ${
+                    reorderResult ? 'text-green-700' : 'text-red-700'
+                  }`}>
+                    {reorderResult ? '正確！' : '錯誤！'}
+                  </p>
+
+                  {!reorderResult && (
+                    <div className="mb-4">
+                      <p className="text-gray-700 text-left">
+                        正確答案是：<strong className="text-lg">"{currentCard.example}"</strong>
+                      </p>
+                    </div>
+                  )}
+
+                  <div className="space-y-3">
+                    <div className="text-left">
+                      <p className="text-gray-600">
+                        <strong>中文翻譯：</strong>{currentCard.exampleTranslation}
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
             </div>
 
             {/* Navigation */}