Interactive · Gutenberg
Knowledge Check block for WordPress
Quick quiz question with instant reveal — great for educational content, articles, and explainers.
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
Quick quiz question with instant reveal — great for educational content, articles, and explainers.
Inspector panels on this block: Question, Answer Options, Explanation, Interaction. Those titles come from index.js, not from a shared template.
Behavior controls: “Question type” options: Multiple choice, True / False; “Block style” options: Card (bordered), Flat, Minimal.
Where to find it
Gutenberg inserter → Interactive → search “Knowledge Check” (block name `blockenberg/knowledge-check` in block.json). Style it in the sidebar after insert.
How to use Knowledge Check block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Knowledge Check”, insert it. Category: Interactive.
- Configure inspector controls that exist on this block. Open Question. Set “Question type”, “Question”, “Topic tag (optional)”, “Difficulty label (optional)”.
- Check the published page. The view script reads HTML data attributes: data-opts, data-rendered. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Question type | Select control; the chosen value is saved on the block. Options: Multiple choice; True / False. block.json default: multiple. Saved as `questionType`. |
| Question | Multiline text field in the inspector. block.json default: Which HTTP status code means "Not Found"?. Saved as `question`. |
| Topic tag (optional) | Text field in the inspector. Saved as `topic`. |
| Difficulty label (optional) | Text field in the inspector. Saved as `difficulty`. |
| Icon (emoji) | Text field in the inspector. block.json default: 💡. Saved as `icon`. |
| Show icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Show explanation after reveal | On/off toggle in the inspector. On by default. Saved as `showExplanation`. |
| Explanation text | Multiline text field in the inspector. block.json default: The 404 status code is returned by the server when the requested resource cannot be found. It's one of the most recognizable HTTP error codes.. Saved as `explanation`. |
| Reveal button label | Text field in the inspector. block.json default: Reveal Answer. Saved as `revealLabel`. |
| Correct label | Text field in the inspector. block.json default: ✓ Correct!. Saved as `correctLabel`. |
| Incorrect label | Text field in the inspector. block.json default: ✗ Incorrect. Saved as `incorrectLabel`. |
| Allow retry | On/off toggle in the inspector. On by default. Saved as `allowRetry`. |
| Shuffle options on load | On/off toggle in the inspector. Off by default. Saved as `shuffleOptions`. |
| Block style | Select control; the chosen value is saved on the block. Options: Card (bordered); Flat; Minimal. block.json default: card. Saved as `style`. |
| Border radius (px) | Numeric range control in the inspector. Range 0–24. block.json default: 12. Saved as `borderRadius`. |
| Colors — Background | Color control in the inspector. block.json default: #f8fafc. Saved as `bgColor`. |
| Colors — Border | Color control in the inspector. block.json default: #e2e8f0. Saved as `borderColor`. |
| Question text | Color control in the inspector. block.json default: #0f172a. Saved as `questionColor`. |
| Accent | Color control in the inspector. block.json default: #6366f1. Saved as `accentColor`. |
| Option background | Color control in the inspector. block.json default: #ffffff. Saved as `optionBg`. |
| Option text | Color control in the inspector. block.json default: #334155. Saved as `optionColor`. |
| Correct highlight bg | Color control in the inspector. block.json default: #dcfce7. Saved as `correctBg`. |
| Correct text | Color control in the inspector. block.json default: #15803d. Saved as `correctColor`. |
| Incorrect highlight bg | Color control in the inspector. block.json default: #fee2e2. Saved as `incorrectBg`. |
| Incorrect text | Color control in the inspector. block.json default: #b91c1c. Saved as `incorrectColor`. |
| Explanation bg | Color control in the inspector. block.json default: #eff6ff. Saved as `explanationBg`. |
| Explanation text | Color control in the inspector. block.json default: #1e40af. Saved as `explanationColor`. |
| Reveal button bg | Color control in the inspector. block.json default: #6366f1. Saved as `revealBg`. |
| Reveal button text | Color control in the inspector. block.json default: #ffffff. Saved as `revealColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-opts, data-rendered.
- Keyboard handlers move focus between items.
When this is the right block
- Quick quiz question with instant reveal — great for educational content, articles, and explainers — that is the job of Knowledge Check, not a generic content block.
- Use it when you need the editor control labeled “Question type”, which exists on this block’s inspector.
- It matches pages about quiz, question, knowledge.
- 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 Knowledge Check block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Knowledge Check”. It sits under Interactive. After insert, open Question and set “Question type”, “Question”, “Topic tag (optional)”, “Difficulty label (optional)”.
What makes Knowledge Check different from other Blockenberg blocks?
Quick quiz question with instant reveal — great for educational content, articles, and explainers. Inspector labels on this block include “Question type”, “Question”, “Topic tag (optional)”, “Difficulty label (optional)”.
Is the Knowledge Check Gutenberg block free?
Yes. Knowledge Check ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Knowledge Check 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: Question, Answer Options, Explanation, Interaction).
Related interactive blocks
Trivia Game
A timed multiple-choice trivia game with built-in questions across Science, History, Geography, and Pop Culture categories.
Flashcard
Interactive flashcard deck for studying. Click to flip cards, navigate with arrows or buttons, shuffle deck, mark cards as known, and track progress.
Interactive Poll
Clickable voting poll with animated results stored per visitor.
Typing Speed Test
Interactive typing speed test. Measures WPM (words per minute), accuracy, and calculates a score. Choose from multiple difficulty levels, track errors in real time, and see a detailed results summary.
Word Scramble
Interactive word unscramble game with categories, hints, scoring, and timer. Multiple difficulty levels.
2048 Game
The classic sliding-tile 2048 puzzle. Swipe or use arrow keys to merge tiles and reach the 2048 tile.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Knowledge Check from the Gutenberg inserter.