-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
190 lines (180 loc) · 6.84 KB
/
index.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn Student Names (Game)</title>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>
<!-- Group selection drop-down menu -->
<div id="dropdown">
<label for="students">Choose a group:</label>
<select id="group-select" name="group-select" onchange="selectGroup(this);">
<option value="sy2324_lastname_p0">sy2324_lastname_p0</option>
<option value="sy2324_lastname_p1">sy2324_lastname_p1</option>
</select>
</div>
<div>
<!-- Empty containers where the game elements will appear -->
<div id="photo"></div>
<div id="clickable-name0" class="nameOption" onclick="playerProgress(this.id)" style="clear: right;"></div>
<div id="clickable-name1" class="nameOption" onclick="playerProgress(this.id)"></div>
<br style="clear: both;" />
<div id="correct"></div>
<div id="incorrect"></div>
<div id="possible"></div>
<div id="score"></div>
<div id="grade"></div>
</div>
<script>
// Load group rosters:
window.sy2324_lastname_p0 = {
"0": "Ego (Kurt Russell)",
"1": "Baby Groot (Vin Diesel)",
"2": "Ayesha (Elizabeth Debicki)",
"3": "Star-Lord (Chris Pratt)",
"4": "Mantis (Pom Klementieff)",
"5": "Rocket (Bradley Cooper)",
"6": "Drax the Destroyer (Dave Bautista)",
"7": "Yondu (Michael Rooker)",
"8": "Gamora (Zoe Saldana)",
"9": "Nebula (Karen Gillan)"
}
window.sy2324_lastname_p1 = {
"0": "Gladys R. Wilkerson",
"1": "Joseph C. Herd",
"2": "Deborah A. Knight",
"3": "Mildreda Zambrano Ceballos",
"4": "Macaire Mendoza Mota",
"5": "Baal Escobar Yáñez",
"6": "Cleofas Palomo Pichardo",
"7": "Heraclea Portillo Peres",
"8": "Florentina Heredia Chávez",
"9": "Desiderio Cortez Ortega",
"10": "Ariane Guerra Fajardo",
"11": "Olina Gamboa Saenz",
"12": "Mee Cheng",
"13": "Xiu Yüan",
"14": "Brutus Labingi"
}
// Create a function to deliver a selected
// drop-down option string as a JSON object:
function accessVariableByName(variableName) {
if (window.hasOwnProperty(variableName)) {
groupSelected = window[variableName]
return window[variableName];
} else {
console.log("I cannot find a variable with that name")
return undefined;
}
}
// Use the first listed option by default:
let groupCount = 0
let groupSelectedString = $("option:first")[0].value // returns a string
let groupSelected = {} // empty object
groupSelected = accessVariableByName(groupSelectedString) // assign a JSON as new value
// Count the group size:
function groupCounter(object) {
groupCount = Object.keys(object).length
return groupCount
}
console.log(groupCount)
let guessesTotal = 0
let guessesCorrect = 0;
let guessesIncorrect = 0;
let playerScore = 0
let playerGrade = ""
function playerProgress(nameOption) {
// Evaluate correct or incorrect:
if (nameOption == 'clickable-name0' && randNum3 == 0) {
guessesCorrect += 1
} else if (nameOption == 'clickable-name1' && randNum3 == 1) {
guessesCorrect += 1
} else {
guessesIncorrect += 1
}
guessesTotal += 1
// Calculate player score:
playerScore = ((guessesCorrect / guessesTotal) * 100).toFixed(0);
// Assign player grade:
if (playerScore == 0) {
playerGrade = ""
} else if (playerScore > 89) {
playerGrade = "A"
} else if (playerScore > 79) {
playerGrade = "B"
} else if (playerScore >= 69) {
playerGrade = "C"
} else if (playerScore < 69) {
playerGrade = "F"
}
showStuff(groupSelected)
}
function playerProgressReset() {
guessesTotal = 0
guessesCorrect = 0
guessesIncorrect = 0
playerScore = 0
playerGrade = ""
}
function selectGroup(groupSelected) {
groupSelectedString = groupSelected.value;
groupSelected = accessVariableByName(groupSelectedString) // assign a new value
// accessVariableByName(groupSelectedString)
playerProgressReset()
showStuff(groupSelected)
console.log("i reset it!")
}
function chooseTwo(group) {
// Randomly choose 2 numbers in the range of groupSize:
randNum1 = Math.floor(Math.random() * groupCount);
randNum2 = Math.floor(Math.random() * groupCount);
// Ensure they are two DIFFERENT numbers:
while (randNum1 == randNum2) {
randNum2 = Math.floor(Math.random() * groupCount);
}
// Get the two selected students' names:
nameCorrect = group[randNum1]
nameIncorrect = group[randNum2]
}
function showStuff(object) {
// Build the game (and reset the score):
groupCounter(object)
chooseTwo(object);
console.log("the group is " + groupSelectedString + " with count " + groupCount)
// Display one student photo:
var el = document.getElementById("photo");
el.innerHTML = `<img src=\"${groupSelectedString}/${randNum1}.jpg\">`;
// Randomize the positions and show the two names:
randNum3 = Math.floor(Math.random() * 2);
if (randNum3 == 0) {
var el = document.getElementById("clickable-name0");
el.innerHTML = `${nameCorrect}`;
var el = document.getElementById("clickable-name1");
el.innerHTML = `${nameIncorrect}`;
} else {
var el = document.getElementById("clickable-name1");
el.innerHTML = `${nameCorrect}`;
var el = document.getElementById("clickable-name0");
el.innerHTML = `${nameIncorrect}`;
}
// Show statistics:
let el1 = document.getElementById("correct");
let el2 = document.getElementById("incorrect");
let el3 = document.getElementById("possible");
let el4 = document.getElementById("score");
let el5 = document.getElementById("grade");
el1.innerHTML = `Correct: <strong> ${guessesCorrect}</strong>`;
el2.innerHTML = `Incorrect: <strong> ${guessesIncorrect}</strong>`;
el3.innerHTML = `Possible: <strong> ${groupCount}</strong>`;
el4.innerHTML = `Score: <strong> ${playerScore}%</strong>`;
el5.innerHTML = `Grade: <strong> ${playerGrade}</strong>`;
}
// Call the function when the page loads:
showStuff(groupSelected); // default value
</script>
</body>
</html>