https://github.com/juwit/reveal-quiz
reveal.js plugin that allows adding quiz as slides
https://github.com/juwit/reveal-quiz
presentation quiz reveal-js slides slideshow
Last synced: over 1 year ago
JSON representation
reveal.js plugin that allows adding quiz as slides
- Host: GitHub
- URL: https://github.com/juwit/reveal-quiz
- Owner: juwit
- License: mit
- Created: 2023-01-16T17:02:21.000Z (over 3 years ago)
- Default Branch: develop
- Last Pushed: 2023-06-01T15:11:27.000Z (about 3 years ago)
- Last Synced: 2025-02-07T15:14:06.879Z (over 1 year ago)
- Topics: presentation, quiz, reveal-js, slides, slideshow
- Language: HTML
- Homepage: https://juwit.github.io/reveal-quiz
- Size: 1.13 MB
- Stars: 4
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# reveal-quiz
reveal.js plugin that allows adding quizzes as slides.
## features
* single-choice questions
* multiple-choice questions
* markdown in questions and answers
* answers explanations show after answer submission
* multicast & remote-control
## usage
Create a simple question slide in markdown:
```html
# Who won the 2018 football world cup ?
- [x] France
- [ ] Germany
- [ ] Italy
- [ ] Brazil
```
The question itself should be a simple text, using a markdown title mark `#`.
The answers are written as Markdown task lists using `- [ ]`.
The checked answers (`- [x]`) are the valid ones.
If only one answer is valid, answers will be displayed as radio buttons, otherwise they will be displayed as check boxes.
An optional answers explanation can be added as a markdown blockquote using `>`, and will be displayed after the question was answered.
```html
# Who is *Darth Sidious* master ?
- [ ] Darth Bane
- [ ] Darth Tenebrous
- [x] Darth Plagueis
> "Did you ever hear the Tragedy of Darth Plagueis the Wise?"
> - Sheev Palpatine, to Anakin Skywalker
```
## configuration
Configuration can be made global, or slide-specific.
Global configuration is passed to the plugin using standard *reveal.js* configuration, with the `quiz` property:
```html
import Reveal from './node_modules/reveal.js/dist/reveal.esm.js';
import markdown from './node_modules/reveal.js/plugin/markdown/markdown.esm.js';
import RevealQuizz from './node_modules/reveal-quiz/dist/reveal-quiz-bundle-esm.js';
Reveal.initialize({
quiz: {
useTimer: true,
defaultTimerDuration: 60,
},
plugins: [markdown, RevealQuizz],
});
```
slide-specific configuration is passed using `data-quiz-config-*` attributes on quiz slides.
```html
- Who won the 2018 football world cup ?
- [x] France
- [ ] Germany
- [ ] Italy
- [ ] Brazil
```
### available configuration properties
| global property | slide property | default value | description |
|-------------------|------------------------------------|---------------|-----------------------------------------------------|
| useTimer | data-quiz-config-userTimer | false | set to `true` to activate a timer on questions |
| timerDuration | data-quiz-config-timerDuration | 60 | the duration of the timer |
| randomizeAnswers | data-quiz-config-randomizeAnswers | false | set to `true` to randomize the answers on questions |