-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path2-jsquiz-starter.html
123 lines (106 loc) · 3.06 KB
/
2-jsquiz-starter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Quiz.js</title>
<style>
body {
margin: 1rem auto;
padding: 3rem;
font-family: sans-serif;
}
header {
width: 50%;
margin: 1em auto;
}
main {
min-width: 25rem;
max-width: 50%;
margin: 0px auto;
display:flex;
flex-direction: column;
}
#statement {
border: 1px solid black;
border-radius: 0.5rem;
box-shadow: 5px 5px 5px gray;
padding: 1rem;
font-size: x-large;
text-align: center;
margin: 1rem 0px;
min-height: 2em;
}
#explanation {
padding: 1rem;
text-align: center;
}
#options {
width: 100%;
display: flex;
flex-direction: column;
}
button {
padding: 0.5rem;
font-size: medium;
border-radius: 5px;
}
.correct {
background-color: lightgreen;
}
.incorrect {
background-color: lightpink;
}
</style>
</head>
<body>
<header>
<h1>Quiz.js</h1>
<p>Do you know JS? Find out!</p>
</header>
<main>
<div id="statement">
</div>
<div id="options">
<button name="true" value="true" >true</button>
<button name="false" value="false" >false</button>
</div>
<div id="explanation">
</div>
</main>
</body>
<script type="text/javascript">
const statement = document.querySelector("#statement");
const optionButtons = document.querySelector("#options").children;
const explanation = document.querySelector("#explanation");
const fact = {
statement: "Strings are immutable",
answer: true,
explanation: "In JavaScript strings, like other primitive types are not immutable. This means strings cannot be changed. However we can create new ones and assign them to existing variables, apart form those declared as const as they are not reassignable."
};
statement.textContent = fact.statement;
function enable(button) {
button.removeAttribute("disabled")
}
function disable(button) {
button.setAttribute("disabled", "");
}
function isCorrect(guess) {
return guess === fact.answer.toString();
}
for(let button of optionButtons) {
button.addEventListener('click', (e) => {
const button = e.target;
explanation.textContent = fact.explanation;
for(let buttonToBeDisabled of optionButtons) {
disable(buttonToBeDisabled);
}
const guess = button.value
if(isCorrect(guess)) {
button.classList.add("correct");
} else {
button.classList.add("incorrect");
}
});
}
</script>
</html>