Skip to content

bonartm/quizdown-js

Repository files navigation

quizdown npm version Build

Markdownish syntax to instantly create simple interactive quiz apps for your static website.

πŸš€ Try the quizdown live editor

  • supports markdown text formatting, images and syntax highlighting.
  • 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 svelte projects.
  • mobile friendly with touch support for all question types.

Usage

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.

πŸ“š Documentation

Stand-alone Example

Add the library to your website and initialize with default options:

<head>
	...
    <script 
	src="https://cdn.jsdelivr.net/gh/bonartm/quizdown-js@latest/public/build/quizdown.js">
	</script>
	<script>quizdown.init();</script>
	...
</head>

Write questions within a quizdown class:

...
<div class="quizdown">
	---
	primary_color: steelblue
	shuffle_questions: false
	shuffle_answers: 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>
...

quizdown1

Contributing

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 install

Build the library with

npm run build

You can also preview a live version with

npm run dev

Credits

Inspired by the mermaid library and the python package quizdown.