Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
122 changes: 122 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,128 @@

The format is loosely based on [Keep a Changelog](https://keepachangelog.com/). Dates use ISO 8601. Each section is grouped under the date the change shipped, with the Databricks exam-guide version each affected certification tracks.

## [2026.05.21-25] — Practice quiz: completion summary, attempt history, export, pause/resume, WCAG AAA

This entry covers everything that landed alongside the mock-exam launch in the same `feat/mock-exams-in-practice` branch but is its own user-visible feature surface — separated here for clarity.

### Added — completion summary screen

When the user has answered every question in the (filtered) bank, the quiz redirects to a dedicated summary screen instead of looping back through the bank:

- **Hero block**: large tone-coloured percentage + `correct / total` fraction + verdict badge.
- Mock exams use the Databricks-typical 70 % passing line: **PASS** or **BELOW PASSING**.
- Practice mode uses descriptive labels (`Perfect score` / `Excellent` / `Great work` / `Solid` / `Getting close` / `Keep practicing` / `More practice needed`).
- **Per-module breakdown** with tone-coloured progress bars and `correct/total · pct%` labels per domain.
- **Weak-area callout** ("Focus next on these modules"): domains scoring below 70 % surfaced explicitly so users know where to drill next.
- **Time stats** (only when an exam timer was running): total time + average per question. Paused time is subtracted so the figure reflects effort, not wall-clock.
- **Best streak** metric (always shown when > 0).
- **Confetti burst** at ≥ 80 % using the per-cert gradient palette; respects `prefers-reduced-motion`.

### Added — attempt history

- Every completed session is appended to `localStorage` under `dbx-practice-sessions-<cert>` (per-bank ring buffer capped at 50 records).
- The summary screen lists the last six prior attempts in a compact clickable list for at-a-glance comparison.
- The Stats screen has a full **"Past attempts"** section showing every saved attempt for the current bank (date, time, score, fraction, duration, verdict).
- Clicking any past row reopens that attempt's full summary in read-only mode (with a "← Back to history" action).
- **"Clear history"** button on the Stats page with a confirm modal to wipe the attempt log without touching per-question history.

### Added — export (HTML + CSV)

The summary screen has an export bar (`Export this summary — HTML | CSV`) that downloads the current summary as a standalone file:

- **HTML**: self-contained printable report with inline AAA-compliant styles, including the hero, weak-area callout, per-module breakdown, and stats table. Opens cleanly in any browser, prints well.
- **CSV**: two-section sheet (metadata key/value pairs at the top, per-module table at the bottom). Opens cleanly in Excel / Numbers / Sheets.

Filenames use `dbx-<cert>-<iso-timestamp>.{html,csv}`. Past summaries can also be exported via the same UI.

### Added — pause / resume the exam timer

- **Click the timer pill (or press `P`)** to pause. A full-screen backdrop-blur overlay covers the page so the questions aren't readable while the user steps away.
- **Resume** by clicking the Resume pill, clicking anywhere outside the card, or pressing `P` / `Esc` / `Enter` / `Space`.
- Paused time accumulates in `STATE.totalPausedMs` and is **subtracted** from the session's elapsed-time figure on the summary screen — so the "Total time" reflects actual effort.
- Mobile-friendly: the pause glyph stays surfaced at low opacity on touch devices (no hover state), so users can discover the timer is interactive without tapping blind.

### Added — custom confirm modal

Replaces `window.confirm()` with a theme-aware dialog throughout the app:

- Used by **Switch bank**, **Reset progress**, **Leave session**, **Clear attempt history**.
- Focus is trapped between Cancel / Confirm; Esc + backdrop click cancel; Enter on Confirm closes.
- `role="alertdialog"` with `aria-labelledby` + `aria-describedby` for screen readers.
- Backdrop blur + scale-in animation; respects `prefers-reduced-motion`.

### Added — Q.N watermark + editorial polish

- Faded oversized `Q.N` numeral in the question card's top-right corner — adds editorial sequence cue without competing with content. Right-padding on the question text reserves the watermark zone so wrapping text never collides.
- Soft warm radial gradient at the top of the page background (replaces flat single-tone bg).
- Editorial eyebrow + lead paragraph on the cert picker.
- Bigger sans-serif verdict heading in feedback ("Correct" / "Incorrect — answer was N") replacing the small mono-uppercase label.
- Three-line colophon footer ("Set in Geist & Geist Mono · No tracking · Progress stays in your browser").
- `text-wrap: balance` on headings + leads.

### Added — keyboard layout polish

The actionbar uses a CSS-grid 3-column layout (`1fr auto 1fr`) for predictable kbd-hint centering and primary-action placement:

```

Check failure on line 70 in CHANGELOG.md

View workflow job for this annotation

GitHub Actions / Markdown style (markdownlint-cli2)

Fenced code blocks should have a language specified

CHANGELOG.md:70 MD040/fenced-code-language Fenced code blocks should have a language specified [Context: "```"] https://github.com/DavidAnson/markdownlint/blob/v0.37.4/doc/md040.md
Row 1: [Timer ←] … [kbd-hint centered] [Next / Skip / Submit →]
Row 2: [session · bank stats · Stats Settings Reset Switch bank]
```

- Primary actions on the right for thumb-reach on mobile + standard mobile convention.
- Source order is `Next → Skip → Submit` so the rightmost visible button is always the primary action (Submit before submit; Next after).
- `kbd-hint` strip shows `P pause` only when a timer is configured (gated by `body.has-timer`).

### Changed — WCAG AAA contrast across the board

Every text colour token now measures **≥ 7:1** on the body background (annotated with measured ratios in the CSS). The vivid brand `--accent` (`#FF4F2C` light / `#FF7A5C` dark) stays vivid for graphic uses (focus rings, gradient strips, big numerals) where 3:1 / AA-Large is sufficient. Small-text usages of accent now route through a darker `--accent-text` variant.

Light theme:

| Token | Before | After | Ratio |
| :--- | :--- | :--- | :--- |
| `--muted` | `#71717A` | `#52525B` | 4.45 → **7.1** |
| `--positive` | `#15803D` | `#14532D` | 4.6 → **9.0** |
| `--negative` | `#B91C1C` | `#991B1B` | 6.4 → **8.2** |
| `--selected` | `#2563EB` | `#1D4ED8` | 5.7 → **8.6** |
| `--accent-text` *(new)* | — | `#9A3412` | **7.1** |
| `--warn` *(new)* | — | `#92400E` | **7.5** |

Dark theme:

| Token | Before | After | Ratio |
| :--- | :--- | :--- | :--- |
| `--muted` | `#8B8B95` | `#A1A1AA` | 5.8 → **7.4** |
| `--positive` | `#4ADE80` | `#6EE7B7` | 8.5 → **11.2** |
| `--negative` | `#F87171` | `#FCA5A5` | 7.5 → **9.7** |
| `--selected` | `#60A5FA` | `#93C5FD` | 7.0 → **10.4** |
| `--accent-text` *(new)* | — | `#FFA88B` | **7.2** |
| `--warn` *(new)* | — | `#FBBF24` | **11.5** |

Primary button hover redesigned: was a background swap to vivid accent (white-on-coral failed AA in dark mode at 2.7:1). Now keeps the AAA-strong idle colours and adds elevation + an accent-coloured glow as the only visual cue. Destructive modal button hardcoded `#991B1B` / `#7F1D1D` (white text 8.2 : 1+ in both themes).

### Changed — accessibility plumbing

- `aria-live="polite"` + `role="status"` on the quiz feedback panel.
- Rich `aria-label` on past-attempt rows: screen readers announce the full row in one phrase ("View attempt from 21 May 2026 at 14:35, scored 85 percent, 38 of 45 correct, took 24:15, passed").
- Settings selects properly bound via `aria-labelledby` + `aria-describedby` to their `h4` + helper paragraph.
- Masthead buttons (brand-cluster, cert-link, theme pill) use in-bounds focus indicators (border-color + soft background tint) instead of `outline`, so the indicator can't be clipped by the sticky masthead's `backdrop-filter` containing block.
- `prefers-reduced-motion` respected for confetti, slide-in, modal pop, pause overlay, attempt animations.
- No emoji used as structural icons anywhere — every glyph is an inline SVG (timer, pause, play, brand mark).
- All dynamic DOM is built via `createElement` + `textContent`; the HTML export uses an explicit `escapeHtml()`.

### Changed — mobile responsive overhaul

- New breakpoints: **540 px** + **380 px** + landscape phones. Existing 720 px / 640 px retained.
- Choice text bumped to 16 px on phones (avoids iOS focus auto-zoom + improves arm's-length readability).
- Touch targets ≥ 44 × 44 px for every interactive element (link buttons, brand cluster, cert-link, theme pill, attempt rows).
- `@media (hover: none)` safeguards prevent the brief "sticky hover" state that lingers on touch devices after a tap.
- Actionbar grid collapses to a 2-column layout on small screens; primary-action cluster pinned to the right edge for thumb reach.

### Changed — UI cache versioning

`APP_VERSION` bumped through `"31"` … `"37"` across the feature work. `<script src="app.js?v=37">` and `<link href="styles.css?v=37">` in `index.html`.

## [2026.05.21-24] — Mock exams in practice quiz + auto-rebuild on source edits (931 q / 18 banks)

### Added
Expand Down
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ tags:
> **These are the exam notes I built while preparing for the Databricks certification series.** Cheat sheets, practice questions, mock exams, and end-to-end worked examples — now open-sourced under MIT so the next person doesn't have to start from scratch. Every certification section maps to the current official Databricks exam guide for that credential. If it helped you, ⭐ the repo and pass it on.

> [!tip]
> **▶ [Try the practice quiz live](https://kengio.github.io/databricks-certification-study-guide/)** — adaptive multiple-choice quiz, **931 questions across 18 banks** (6 practice + 12 mock exams, all 6 cert tracks). Runs in your browser, progress saved locally. No install, no signup. Light/dark/auto theme + accessible reset.
> **▶ [Try the practice quiz live](https://kengio.github.io/databricks-certification-study-guide/)** — adaptive multiple-choice quiz, **931 questions across 18 banks** (6 practice + 12 mock exams, all 6 cert tracks). Runs in your browser, progress saved locally. No install, no signup. Exam timer with pause / resume, completion summary with per-module breakdown + weak-area highlight, attempt history, HTML / CSV export, keyboard-first navigation, light / dark / auto theme, WCAG AAA contrast.

> [!info]
> **Read in another language**: 🇹🇭 [ภาษาไทย](./i18n/th/README.md) (in progress) · For other languages and the translation policy, see [`TRANSLATING.md`](./TRANSLATING.md) and [`i18n/README.md`](./i18n/README.md).
Expand Down
24 changes: 21 additions & 3 deletions practice/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,20 @@ A browser-based quiz for the practice-question markdown files in this repo. Trac
- **Per-cert localStorage state**: your progress for each certification is kept independently. No cross-device sync — `Export progress (JSON)` downloads it if you want to back it up or move it.
- **Source: the existing practice-question markdown files** — no parallel content to maintain. When the practice-question files change, re-run the converter and the bank refreshes.

## Features

- **Two-step picker** — pick a certification card (per-cert colour gradient + total-questions hero) → pick a bank (practice or one of two mock exams).
- **Adaptive question selector** weighted toward never-attempted + recently-wrong questions; switchable to Random or Sequential.
- **Domain + difficulty filters** so you can drill a specific exam domain or just hard questions.
- **Exam timer** (30 / 60 / 90 / 120 min presets) with a 5-minute warning state and an expired toast. **Pause/resume** with backdrop blur — step away mid-exam without losing the run; paused time is subtracted from the session's elapsed-time figure.
- **Completion summary screen** when you finish every question in the (filtered) bank: hero score, verdict (PASS/BELOW for mocks at 70 %, descriptive label for practice), per-module progress bars, weak-area callout ("Focus next on these modules"), time stats (when timer was used), best streak, confetti on ≥ 80 %.
- **Attempt history** — every completed session is saved per-bank in `localStorage` (50-record ring buffer). Browse past attempts on the summary + Stats screens; click any row to reopen its full summary in read-only mode.
- **Export** the current summary as standalone **HTML** (printable, self-contained) or **CSV** (opens in Excel / Numbers / Sheets) for sharing or longitudinal tracking.
- **Keyboard-first**: `1`-`4` / `A`-`D` / `↑↓` select · `Enter` / `Space` submit · `S` skip · `N` / `→` next · `P` pause (when a timer is set).
- **Light / Dark / Auto theme** with `prefers-color-scheme` integration; choice persisted in `localStorage`.
- **WCAG AAA contrast** across every text token (≥ 7:1 normal text, ≥ 4.5:1 large), `prefers-reduced-motion` respected, focus indicators that don't get clipped by `backdrop-filter` regions.
- **Mobile-responsive** down to 380 px; primary action cluster pinned to the right edge for thumb reach; pause-glyph stays surfaced on touch devices.

## Available banks

**18 banks · 931 questions total** — every cert has practice questions plus two full-length mock exams.
Expand Down Expand Up @@ -129,9 +143,12 @@ A weighted random pick chooses the next question. After a full pass through the

## Privacy

- All state lives in your browser's `localStorage` under keys like `dbx-practice-data-engineer-associate`.
- All state lives in your browser's `localStorage` under two key families per bank:
- `dbx-practice-<cert>` — per-question attempt log (used by the adaptive selector)
- `dbx-practice-sessions-<cert>` — completed-session history (used by the summary + Stats history list, ring-buffered at 50 records)
- Plus singletons `dbx-practice-theme` and `dbx-practice-timer-minutes`.
- Nothing is sent to a server — there's no server.
- Clearing browser storage or using a different browser / device wipes progress. The **Export progress (JSON)** button lets you back it up.
- Clearing browser storage or using a different browser / device wipes progress. **Export progress (JSON)** in Stats backs up the per-question log; **Export summary (HTML / CSV)** on the summary screen exports an individual completed attempt.
- Importing progress isn't built yet; if you need it, open an issue.

## Files in this folder
Expand Down Expand Up @@ -209,7 +226,8 @@ PRs welcome for: more cert banks, UI improvements, additional adaptive strategie

- This isn't an official Databricks practice exam. It's static study material derived from the markdown files in this repo. Quality matches the quality of those files.
- The adaptive selector is a simple weighted-random heuristic, not a full spaced-repetition algorithm like SM-2 or FSRS. It's good enough for cert prep; if you want SM-2-level scheduling, use Anki (see [`anki/README.md`](../anki/README.md)).
- The 198 questions live alongside, not inside, the 12 mock-exam files (573 questions). The mocks remain the canonical end-to-end exam simulation; this practice app is for between-mock drilling.
- 364 topic-drill practice questions + 567 questions across 12 full-length mock-exam banks = **931 total**. The mocks remain the canonical end-to-end exam simulation; the practice banks are for between-mock drilling. The summary screen handles both kinds (PASS/BELOW verdict for mocks, descriptive labels for practice).
- A handful of mock-exam questions whose choices contain multi-line code fences are skipped during build (the parser sees a bare `A)` / `C)` line). Same edge case as the practice banks — fix by inlining the code on the choice line or moving it into the answer explanation.

---

Expand Down
Loading