quizdown-extended
Version:
A fork from [bonartm/quizdown-js](https://github.com/bonartm/quizdown-js) with more features. > The Katex-extension is currently not supported
159 lines (123 loc) • 3.97 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Quizdown Demo Page</title>
<style>
html {
font-family: sans-serif;
}
body {
font-size: 1.1em;
line-height: 1.5;
}
.container {
margin: auto;
max-width: 600px;
}
#stats p {
margin: 0.25em 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Quizdown Demo Page</h1>
<div class="quizdown" id="quiz-container">
---
shuffleAnswers: true
shuffleQuestions: true
nQuestions: 5
passingGrade: 80
customPassMsg: You have Passed!
customFailMsg: You have not passed
---
#### What's the value of $x$?
This is what I mean:
$$
x = \sqrt{\frac{9}{16}}
$$
- [x] $x = 0.75$
- [ ] $x = 0.5$
- [ ] $x = 1$
- [ ] $x = 1.5$
#### What's the value of `x[3]`?
```python
x = [1, 2, 3, 4]
```
- [ ] 1
- [ ] 2
- [ ] 3
- [x] 4
#### What's the value of `x[3]`?
```javascript
const x = [1, 2, 3, 4]
```
- [ ] 1
- [ ] 2
- [ ] 3
- [x] 4
#### Is that italic?
maybe *yes* or **no**
```robot
*** Test Case ***
Test123
Log Hello, World!
```
> This is a hint with some markdown: **bold**, *italic*, and `code`.
- [ ] Yes
> `yes` This is a **COMMENT** with some markdown: **bold**, *italic*, and `code`.
- [x] No
> `no` This is a **COMMENT** with some markdown: **bold**, *italic*, and `code`.
#### Order the following letters
1. a
2. b
3. c
4. d
</div>
<div id="stats">
<h2>Stats</h2>
<p id="numberOfQuestions"></p>
<p id="visited"></p>
<p id="solved"></p>
<p id="right"></p>
<p id="wrong"></p>
</div>
</div>
<script type="module">
import Quizdown from '/src/quizdown.ts';
import quizdownKatex from '/src/extensions/quizdownKatex.ts';
import catppuccinLatte from '/node_modules/@shikijs/themes/dist/catppuccin-latte.mjs'
import catppuccinMocha from '/node_modules/@shikijs/themes/dist/catppuccin-mocha.mjs'
import javascript from '/node_modules/@shikijs/langs/dist/javascript.mjs'
import python from '/node_modules/@shikijs/langs/dist/python.mjs'
const quizdown = new Quizdown();
quizdown.getShikiInstance()
.then(async (instance) => {
await quizdown.registerShikiLanguage(javascript);
await quizdown.registerShikiLanguage(python);
// Import from cdn
// await quizdown.registerShikiLanguage("https://cdn.jsdelivr.net/npm/@shikijs/langs@3.8.0/dist/javascript.mjs");
// Import from module
await quizdown.registerShikiTheme("catppuccin-latte", "light", catppuccinLatte);
await quizdown.registerShikiTheme("catppuccin-mocha", "dark", catppuccinMocha);
// Import from cdn
// await quizdown.registerShikiTheme("catppuccin-mocha", "dark", "https://cdn.jsdelivr.net/npm/@shikijs/themes@3.8.0/dist/catppuccin-mocha.mjs");
})
window.addEventListener('load', () => {
const host = document.getElementById('quiz-container');
const rawQuizdown = host.innerHTML;
const config = { startOnLoad: false };
quizdown.createApp(rawQuizdown, host, config);
quizdown.hooks.onQuizFinish((e) => {
document.getElementById('numberOfQuestions').innerText = "# of questions: " + e.numberOfQuestions;
document.getElementById('visited').innerText = "Visited: " + e.visited;
document.getElementById('solved').innerText = "Solved: " + e.solved;
document.getElementById('right').innerText = "Right: " + e.right;
document.getElementById('wrong').innerText = "Wrong: " + e.wrong;
})
});
</script>
</body>
</html>