Spoilers ahead

Solutions walk-through

One card per bug — symptom, where to look in the inspector, and the exact fix.

Each card explains what you should see, which DevTools tab is most useful, and the code change that fixes it. File paths are relative to the static/debug-training-standalone/ folder.

1 The whole page looks unstyled

Symptom No colors, no layout, no rounded cards. Plain black text on a white background.
Where to look DevTools → Network tab. You'll see a row for style.css with status 404.
Why it happens The <link> in index.html points to style.css, but the actual file is named styles.css (with an s).
Fix in index.html 
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="styles.css" />

2 The quiz is stuck on "Loading…"

Symptom The quiz card never renders. The placeholder text "Loading…" stays on screen.
Where to look DevTools → Console shows ReferenceError: triviaDatabase is not defined. The Network tab shows a 404 for data.js.
Why it happens The script tag points to data.js at the page root, but the file actually lives in the js/ folder. quiz.js then can't find window.triviaDatabase.
Fix in index.html 
<script src="data.js"></script>
<script src="js/data.js"></script>
<script src="js/quiz.js"></script>

3 The Solutions button drops below the nav

Symptom The "Solutions" button appears on its own row underneath the navigation bar instead of aligned to the right of it.
Where to look DevTools → Elements. You'll see <div class="nav-actions"> as a sibling of <div class="nav-content">, not nested inside it. The flex layout that should align it can't reach it.
Why it happens The nav-content wrapper is closed too early, so nav-actions escapes the flex container.
Fix in index.html 
<nav class="top-nav">
  <div class="nav-content">
    <span class="nav-logo">Debug Training</span>
    <span class="nav-tag">Standalone</span>
  </div>
  <div class="nav-actions">
    <div class="nav-actions">
      <button type="button" class="solutions-button" id="solutions-trigger">
        Solutions
      </button>
    </div>
  </div>
</nav>

4 The Submit/Next button looks like a plain default button

Symptom Inside the otherwise-styled quiz card, the "Submit answer" / "Next question" / "Play again" button is a tiny, default-grey browser button with no purple background.
Where to look DevTools → Elements. Click the button. The Styles panel shows no .quiz-button rule matches because the element's class is quiz-buton (only one t).
Why it happens Typo in the class name inside js/quiz.js. The CSS rule in styles.css is .quiz-button, but the JS template emits quiz-buton.
Fix in js/quiz.js (button is rendered inside render()) 
'<button class="quiz-buton" id="' + buttonId + '"' + disabledAttr + '>' +
'<button class="quiz-button" id="' + buttonId + '"' + disabledAttr + '>' +
    buttonLabel +
'</button>'

Tip Search the file for quiz-buton — there's only one occurrence.

5 Correct answers are reported as wrong (and the score never moves)

Symptom Pick the obviously-correct meaning and the page tells you "Not quite." Pick a wrong meaning and the page says "Correct!". The score counter stays at 0 when it should go up, or vice-versa.
Where to look DevTools → Sources. Open js/quiz.js and find checkAnswer. Set a breakpoint, submit an answer, and inspect the values — the comparison is inverted.
Why it happens The function returns !== when it should return ===. So an actual match (meaning === selected) returns false — meaning "not correct".
Fix in js/quiz.js 
function checkAnswer(entry, selected) {
  return entry.meaning.trim() !== selected.trim();
  return entry.meaning.trim() === selected.trim();
}
← Back to the buggy page