reveal.js-quiz demo

Introduction

Dynamic Quizzes for reveal.js

• The reveal.js-quiz plugin lets you create dynamic quizzes in your reveal.js presentation
• Quizzes do not require an internet connection and can be re-taken arbitrarily often
• Simple text-editor suffices to define quizzes
• Suited for self-study materials based on reveal.js
• Based on the jQuery-Plugin SlickQuiz by Julie Cameron

A Sample Quiz

Usage

Configuration for reveal.js

1. Download the plugin from its git repository
2. Copy it to the plugins folder of your reveal.js configuration
3. Load it as a dependency in Reveal.initialize, as seen below
4. Define a quiz-variable within a <script data-quiz>-Tag (see next slide)

Reveal.initialize({
  dependencies: [
    // other dependencies
    { src: 'plugin/quiz/js/quiz.js', async: true, callback: function() { prepareQuizzes(); } }
    // other dependencies
  ]
});

Usage in reveal.js

<script data-quiz>
quiz = {
  "info": { /* some general information about the quiz */ },
  "questions": [
    { // Question 1 - Multiple Choice, Single True Answer
      "q": "What number is the letter A in the English alphabet?",
      "a": [
        {"option": "14",     "correct": false},
        {"option": "1",      "correct": true}
        // more options
      ],
      "correct": "<p><span>That's right!</span> The letter A is the first letter in the alphabet!</p>",
      "incorrect": "<p><span>Uhh no.</span> It's the first letter of the alphabet. Did you actually <em>go</em> to kindergarden?</p>"
    },
    /* more questions */
  ]
}
</script>

Quiz options

• Quizzes can be single- or multiple-choice (select all and select any)
• Responses to correct and wrong answer can be defined per question
• Ranking at the end of the quiz allows for overall feedback
• Most configuration options can be seen in the source code here and all are described in the plugin documentation

Usage with emacs-reveal or org-reveal

• As a matter of fact, this presentation was generated with emacs-reveal
  • You can find the corresponding source code here
• First, set up the plugin to be included as with plain reveal.js
• It is recommended that you define the quiz-script in a different file and link to it with src="/path/to/quiz.js"
  • org-reveal only supports single-line raw HTML

#+REVEAL_HTML: <script data-quiz src="./quizzes/dummy-quiz.js"></script>

License Information

Except where otherwise noted, this work, “reveal.js-quiz demo”, is © 2018 by Lennart Schäpermeier, published under the Creative Commons license CC BY-SA 4.0.

No warranties are given. The license may not give you all of the permissions necessary for your intended use.

In particular, trademark rights are not licensed under this license. Thus, rights concerning third party logos and other (trade-) marks (e.g., “Creative Commons” itself) remain with their respective holders.