Skip to content
🍇 Create rich quizzes with Gatsby and MDX
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
quizzes
src
.eslintrc.js
.gitignore
README.md
gatsby-browser.js
gatsby-config.js
gatsby-node.js
gatsby-ssr.js
package-lock.json
package.json
yarn.lock

README.md

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:

  • pousse.ch - Online material for swiss and french middle school.

Installation

With gatsby-cli

$ gatsby new my-quizzes https://github.com/raphadeluca/gatsby-starter-quiz

With git clone

$ git clone git@github.com:raphadeluca/gatsby-starter-quiz.git my-quizzes
$ cd my-quizzes
$ yarn

Usage

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".

  <Card
    backgroundColor='#5bc0eb'
    title="CSS"
    description="Take a little quiz to test your CSS knowledges..."
    link="css-01"
  />

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.