Answers saved visually but refresh loses progress (inside school building)

[Pragya79645]

Selected answers remain visible, but refreshing the quiz clears the progress.

[KikTro]

Issue #22

Bug Report

Building: School House
Difficulty: Medium

What is broken?

Selected answers stay visible while the quiz is open, but refreshing the page wipes all progress — answers and current question index reset to the start.

Steps to reproduce

• Go to the School House → Quiz Arena.
• Answer Q1, advance to Q2, answer Q2.
• Refresh the browser.
• Observe that the quiz restarts at Q1 with nothing highlighted.
• Expected behavior
• After refresh, previously selected answers and the current question index should be restored from localStorage so the user can resume exactly where they left off.

Actual behavior

Progress is completely lost on every refresh. No console error — silent data loss.

Root cause

1. The cause is that there is overlapping bugs in [useSchoolChallenge]:

Spliting storage keys. The hook read from one key and wrote to another:

Nothing was written to the read key, so [getItem] always returned null when mounted.

2. Effect-order race. Even after unifying the key, persistence still failed because the save effect and the load effect both ran on mount — and React runs effects in declaration order:

Save effect fires first with the initial empty state → overwrites saved progress as [{ answers: {}, currentQuestionIndex: 0 }].
Load effect fires next → reads the just-overwritten empty snapshot.
thats why on every refresh, the hook silently clobbered its own saved data before it could hydrate from it.

Solution / Approach

Unified both storage operations onto a single [STORAGE_KEY = 'debug-quest-school-progress'].
Moved hydration out of [useEffect] and into [useState]'s lazy initializer via a [loadPersistedState()] helper, so state is populated from localStorage synchronously during the first render — before any save effect can run:

function loadPersistedState() {
  if (typeof window === 'undefined') return null
  const rawState = window.localStorage.getItem(STORAGE_KEY)
  if (!rawState) return null
  try { return JSON.parse(rawState) } catch { return null }
}

const persisted = loadPersistedState()

const [activeSection, setActiveSection] = useState(
  typeof persisted?.activeSection === 'string' ? persisted.activeSection : 'quiz'
)
const [currentQuestionIndex, setCurrentQuestionIndex] = useState(() => {
  const raw = persisted?.currentQuestionIndex
  if (typeof raw !== 'number') return 0
  return Math.max(0, Math.min(quizQuestions.length - 1, raw))
})
const [answers, setAnswers] = useState(
  persisted?.answers && typeof persisted.answers === 'object' ? persisted.answers : {}
)

• Removed the now-redundant mount-time [useEffect] that used to hydrate state asynchronously.
• The save effect itself is unchanged; it now always writes the already-hydrated values, so the first write is a no-op instead of a destructive overwrite.
• Same input validation as before (clamping [currentQuestionIndex], type-guarding [answers] / [activeSection]), I just moved earlier in the lifecycle.
• Tab sync logic ([TAB_SYNC_KEY]) and every other effect are untouched.
• No new dependencies.

Verification

• School House → Quiz Arena → answer Q1, navigate to Q2, answer Q2.
• Refresh the page.
• Now the Quiz resumes on Q2 with Q1/Q2 selections still highlighted.
• Clear localStorage → refresh → quiz correctly starts from Q1 with no answers (no regressions on the "fresh start" path).

Environment

Browser: Chrome 124 (reproducible in all browsers)
Screen size: Any
Mode: Light / Dark

Screenshots / Console output

No console output — silent logical bug. Observable via the Quiz Arena UI in [QuizArena.jsx] after refresh.