[Reader][UX] Reading-journey landing: drop the hero + tabs, add a guided tour and per-book quiz icons #630

New Issue

2026-07-17T03:58:04Z

spikerj commented

2026-07-17 03:58:04 +00:00

Ask

Make the reading-journey landing page more concise:

Remove the "corny" hero (Reading Journey / Explore Your Reading Interests / You've shown an interest…).
Remove the My Books and Take a Quiz tabs.
Add a Guided tour button (intro.js) that walks over the page, modeled on the csharp-playground tour.
Put a quiz icon on each book that launches that book's associated quiz.

Implementation

reading-journey: replaced the hero card + mat-tab-group with a compact action bar (My Books title, Upload, Guided tour) and the shelf rendered directly. Added startTour() (intro.js introJs.tour(), same pattern as mission) with steps over the action bar, shelf, a book card, the quiz icon, and upload. Added quizBookIds (computed from loaded quizzes by bookId) and startBookQuiz(book) which resolves the book's quiz and opens the existing difficulty picker; selectDifficulty now runs the active-attempt/resume check before starting. Removed the dead tab state (activeTab, inline get/setQuizDifficulty, startQuiz, MatTabs).
my-books-shelf: added quizBookIds input + quizRequested output; renders a quiz icon-button on each book card and the continue-reading hero when the book has a quiz. Removed its own upload button (now in the action bar).
i18n (en + es under _review), specs updated (new quiz flow + quizBookIds), stylelint/build/i18n-scan clean.

Fix PR: spikersoft-angular (branch feat/reading-journey-concise).

## Ask Make the reading-journey landing page more concise: - Remove the "corny" hero (Reading Journey / Explore Your Reading Interests / You've shown an interest…). - Remove the **My Books** and **Take a Quiz** tabs. - Add a **Guided tour** button (intro.js) that walks over the page, modeled on the csharp-playground tour. - Put a **quiz icon on each book** that launches that book's associated quiz. ## Implementation - **reading-journey**: replaced the hero card + `mat-tab-group` with a compact action bar (My Books title, Upload, Guided tour) and the shelf rendered directly. Added `startTour()` (intro.js `introJs.tour()`, same pattern as `mission`) with steps over the action bar, shelf, a book card, the quiz icon, and upload. Added `quizBookIds` (computed from loaded quizzes by `bookId`) and `startBookQuiz(book)` which resolves the book's quiz and opens the existing difficulty picker; `selectDifficulty` now runs the active-attempt/resume check before starting. Removed the dead tab state (`activeTab`, inline `get/setQuizDifficulty`, `startQuiz`, `MatTabs`). - **my-books-shelf**: added `quizBookIds` input + `quizRequested` output; renders a quiz icon-button on each book card and the continue-reading hero when the book has a quiz. Removed its own upload button (now in the action bar). - i18n (en + es under `_review`), specs updated (new quiz flow + `quizBookIds`), stylelint/build/i18n-scan clean. Fix PR: spikersoft-angular (branch `feat/reading-journey-concise`).

spikerj commented

2026-07-17 04:00:57 +00:00

Resolved in spikersoft-angular PR #220 (merged to master). Hero + My Books/Take a Quiz tabs replaced with a compact action bar (title, Upload, Guided tour); intro.js walkthrough added; per-book quiz icon opens the difficulty picker for that book's quiz. Closing.

Resolved in spikersoft-angular PR #220 (merged to `master`). Hero + My Books/Take a Quiz tabs replaced with a compact action bar (title, Upload, Guided tour); intro.js walkthrough added; per-book quiz icon opens the difficulty picker for that book's quiz. Closing.

spikerj closed this issue

2026-07-17 04:01:04 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: spikerj/spikersoft-issues#630