Skip to main content

Quiz Whizz Demo | Quiz element for YOOtheme Pro

The quiz element YOOtheme Pro deserved.

Most quiz tools are solid software wrapped in a dated interface: cramped forms, clashing colours and a wall of questions that nobody finishes. Quiz Whizz turns that around. One YOOtheme Pro element, built design-first, that plays like the quizzes you actually enjoy taking.

Everything below is the same element, configured differently in the builder. Play them.

A knowledge quiz your visitors actually finish

One question per step, a progress bar, answers that respond the moment you pick them, and an animated score ring at the end. The intro card, the pass mark and every text on the buttons are settings, not code.

How well do you know the web?

Four questions, one at a time. You see instantly whether you were right, with a short explanation. Reach 75% to pass.

4 questions about 1 minute

No sign up, no score kept. Just four questions.

True or false, in your own words

The true or false type gives every question two large buttons. The labels are free text per question, so a security quiz can ask Fact or Myth and a language course can ask Der or Die.

Fact or myth?

True or false, restyled to Fact and Myth with two settings. Big buttons, dots for progress.

3 questions

Or everything on one page, with the review at the end

Longer questionnaire, self-test, checklist? Switch the flow to a single page. Nothing is judged while your visitor fills it in; the result card shows the score and a question by question review afterwards.

Three quick ones

  1. Roughly how many emails are sent every day, worldwide?

  2. Which colour appears most often in the logos of the world's biggest brands?

  3. What share of all web traffic comes from phones?

Make it yours: presets, colours and shuffle

Three style presets (Cards, Minimal Line, Filled Accent), an accent that reads your real theme colours, and free text for every button. This one runs a custom accent and shuffled answers; the questions explain themselves.

Make it yours

  1. Where does this quiz get its colour?

  2. The answers in this quiz appear in a different order for every visitor. Why?

New in v0.1: the launch set

Two question types (multiple choice with up to six answers, true or false with your own labels), two flows, instant or end feedback with explanations, a pass mark, three presets, theme colour support, shuffle, full keyboard play, screen reader announcements, reduced motion support and six languages. Coming next: multiple correct answers, image answers, a points based self-test with score bands, a personality mode, and a results dashboard with optional lead capture.

New in v0.2: pick many, pick pictures, count points

Three additions in one release. Multiple correct answers with a deliberate check step and optional partial credit, answers as image cards, and a complete points based self-test with score bands, the pattern behind every good online stress or personality test.

Several correct answers, with a check step

Select all that apply

Two questions where more than one answer is right. Notice how the next button becomes a check button.

2 questions

Answers as image cards, without spoilers

Answer with a picture instead of a sentence. The text labels are switched off here (new in v0.3), because the caption would give the answer away; screen readers still hear the full answers.

  1. Which of these is The Most Useless Element Ever?

A points based self-test with score bands

The digital stress check

Four honest yes or no questions. Every answer carries points, the total lands in a score band. Just for fun, not science.

4 questions

New in v0.3: the personality quiz

The third quiz mode. No right or wrong: every answer quietly counts towards one of up to six outcome profiles, each with its own title and text, and the highest total wins. The pattern behind every which-type-are-you quiz that ever went viral.

The YOOzeCase logo

Which YOOzeCase element are you?

Four questions, no wrong answers. Every choice quietly counts towards one of four profiles. Just for fun.

4 questions a minute, tops

One anonymous line is stored: which element you turned out to be.

New in v0.4: results, without the creepy part

The personality quiz above is doing something the ones before it do not: it keeps what people answer. Switch on Store Results in a quiz and every finished attempt lands in your own site database, where the plugin settings show the totals per quiz: how many people played, the average score, the pass rate, and how the attempts spread over your outcomes or score bands.

What it does not do is follow anyone around. No IP address, no name, no e-mail address, no cookie, no third party. You decide how many days results are kept, you can wipe a quiz clean with one button, and uninstalling the plugin leaves your data alone unless you tell it otherwise.

Give the quiz above a go, and know that all you are adding to this site is one anonymous line saying which element you turned out to be.

New in v0.5: asking, without the pressure

