Skip to content

feat(web): add quiz-button component and schema #441

@Kneesal

Description

@Kneesal

Background

The quiz button is a visually distinct CTA that opens a modal with an embedded quiz iframe. It was previously implemented as part of a CTA variant, but deserves its own component and CMS schema for clarity and reuse.

Expected outcome

A dedicated quiz-button schema in the CMS and corresponding web component that renders a gradient animated button with a "Quiz" badge, text, and arrow icon. Clicking opens a full-screen modal with an iframe pointing to the configured quiz URL.

Acceptance criteria

  • CMS schema sections.quiz-button created with buttonText and iframeSrc attributes
  • Schema registered in section and container-slot dynamic zones
  • Web component QuizButton renders the gradient animated button matching reference design
  • QuizButton modal opens full-screen iframe on click
  • GraphQL fragment created for quiz-button
  • Section renderer handles ComponentSectionsQuizButton typename
  • Seed data includes quiz-button as last block in first section

Possible solution(s)

  1. Create quiz-button.json schema, QuizButton.tsx component, fragment, and wire into Section renderer

References

  • Existing CTA component pattern in apps/web/src/components/sections/CTA.tsx
  • Seed script apps/cms/scripts/seed-easter.cjs

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Backlog

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions