Skip to content
🍇 Create rich quizzes with Gatsby and MDX
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Netlify Status

🍇 gatsby-starter-quiz

Create rich quizzes with Gatsby & Mdx. No need of database or headless CMS. Manage your data directly in your Mdx file's frontmatter and write your content in the body. Customize your HTML tags, use react components from a library or write your owns. Navigation will be automatically created between each question.

➡️ See a live example

Build with gatsby-starter-quiz 🚀

Inspired by this starter or developing a fork? You can submit a pull request and show your work here:

  • - Online material for swiss and french middle school.


With gatsby-cli

$ gatsby new my-quizzes

With git clone

$ git clone my-quizzes
$ cd my-quizzes
$ yarn


1️⃣ Files

Edit your quizzes inside the /quizzes folder:

  • Create a folder for each quiz
  • Create a .mdx file for each question

2️⃣ Frontmatter

  • Put your answers in the frontmatter. It's just an array of objects.
    • Each object is an answer with 2 keys:
      • Value: a string (the text that will be displayed)
      • Correct: a boolean (true, if correct)
  • Give an index to your question to put them in a specific order (must be a string!)
index: '1'
answers: [
      value: 'Creative Style Sheets',
      correct: false,
      value: 'Cascading Style Sheets',
      correct: true,
      value: 'Crazy Style Sheets',
      correct: false,
      value: 'Custom Style Sheets',
      correct: false,

3️⃣ Body

  • Write your question and let your creativity take the power with MDX

Look at the examples in the quizzes folder to see how you can use React within a Markdown file (That's MDX!). For a full explanation, read the MDX docs and the gatsby-MDX implementation.

4️⃣ Link it from the home page

In the /pages/index.js file create a link to your quiz with the Card component. If your Mdx files are in the /quizzes/css folder, you can point to the first file of your quiz (let's say 01.mdx) with link="css-01".

    description="Take a little quiz to test your CSS knowledges..."

5️⃣ Deploy

  • Create a repository on github with your project
  • Deploy it on Netlify

🎨 Configuration

You can change the feedback text or the footer colors in the appropriate files under the /tokens folder.

You can’t perform that action at this time.