-
Notifications
You must be signed in to change notification settings - Fork 4
/
2-jsquiz-starter.html
124 lines (93 loc) · 3.22 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
124
<!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">
// TODO 1: Declare & assign variables pointing to the corresponding element(s)
// statement should be the "statement" div
// optionButtons should be all the elements within the "options" div
// explanation should be the "explanation" div
// TODO 2: Declare & assign a variable called fact
// Its value should be an object with a statement, true/false answer, and explanation
// TODO 3: Set the text of the statement element to the fact's statement
// TODO 4: Declare disable & enable functions to set or remove the "disabled" attribute from a given button element
// disable(button) should set the button element's attribute "disabled" to the value ""
// enable(button) should remove the attribute "disabled" from the button element
// TODO 5: Declare an isCorrect function that compares a guess to the right answer
// isCorrect(guess) should return true if the guess matches the fact's answer
// TODO 6A: Use a for loop to add a click event listener to each of the optionButtons
// TODO 6B: Within the event handler function, display the fact's explanation by setting the text of the explanation element
// TODO 7: Within the event handler function,
// Use a for loop to disable all the option buttons
// TODO 8: Within the event handler function,
// Get the guessed value from the clicked button
// Use a conditional to compare the guess to the fact's answer
// and add the "correct"/"incorrect" class as appropriate
</script>
</html>