fix: auto advance correct performance answers
This commit is contained in:
@@ -1,4 +1,4 @@
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { motion } from 'framer-motion'
|
||||
import { Link } from 'react-router-dom'
|
||||
import clsx from 'clsx'
|
||||
@@ -48,6 +48,7 @@ interface AnswerState {
|
||||
}
|
||||
|
||||
const STORAGE_KEY = 'performance-domain-practice-progress-v3'
|
||||
const CORRECT_AUTO_NEXT_DELAY = 1000
|
||||
|
||||
const scopeOptions: Array<{ value: PracticeScope; label: string }> = [
|
||||
{ value: 'all', label: '全部' },
|
||||
@@ -189,6 +190,7 @@ export default function PerformanceDomainPracticePage() {
|
||||
)
|
||||
const [answerState, setAnswerState] = useState<AnswerState | null>(null)
|
||||
const [showCelebration, setShowCelebration] = useState(false)
|
||||
const autoNextTimerRef = useRef<number | null>(null)
|
||||
|
||||
const currentQuestionId = progress.queue[0] ?? null
|
||||
const currentQuestion = currentQuestionId
|
||||
@@ -219,7 +221,30 @@ export default function PerformanceDomainPracticePage() {
|
||||
if (isFinished) setShowCelebration(true)
|
||||
}, [isFinished])
|
||||
|
||||
useEffect(() => {
|
||||
if (!answerState?.isCorrect) return
|
||||
|
||||
if (autoNextTimerRef.current) {
|
||||
window.clearTimeout(autoNextTimerRef.current)
|
||||
}
|
||||
|
||||
autoNextTimerRef.current = window.setTimeout(() => {
|
||||
advanceToNext(true)
|
||||
}, CORRECT_AUTO_NEXT_DELAY)
|
||||
|
||||
return () => {
|
||||
if (autoNextTimerRef.current) {
|
||||
window.clearTimeout(autoNextTimerRef.current)
|
||||
autoNextTimerRef.current = null
|
||||
}
|
||||
}
|
||||
}, [answerState])
|
||||
|
||||
const restartPractice = (scope = progress.scope) => {
|
||||
if (autoNextTimerRef.current) {
|
||||
window.clearTimeout(autoNextTimerRef.current)
|
||||
autoNextTimerRef.current = null
|
||||
}
|
||||
setProgress(createProgress(scope, questionBank))
|
||||
setAnswerState(null)
|
||||
setShowCelebration(false)
|
||||
@@ -233,6 +258,10 @@ export default function PerformanceDomainPracticePage() {
|
||||
const advanceToNext = (isCorrect: boolean) => {
|
||||
if (!currentQuestionId) return
|
||||
|
||||
if (autoNextTimerRef.current) {
|
||||
window.clearTimeout(autoNextTimerRef.current)
|
||||
autoNextTimerRef.current = null
|
||||
}
|
||||
setAnswerState(null)
|
||||
setProgress((prev) => {
|
||||
if (prev.queue[0] !== currentQuestionId) return prev
|
||||
@@ -295,7 +324,7 @@ export default function PerformanceDomainPracticePage() {
|
||||
'border-gray-100 hover:border-indigo-200 hover:bg-indigo-50/40 dark:border-gray-700 dark:hover:border-indigo-700 dark:hover:bg-indigo-950/20',
|
||||
isAnswerShown && 'cursor-default hover:bg-white dark:hover:bg-gray-800',
|
||||
shouldHighlightCorrect &&
|
||||
'border-emerald-400 bg-emerald-50 ring-2 ring-emerald-300/80 dark:border-emerald-500 dark:bg-emerald-950/30 dark:ring-emerald-700/70',
|
||||
'border-emerald-400 bg-emerald-50 shadow-[inset_0_0_0_2px_rgba(52,211,153,0.65)] dark:border-emerald-500 dark:bg-emerald-950/30 dark:shadow-[inset_0_0_0_2px_rgba(16,185,129,0.45)]',
|
||||
isWrongSelected &&
|
||||
'border-rose-300 bg-rose-50 dark:border-rose-700 dark:bg-rose-950/30'
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user