|
| 1 | +--- |
| 2 | +title: Quiz |
| 3 | +description: How to add interactive quizzes to your site. |
| 4 | +--- |
| 5 | + |
| 6 | +# Quizzes |
| 7 | + |
| 8 | +As of version 0.0.12, docsy-jekyll has support for basic quizzes! These are |
| 9 | +intended to help educate your users about the content of your documentation. |
| 10 | +For a quiz, you can add a new file to the folder `_data/quizzes`, and write a |
| 11 | +questions file based on the format shown in `_data/quizzes/example-quiz.yml`. |
| 12 | +Here is a simple example of a multiple choice question (which can also serve as |
| 13 | +True/False): |
| 14 | + |
| 15 | +```yaml |
| 16 | +title: This is the Quiz Title |
| 17 | +randomized: false |
| 18 | +questions: |
| 19 | + |
| 20 | + - type: "multiple-choice" |
| 21 | + question: "True or False, Pittsburgh is West of Philadelphia" |
| 22 | + items: |
| 23 | + - choice: True |
| 24 | + correct: true |
| 25 | + - choice: False |
| 26 | + correct: false |
| 27 | + followup: | |
| 28 | + The answer is True! Pittsburgh is 304.9 miles West of |
| 29 | + Philadelphia, or approximately a car ride of |
| 30 | + 4 hours and 52 minutes. Buckle up! |
| 31 | +``` |
| 32 | +
|
| 33 | +The quiz is rendered with a "Show Answer" button below each question, and when |
| 34 | +the user clicks it, any questions that are flagged with `correct: true` will be |
| 35 | +bolded, and if a followup section is included, it will be displayed. |
| 36 | +See the live example at the end of this page. |
| 37 | + |
| 38 | +## Options |
| 39 | + |
| 40 | +#### Title |
| 41 | + |
| 42 | +If you include a title, it will be rendered at the top of the quiz. This is |
| 43 | +optional - you can leave it out and add it before the include on the page. |
| 44 | + |
| 45 | +#### Random |
| 46 | + |
| 47 | +If you want your questions to be presented randomly, just add randomized: true |
| 48 | +to the data. |
| 49 | + |
| 50 | + |
| 51 | +## Example Quiz |
| 52 | + |
| 53 | +If I want to include the quiz located at `_data/quizzes/example-quiz.yml`, I |
| 54 | +can do so like this: |
| 55 | + |
| 56 | +``` |
| 57 | +{% raw %}{% include quiz.html file='example-quiz' %}{% endraw %} |
| 58 | +``` |
| 59 | + |
| 60 | +The rendered quiz is shown here: |
| 61 | + |
| 62 | + |
| 63 | +{% include quiz.html file='example-quiz' %} |
0 commit comments