From 0887347116dfab8cd25799783f39a74329922776 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B3=E4=BD=A9=E5=BA=AD?= <petty09190@gmail.com>
Date: Mon, 29 Sep 2025 01:48:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=AD=A3=E6=8F=90=E9=86=92=E6=96=87?=
 =?UTF-8?q?=E5=AD=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/tests/combined/page.tsx                 |  9 ++-
 app/tests/creative/page.tsx                 |  2 +-
 app/tests/logic/page.tsx                    |  3 +
 package.json                                |  3 +
 scripts/test-combined-logic-instructions.js | 79 +++++++++++++++++++++
 scripts/test-logic-instructions.js          | 66 +++++++++++++++++
 scripts/test-logic-simple-instructions.js   | 72 +++++++++++++++++++
 7 files changed, 231 insertions(+), 3 deletions(-)
 create mode 100644 scripts/test-combined-logic-instructions.js
 create mode 100644 scripts/test-logic-instructions.js
 create mode 100644 scripts/test-logic-simple-instructions.js

diff --git a/app/tests/combined/page.tsx b/app/tests/combined/page.tsx
index 4b1418d..85f6b6c 100644
--- a/app/tests/combined/page.tsx
+++ b/app/tests/combined/page.tsx
@@ -266,10 +266,15 @@ export default function CombinedTestPage() {
         <Card className="mb-8">
           <CardHeader>
             <CardTitle className="text-xl text-balance">
-              {phase === "logic" ? currentQ.question : currentQ.statement}
+              {phase === "logic" ? (currentQ as LogicQuestion).question : (currentQ as CreativeQuestion).statement}
             </CardTitle>
+            {phase === "logic" && (
+              <p className="text-sm text-muted-foreground mt-2">
+                請仔細閱讀題目，選擇最正確的答案，每題均為單選。
+              </p>
+            )}
             {phase === "creative" && (
-              <p className="text-sm text-muted-foreground">請根據這個描述與你的實際情況的符合程度進行選擇</p>
+              <p className="text-sm text-muted-foreground">請根據您的實際情況，選擇最符合的選項（5=非常符合，1=完全不符合）。</p>
             )}
           </CardHeader>
           <CardContent>
diff --git a/app/tests/creative/page.tsx b/app/tests/creative/page.tsx
index de20ec3..2b0ad14 100644
--- a/app/tests/creative/page.tsx
+++ b/app/tests/creative/page.tsx
@@ -172,7 +172,7 @@ export default function CreativeTestPage() {
         <Card className="mb-8">
           <CardHeader>
             <CardTitle className="text-xl text-balance">{currentQ.statement}</CardTitle>
-            <p className="text-sm text-muted-foreground">請根據這個描述與你的實際情況的符合程度進行選擇</p>
+            <p className="text-sm text-muted-foreground">請根據您的實際情況，選擇最符合的選項（5=非常符合，1=完全不符合）。</p>
           </CardHeader>
           <CardContent>
             <RadioGroup
diff --git a/app/tests/logic/page.tsx b/app/tests/logic/page.tsx
index 988d0db..6c2b174 100644
--- a/app/tests/logic/page.tsx
+++ b/app/tests/logic/page.tsx
@@ -167,6 +167,9 @@ export default function LogicTestPage() {
         <Card className="mb-8">
           <CardHeader>
             <CardTitle className="text-xl text-balance">{currentQ.question}</CardTitle>
+            <p className="text-sm text-muted-foreground mt-2">
+              請仔細閱讀題目，選擇最正確的答案，每題均為單選。
+            </p>
           </CardHeader>
           <CardContent>
             <RadioGroup value={answers[currentQuestion] || ""} onValueChange={handleAnswerChange} className="space-y-4">
diff --git a/package.json b/package.json
index f2d8462..cf2576f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,9 @@
     "test-combined-creativity-levels": "node scripts/test-combined-creativity-levels.js",
     "test-combined-score-display": "node scripts/test-combined-score-display.js",
     "test-combined-mobile-buttons": "node scripts/test-combined-mobile-buttons.js",
+    "test-logic-instructions": "node scripts/test-logic-instructions.js",
+    "test-logic-simple-instructions": "node scripts/test-logic-simple-instructions.js",
+    "test-combined-logic-instructions": "node scripts/test-combined-logic-instructions.js",
     "update-logic-table": "node scripts/update-logic-table.js",
     "seed-db": "npx tsx lib/database/seed.ts",
     "seed-logic-questions": "npx tsx lib/database/seed-logic-questions.ts",
diff --git a/scripts/test-combined-logic-instructions.js b/scripts/test-combined-logic-instructions.js
new file mode 100644
index 0000000..8ffbf5b
--- /dev/null
+++ b/scripts/test-combined-logic-instructions.js
@@ -0,0 +1,79 @@
+const testCombinedLogicInstructions = () => {
+  console.log('📝 綜合能力測試邏輯題註記文字測試')
+  console.log('=' .repeat(50))
+
+  console.log('\n🎯 添加內容:')
+  console.log('位置: 綜合能力測試中邏輯題標題下方')
+  console.log('文字: "請仔細閱讀題目，選擇最正確的答案，每題均為單選。"')
+  console.log('條件: 僅在邏輯題階段顯示')
+
+  console.log('\n🎨 UI設計特色:')
+  console.log('邏輯題階段:')
+  console.log('- 標題: 題目內容')
+  console.log('- 說明: 請仔細閱讀題目，選擇最正確的答案，每題均為單選。')
+  console.log('- 樣式: text-sm text-muted-foreground mt-2')
+
+  console.log('\n創意題階段:')
+  console.log('- 標題: 題目描述')
+  console.log('- 說明: 請根據您的實際情況，選擇最符合的選項（5=非常符合，1=完全不符合）。')
+  console.log('- 樣式: text-sm text-muted-foreground')
+
+  console.log('\n📊 條件渲染邏輯:')
+  console.log('1. phase === "logic": 顯示邏輯題說明')
+  console.log('2. phase === "creative": 顯示創意題說明')
+  console.log('3. 兩個階段都有各自的說明文字')
+  console.log('4. 樣式保持一致，但內容不同')
+
+  console.log('\n💡 設計理念:')
+  console.log('- 根據測試階段顯示相應說明')
+  console.log('- 邏輯題強調仔細閱讀和單選')
+  console.log('- 創意題強調根據實際情況選擇')
+  console.log('- 保持與單獨邏輯測試的一致性')
+  console.log('- 簡潔明瞭，不干擾主要內容')
+
+  console.log('\n📱 響應式設計:')
+  console.log('- 手機版: 文字大小適中，易於閱讀')
+  console.log('- 桌面版: 保持一致的視覺效果')
+  console.log('- 文字換行: 自動換行，保持可讀性')
+  console.log('- 間距: 與標題保持適當距離')
+
+  console.log('\n🎯 用戶體驗提升:')
+  console.log('- 清楚說明不同階段的答題規則')
+  console.log('- 邏輯題階段提醒仔細閱讀')
+  console.log('- 創意題階段說明評分標準')
+  console.log('- 視覺上不突兀，融入整體設計')
+  console.log('- 與單獨測試頁面保持一致')
+
+  console.log('\n🔍 與單獨邏輯測試對比:')
+  console.log('單獨邏輯測試:')
+  console.log('- 標題: 題目內容')
+  console.log('- 說明: 請仔細閱讀題目，選擇最正確的答案，每題均為單選。')
+  console.log('- 樣式: text-sm text-muted-foreground mt-2')
+
+  console.log('\n綜合能力測試邏輯題:')
+  console.log('- 標題: 題目內容')
+  console.log('- 說明: 請仔細閱讀題目，選擇最正確的答案，每題均為單選。')
+  console.log('- 樣式: text-sm text-muted-foreground mt-2')
+
+  console.log('\n✅ 一致性:')
+  console.log('- 文字內容完全一致 ✓')
+  console.log('- 樣式設計完全一致 ✓')
+  console.log('- 用戶體驗保持一致 ✓')
+
+  console.log('\n🔍 測試要點:')
+  console.log('1. 邏輯題階段是否顯示正確說明')
+  console.log('2. 創意題階段是否顯示正確說明')
+  console.log('3. 樣式是否與單獨測試一致')
+  console.log('4. 條件渲染是否正常工作')
+  console.log('5. 整體設計是否協調')
+
+  console.log('\n✅ 預期效果:')
+  console.log('- 用戶在邏輯題階段看到相應說明')
+  console.log('- 用戶在創意題階段看到相應說明')
+  console.log('- 與單獨測試頁面保持一致性')
+  console.log('- 整體用戶體驗更加完善')
+
+  console.log('\n✅ 綜合能力測試邏輯題註記文字測試完成')
+}
+
+testCombinedLogicInstructions()
diff --git a/scripts/test-logic-instructions.js b/scripts/test-logic-instructions.js
new file mode 100644
index 0000000..03f3631
--- /dev/null
+++ b/scripts/test-logic-instructions.js
@@ -0,0 +1,66 @@
+const testLogicInstructions = () => {
+  console.log('📝 邏輯測驗註記文字添加測試')
+  console.log('=' .repeat(50))
+
+  console.log('\n🎯 添加內容:')
+  console.log('位置: 邏輯測驗題目卡片下方')
+  console.log('文字: "請仔細閱讀題目，選擇最正確的答案，每題均為單選。"')
+  console.log('樣式: 帶有圖示和邊框的說明區塊')
+
+  console.log('\n🎨 UI設計特色:')
+  console.log('容器樣式:')
+  console.log('- 背景: bg-muted/30 (淺灰色背景)')
+  console.log('- 圓角: rounded-lg (圓角邊框)')
+  console.log('- 左邊框: border-l-4 border-primary (藍色左邊框)')
+  console.log('- 內邊距: p-4 (16px內邊距)')
+  console.log('- 上邊距: mt-6 (24px上邊距)')
+
+  console.log('\n文字樣式:')
+  console.log('- 大小: text-sm (14px)')
+  console.log('- 顏色: text-muted-foreground (次要文字顏色)')
+  console.log('- 行高: leading-relaxed (放鬆行高)')
+  console.log('- 圖示: 📝 答題說明：')
+  console.log('- 重點文字: font-medium text-primary (粗體藍色)')
+
+  console.log('\n📊 視覺層次:')
+  console.log('1. 題目內容 (主要)')
+  console.log('2. 選項列表 (主要)')
+  console.log('3. 答題說明 (次要，但醒目)')
+  console.log('4. 導航按鈕 (操作)')
+
+  console.log('\n💡 設計理念:')
+  console.log('- 使用淺色背景區分說明內容')
+  console.log('- 左邊框突出顯示重要性')
+  console.log('- 圖示增加視覺吸引力')
+  console.log('- 文字大小適中，不干擾主要內容')
+  console.log('- 位置合理，在選項下方，導航上方')
+
+  console.log('\n📱 響應式設計:')
+  console.log('- 手機版: 文字大小和間距適中')
+  console.log('- 桌面版: 保持一致的視覺效果')
+  console.log('- 容器寬度: 自動適應父容器')
+  console.log('- 文字換行: 自動換行，保持可讀性')
+
+  console.log('\n🎯 用戶體驗提升:')
+  console.log('- 清楚說明答題規則')
+  console.log('- 提醒用戶仔細閱讀')
+  console.log('- 強調單選的重要性')
+  console.log('- 視覺上不突兀，但足夠醒目')
+
+  console.log('\n🔍 測試要點:')
+  console.log('1. 註記文字是否正確顯示')
+  console.log('2. 樣式是否符合設計要求')
+  console.log('3. 在不同螢幕尺寸下是否正常')
+  console.log('4. 文字是否清晰易讀')
+  console.log('5. 整體佈局是否協調')
+
+  console.log('\n✅ 預期效果:')
+  console.log('- 用戶能清楚看到答題說明')
+  console.log('- 視覺上與主要內容區分開來')
+  console.log('- 提升用戶對測驗規則的理解')
+  console.log('- 整體用戶體驗更加完善')
+
+  console.log('\n✅ 邏輯測驗註記文字添加測試完成')
+}
+
+testLogicInstructions()
diff --git a/scripts/test-logic-simple-instructions.js b/scripts/test-logic-simple-instructions.js
new file mode 100644
index 0000000..963d9c2
--- /dev/null
+++ b/scripts/test-logic-simple-instructions.js
@@ -0,0 +1,72 @@
+const testLogicSimpleInstructions = () => {
+  console.log('📝 邏輯測驗簡潔註記文字測試')
+  console.log('=' .repeat(50))
+
+  console.log('\n🎯 修正後的設計:')
+  console.log('位置: 標題下方，CardHeader內')
+  console.log('文字: "請仔細閱讀題目，選擇最正確的答案，每題均為單選。"')
+  console.log('樣式: 簡潔無邊框，無emoji符號')
+
+  console.log('\n🎨 UI設計特色:')
+  console.log('文字樣式:')
+  console.log('- 大小: text-sm (14px)')
+  console.log('- 顏色: text-muted-foreground (次要文字顏色)')
+  console.log('- 上邊距: mt-2 (8px上邊距)')
+  console.log('- 無邊框、無背景、無emoji')
+
+  console.log('\n📊 視覺層次:')
+  console.log('1. 題目標題 (主要，大號粗體)')
+  console.log('2. 答題說明 (次要，小號灰色)')
+  console.log('3. 選項列表 (主要)')
+  console.log('4. 導航按鈕 (操作)')
+
+  console.log('\n💡 設計理念:')
+  console.log('- 簡潔明瞭，不干擾主要內容')
+  console.log('- 位置合理，緊貼標題下方')
+  console.log('- 顏色低調，作為輔助說明')
+  console.log('- 無多餘裝飾，保持乾淨設計')
+  console.log('- 符合圖二簡潔風格')
+
+  console.log('\n📱 響應式設計:')
+  console.log('- 手機版: 文字大小適中，易於閱讀')
+  console.log('- 桌面版: 保持一致的視覺效果')
+  console.log('- 文字換行: 自動換行，保持可讀性')
+  console.log('- 間距: 與標題保持適當距離')
+
+  console.log('\n🎯 用戶體驗提升:')
+  console.log('- 清楚說明答題規則')
+  console.log('- 提醒用戶仔細閱讀')
+  console.log('- 強調單選的重要性')
+  console.log('- 視覺上不突兀，融入整體設計')
+  console.log('- 簡潔風格，符合現代UI趨勢')
+
+  console.log('\n🔍 與圖二風格對比:')
+  console.log('圖二特色:')
+  console.log('- 標題: 大號粗體黑色文字')
+  console.log('- 說明: 小號灰色文字')
+  console.log('- 無邊框、無背景、無emoji')
+  console.log('- 簡潔乾淨的設計')
+
+  console.log('\n我們的設計:')
+  console.log('- 標題: text-xl text-balance (大號粗體)')
+  console.log('- 說明: text-sm text-muted-foreground (小號灰色)')
+  console.log('- 無邊框、無背景、無emoji')
+  console.log('- 簡潔乾淨的設計')
+
+  console.log('\n✅ 符合要求:')
+  console.log('- 位置: 標題下方 ✓')
+  console.log('- 風格: 簡潔無邊框 ✓')
+  console.log('- 無emoji符號 ✓')
+  console.log('- 符合圖二設計風格 ✓')
+
+  console.log('\n🔍 測試要點:')
+  console.log('1. 註記文字是否在標題下方')
+  console.log('2. 樣式是否簡潔無邊框')
+  console.log('3. 無emoji符號')
+  console.log('4. 文字顏色和大小是否合適')
+  console.log('5. 整體設計是否協調')
+
+  console.log('\n✅ 邏輯測驗簡潔註記文字測試完成')
+}
+
+testLogicSimpleInstructions()