+ )
+}
+
function TimerDisplay({ seconds, total }) {
const pct = total > 0 ? (seconds / total) * 100 : 100
const mins = Math.floor(seconds / 60), secs = seconds % 60
@@ -354,11 +394,23 @@ export default function QuizPage() {
const [expandedImagePath, setExpandedImagePath] = useState('')
const [imageZoom, setImageZoom] = useState(1)
const [startedAt, setStartedAt] = useState(null)
+ // Wall-clock seconds spent in this session and on the question in front of
+ // you. Kept here rather than derived from startedAt so pausing can stop them.
+ const [sessionSeconds, setSessionSeconds] = useState(0)
+ const [questionSeconds, setQuestionSeconds] = useState(0)
+ const [clockPaused, setClockPaused] = useState(false)
const [favorites, setFavorites] = useState([])
const [activeReadSegment, setActiveReadSegment] = useState(null)
const [manualHighlights, setManualHighlights] = useState({})
const [draftAnswer, setDraftAnswer] = useState('')
const [tool, setTool] = useState(null)
+ // Which of the per-question panels is open. One at a time: they sit in the
+ // same place under the stem, and two at once would push the options off screen.
+ const [panel, setPanel] = useState(null)
+ const [note, setNote] = useState('')
+ const [noteSaved, setNoteSaved] = useState(true)
+ const [folders, setFolders] = useState([])
+ const [shareUrl, setShareUrl] = useState('')
const [showReview, setShowReview] = useState(false)
const [responseStats, setResponseStats] = useState(null)
const [statsError, setStatsError] = useState('')
@@ -710,7 +762,64 @@ const timerStarted = timeLeft !== null
}
}, [attemptId, quizMode, saveProgressNow])
+ useEffect(() => {
+ if (clockPaused || !attemptId) return
+ const tick = setInterval(() => {
+ setSessionSeconds(v => v + 1)
+ setQuestionSeconds(v => v + 1)
+ }, 1000)
+ return () => clearInterval(tick)
+ }, [clockPaused, attemptId])
+
+ // Time on *this* question restarts when you move to another one.
+ useEffect(() => { setQuestionSeconds(0) }, [current?.id])
+
+ useEffect(() => {
+ if (!current?.id) return
+ let live = true
+ setPanel(null)
+ api.get(`/questions/detail/${current.id}/note`)
+ .then(res => { if (live) { setNote(res.data?.content || ''); setNoteSaved(true) } })
+ .catch(() => { if (live) { setNote(''); setNoteSaved(true) } })
+ return () => { live = false }
+ }, [current?.id])
+
+ useEffect(() => {
+ api.get('/collections/').then(res => setFolders(res.data || [])).catch(() => setFolders([]))
+ }, [])
+
+ useEffect(() => {
+ setShareUrl(quiz?.share_token ? `${window.location.origin}/share/${quiz.share_token}` : '')
+ }, [quiz?.share_token])
+
const setAnswer = (questionId, value) => setAnswers(prev => ({ ...prev, [questionId]: value }))
+
+ // Reset one question rather than the whole attempt: a misclick should cost
+ // the answer you just gave, not the nineteen before it.
+ const resetQuestion = (questionId) => {
+ setAnswers(prev => {
+ const next = { ...prev }
+ delete next[questionId]
+ return next
+ })
+ setDraftAnswer('')
+ }
+
+ const saveNote = async (questionId, content) => {
+ setNoteSaved(false)
+ try {
+ await api.put(`/questions/detail/${questionId}/note`, { content })
+ setNoteSaved(true)
+ } catch { setNoteSaved(false) }
+ }
+
+ const saveToFolder = async (collectionId, questionId) => {
+ try {
+ await api.put(`/collections/${collectionId}/questions/${questionId}`)
+ setFolders(list => list.map(f => (f.id === collectionId
+ ? { ...f, question_ids: [...(f.question_ids || []), questionId] } : f)))
+ } catch { /* the row stays unticked, which is the honest signal */ }
+ }
const chooseAnswer = value => {
if (!current || (isStudy && answers[current.id])) return
if (isStudy) setDraftAnswer(value)
@@ -1115,6 +1224,23 @@ const timerStarted = timeLeft !== null
/>
+ {current.attending_tip && (
+
+ )}
+
+
+
+ {/* The panels sit under the toolbar, where the eye already is, and
+ only one opens at a time: two would push the options off screen. */}
+ {panel === 'tip' && current.attending_tip && (
+