ux: 調整測驗頁面布局為統一格式

- 將所有測驗模式的標題移至左上角
- 難度標籤移至右上角
- 為每個測驗添加清楚的操作說明文字
- 使用 flex justify-between 布局統一標題區域

改善用戶體驗，讓每個測驗的目的和操作方式更加清晰明確。

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

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/app/learn/page.tsx

@@ -485,22 +485,24 @@ export default function LearnPage() {
             </div>
 
             <div className="bg-white rounded-xl shadow-lg p-8">
-              <div className="text-center mb-8">
+              {/* Title in top-left */}
-                <div className="mb-4">
+              <div className="flex justify-between items-start mb-6">
-                  <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                <h2 className="text-2xl font-bold text-gray-900">
-                    {currentCard.difficulty}
-                  </span>
-                </div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">
                   詞彙選擇
                 </h2>
-                <div className="bg-gray-50 rounded-lg p-4 mb-6">
+                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
-                  <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
+                  {currentCard.difficulty}
-                  <p className="text-gray-700 text-left">{currentCard.definition}</p>
+                </span>
               </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-4 mb-6">
+                  <h3 className="font-semibold text-gray-900 mb-2 text-left">定義</h3>
+                  <p className="text-gray-700 text-left">{currentCard.definition}</p>
+                </div>
+     
               </div>
 
             <div className="space-y-3">
@@ -588,15 +590,20 @@ export default function LearnPage() {
             </div>
 
             <div className="bg-white rounded-xl shadow-lg p-8">
-              <div className="text-center mb-8">
+              {/* Title in top-left */}
-                <div className="mb-4">
+              <div className="flex justify-between items-start mb-6">
-                  <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                <h2 className="text-2xl font-bold text-gray-900">
+                  例句填空
+                </h2>
+                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                   {currentCard.difficulty}
                 </span>
               </div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-4">
+              <p className="text-lg text-gray-700 mb-2 text-left">
-                  例句填空
+                請根據定義和翻譯，輸入對應的英文單字：
-                </h2>
+              </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.definition}
@@ -712,15 +719,20 @@ export default function LearnPage() {
             </div>
 
             <div className="bg-white rounded-xl shadow-lg p-8">
-              <div className="text-center mb-8">
+              {/* Title in top-left */}
-                <div className="mb-4">
+              <div className="flex justify-between items-start mb-6">
-                  <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                <h2 className="text-2xl font-bold text-gray-900">
+                  詞彙聽力
+                </h2>
+                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                   {currentCard.difficulty}
                 </span>
               </div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              <p className="text-lg text-gray-700 mb-2 text-left">
-                  詞彙聽力
+                請聽發音並選擇正確的英文單字：
-                </h2>
+              </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">
@@ -823,15 +835,20 @@ export default function LearnPage() {
             </div>
 
             <div className="bg-white rounded-xl shadow-lg p-8">
-              <div className="text-center mb-8">
+              {/* Title in top-left */}
-                <div className="mb-4">
+              <div className="flex justify-between items-start mb-6">
-                  <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                <h2 className="text-2xl font-bold text-gray-900">
+                  例句口說
+                </h2>
+                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                   {currentCard.difficulty}
                 </span>
               </div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              <p className="text-lg text-gray-700 mb-2 text-left">
-                  例句口說
+                請看例句圖片並大聲說出這個英文單字：
-                </h2>
+              </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}
@@ -918,19 +935,21 @@ export default function LearnPage() {
             </div>
 
             <div className="bg-white rounded-xl shadow-lg p-8">
-              <div className="text-center mb-8">
+              {/* Title in top-left */}
-                <div className="mb-4">
+              <div className="flex justify-between items-start mb-6">
-                  <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                <h2 className="text-2xl font-bold text-gray-900">
+                  例句聽力
+                </h2>
+                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                   {currentCard.difficulty}
                 </span>
               </div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              <p className="text-lg text-gray-700 mb-2 text-left">
-                  例句聽力
-                </h2>
-                <p className="text-lg text-gray-700 mb-6">
                 請聽例句並選擇正確的選項：
               </p>
 
+              <div className="text-center mb-8">
+
                 <div className="mb-6">
                   <AudioPlayer text={currentCard.example} />
                   <p className="text-sm text-gray-500 mt-2">
@@ -981,15 +1000,20 @@ export default function LearnPage() {
             </div>
 
             <div className="bg-white rounded-xl shadow-lg p-8">
-              <div className="text-center mb-8">
+              {/* Title in top-left */}
-                <div className="mb-4">
+              <div className="flex justify-between items-start mb-6">
-                  <span className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
+                <h2 className="text-2xl font-bold text-gray-900">
+                  例句重組
+                </h2>
+                <span className="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">
                   {currentCard.difficulty}
                 </span>
               </div>
-                <h2 className="text-2xl font-bold text-gray-900 mb-6">
+              <p className="text-lg text-gray-700 mb-2 text-left">
-                  例句重組
+                請將下方的單字重新排列成正確的句子：
-                </h2>
+              </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">
@@ -1000,9 +1024,6 @@ export default function LearnPage() {
                   </p>
                 </div>
 
-                <p className="text-lg text-gray-700 mb-6">
-                  請將下方的單字重新排列成正確的句子：
-                </p>
               </div>
 
               <div className="mb-6">