quizdown-extended
Version:
Markdown for generating interactive quiz apps in the browser. (With more functions)
215 lines (153 loc) • 4.68 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>
<script src="./build/quizdown.js"></script>
<script src="./build/extensions/quizdownKatex.js"></script>
<script src="./build/extensions/quizdownHighlight.js"></script>
<script>
quizdown.register(quizdownKatex).register(quizdownHighlight).init();
</script>
</head>
<style>
html {
font-family: sans-serif;
}
body {
font-size: 1.1em;
line-height: 1.5;
}
</style>
<body>
<div class="container" style="margin: auto; max-width:600px;">
<h1>Quizdown Demo Page</h1>
<div class="quizdown">
---
shuffleAnswers: true
shuffleQuestions: true
nQuestions: 3
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}}
$$
> Also check out $\sqrt{x+2}$!
1. [x] Try out: $x=0.75$
1. [ ] $x=0.5$ could also *be correct*!
1. [ ] perhaps $x=1$?
1. [ ] $x=1.5$
#### What's the value of `x[3]`?
```python
# a python list
x = [1, 2, 3, 4]
```
1. [ ] 1
1. [ ] 2
1. [ ] 3
1. [x] 4
#### Who is the person in the picture?
> In 1990, he published the [worlds first website](http://info.cern.ch/hypertext/WWW/TheProject.html).
1. [x] Tim Berners-Lee
1. [ ] Alan Turing
1. [ ] Barbara Liskov
1. [ ] Larry Page
#### Which console appeared first, wich last?
1. Atari 2600
2. NES
3. Sega Genesis
4. Play Station
5. Nintendo 64
6. Xbox
7. Wii
#### Who is the person in the picture?
> He coined the terms *hypertext* and *hypermedia* in 1963!
1. [x] Ted Nelson
1. [ ] Donald Knuth
1. [ ] Grace Hopper
1. [ ] John von Neumann
#### What is the HTML element for the largest heading in a document?
1. [x] `<h1></h1>`
1. [ ] `<header></header>`
1. [ ] `<title></title>`
1. [ ] `<heading1></heading1>`
#### What is the `<a></a>` tag used for?
1. [x] for defining hyperlinks
1. [ ] for defining a paragraph
1. [ ] for defining code snippet
1. [ ] for defining an image
### What is the difference between a tag and an attribute?
```html
<a href="url">link text</a>
```
Select all correct answers:
- [x] A tag represents an html element.
- [x] An attribute defines a property of an html element.
- [ ] An attribute is everything between the opening and closing tag.
- [ ] `"url"` is an attribute in the example above.
#### How many valid HTML element tags are currently defined?
> Check out https://developer.mozilla.org/en-US/docs/Web/HTML/Element
1. [x] 100 - 120
1. [ ] 80 - 100
1. [ ] 120 - 140
1. [ ] 140 - 160
### How many `buttons` are defined on the [homepage of Spiced Academy](https://www.spiced-academy.com/en)?
```html
<button>
my button
</button>
```
1. [x] 7
1. [ ] 14
1. [ ] 5
1. [ ] 23
#### What is the IP address of [google.com](https://google.com)?
> This question has two valid answers!
- [x] 142.250.186.110
> This is the ipv4 address
- [x] 2a00:1450:4001:829::200e
> This is the ipv6 address
- [ ] https
- [ ] com
#### What is a tag soup?
> `<p>This is a tag <em>soup.</p></em>`
- [ ] nicely written html code
- [x] malformed html code
#### Two organizations hide in the chunk of text. Do you find them?
```
CW3THAGWW
```
- [x] `W3C`
> World Wide Web Consortium
- [x] `WHATWG`
> Web Hypertext Application Technology Working Group
- [ ] `WWW`
- [ ] `C3PO`
</div>
<div id="stats">
<p id="numberOfQuestions"></p>
<p id="visited"></p>
<p id="solved"></p>
<p id="right"></p>
<p id="wrong"></p>
</div>
</div>
<script>
const shadowHost = document.querySelector('.quizdown'); // host element
quizdown.listenForStats(shadowHost, (event) => {
document.getElementById('numberOfQuestions').innerText = "# of questions: " + event.numberOfQuestions;
document.getElementById('visited').innerText = "visited: " + event.visited;
document.getElementById('solved').innerText = "solved: " + event.solved;
document.getElementById('right').innerText = "right: " + event.right;
document.getElementById('wrong').innerText = "wrong: " + event.wrong;
});
</script>
</body>
</html>