Interactive · Gutenberg
Scored Quiz block for WordPress
Multi-question scored quiz with points-based result ranges. Shows personalised outcome based on total score. Includes progress bar and retake button.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Multi-question scored quiz with points-based result ranges. Shows personalised outcome based on total score. Includes progress bar and retake button.
Inspector panels on this block: Quiz Settings, Labels, Card & Option Style, Questions, Q, Result Ranges. Those titles come from index.js, not from a shared template.
Behavior controls: “Progress style” options: Progress bar, Dots, Fraction (1/3).
Where to find it
Gutenberg inserter → Interactive → search “Scored Quiz” (block name `blockenberg/quiz` in block.json). Style it in the sidebar after insert.
How to use Scored Quiz block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Scored Quiz”, insert it. Category: Interactive.
- Configure inspector controls that exist on this block. Open Quiz Settings. Set “Show title”, “Show description”, “Show progress”, “Progress style”.
- Check the published page. The view script reads HTML data attributes: data-is-last, data-max, data-min, data-one-at-a-time, data-points, data-progress-style, data-question-id, data-randomize. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Show title | On/off toggle in the inspector. On by default. Saved as `showTitle`. |
| Show description | On/off toggle in the inspector. On by default. Saved as `showDescription`. |
| Show progress | On/off toggle in the inspector. On by default. Saved as `showProgress`. |
| Progress style | Select control; the chosen value is saved on the block. Options: Progress bar; Dots; Fraction (1/3). block.json default: bar. Saved as `progressStyle`. |
| One question at a time | On/off toggle in the inspector. On by default. Saved as `oneAtATime`. |
| Randomize questions | On/off toggle in the inspector. Off by default. Saved as `randomize`. |
| Max width (px) | Numeric range control in the inspector. Range 400–900. block.json default: 640. Saved as `formMaxWidth`. |
| Submit button | Text field in the inspector. block.json default: See My Results. Saved as `submitLabel`. |
| Result heading | Text field in the inspector. block.json default: Your Result. Saved as `resultHeading`. |
| Show retake button | On/off toggle in the inspector. On by default. Saved as `showRetake`. |
| Retake label | Text field in the inspector. block.json default: Retake Quiz. Saved as `retakeLabel`. |
| Card radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 20. Saved as `cardRadius`. |
| Card padding (px) | Numeric range control in the inspector. Range 12–64. block.json default: 40. Saved as `cardPadding`. |
| Option radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 10. Saved as `optionRadius`. |
| Option padding (px) | Numeric range control in the inspector. Range 8–32. block.json default: 16. Saved as `optionPadding`. |
| Button radius (px) | Numeric range control in the inspector. Range 0–99. block.json default: 10. Saved as `btnRadius`. |
| Result icon (px) | Numeric range control in the inspector. Range 28–80. block.json default: 48. Saved as `resultIconSize`. |
| Typography — Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `titleTypo`. |
| Description | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `descTypo`. |
| Question | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `questionTypo`. |
| Option | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `optionTypo`. |
| Result Title | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `resTitleTypo`. |
| Result Description | Shared Blockenberg typography popover (family, size, weight, spacing). Saved as `resDescTypo`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 64. Saved as `paddingBottom`. |
| Question | Multiline text field in the inspector. |
| Q — Text | Multiline text field in the inspector. |
| Points | Numeric range control in the inspector. Range 0–10. |
| Result Ranges — Title | Text field in the inspector. |
| Description | Multiline text field in the inspector. |
| Min score | Numeric range control in the inspector. Range 0–100. |
| Max score | Numeric range control in the inspector. Range 0–100. |
What the front-end script actually does
- The view script reads HTML data attributes: data-is-last, data-max, data-min, data-one-at-a-time, data-points, data-progress-style, data-question-id, data-randomize.
- JavaScript functions that perform the math: submitQuiz.
When this is the right block
- Multi-question scored quiz with points-based result ranges. Shows personalised outcome based on total score. Includes progress bar and retake button — that is the job of Scored Quiz, not a generic content block.
- Use it when you need the editor control labeled “Show title”, which exists on this block’s inspector.
- The math runs in the visitor’s browser after publish — no extra calculator plugin.
- Inserter grouping: quizzes, games, and click-to-reveal experiences.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Scored Quiz block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Scored Quiz”. It sits under Interactive. After insert, open Quiz Settings and set “Show title”, “Show description”, “Show progress”, “Progress style”.
Does Scored Quiz need a server or extra plugin?
No. After Blockenberg is active, the view script runs in the browser with the values you saved on the block.
Is the Scored Quiz Gutenberg block free?
Yes. Scored Quiz ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Scored Quiz to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Quiz Settings, Labels, Card & Option Style, Questions).
Related interactive blocks
2048 Game
The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile.
Analog Clock
A beautiful live analog clock rendered with SVG. Fully customizable: clock style, timezone, colors, size, and optional date/time labels.
Bingo Card
Interactive 5×5 Bingo card with number calling, win detection, and celebration animations.
Content Score
Visual content or SEO scoring card with circular gauge, color-coded criteria rows, and overall grade.
Dice Roller
Interactive dice roller supporting d4, d6, d8, d10, d12, d20 and d100. Roll multiple dice, see individual results, totals, and past roll history.
Drawing Canvas
A fully interactive freehand drawing canvas with multiple tools, undo, and download — right in your page.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Scored Quiz from the Gutenberg inserter.