Package Exports

quiztest
quiztest/public/build/quiztest.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (quiztest) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

quiztest

I'm working on this project in my free time to learn more about https://svelte.dev/

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.

Usage

quiztest 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/npm/quiztest@latest/public/build/quiztest.js">
    </script>
    <script>quiztest.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/quiztest.js"></script>
    <script src="./build/extensions/quiztestKatex.js"></script>
    <script src="./build/extensions/quiztestHighlight.js"></script>
    <script>
        quizdown.register(quiztestKatex).register(quiztestHighlight).init();
    </script>
    ...
</head>

Write questions within a quiztest class (edit in the 🚀quizdown editor):

...
<div class="quiztest
    ---
    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>
...

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 happy for any feedback on how to improve the code base.

Wish List

Add timer that could be turned on or off
Show question index so its easier for people to jump around the questions, add a flag so its easy to review
customizable reward page at the end of the quiz. Nice to show encouraging messages if the user is not performing well or otherway if the user is really good then play some animation and music
fill in the blanks quiz
link quizzes on different pages together via a results summary page (https://github.com/bonartm/quizdown-js/issues/18)

How To

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

Example of text highlighting css

<ul>
    <li><span class="highlight-simple">.highlight-simple</span> or just use <mark>&lt;mark&gt;</mark> </li>
    <li><span class="highlight-ribbon">.highlight-ribbon</span></li>
    <li><span class="highlight-arrow">.highlight-arrow</span></li>
    <li><span class="highlight-sketch">.highlight-sketch</span></li>
    <li><span class="highlight-realistic-marker">.highlight-realistic-marker</span></li>
    <li><span class="highlight-border">.highlight-border</span></li>
    <li><span class="highlight-circle-sketch">.highlight-circle-sketch</span></li>
</ul>

Credits

Its a forked project, I am Inspired by the mermaid library https://bonartm.github.io/quizdown-live-editor/ to lean on top of what https://github.com/bonartm/ has built.