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

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>