修正提醒文字

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()