A quiz can now ask for a name and an e-mail address on the result card, and you decide how insistent that is. Optional shows the result first and puts the form underneath, the way the personality quiz above does it. Gate keeps the result covered until the visitor sends the form or clicks past it. Off is what you get if you never touch the setting.

Three things are deliberate. The attempt is stored anonymously the moment the quiz ends, so your numbers are complete whether or not anyone fills the form in. The consent box is never ticked in advance, and you write the sentence next to it yourself. And the address is attached to the attempt on the server, using a reference the browser never sees, so nobody can write their details onto someone else's answers.

Get a mail per contact or one summary a day, and export the lot to CSV when you want it somewhere else.

New in v0.6: one question at a time, and it keeps up with you

Answer a question and the quiz moves on by itself. A thin line runs out along the card while the answer is still readable, and then the next question arrives in exactly the same spot, so nothing jumps and nobody has to hunt for the Next button. The personality quiz further up this page has it switched on: play it, and compare it with the knowledge quizzes, which still wait for you.

Three paces, and the plugin picks the right one for the quiz. With instant feedback the pause is longer, because the visitor should have time to see whether they got it right. With feedback held back to the end it is quick, because there is nothing to read. Standard, relaxed or quick shifts that in either direction.

Moving on by itself must never take something away, so four questions are deliberately left alone: one with more than one correct answer, which is finished with the check button; one showing an explanation, because nobody should read against a clock; the last one, so the result appears when the visitor asks for it; and every quiz outside the one question at a time flow. Clicking Next yourself cancels the wait, and if you prefer no motion at all, the line stands still.

The same element, in a serious register

Everything above is built to be enjoyed. This one is not, and it is the same element with different switches. A five point frequency scale instead of right and wrong, four questions that count in reverse so agreeing is not always the higher score, and three score bands set on real totals rather than percentages.

It also shows the quick side of moving on by itself. There is nothing to read between the questions, so the plugin uses a much shorter pause here than on the personality quiz further up. Answer, and the next one is already there.

How has the past month felt?

Ten questions about the past four weeks. There are no right answers: pick the one that fits and the quiz moves straight on. Four of the questions count in reverse. Takes about a minute.

10 questions about 2 minutes

Nothing is stored. Your answers stay in this browser.

Two deliberate choices worth pointing out. This quiz stores nothing: the answers never leave the browser, because a page like this has no business keeping how anyone's month went. And the questions and the result texts are our own, written for this demo. It is a reflection exercise, not a validated instrument and not a health assessment. If stress is genuinely weighing on you, talk to your doctor or to someone you trust.

Forty-three questions, and it still takes a minute

The other pattern behind self-tests is not a scale but a weighted checklist. Every item carries its own number, the ones that apply are added together, and the total lands in a band. In the builder that is forty-three true or false questions with a figure in the points field, and three bands with a minimum score. There is nothing else to it.

It is also the fastest setting of moving on by itself. There is no feedback to read and the answer is one of two buttons, so the pause is two tenths of a second: you tap, and the next one is already there. Three quizzes on this page now run at three different paces, each one picked for how much the visitor has to take in between questions.

A year, added up

Forty-three things that may or may not have happened in the last twelve months. Yes or no, and the quiz moves straight on. Every item carries its own weight, so the answer is a total rather than a count. Under a minute.

43 questions about 5 minutes

Nothing is stored. Your answers stay in this browser.

Same two rules as the quiz above. Nothing is stored, and the result is a sum of numbers we chose ourselves, not a measurement and not a health assessment.

New in v0.7: the card people meet first

Every quiz on this page now opens on a card, and that card had one job: get someone to press start. So it can carry a bit more than a title and a button. An icon in your accent colour, or an image from your media library. How long it takes, next to the question count, either written by you or worked out from the questions themselves. And one small line under the button for the reassurance that gets people over the line.

Look at the four quizzes on this page. The knowledge quiz at the top has its icon above the text. The personality quiz has an image instead, sitting beside the text. The two self-tests further down use an icon beside the text, which makes a tall card noticeably shorter. That is one setting per quiz. Leave everything empty and the card looks exactly as it did before.

The time is an estimate, not a promise: four seconds to take in a question, one per answer to read the options, six more where an explanation follows. Rounded up, and never less than a minute, because about zero minutes helps nobody.

New in v0.8: keep the box, or lose it

The intro card always had a frame around it and the questions never did, so the box vanished the moment someone pressed start. That is now a setting of its own, next to the style preset, with three positions: follow the preset, around every step, or none at all.

Two quizzes on this page have it switched on. The personality quiz further up keeps its card from the intro through the questions to the result. The stress check does the same on the quiet Minimal Line preset, which is a combination the presets could not give you: soft dividers inside a card. Every other quiz here is left on follow the preset, so you can see the difference on one page.

It is a separate setting rather than a fourth preset on purpose. The preset decides how the answers look; the frame is a different question. Folding the two together would have ruled out exactly the combination the stress check is using.

New in v0.9: it reads well for everyone

We put the quiz through an accessibility audit against WCAG 2.1 and 2.2 AA, measured on this page rather than read off the source, and then acted on what came out. Fifteen findings, all of them fixed.

The biggest one was colour. A quiz takes its accent from your theme, and until now the text on top of that accent was always white, which is fine on a deep blue and too faint on a soft red. The element now measures your accent against the background behind it and works out a readable counterpart, so a button label, the question counter and the line that tells someone how they did stay legible whatever colours you use. The personality quiz further up runs on its own red accent and gets dark labels for exactly that reason.

The rest is the sort of thing you only notice when it is missing. Answers now tell a screen reader whether you may pick one or several. The focus follows you when you start a quiz, when your result appears and when you play again, instead of dropping you back at the top of the page. A question can be a heading rather than a paragraph: the two quizzes on this page that show all their questions at once use that, so anyone moving through the page by headings lands on each question instead of having to read past it. And the download is less than half what it was.

Frequently asked questions

One YOOtheme Pro builder element for quizzes and self-tests. You build the questions where you build your pages, pick a flow and a style, and publish. No separate quiz manager, no shortcodes.

No. Three presets, an accent that follows your theme colours and free button texts cover the styling; every behaviour is a switch in the element settings.

Scoring happens in the visitor's browser. Storing is a separate choice and it is off until you switch it on, per quiz. With it on, every finished attempt is saved in your own site database and nowhere else, and the plugin settings show the totals per quiz. No IP address and no cookies, and you set how many days results are kept. A name and an e-mail address are only stored when the visitor fills in the contact form and ticks the box. The personality quiz on this page has both switched on.

No. Scoring happens in the browser, so a determined visitor can find the correct answers in the page. Quiz Whizz is made for marketing, knowledge and self-test quizzes, and it is honest about that.

It is built to WCAG 2.1 and 2.2 AA, and in v0.9 we audited it against that standard on this very page rather than on paper. You can play a whole quiz from the keyboard: number keys pick an answer, arrow keys move within a question, and the focus follows you when you start, when your result appears and when you play again. Answers announce what kind of choice they are, so a screen reader says whether you may pick one or several, and the group is named after the question it belongs to. Colours are worked out rather than assumed: the element measures your accent against the background behind it and picks a readable counterpart, so the labels stay legible whatever colours your theme uses. Every button is at least 44 pixels, the layout holds from 320 pixels up and at 200 percent text size, and animation stops for anyone who asks their system for less motion.

Only if you switch it on, and only in the one question at a time flow. The visitor answers, a short line runs out along the card, and the next question arrives in the same spot. It never rushes anyone: a question showing an explanation stays put, so does a question with more than one correct answer, and the last question always waits for the visitor to finish. Clicking Next yourself simply cancels the wait. The personality quiz on this page has it switched on.

Joomla 5 and 6 with YOOtheme Pro. A WordPress version from the same core is planned.

Version 1.0, with an update server so new versions arrive in your Joomla updater, and after that the WordPress version from the same core. The polish round is done: v0.9 brought the accessibility audit and the fixes that came out of it, and cut the download from 106 to 49 kilobytes. Result storage with a dashboard shipped in v0.4, contact capture and CSV export in v0.5, moving on by itself in v0.6, a richer intro card in v0.7 and the frame setting in v0.8.