Markdownish syntax to instantly create simple interactive quiz apps for your static website.
🚀 Try the quizdown live editor
- supports markdown text formatting, images, syntax highlighting and math rendering.
- different quiz-types: single-choice, multiple-choice, sequence.
- support for hints and explanations.
- options for color theme, question shuffling, localization.
- can be easily included in any website, static site generator or other web projects.
- mobile friendly with touch support for all question types.
quizdown is easy to setup and best used in combination with existing static site generators like Jekyll, Hugo or Sphinx. Check out the extensions hugo-quiz and sphinxcontrib-quizdown.
Add the library to your website and initialize with default options:
<head>
...
<script
src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/quizdown.js">
</script>
<script>quizdown.init();</script>
...
</head>To keep the bundle size low, syntax highlighting and math rendering are implemented in separate extensions that can be loaded and registered manually if needed:
<head>
...
<script src="./build/quizdown.js"></script>
<script src="./build/extensions/quizdownKatex.js"></script>
<script src="./build/extensions/quizdownHighlight.js"></script>
<script>
quizdown.register(quizdownKatex).register(quizdownHighlight).init();
</script>
...
</head>Write questions within a quizdown class (edit in the 🚀quizdown editor):
...
<div class="quizdown">
---
primaryColor: steelblue
shuffleQuestions: false
shuffleAnswers: true
---
### Select your superpowers!
- [ ] Enhanced Strength
- [ ] Levitation
- [x] Shapeshifting
### What's the capital of Germany?
> Hint: The _largest_ city in Germany...
1. [x] Berlin
1. [ ] Frankfurt
1. [ ] Paris
1. [ ] Cologne
</div>
...Pull requests and feature requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
I'm working on this project to learn more about modern web development and languages. I'm happy for any feedback on how to improve the code base.
After cloning, install the packages with
npm installBuild the library with
npm run buildYou can also preview a live version with
npm run devInspired by the mermaid library and the python package quizdown.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent