新增邏輯思維測試與資料庫整合

2025-09-29 00:23:06 +08:00
parent 9b224fa7e1
commit dcd63c5695
12 changed files with 721 additions and 31 deletions
--- a/app/api/logic-questions/route.ts
+++ b/app/api/logic-questions/route.ts
@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { getAllLogicQuestions, getRandomLogicQuestions } from '@/lib/database/models/logic_question'
+import { initializeDatabase } from '@/lib/database/init'
+
+export async function GET(request: NextRequest) {
+  try {
+    // 確保資料庫已初始化
+    await initializeDatabase()
+    
+    const { searchParams } = new URL(request.url)
+    const random = searchParams.get('random')
+    const limit = searchParams.get('limit')
+    
+    let questions
+    
+    if (random === 'true') {
+      const questionLimit = limit ? parseInt(limit) : 10
+      questions = await getRandomLogicQuestions(questionLimit)
+    } else {
+      questions = await getAllLogicQuestions()
+    }
+    
+    return NextResponse.json({
+      success: true,
+      questions,
+      count: questions.length
+    })
+  } catch (error) {
+    console.error('獲取邏輯思維題目錯誤:', error)
+    return NextResponse.json(
+      { error: '獲取題目失敗，請稍後再試' },
+      { status: 500 }
+    )
+  }
+}
--- a/app/results/logic/page.tsx
+++ b/app/results/logic/page.tsx
@@ -7,7 +7,19 @@ import { Badge } from "@/components/ui/badge"
 import { Progress } from "@/components/ui/progress"
 import { CheckCircle, XCircle, Brain, Home, RotateCcw } from "lucide-react"
 import Link from "next/link"
-import { logicQuestions } from "@/lib/questions/logic-questions"
+
+interface LogicQuestion {
+  id: number
+  question: string
+  option_a: string
+  option_b: string
+  option_c: string
+  option_d: string
+  option_e: string
+  correct_answer: 'A' | 'B' | 'C' | 'D' | 'E'
+  explanation?: string
+  created_at: string
+}

 interface LogicTestResults {
  type: string
@@ -20,14 +32,48 @@ interface LogicTestResults {

 export default function LogicResultsPage() {
  const [results, setResults] = useState<LogicTestResults | null>(null)
+  const [questions, setQuestions] = useState<LogicQuestion[]>([])
+  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
-    const savedResults = localStorage.getItem("logicTestResults")
-    if (savedResults) {
-      setResults(JSON.parse(savedResults))
+    const loadData = async () => {
+      try {
+        // 載入測試結果
+        const savedResults = localStorage.getItem("logicTestResults")
+        if (savedResults) {
+          setResults(JSON.parse(savedResults))
+        }
+
+        // 載入題目數據
+        const response = await fetch('/api/logic-questions')
+        const data = await response.json()
+        
+        if (data.success) {
+          setQuestions(data.questions)
+        }
+      } catch (error) {
+        console.error('載入數據失敗:', error)
+      } finally {
+        setIsLoading(false)
+      }
    }
+
+    loadData()
  }, [])

+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <Card className="w-full max-w-md">
+          <CardContent className="text-center py-8">
+            <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+            <p className="text-muted-foreground">載入結果中...</p>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
  if (!results) {
    return (
      <div className="min-h-screen bg-background flex items-center justify-center">
@@ -44,11 +90,44 @@ export default function LogicResultsPage() {
  }

  const getScoreLevel = (score: number) => {
-    if (score >= 90) return { level: "優秀", color: "bg-green-500", description: "邏輯思維能力出色" }
-    if (score >= 80) return { level: "良好", color: "bg-blue-500", description: "邏輯思維能力較強" }
-    if (score >= 70) return { level: "中等", color: "bg-yellow-500", description: "邏輯思維能力一般" }
-    if (score >= 60) return { level: "及格", color: "bg-orange-500", description: "邏輯思維能力需要提升" }
-    return { level: "不及格", color: "bg-red-500", description: "邏輯思維能力有待加強" }
+    if (score === 100) {
+      return { 
+        level: "邏輯巔峰者", 
+        color: "bg-purple-600", 
+        description: "近乎完美的邏輯典範！你像一台「推理引擎」，嚴謹又高效，幾乎不受陷阱干擾。",
+        suggestion: "多和他人分享你的思考路徑，能幫助團隊整體邏輯力提升。"
+      }
+    }
+    if (score >= 80) {
+      return { 
+        level: "邏輯大師", 
+        color: "bg-green-600", 
+        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: "多練習經典邏輯題，像是在拼拼圖般，慢慢建立清晰的分析步驟。"
+    }
  }

  const scoreLevel = getScoreLevel(results.score)
@@ -88,7 +167,11 @@ export default function LogicResultsPage() {
                  {scoreLevel.level}
                </Badge>
              </div>
-              <p className="text-lg text-muted-foreground">{scoreLevel.description}</p>
+              <p className="text-lg text-muted-foreground mb-4">{scoreLevel.description}</p>
+              <div className="bg-muted/50 rounded-lg p-4 border-l-4 border-primary">
+                <p className="text-sm font-medium text-foreground mb-1">💡 建議：</p>
+                <p className="text-sm text-muted-foreground">{scoreLevel.suggestion}</p>
+              </div>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
@@ -118,11 +201,24 @@ export default function LogicResultsPage() {
            </CardHeader>
            <CardContent>
              <div className="space-y-6">
-                {logicQuestions.map((question, index) => {
+                {questions.map((question, index) => {
                  const userAnswer = results.answers[index]
-                  const isCorrect = userAnswer === question.correctAnswer
-                  const correctOption = question.options.find((opt) => opt.value === question.correctAnswer)
-                  const userOption = question.options.find((opt) => opt.value === userAnswer)
+                  const isCorrect = userAnswer === question.correct_answer
+                  
+                  // 獲取選項文字
+                  const getOptionText = (option: string) => {
+                    switch (option) {
+                      case 'A': return question.option_a
+                      case 'B': return question.option_b
+                      case 'C': return question.option_c
+                      case 'D': return question.option_d
+                      case 'E': return question.option_e
+                      default: return '未知選項'
+                    }
+                  }
+
+                  const correctOptionText = getOptionText(question.correct_answer)
+                  const userOptionText = userAnswer ? getOptionText(userAnswer) : '未作答'

                  return (
                    <div key={question.id} className="border rounded-lg p-4">
@@ -142,18 +238,18 @@ export default function LogicResultsPage() {
                            <div className="flex items-center gap-2">
                              <span className="text-muted-foreground">你的答案：</span>
                              <Badge variant={isCorrect ? "default" : "destructive"}>
-                                {userOption?.text || "未作答"}
+                                {userAnswer ? `${userAnswer}. ${userOptionText}` : "未作答"}
                              </Badge>
                            </div>
                            {!isCorrect && (
                              <div className="flex items-center gap-2">
                                <span className="text-muted-foreground">正確答案：</span>
                                <Badge variant="outline" className="border-green-500 text-green-700">
-                                  {correctOption?.text}
+                                  {question.correct_answer}. {correctOptionText}
                                </Badge>
                              </div>
                            )}
-                            {question.explanation && !isCorrect && (
+                            {question.explanation && (
                              <div className="mt-2 p-3 bg-muted/50 rounded text-sm">
                                <strong>解析：</strong>
                                {question.explanation}
--- a/app/tests/logic/page.tsx
+++ b/app/tests/logic/page.tsx
@@ -7,16 +7,54 @@ import { Button } from "@/components/ui/button"
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
 import { Label } from "@/components/ui/label"
 import { useRouter } from "next/navigation"
-import { logicQuestions } from "@/lib/questions/logic-questions"
+
+interface LogicQuestion {
+  id: number
+  question: string
+  option_a: string
+  option_b: string
+  option_c: string
+  option_d: string
+  option_e: string
+  correct_answer: 'A' | 'B' | 'C' | 'D' | 'E'
+  explanation?: string
+  created_at: string
+}

 export default function LogicTestPage() {
  const router = useRouter()
+  const [questions, setQuestions] = useState<LogicQuestion[]>([])
  const [currentQuestion, setCurrentQuestion] = useState(0)
  const [answers, setAnswers] = useState<Record<number, string>>({})
  const [timeRemaining, setTimeRemaining] = useState(20 * 60) // 20 minutes in seconds
+  const [isLoading, setIsLoading] = useState(true)
+
+  // Load questions from database
+  useEffect(() => {
+    const loadQuestions = async () => {
+      try {
+        const response = await fetch('/api/logic-questions')
+        const data = await response.json()
+        
+        if (data.success) {
+          setQuestions(data.questions)
+        } else {
+          console.error('Failed to load questions:', data.error)
+        }
+      } catch (error) {
+        console.error('Error loading questions:', error)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    loadQuestions()
+  }, [])

  // Timer effect
  useEffect(() => {
+    if (questions.length === 0) return
+
    const timer = setInterval(() => {
      setTimeRemaining((prev) => {
        if (prev <= 1) {
@@ -28,7 +66,7 @@ export default function LogicTestPage() {
    }, 1000)

    return () => clearInterval(timer)
-  }, [])
+  }, [questions])

  const formatTime = (seconds: number) => {
    const mins = Math.floor(seconds / 60)
@@ -44,7 +82,7 @@ export default function LogicTestPage() {
  }

  const handleNext = () => {
-    if (currentQuestion < logicQuestions.length - 1) {
+    if (currentQuestion < questions.length - 1) {
      setCurrentQuestion((prev) => prev + 1)
    }
  }
@@ -58,20 +96,20 @@ export default function LogicTestPage() {
  const handleSubmit = () => {
    // Calculate score
    let correctAnswers = 0
-    logicQuestions.forEach((question, index) => {
-      if (answers[index] === question.correctAnswer) {
+    questions.forEach((question, index) => {
+      if (answers[index] === question.correct_answer) {
        correctAnswers++
      }
    })

-    const score = Math.round((correctAnswers / logicQuestions.length) * 100)
+    const score = Math.round((correctAnswers / questions.length) * 100)

    // Store results in localStorage
    const results = {
      type: "logic",
      score,
      correctAnswers,
-      totalQuestions: logicQuestions.length,
+      totalQuestions: questions.length,
      answers,
      completedAt: new Date().toISOString(),
    }
@@ -80,15 +118,48 @@ export default function LogicTestPage() {
    router.push("/results/logic")
  }

-  const currentQ = logicQuestions[currentQuestion]
-  const isLastQuestion = currentQuestion === logicQuestions.length - 1
+  if (isLoading) {
+    return (
+      <TestLayout
+        title="邏輯思維測試"
+        currentQuestion={0}
+        totalQuestions={0}
+        timeRemaining="00:00"
+        onBack={() => router.push("/")}
+      >
+        <div className="max-w-4xl mx-auto text-center">
+          <div className="w-8 h-8 border-4 border-primary border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+          <p className="text-muted-foreground">載入題目中...</p>
+        </div>
+      </TestLayout>
+    )
+  }
+
+  if (questions.length === 0) {
+    return (
+      <TestLayout
+        title="邏輯思維測試"
+        currentQuestion={0}
+        totalQuestions={0}
+        timeRemaining="00:00"
+        onBack={() => router.push("/")}
+      >
+        <div className="max-w-4xl mx-auto text-center">
+          <p className="text-muted-foreground">無法載入題目，請稍後再試</p>
+        </div>
+      </TestLayout>
+    )
+  }
+
+  const currentQ = questions[currentQuestion]
+  const isLastQuestion = currentQuestion === questions.length - 1
  const hasAnswer = answers[currentQuestion] !== undefined

  return (
    <TestLayout
      title="邏輯思維測試"
      currentQuestion={currentQuestion + 1}
-      totalQuestions={logicQuestions.length}
+      totalQuestions={questions.length}
      timeRemaining={formatTime(timeRemaining)}
      onBack={() => router.push("/")}
    >
@@ -99,14 +170,20 @@ export default function LogicTestPage() {
          </CardHeader>
          <CardContent>
            <RadioGroup value={answers[currentQuestion] || ""} onValueChange={handleAnswerChange} className="space-y-4">
-              {currentQ.options.map((option, index) => (
+              {[
+                { value: 'A', text: currentQ.option_a },
+                { value: 'B', text: currentQ.option_b },
+                { value: 'C', text: currentQ.option_c },
+                { value: 'D', text: currentQ.option_d },
+                { value: 'E', text: currentQ.option_e }
+              ].map((option, index) => (
                <div
                  key={index}
                  className="flex items-center space-x-3 p-4 rounded-lg border hover:bg-muted/50 transition-colors"
                >
                  <RadioGroupItem value={option.value} id={`option-${index}`} />
                  <Label htmlFor={`option-${index}`} className="flex-1 cursor-pointer text-base leading-relaxed">
-                    {option.text}
+                    {option.value}. {option.text}
                  </Label>
                </div>
              ))}
@@ -138,7 +215,7 @@ export default function LogicTestPage() {
          </div>

          <div className="flex flex-wrap justify-center gap-2 px-2">
-            {logicQuestions.map((_, index) => (
+            {questions.map((_, index) => (
              <button
                key={index}
                onClick={() => setCurrentQuestion(index)}
@@ -158,7 +235,7 @@ export default function LogicTestPage() {

        {/* Progress Summary */}
        <div className="mt-8 text-center text-sm text-muted-foreground">
-          已完成 {Object.keys(answers).length} / {logicQuestions.length} 題
+          已完成 {Object.keys(answers).length} / {questions.length} 題
        </div>
      </div>
    </TestLayout>