Skip to content

Add the Quiz Card tutorial template (tutorial-quiz-card) #73

Closed

Description

@anurag629

Part of #5. "Quiz of the day" cards are popular with educators. This is also the first template to use the toggle field type.

Idea
A "Quiz" pill plus a category pill at the top, then the question in large type. Below are 4 option boxes in a 2x2 layout (two flex rows), each with a letter badge (A to D). When "Show answer" is on, the correct option gets an accent background and a "Correct" tag.

Template details

  • File: src/templates/tutorial/quiz-card.ts, id tutorial-quiz-card
  • Fields: commonFields.title (question), optionA to optionD (text), correctOption (select: A / B / C / D), showAnswer (toggle, default false), commonFields.category, commonFields.bgColor, commonFields.accentColor, commonFields.textColor

Where to look

  • Closest reference: src/templates/product/feature-grid.ts (2x2), src/templates/tutorial/difficulty-badge.ts (select field)
  • Toggle UI: src/components/editor/ToggleSwitch.tsx

Acceptance criteria

  • showAnswer is parsed as params.showAnswer === true || params.showAnswer === 'true' (the API passes strings)
  • The toggle works in the editor
  • Re-exported in src/templates/tutorial/index.ts and registered in the Tutorial block of src/templates/registry.ts
  • Meets the shared template checklist in Add new card-style OG image templates #5

One template per contributor at a time, so more people get a chance.


Want to work on this? Comment below and I'll assign it to you. Please take one issue at a time, branch off dev, and open your PR against dev with Closes #<this issue number>.

Activity

  1. added
    help wantedExtra attention is needed
    templatesTemplate additions and improvements
    hacktoberfestGood pick for Hacktoberfest contributors
    on Sep 30, 2026
  2. piyusshhjangid commented on Oct 20, 2026

    @piyusshhjangid
    Contributor

    hi @anurag629 i would like to take this on

  3. anurag629 commented on Oct 20, 2026

    @anurag629
    MemberAuthor

    Hey @piyusshhjangid, it's yours, as your second next to chatcops #233! The editor already draws toggle fields (CustomizePanel.tsx, line 131), so the template only needs the field. The editor also reads ?showAnswer=1 as on (EditorApp.tsx, line 83), so it'd be good if the template took '1' too.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

hacktoberfestGood pick for Hacktoberfest contributorshelp wantedExtra attention is neededtemplatesTemplate additions and improvements

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions