feat: Add Quiz Timer, Time Limit, and improve error handling

app/components/QuizApp.tsx

@@ -37,6 +37,10 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
     const [tempPasskey, setTempPasskey] = useState('')
     const [isLocked, setIsLocked] = useState(true)
 
+    const [timeLeft, setTimeLeft] = useState<number | null>(null)
+    const [timeLimit, setTimeLimit] = useState<number | null>(null)
+    const [startTime, setStartTime] = useState<number | null>(null)
+
     const [questions, setQuestions] = useState<QuizQuestion[]>([])
     const [loading, setLoading] = useState(false)
     const [error, setError] = useState<string | null>(null)
@@ -82,10 +86,13 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
 
             // Parse content
             let quizData
+            console.log('Raw quiz content:', quizFile.content) // Debug log
+
             if (typeof quizFile.content === 'string') {
                 try {
                     quizData = JSON.parse(quizFile.content)
                 } catch (e) {
+                    console.error('JSON parse error:', e)
                     // Maybe it's double encoded or raw text
                     quizData = quizFile.content
                 }
@@ -94,16 +101,31 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
             }
 
             if (!quizData) {
-                throw new Error('Quiz file is empty')
+                throw new Error('Quiz file content is empty or invalid')
             }
 
+            // Handle different structures (array or object with questions)
+            let questionsArray = []
             if (Array.isArray(quizData)) {
-                setQuestions(quizData)
+                questionsArray = quizData
             } else if (quizData.questions) {
-                setQuestions(quizData.questions)
+                questionsArray = quizData.questions
+                if (quizData.timeLimit) {
+                    const limitInSeconds = quizData.timeLimit * 60
+                    setTimeLimit(limitInSeconds)
+                    setTimeLeft(limitInSeconds)
+                }
             } else {
-                throw new Error('Invalid quiz format')
+                throw new Error('Invalid quiz format: missing questions array')
             }
+
+            if (questionsArray.length === 0) {
+                throw new Error('Quiz has no questions')
+            }
+
+            setQuestions(questionsArray)
+            setStartTime(Date.now())
+
         } catch (err: any) {
             console.error('Error loading quiz:', err)
             setError(err.message || 'Could not load quiz.json')
@@ -112,6 +134,29 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
         }
     }
 
