diff --git a/app/practice/page.tsx b/app/practice/page.tsx index cfc7486..de13e16 100644 --- a/app/practice/page.tsx +++ b/app/practice/page.tsx @@ -3,8 +3,8 @@ import { useState, useEffect, useRef } from 'react'; import Link from 'next/link'; import { allQuestions } from '@/lib/questionsData'; -import { saveResponse, deleteResponse } from '@/lib/responseStorage'; -import { saveEvaluation } from '@/lib/evaluationStorage'; +import { saveResponse, deleteResponse, clearAllResponses } from '@/lib/responseStorage'; +import { saveEvaluation, getAllEvaluations, SelfEvaluation } from '@/lib/evaluationStorage'; interface Question { id: string; @@ -26,14 +26,25 @@ export default function PracticePage() { const [questionsInRound, setQuestionsInRound] = useState(0); const [extraTime, setExtraTime] = useState(0); const [showEvaluation, setShowEvaluation] = useState(false); - const [evaluation, setEvaluation] = useState({ - confidence: 3, - effectiveness: 3, - knowledge: 3, + const [evaluation, setEvaluation] = useState<{ + confidence: number | null; + effectiveness: number | null; + knowledge: number | null; + }>({ + confidence: null, + effectiveness: null, + knowledge: null, }); + const [previousEvaluations, setPreviousEvaluations] = useState([]); + const [showPreviousEvaluations, setShowPreviousEvaluations] = useState(false); const skipQuestionRef = useRef<(() => void) | null>(null); + // Load previous evaluations on mount + useEffect(() => { + setPreviousEvaluations(getAllEvaluations()); + }, []); + useEffect(() => { let interval: NodeJS.Timeout | null = null; @@ -148,7 +159,21 @@ export default function PracticePage() { }; const handleSubmitEvaluation = () => { - saveEvaluation(evaluation); + // Validate that all evaluations are filled + if (evaluation.confidence === null || evaluation.effectiveness === null || evaluation.knowledge === null) { + alert('Please rate all three categories before submitting.'); + return; + } + + saveEvaluation({ + confidence: evaluation.confidence, + effectiveness: evaluation.effectiveness, + knowledge: evaluation.knowledge, + }); + + // Reload evaluations to show the new one + setPreviousEvaluations(getAllEvaluations()); + // Reset for new round setShowEvaluation(false); setQuestionsInRound(0); @@ -157,6 +182,11 @@ export default function PracticePage() { setCurrentQuestion(null); setTimer(TIMER_DURATION); setIsActive(false); + setEvaluation({ + confidence: null, + effectiveness: null, + knowledge: null, + }); }; const handleStartNewRound = () => { @@ -166,6 +196,14 @@ export default function PracticePage() { getRandomQuestion(); }; + const handleClearAllResponses = () => { + if (window.confirm('Are you sure you want to delete all your recorded answers? This action cannot be undone.')) { + clearAllResponses(); + setResponse(''); + alert('All responses have been cleared.'); + } + }; + return (
@@ -194,7 +232,7 @@ export default function PracticePage() {
{[1, 2, 3, 4, 5].map((val) => ( @@ -215,7 +253,7 @@ export default function PracticePage() {
{[1, 2, 3, 4, 5].map((val) => ( @@ -236,7 +274,7 @@ export default function PracticePage() {
{[1, 2, 3, 4, 5].map((val) => ( @@ -262,6 +300,11 @@ export default function PracticePage() { > Submit Evaluation & Start New Round + {(evaluation.confidence === null || evaluation.effectiveness === null || evaluation.knowledge === null) && ( +

+ * Please rate all three categories before submitting +

+ )}
) : !currentQuestion ? (
@@ -271,13 +314,77 @@ export default function PracticePage() {

Finish questions early? Your extra time rolls over to the next question!

- + +
+ + + +
+ + {previousEvaluations.length > 0 && ( +
+ + + {showPreviousEvaluations && ( +
+ {previousEvaluations.slice().reverse().map((evalItem) => ( +
+
+

+ Round {evalItem.roundNumber} +

+ + {new Date(evalItem.timestamp).toLocaleDateString()} {new Date(evalItem.timestamp).toLocaleTimeString()} + +
+
+
+

Confidence

+
+ {evalItem.confidence} + /5 +
+
+
+

Effectiveness

+
+ {evalItem.effectiveness} + /5 +
+
+
+

Knowledge

+
+ {evalItem.knowledge} + /5 +
+
+
+
+ ))} +
+ )} +
+ )}
) : (