Shortcodes

Quiz Shortcode

You can embed a multiple choice quiz into your pages and posts using a shortcode. This guide explains how to create your shortcode and add it to your site.

Table of Contents

Quiz Examples

Quizzes use multiple shortcodes together. At their most basic, you can pose a question and have multiple answers to choose from. The correct answer will turn green when it’s clicked on, and the incorrect answers will turn red when they’re clicked on.

Here’s an example of how a basic quiz will appear on your site:

What freezes faster?
Hot water
Cold water

You can also add explanations to each answer. When an answer is clicked on, it will expand to show an explanation of why it’s either correct or incorrect. This is a great spot to add additional information.

Here’s an example of what a quiz with explanations looks like (hint, click the answers to see the explanations work):

What freezes faster?
Hot water
Correct! This is known as the Mpemba effect, discovered by Erasto Mpemba in 1969
Cold water
…but we love to learn!

↑ Table of Contents ↑

How to Create a Quiz

You can add a shortcode to any page or post using a shortcode block. A quiz combines the following shortcodes:

[quiz-wrapper] [/quiz-wrapper] This encompasses all the questions of your quiz. It can be omitted if your quiz only has one question.

[quiz] [/quiz] This encompasses a single question.

[question] [/question] This code indicates the question being asked.

[answer] [/answer] This code indicates a correct answer. You can use as many of them ask you like.

[wrong] [/wrong] This code indicates an incorrect answer. You can also use as many of them as you like.

[explanation][/explanation] This code should be placed within either an answer or a wrong shortcode, and it indicates that the option should expand into an explanation of why it’s corrector incorrect.

Here’s a template that shows how the codes work together when you add them to a post or page. You can copy and paste it into your site:

[quiz-wrapper]

[quiz]

[question]Insert question one here
[/question]
 

[answer]Insert correct answer here
[/answer]
 

[wrong]Insert wrong answer here
[/wrong]
 

[wrong]Insert wrong answer here
[explanation]Add additional information or an explanation for why it’s wrong here[/explanation]
[/wrong]
 
[/quiz]

[quiz]

[question]Insert question two here
[/question]
 

[answer]Insert correct answer here
[/answer]
 

[wrong]Insert wrong answer here
[/wrong]
 

[wrong]Insert wrong answer here
[explanation]Add additional information or an explanation for why it’s wrong here[/explanation]
[/wrong]
 
[/quiz]

[/quiz-wrapper]

💡

If you want to add an explanation to a correct or incorrect answer, the explanation’s shortcode will need to be added within the brackets for either a correct or incorrect question, as displayed in the last wrong answer in the template above.

Here’s that quiz in action:

Insert question one here
Insert correct answer here
Insert wrong answer here
Insert wrong answer here
Add additional information or an explanation for why it’s wrong here
Insert question two here
Insert correct answer here
Insert wrong answer here
Insert wrong answer here
Add additional information or an explanation for why it’s wrong here

Answers for each quiz question will be displayed in a randomized order each time the page loaded.

Not quite what you're looking for?

Get Help