115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
"use client"
|
|
|
|
import type { ExamNode } from "./selected-question-list"
|
|
|
|
type ChoiceOption = {
|
|
id: string
|
|
text: string
|
|
}
|
|
|
|
type QuestionContent = {
|
|
text?: string
|
|
options?: ChoiceOption[]
|
|
}
|
|
|
|
type ExamPaperPreviewProps = {
|
|
title: string
|
|
subject: string
|
|
grade: string
|
|
durationMin: number
|
|
totalScore: number
|
|
nodes: ExamNode[]
|
|
}
|
|
|
|
export function ExamPaperPreview({ title, subject, grade, durationMin, totalScore, nodes }: ExamPaperPreviewProps) {
|
|
// Helper to flatten questions for continuous numbering
|
|
let questionCounter = 0
|
|
|
|
const renderNode = (node: ExamNode, depth: number = 0) => {
|
|
if (node.type === 'group') {
|
|
return (
|
|
<div key={node.id} className="space-y-4 mb-6">
|
|
<div className="flex items-center gap-2">
|
|
<h3 className={`font-bold ${depth === 0 ? 'text-lg' : 'text-md'} text-foreground/90`}>
|
|
{node.title || "Section"}
|
|
</h3>
|
|
{/* Optional: Show section score if needed */}
|
|
</div>
|
|
<div className="pl-0">
|
|
{node.children?.map(child => renderNode(child, depth + 1))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (node.type === 'question' && node.question) {
|
|
questionCounter++
|
|
const q = node.question
|
|
const content = q.content as QuestionContent
|
|
|
|
return (
|
|
<div key={node.id} className="mb-6 break-inside-avoid">
|
|
<div className="flex gap-2">
|
|
<span className="font-semibold text-foreground min-w-[24px]">{questionCounter}.</span>
|
|
<div className="flex-1 space-y-2">
|
|
<div className="text-foreground/90 leading-relaxed whitespace-pre-wrap">
|
|
{content.text ?? ""}
|
|
<span className="text-muted-foreground text-sm ml-2">({node.score}分)</span>
|
|
</div>
|
|
|
|
{/* Options for Choice Questions */}
|
|
{(q.type === 'single_choice' || q.type === 'multiple_choice') && content.options && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-4 mt-2 pl-2">
|
|
{content.options.map((opt) => (
|
|
<div key={opt.id} className="flex gap-2 text-sm text-muted-foreground hover:text-foreground transition-colors">
|
|
<span className="font-medium">{opt.id}.</span>
|
|
<span>{opt.text}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Space for written answers */}
|
|
{q.type === 'text' && (
|
|
<div className="mt-4 h-24 border-b border-dashed border-muted-foreground/30 w-full"></div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="bg-card shadow-sm border p-12 print:shadow-none print:border-none">
|
|
{/* Header */}
|
|
<div className="text-center space-y-4 mb-12 border-b-2 border-primary/20 pb-8">
|
|
<h1 className="text-3xl font-black tracking-tight text-foreground">{title}</h1>
|
|
<div className="flex justify-center gap-8 text-sm text-muted-foreground font-medium uppercase tracking-wide">
|
|
<span>Subject: {subject}</span>
|
|
<span>Grade: {grade}</span>
|
|
<span>Time: {durationMin} mins</span>
|
|
<span>Total: {totalScore} pts</span>
|
|
</div>
|
|
<div className="flex justify-center gap-12 text-sm pt-4">
|
|
<div className="w-32 border-b border-foreground/20 text-left px-1">Class:</div>
|
|
<div className="w-32 border-b border-foreground/20 text-left px-1">Name:</div>
|
|
<div className="w-32 border-b border-foreground/20 text-left px-1">No.:</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="space-y-2">
|
|
{nodes.length === 0 ? (
|
|
<div className="text-center py-20 text-muted-foreground">
|
|
Empty Exam Paper
|
|
</div>
|
|
) : (
|
|
nodes.map(node => renderNode(node))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|