QuizRunner

learning · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

GIFT quiz through the quiz-attempts API: one question at a time (8 question types), timer, score and review.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "QuizRunner",
  "props": {
    "quizId": 7,
    "title": "Extraction quiz",
    "intro": "Five questions. You can retry twice.",
    "maxAttempts": 2,
    "minutes": 10,
    "passScore": 3,
    "finishHref": "/learn/1/9"
  }
}

Props

Prop	Type	Required	Notes
quizId	integer	yes	topic_gift_quiz id. ≥ 1
title	string	yes	Quiz title. max length 160
intro	string		Intro text. max length 1000
maxAttempts	integer		Attempts allowed (0 = unlimited). ≥ 0
minutes	integer		Time limit in minutes (0 = none). ≥ 0
passScore	integer		Points needed to pass. ≥ 0
courseId	integer		Course id for progress. ≥ 0
topicId	integer		Topic id for progress. ≥ 0
finishHref	string (href)		Where ‘Continue’ goes after the result. max length 2048
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Quiz: Extraction quiz

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "quizId": "seven",
  "title": "x"
}

Issues:

• /quizId expected integer, got string

Rendered as:

Quiz: x

Accessibility

axe-core: 18 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.