Auto-Numbering

This page demonstrates the auto-numbering feature. When enabled, each quiz automatically gets a Question N header.

How It Works

Auto-numbering can be enabled globally in mkdocs.yml:

plugins:
  - mkdocs_quiz:
      auto_number: true

Or per-page using front matter (like this page):

---
quiz:
  auto_number: true
---

Example Quizzes

Below are several quizzes to demonstrate the auto-numbering in action.

#

Question 1

What is 2 + 2?

3

4

5

That's correct! 2 + 2 = 4

#

Question 2

Which of these is a primary color?

Red

Green

Blue

Purple

Submit

Primary colors are red, blue, and yellow.

#

Question 3

What is the capital of France?

London

Paris

Berlin

Madrid

Paris is the capital city of France.

#

Question 4

Which programming language is this plugin written in?

JavaScript

Python

Ruby

Go

MkDocs Quiz is a Python plugin for MkDocs, which is also written in Python.

#

Question 5

What does HTML stand for?

Hyper Transfer Markup Language

Hypertext Markup Language

High-Level Text Markup Language

Hyperlink and Text Markup Language

HTML (Hypertext Markup Language) is the standard markup language for documents designed to be displayed in a web browser.

Styling

The question numbers are rendered as <h4> headers with the class quiz-number:

<h4 class="quiz-number">Question 1</h4>

You can customize the appearance with custom CSS:

.quiz-number {
  color: var(--md-primary-fg-color);
  font-size: 1.2rem;
  text-transform: uppercase;
}

Disabling Auto-Numbering

If auto-numbering is enabled globally but you want to disable it for a specific page, set it to false in the page's front matter:

---
quiz:
  auto_number: false
---