feat: add quiz progress tracking, streak counter and answer explanations

[RosheshChaware]

Fixes #1715

Description

This PR enhances the examples/quiz-app experience by introducing lightweight user engagement and learning-focused feedback features.

Changes included:

• Added a quiz progress indicator showing the current question number and completion progress.
• Added a streak counter to track consecutive correct answers during a quiz session.
• Added an answer explanation panel displaying the user's answer, the correct answer, and a short explanation after submission.

These improvements make the quiz experience more interactive and educational while preserving the existing terminal-style UI and without introducing additional dependencies.

Related Issue

Closes #ISSUE_NUMBER

Which package(s)?

• examples/quiz-app

Type of Change

• 🐛 Bug fix (type:bug)
• ✨ Feature (type:feature)
• 📝 Docs (type:docs)
• 🧪 Tests (type:testing)
• ♻️ Refactor (type:refactor)
• 🎨 Design / UX (type:design)
• ♿ Accessibility (type:accessibility)
• ⚡ Performance (type:performance)
• 🔧 DevOps / CI (type:devops)
• 🔒 Security (type:security)

Checklist

• ⭐ You starred the repo. The needs-star check blocks your merge otherwise.
• Tests pass locally: bun vitest run
• Build passes: bun run build
• Typecheck passes: bun run typecheck
• You read [CONTRIBUTING.md](https://chatgpt.com/c/CONTRIBUTING.md).
• Your PR title follows type: short description.
• Widget state mutators call markDirty() (if your change affects rendering).
• No new any types without an inline comment explaining why.
• No unrelated refactors bundled into this PR.

GSSoC 2026 Participation

• You are a GSSoC 2026 contributor.
• Your GSSoC profile: https://gssoc.girlscript.org/profile/YOUR_PROFILE_ID

Screenshots / Recordings (UI changes)

Add before/after screenshots of:

• Progress indicator
• Streak counter
• Answer explanation panel

Notes for the Reviewer

• Changes are limited to examples/quiz-app.
• No external dependencies were added.
• Existing quiz functionality remains unchanged.
• The implementation focuses on improving UX while keeping the terminal-first design philosophy intact.

Summary by CodeRabbit

• New Features
  • Questions now include explanations for additional context.
  • Progress bar displays your advancement through the quiz.
  • Enhanced feedback shows your answer versus the correct answer with explanations.
  • Streak tracker with visual indicator for consecutive correct answers.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 17cc31c0-a71c-4881-bbe6-a36e375f4fa4

📥 Commits

Reviewing files that changed from the base of the PR and between 35c2213 and 8884c2f.

📒 Files selected for processing (2)

• examples/quiz-app/src/index.tsx
• test_layout.ts

---

📝 Walkthrough

Walkthrough

The Question interface gains an optional explanation field, populated across several quiz entries. QuizApp adds streak, userChoiceIndex, _progressBar, _feedbackStatus, and _feedbackDetails state/UI fields; handleAnswer is rewritten to update these, advance/showSummary/restart reset them. A new test_layout.ts script logs QuizApp layout children.

Changes

Quiz App: Progress Tracking, Streak, and Answer Explanations

Layer / File(s)	Summary
Question model and data content examples/quiz-app/src/index.tsx	Question interface adds optional explanation field; multiple question entries are populated with explanation text.
QuizApp state fields and UI element construction examples/quiz-app/src/index.tsx	Adds streak, userChoiceIndex, _progressBar, _feedbackStatus, and _feedbackDetails private fields; constructor initializes progress bar and the two feedback text elements, wiring them into the widget children list in place of the prior single _feedback element.
Answer handling, progress display, and lifecycle examples/quiz-app/src/index.tsx	headerText() shows streak with fire emoji; new progressBarText() computes the progress bar string. handleAnswer() records user choice index, updates score/streak, sets _feedbackStatus style and emoji, builds _feedbackDetails with user answer, correct answer, and optional explanation. advance() clears both feedback fields and refreshes progress bar. showSummary() and restart() maintain progress bar and split feedback state.

Layout Test Script

Layer / File(s)	Summary
Layout inspection test script test_layout.ts	New standalone script that instantiates QuizApp, accesses layoutNode, and prints each child's index, id, style.visible, and style.height to the console.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Karanjot786/TermUI#1306: Introduced the original quiz-app example that this PR directly extends with progress tracking, streak counting, and answer explanations.

Suggested labels

gssoc:approved, quality:clean, type:feature, area:examples, level:intermediate

Suggested reviewers

• Karanjot786

Poem

🐇 Hop along, the quiz grows bright,
A fire streak burns through the night,
Progress bars fill bit by bit,
Explanations — quite a hit!
The rabbit tracks each right reply,
And cheers you on as scores go high! 🎉

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: adding quiz progress tracking, streak counter, and answer explanations.
Description check	✅ Passed	The description is comprehensive, covering all required sections including the related issue, package scope, type of change selection, and a completed checklist.
Linked Issues check	✅ Passed	All three objectives from issue #1715 are implemented: progress indicator showing question number/progress bar, streak counter with fire emoji, and answer explanation panel with user/correct answers and explanations.
Out of Scope Changes check	✅ Passed	Changes are scoped to examples/quiz-app with no modifications to core packages. The test_layout.ts file is a minor test utility related to the quiz-app changes and is not unrelated scope creep.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}