+    // Timer effect
+    useEffect(() => {
+        if (!loading && !error && !completed && !isLocked && timeLeft !== null && timeLeft > 0) {
+            const timer = setInterval(() => {
+                setTimeLeft(prev => {
+                    if (prev === null || prev <= 0) {
+                        clearInterval(timer)
+                        finishQuiz(true) // Time exceeded
+                        return 0
+                    }
+                    return prev - 1
+                })
+            }, 1000)
+            return () => clearInterval(timer)
+        }
+    }, [loading, error, completed, isLocked, timeLeft])
+
+    const formatTime = (seconds: number) => {
+        const mins = Math.floor(seconds / 60)
+        const secs = seconds % 60
+        return `${mins}:${secs.toString().padStart(2, '0')}`
+    }
+
     const handleOptionSelect = (option: string) => {
         const currentQ = questions[currentQuestionIndex]
         setAnswers(prev => ({
@@ -124,7 +169,7 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
         if (currentQuestionIndex < questions.length - 1) {
             setCurrentQuestionIndex(prev => prev + 1)
         } else {
-            finishQuiz()
+            finishQuiz(false)
         }
     }
 
@@ -134,18 +179,25 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
         }
     }
 
-    const finishQuiz = async () => {
+    const finishQuiz = async (timeExceeded: boolean = false) => {
         setSaving(true)
         try {
+            const timeTaken = startTime ? Math.floor((Date.now() - startTime) / 1000) : 0
+
             // Save answers to secure storage
-            const answersJson = JSON.stringify(
-                Object.entries(answers).map(([id, answer]) => ({
+            const answersData = {
+                answers: Object.entries(answers).map(([id, answer]) => ({
                     questionId: id,
                     answer
                 })),
-                null,
-                2
-            )
+                metadata: {
+                    completedAt: new Date().toISOString(),
+                    timeTakenSeconds: timeTaken,
+                    timeLimitSeconds: timeLimit,
+                    timeExceeded: timeExceeded,
+                    status: timeExceeded ? 'TIME_EXCEEDED' : 'COMPLETED'
+                }
+            }
 
             await fetch('/api/data', {
                 method: 'POST',
@@ -154,7 +206,7 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                     passkey,
                     action: 'save_file',
                     fileName: 'quiz_answers.json',
-                    content: answersJson
+                    content: JSON.stringify(answersData, null, 2)
                 })
             })
 
@@ -170,11 +222,16 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
 
     const handleCopyAnswers = async () => {
         const summary = questions.map((q, idx) => {
-            const answer = answers[q.id]
+            const answer = answers[q.id] || '(Skipped)'
             return `Q${idx + 1}: ${answer}`
         }).join('\n')
 
-        const textToCopy = `Here are my quiz answers:\n\n${summary}\n\nPlease grade my quiz!`
+        // Add metadata to clipboard text for Claude
+        const metadata = timeLeft === 0
+            ? "\n\n⚠️ NOTE: I exceeded the time limit! Please give me zero points as per the rules."
+            : ""
+
+        const textToCopy = `Here are my quiz answers:\n\n${summary}${metadata}\n\nPlease grade my quiz!`
 
         try {
             await navigator.clipboard.writeText(textToCopy)
@@ -210,11 +267,20 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                         </div>
                     </div>
 
-                    {!isLocked && !loading && !error && !completed && (
-                        <div className="flex items-center gap-2 bg-white/50 px-3 py-1 rounded-md border border-black/5">
-                            <span className="text-xs font-medium text-gray-500">Question {currentQuestionIndex + 1} of {questions.length}</span>
-                        </div>
-                    )}
+                    <div className="flex items-center gap-3">
+                        {timeLeft !== null && !completed && !isLocked && (
+                            <div className={`flex items-center gap-2 px-3 py-1 rounded-md border ${timeLeft < 60 ? 'bg-red-50 border-red-200 text-red-600' : 'bg-white/50 border-black/5 text-gray-600'}`}>
+                                <ArrowClockwise size={14} className={timeLeft < 60 ? 'animate-spin' : ''} />
+                                <span className="text-xs font-mono font-medium">{formatTime(timeLeft)}</span>
+                            </div>
+                        )}
+
+                        {!isLocked && !loading && !error && !completed && (
+                            <div className="flex items-center gap-2 bg-white/50 px-3 py-1 rounded-md border border-black/5">
+                                <span className="text-xs font-medium text-gray-500">Question {currentQuestionIndex + 1} of {questions.length}</span>
+                            </div>
+                        )}
+                    </div>
                 </div>
 
                 {/* Content */}
@@ -270,14 +336,22 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                         </div>
                     ) : completed ? (
                         <div className="flex flex-col items-center justify-center h-full max-w-md text-center animate-in fade-in zoom-in duration-300">
-                            <div className="w-20 h-20 bg-gradient-to-br from-green-400 to-emerald-500 rounded-full flex items-center justify-center mb-6 shadow-lg shadow-green-500/20">
-                                <Trophy size={40} weight="fill" className="text-white" />
+                            <div className={`w-20 h-20 rounded-full flex items-center justify-center mb-6 shadow-lg ${timeLeft === 0 ? 'bg-red-500 shadow-red-500/20' : 'bg-gradient-to-br from-green-400 to-emerald-500 shadow-green-500/20'}`}>
+                                {timeLeft === 0 ? (
+                                    <XCircle size={40} weight="fill" className="text-white" />
+                                ) : (
+                                    <Trophy size={40} weight="fill" className="text-white" />
+                                )}
                             </div>
-                            <h2 className="text-2xl font-bold text-gray-900 mb-2">Quiz Completed!</h2>
+                            <h2 className="text-2xl font-bold text-gray-900 mb-2">
+                                {timeLeft === 0 ? "Time's Up!" : "Quiz Completed!"}
+                            </h2>
                             <p className="text-gray-500 mb-8">
-                                {hasEmbeddedAnswers
-                                    ? "You've finished the quiz."
-                                    : "Answers saved. Copy them below to get your grade from Claude."}
+                                {timeLeft === 0
+                                    ? "You exceeded the time limit. Answers saved for evaluation."
+                                    : hasEmbeddedAnswers
+                                        ? "You've finished the quiz."
+                                        : "Answers saved. Ask Claude to grade them now."}
                             </p>
 
                             <div className="w-full space-y-3">
@@ -286,7 +360,7 @@ export function QuizApp({ onClose, onMinimize, zIndex }: QuizAppProps) {
                                     className="w-full py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-xl font-medium transition-colors shadow-lg shadow-blue-500/20 flex items-center justify-center gap-2"
                                 >
                                     {copySuccess ? <CheckCircle size={20} weight="fill" /> : <Copy size={20} weight="bold" />}
-                                    {copySuccess ? 'Copied to Clipboard!' : 'Copy Answers for Claude'}
+                                    {copySuccess ? 'Copied!' : 'Copy Answers for Claude'}
                                 </button>
 
                                 <button

mcp-server.js

@@ -126,7 +126,6 @@ class ReubenOSMCPServer {
                 properties: {
                   title: { type: 'string', description: 'Quiz title' },
                   description: { type: 'string', description: 'Quiz description' },
-                  timeLimit: { type: 'number', description: 'Time limit in minutes (optional)' },
                   questions: {
                     type: 'array',
                     description: 'Array of questions',
@@ -134,20 +133,20 @@ class ReubenOSMCPServer {
                       type: 'object',
                       properties: {
                         id: { type: 'string' },
+                        type: { type: 'string', enum: ['multiple_choice'] },
                         question: { type: 'string' },
-                        type: {
-                          type: 'string',
-                          enum: ['multiple-choice', 'true-false', 'short-answer']
-                        },
-                        options: {
-                          type: 'array',
-                          items: { type: 'string' }
-                        },
+                        options: { type: 'array', items: { type: 'string' } },
+                        correctAnswer: { type: 'string' },
+                        explanation: { type: 'string' },
                         points: { type: 'number' },
                       },
                       required: ['id', 'question', 'type'],
                     },
                   },
+                  timeLimit: {
+                    type: 'number',
+                    description: 'Time limit in minutes for the quiz (optional)',
+                  },
                 },
                 required: ['title', 'questions'],
               },