Initial commit
This commit is contained in:
177
app/tests/creative/page.tsx
Normal file
177
app/tests/creative/page.tsx
Normal file
@@ -0,0 +1,177 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { TestLayout } from "@/components/test-layout"
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
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 { creativeQuestions } from "@/lib/questions/creative-questions"
|
||||
|
||||
export default function CreativeTestPage() {
|
||||
const router = useRouter()
|
||||
const [currentQuestion, setCurrentQuestion] = useState(0)
|
||||
const [answers, setAnswers] = useState<Record<number, number>>({})
|
||||
const [timeRemaining, setTimeRemaining] = useState(30 * 60) // 30 minutes in seconds
|
||||
|
||||
// Timer effect
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setTimeRemaining((prev) => {
|
||||
if (prev <= 1) {
|
||||
handleSubmit()
|
||||
return 0
|
||||
}
|
||||
return prev - 1
|
||||
})
|
||||
}, 1000)
|
||||
|
||||
return () => clearInterval(timer)
|
||||
}, [])
|
||||
|
||||
const formatTime = (seconds: number) => {
|
||||
const mins = Math.floor(seconds / 60)
|
||||
const secs = seconds % 60
|
||||
return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
|
||||
}
|
||||
|
||||
const handleAnswerChange = (value: string) => {
|
||||
setAnswers((prev) => ({
|
||||
...prev,
|
||||
[currentQuestion]: Number.parseInt(value),
|
||||
}))
|
||||
}
|
||||
|
||||
const handleNext = () => {
|
||||
if (currentQuestion < creativeQuestions.length - 1) {
|
||||
setCurrentQuestion((prev) => prev + 1)
|
||||
}
|
||||
}
|
||||
|
||||
const handlePrevious = () => {
|
||||
if (currentQuestion > 0) {
|
||||
setCurrentQuestion((prev) => prev - 1)
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
// Calculate score based on creativity scoring
|
||||
let totalScore = 0
|
||||
creativeQuestions.forEach((question, index) => {
|
||||
const answer = answers[index] || 1
|
||||
// For creativity, higher scores indicate more creative thinking
|
||||
totalScore += question.isReverse ? 6 - answer : answer
|
||||
})
|
||||
|
||||
const maxScore = creativeQuestions.length * 5
|
||||
const score = Math.round((totalScore / maxScore) * 100)
|
||||
|
||||
// Store results in localStorage
|
||||
const results = {
|
||||
type: "creative",
|
||||
score,
|
||||
totalScore,
|
||||
maxScore,
|
||||
answers,
|
||||
completedAt: new Date().toISOString(),
|
||||
}
|
||||
|
||||
localStorage.setItem("creativeTestResults", JSON.stringify(results))
|
||||
router.push("/results/creative")
|
||||
}
|
||||
|
||||
const currentQ = creativeQuestions[currentQuestion]
|
||||
const isLastQuestion = currentQuestion === creativeQuestions.length - 1
|
||||
const hasAnswer = answers[currentQuestion] !== undefined
|
||||
|
||||
const scaleOptions = [
|
||||
{ value: "5", label: "我最符合", color: "text-green-600" },
|
||||
{ value: "4", label: "比较符合", color: "text-green-500" },
|
||||
{ value: "3", label: "一般", color: "text-yellow-500" },
|
||||
{ value: "2", label: "不太符合", color: "text-orange-500" },
|
||||
{ value: "1", label: "与我不符", color: "text-red-500" },
|
||||
]
|
||||
|
||||
return (
|
||||
<TestLayout
|
||||
title="創意能力測試"
|
||||
currentQuestion={currentQuestion + 1}
|
||||
totalQuestions={creativeQuestions.length}
|
||||
timeRemaining={formatTime(timeRemaining)}
|
||||
onBack={() => router.push("/")}
|
||||
>
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<Card className="mb-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl text-balance">{currentQ.statement}</CardTitle>
|
||||
<p className="text-sm text-muted-foreground">請根據這個描述與你的實際情況的符合程度進行選擇</p>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<RadioGroup
|
||||
value={answers[currentQuestion]?.toString() || ""}
|
||||
onValueChange={handleAnswerChange}
|
||||
className="space-y-4"
|
||||
>
|
||||
{scaleOptions.map((option) => (
|
||||
<div
|
||||
key={option.value}
|
||||
className="flex items-center space-x-4 p-4 rounded-lg border hover:bg-muted/50 transition-colors"
|
||||
>
|
||||
<RadioGroupItem value={option.value} id={`option-${option.value}`} />
|
||||
<Label
|
||||
htmlFor={`option-${option.value}`}
|
||||
className={`flex-1 cursor-pointer text-base font-medium ${option.color}`}
|
||||
>
|
||||
{option.label}
|
||||
</Label>
|
||||
<div className="text-sm text-muted-foreground font-mono">{option.value}</div>
|
||||
</div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Navigation */}
|
||||
<div className="flex justify-between items-center">
|
||||
<Button variant="outline" onClick={handlePrevious} disabled={currentQuestion === 0}>
|
||||
上一題
|
||||
</Button>
|
||||
|
||||
<div className="flex gap-2 max-w-md overflow-x-auto">
|
||||
{creativeQuestions.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setCurrentQuestion(index)}
|
||||
className={`w-8 h-8 rounded-full text-sm font-medium transition-colors flex-shrink-0 ${
|
||||
index === currentQuestion
|
||||
? "bg-accent text-accent-foreground"
|
||||
: answers[index] !== undefined
|
||||
? "bg-primary text-primary-foreground"
|
||||
: "bg-muted text-muted-foreground hover:bg-muted/80"
|
||||
}`}
|
||||
>
|
||||
{index + 1}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{isLastQuestion ? (
|
||||
<Button onClick={handleSubmit} disabled={!hasAnswer} className="bg-green-600 hover:bg-green-700">
|
||||
提交測試
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={handleNext} disabled={!hasAnswer}>
|
||||
下一題
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Progress Summary */}
|
||||
<div className="mt-8 text-center text-sm text-muted-foreground">
|
||||
已完成 {Object.keys(answers).length} / {creativeQuestions.length} 題
|
||||
</div>
|
||||
</div>
|
||||
</TestLayout>
|
||||
)
|
||||
}
|
Reference in New Issue
Block a user