diff --git a/app/results/logic/page.tsx b/app/results/logic/page.tsx index 96cf6d0..154ad49 100644 --- a/app/results/logic/page.tsx +++ b/app/results/logic/page.tsx @@ -161,23 +161,29 @@ export default function LogicResultsPage() { {scoreLevel.level} -

{scoreLevel.description}

+

{scoreLevel.description}

+
+

+ 👉 建議: + {scoreLevel.suggestion} +

+
-
+
{results.correctAnswers}
-
答對題數
+
答對題數
{results.totalQuestions}
-
總題數
+
總題數
{Math.round((results.correctAnswers / results.totalQuestions) * 100)}%
-
正確率
+
正確率
@@ -211,36 +217,36 @@ export default function LogicResultsPage() { const userOptionText = userAnswer ? getOptionText(userAnswer) : "未作答" return ( -
+
{isCorrect ? ( - + ) : ( - + )}
-
-

+
+

第{index + 1}題:{question.question}

-
-
- 你的答案: - +
+
+ 你的答案: + {userAnswer ? `${userAnswer}. ${userOptionText}` : "未作答"}
{!isCorrect && ( -
- 正確答案: - +
+ 正確答案: + {question.correct_answer}. {correctOptionText}
)} {question.explanation && ( -
+
解析: {question.explanation}
@@ -256,20 +262,20 @@ export default function LogicResultsPage() { {/* Actions */} -
- - -
diff --git a/package.json b/package.json index b572da0..5cf11ba 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "test-login": "node scripts/test-login.js", "check-passwords": "node scripts/check-passwords.js", "check-logic-questions": "node scripts/check-logic-questions.js", + "test-score-levels": "node scripts/test-score-levels.js", + "test-responsive-design": "node scripts/test-responsive-design.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-responsive-design.js b/scripts/test-responsive-design.js new file mode 100644 index 0000000..af56244 --- /dev/null +++ b/scripts/test-responsive-design.js @@ -0,0 +1,47 @@ +// 測試響應式設計的 CSS 類別 +const responsiveClasses = { + // 統計數據區域 + statsGrid: "grid grid-cols-3 gap-4 mb-6", + statsText: "text-xs text-muted-foreground", + + // 詳細結果區域 + questionCard: "border rounded-lg p-3 sm:p-4", + questionIcon: "w-4 h-4 sm:w-5 sm:h-5", + questionTitle: "text-sm sm:text-base", + questionContent: "text-xs sm:text-sm", + answerRow: "flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2", + badge: "text-xs w-fit", + explanation: "p-2 sm:p-3 text-xs sm:text-sm", + + // 按鈕區域 + buttonContainer: "flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center", + button: "w-full sm:w-auto" +} + +console.log('📱 響應式設計測試') +console.log('=' .repeat(50)) + +console.log('\n📊 統計數據區域:') +console.log(`網格佈局: ${responsiveClasses.statsGrid}`) +console.log(`標籤文字: ${responsiveClasses.statsText}`) + +console.log('\n📋 詳細結果區域:') +console.log(`題目卡片: ${responsiveClasses.questionCard}`) +console.log(`圖示大小: ${responsiveClasses.questionIcon}`) +console.log(`題目標題: ${responsiveClasses.questionTitle}`) +console.log(`內容文字: ${responsiveClasses.questionContent}`) +console.log(`答案行: ${responsiveClasses.answerRow}`) +console.log(`徽章: ${responsiveClasses.badge}`) +console.log(`解析: ${responsiveClasses.explanation}`) + +console.log('\n🔘 按鈕區域:') +console.log(`按鈕容器: ${responsiveClasses.buttonContainer}`) +console.log(`按鈕樣式: ${responsiveClasses.button}`) + +console.log('\n✅ 響應式設計配置完成') +console.log('\n📱 手機版特點:') +console.log('- 統計數據始終 3 欄並排顯示') +console.log('- 文字大小在手機上較小,桌面版較大') +console.log('- 答案選項在手機上垂直排列,桌面版水平排列') +console.log('- 按鈕在手機上全寬顯示,桌面版自動寬度') +console.log('- 內邊距在手機上較小,桌面版較大') diff --git a/scripts/test-score-levels.js b/scripts/test-score-levels.js new file mode 100644 index 0000000..a6a730a --- /dev/null +++ b/scripts/test-score-levels.js @@ -0,0 +1,49 @@ +// 測試新的評分系統 +const testScores = [0, 15, 25, 40, 55, 65, 75, 85, 95, 100] + +function getScoreLevel(score) { + if (score === 100) return { + level: "邏輯巔峰者", + color: "bg-purple-600", + description: "近乎完美的邏輯典範!你像一台「推理引擎」,嚴謹又高效,幾乎不受陷阱干擾。", + suggestion: "多和他人分享你的思考路徑,能幫助團隊整體邏輯力提升。" + } + if (score >= 80) return { + level: "邏輯大師", + color: "bg-green-500", + description: "你的思維如同精密儀器,能快速抓住題目關鍵,並做出有效推理。常常是團隊中「冷靜的分析者」。", + suggestion: "挑戰更高層次的難題,讓你的邏輯力更加精進。" + } + if (score >= 60) return { + level: "邏輯高手", + color: "bg-blue-500", + description: "邏輯清晰穩定,大部分情境都能正確判斷。偶爾會因粗心錯過陷阱。", + suggestion: "在思維縝密之餘,更加留心細節,就能把錯誤率降到最低。" + } + if (score >= 30) return { + level: "邏輯學徒", + color: "bg-yellow-500", + description: "已經抓到一些邏輯規律,能解決中等難度的問題。遇到複雜情境時,仍可能卡關。", + suggestion: "嘗試將問題拆解成小步驟,就像組裝樂高,每一塊拼好,答案就自然浮現。" + } + return { + level: "邏輯探險新手", + color: "bg-red-500", + description: "還在邏輯森林的入口徘徊。思考時可能忽略細節,或被陷阱誤導。", + suggestion: "多練習經典邏輯題,像是在拼拼圖般,慢慢建立清晰的分析步驟。" + } +} + +console.log('🧪 測試新的評分系統') +console.log('=' .repeat(80)) + +testScores.forEach(score => { + const level = getScoreLevel(score) + console.log(`\n📊 分數: ${score}`) + console.log(`🏆 等級: ${level.level}`) + console.log(`📝 描述: ${level.description}`) + console.log(`💡 建議: ${level.suggestion}`) + console.log('-'.repeat(60)) +}) + +console.log('\n✅ 評分系統測試完成')