- Include the
quizdown.jslibrary in your page:
<head>
<script src="quizdown.js"></script>
</head>Or using a CDN:
<head>
<script src="https://cdn.jsdelivr.net/npm/quizdown@latest/public/build/quizdown.js"></script>
</head>- Initialize the quizdown library:
<script>
quizdown.init();
</script>This will look for all divs with class="quizdown" and convert the quizdown into an interactive quiz app.
You can also pass global options to the init call.
- Each quiz has to be embedded in a
<div class="quizdown">tag:
<body>
<h2>Here comes a quizdown quiz:</h2>
<div class="quizdown">
### What's the capital of Germany?
- [x] Berlin
- [ ] Frankfurt
- [ ] Paris
- [ ] Cologne
</div>
</body>Combining all steps leads to something like this (edit in the 🚀quizdown editor):
<html>
<head>
<link rel="stylesheet" href="quizdown.css" />
<script src="quizdown.js"></script>
<script>
quizdown.init();
</script>
</head>
<body>
<div class="quizdown">
# What is the capital of Berlin?
In this question you are asked a **very** difficult question.
> Do some research!
- [x] Berlin
> This is the correct answer.
- [ ] Stuttgart
- [ ] Cologne
> Cologne is the fourth largest city.
- [ ] Düsseldorf
# Please bring the following into order!
Below you find the steps of the machine learning workflow.
Do you find the **correct order**?
> The model selection happens before the `final model evaluation`!
1. Get the data
2. Explore the data
3. Train test split with `train_test_split()`
4. Feature engineering
5. Model selection
6. Model evaluation
7. Deployment
# What is the value of `y`?
```python
x = 2+2 y = x+2 print(y)
```
- [ ] `2`
- [x] `6`
- [ ] `None`
- [ ] `9`
</div>
</body>
</html>- checkout and read about the quizdown syntax.
- tryout the quizdown live editor.
- read about the supported configuration and options.
- learn about how to
importquizdown and use it programmatically to have full control on how and when to create quizdown app in your project.