Skip to content

Commit 7451e30

Browse files
ayeeerubenayeeeruben
committed
all done
1 parent f1d4afb commit 7451e30

12 files changed

Lines changed: 328 additions & 49 deletions

File tree

‎.DS_Store‎

0 Bytes
Binary file not shown.

‎lab3/gamesBackground.jpg‎

72.7 KB
Loading

‎lab3/index.html‎

Lines changed: 56 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,60 +4,84 @@
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link href="style.css?v=3" rel="stylesheet">
78
<title>Document</title>
89
</head>
910
<body>
11+
<div class="box">
12+
<div class="quizBox">
13+
<div class="attemptBox">
14+
<p id="attemptsText"></p>
15+
</div>
16+
<h1> GAME QUIZ</h1>
17+
<br>
18+
<br>
19+
<br>
20+
<label for="a1"> What is the most sold game of all time? </label>
21+
<input id="a1">
22+
<p id="a1-result"></p>
1023

11-
<h1> GAME QUIZ</h1>
12-
<label for="a1"> What is the most sold game of all time? </label>
13-
<input id="a1">
14-
<p id="a1-result"></p>
1524

25+
<p>What is the most popular launcher on PC?</p>
26+
<input type="radio" id="battlenet" name="launchers" value="battlenet">
27+
<label for="battlenet">Battlenet</label>
1628

29+
<input type="radio" id="steam" name="launchers" value="steam">
30+
<label for="steam">Steam</label>
1731

18-
<input type="radio" id="battlenet" name="launchers" value="battlenet">
19-
<label for="battlenet">Battlenet</label>
32+
<input type="radio" id="epic" name="launchers" value="epic">
33+
<label for="epic">Epic Games</label>
2034

21-
<input type="radio" id="steam" name="launchers" value="steam">
22-
<label for="steam">Steam</label>
35+
<input type="radio" id="riot" name="launchers" value="riot">
36+
<label for="riot">Riot Games</label>
2337

24-
<input type="radio" id="epic" name="launchers" value="epic">
25-
<label for="epic">Epic Games</label>
38+
<p id="a2-result"></p>
2639

27-
<input type="radio" id="riot" name="launchers" value="riot">
28-
<label for="riot">Riot Games</label>
2940

30-
<p id="a2-result"></p>
41+
<p>Is COD considered a fps or a tps?</p>
42+
<select name="POV" id="POV">
43+
<option value="o1">fps</option>
44+
<option value="o2">tps</option>
45+
<option value="o3">Both</option>
46+
</select>
3147

48+
<p id="a3-result"></p>
3249

33-
<p>Is COD considered a fps?</p>
34-
<select name="POV" id="POV">
35-
<option value="o1">Yes</option>
36-
<option value="o2">No</option>
37-
<option value="o3">Both</option>
38-
</select>
3950

40-
<p id="a3-result"></p>
51+
<label for="numberInput">How many core games are there for Halo?</label>
52+
<input type="number" id="numberInput" min="1" max="11" step="1">
53+
<p id="a4-result"></p>
54+
<!-- <input type="radio" id="1" name="q3-answers" value="1">
55+
<label for="1">1</label>
4156
57+
<input type="radio" id="2" name="q3-answers" value="2">
58+
<label for="2">2</label>
4259
43-
<label for="numberInput">How many core games are there for Halo?</label>
44-
<input type="number" id="numberInput" min="1" max="11" step="1">
45-
<p id="a4-result"></p>
46-
<!-- <input type="radio" id="1" name="q3-answers" value="1">
47-
<label for="1">1</label>
60+
<input type="radio" id="3" name="q3-answers" value="3">
61+
<label for="3">3</label> -->
4862

49-
<input type="radio" id="2" name="q3-answers" value="2">
50-
<label for="2">2</label>
63+
<div id="question3-space"></div>
5164

52-
<input type="radio" id="3" name="q3-answers" value="3">
53-
<label for="3">3</label> -->
5465

55-
<div id="question3-space"></div>
66+
<p>Items required to craft a pumpkin pie in minecraft:</p>
67+
<div id="checkbox-container">
68+
<label class="option"><input type="checkbox" id="egg" name="recipe" value="egg"> Egg</label>
69+
<label class="option"><input type="checkbox" id="wheat" name="recipe" value="wheat"> Wheat</label>
70+
<label class="option"><input type="checkbox" id="sugar" name="recipe" value="sugar"> Sugar</label>
71+
<label class="option"><input type="checkbox" id="pumpkin" name="recipe" value="pumpkin"> Pumpkin</label>
72+
</div>
73+
<p id="a5-result"></p>
5674

57-
58-
<button id="submit">Submit</button>
75+
<br>
76+
<br>
5977

6078

79+
<button id="submit" type="button">Submit</button>
80+
<div class="scoreBox">
81+
<h5 id="scoreText"></h5>
82+
</div>
83+
</div>
84+
</div>
6185

6286
<script src="https://cdn.jsdelivr.net/npm/underscore@1.13.7/underscore-umd-min.js"></script>
6387
<script src="script.js"></script>

‎lab3/script.js‎

Lines changed: 74 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,32 @@ let sumbmitBtn = document.querySelector("#submit");
22
let a1Message = document.querySelector("#a1-result");
33
let a2Message = document.querySelector("#a2-result");
44
let a3Message = document.querySelector("#a3-result");
5-
let a4Message = document.querySelector("#a4-result")
6-
let num = document.querySelector("#numberInput")
5+
let a4Message = document.querySelector("#a4-result");
6+
let a5Message = document.querySelector("#a5-result");
7+
let num = document.querySelector("#numberInput");
8+
let scoreText = document.querySelector("#scoreText");
9+
const ATTEMPTS_KEY = "quizAttempts";
710

11+
let attempts = parseInt(localStorage.getItem(ATTEMPTS_KEY) ?? "0", 10);
12+
document.querySelector("#attemptsText").textContent = `Attempts: ${attempts}`;
13+
14+
function shuffle(array) {
15+
for (let i = array.length - 1; i > 0; i--) {
16+
const j = Math.floor(Math.random() * (i + 1));
17+
[array[i], array[j]] = [array[j], array[i]];
18+
}
19+
return array;
20+
}
21+
22+
23+
window.addEventListener("DOMContentLoaded", () => {
24+
const container = document.querySelector("#checkbox-container");
25+
const options = Array.from(container.querySelectorAll(".option"));
26+
shuffle(options);
27+
container.innerHTML = "";
28+
options.forEach(el => container.appendChild(el));
29+
});
30+
831

932
//gernate random order answers
1033
// let question3Options = [1,2,3];
@@ -28,58 +51,92 @@ let num = document.querySelector("#numberInput")
2851
// radioLabel.for = question3Options[0];
2952
// question3Space.appendChild(radioLabel);
3053

31-
sumbmitBtn.addEventListener('click', function(){
54+
sumbmitBtn.addEventListener('click', function(e){
55+
e.preventDefault();
56+
attempts++;
57+
localStorage.setItem(ATTEMPTS_KEY, String(attempts));
58+
document.querySelector("#attemptsText").textContent = `Attempts: ${attempts}`;
59+
let score = 100;
3260
let answer1 = document.querySelector('#a1').value;
3361
console.log(answer1);
3462
let result = answer1.toUpperCase();
3563
if(result === "MINECRAFT"){
36-
a1Message.textContent = "That's right!"
64+
a1Message.textContent = "✅ That's right!"
3765
a1Message.style.color = "green";
3866
}
3967
else{
40-
a1Message.textContent = "That's incorrect";
41-
a2Message.style.color = "red";
68+
a1Message.textContent = "❌ That's incorrect";
69+
a1Message.style.color = "red";
70+
score -= 20;
4271
}
4372

4473
// let answer2 = document.querySelector("input[name=colors]:checked").value;
4574
// console.log(answer2);
4675

47-
let answer2 = document.querySelector("input[name=launchers]:checked").value;
48-
if(answer2 === "steam"){
49-
a2Message.textContent = "Lucky Guess!";
76+
let answer2 = document.querySelector("input[name=launchers]:checked");
77+
if(answer2 && answer2.value === "steam"){
78+
a2Message.textContent = "✅ Lucky Guess!";
5079
a2Message.style.color = "green";
5180
}
5281
else{
53-
a2Message.textContent = "Nope";
54-
a2Message.style.color = "red";
82+
a2Message.textContent = "❌ Nope";
83+
a2Message.style.color = "red";
84+
score -= 20;
5585
}
5686

5787

5888
let answer3 = document.querySelector("#POV");
5989
let current = answer3.value;
6090
console.log(current);
6191
if(current === "o1"){
62-
a3Message.textContent = "Nuh uh";
92+
a3Message.textContent = "❌ Nuh uh";
6393
a3Message.style.color = "red";
94+
score -= 20;
6495
}
6596
else if(current === "o2"){
66-
a3Message.textContent = "Wrong";
97+
a3Message.textContent = "❌ Wrong";
6798
a3Message.style.color = "red";
99+
score -= 20;
68100
}
69101
else if(current === "o3"){
70-
a3Message.textContent = "Duh";
102+
a3Message.textContent = "✅ Duh";
71103
a3Message.style.color = "green";
72104
}
73105

74106

75107
let answer4 = document.querySelector("#numberInput").value;
76108
if (answer4 === "11"){
77-
a4Message.textContent = "Nice";
109+
a4Message.textContent = "✅ Nice";
78110
a4Message.style.color = "green";
79111
}
80112
else{
81-
a4Message.textContent = "Nah";
82-
a4Message.style.color = "red";
113+
a4Message.textContent = "❌ Nah";
114+
a4Message.style.color = "red";
115+
score -= 20;
83116
}
84117

118+
let checked = document.querySelectorAll("input[name=recipe]:checked");
119+
let values = Array.from(checked).map(cb => cb.value);
120+
121+
let correct = ["egg", "sugar", "pumpkin"];
122+
123+
let isCorrect = values.length === correct.length && correct.every(item => values.includes(item));
124+
125+
if(isCorrect){
126+
a5Message.textContent = "✅ You got it!";
127+
a5Message.style.color = "green";
128+
}
129+
else{
130+
a5Message.textContent = "❌ Close, but no!";
131+
a5Message.style.color = "red";
132+
score -= 20;
133+
}
134+
scoreText.textContent = "Score: " + score;
135+
136+
if(score > 80){
137+
alert("Nice job! You got 100!!!");
138+
}
139+
140+
141+
85142
});

‎lab3/style.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
.box{
2+
background-color: rgb(158, 199, 211);
3+
padding: 150px;
4+
align-items: center;
5+
position: relative;
6+
}
7+
.quizBox{
8+
text-align: relative;
9+
}
10+
.attemptBox {
11+
position: absolute;
12+
top: 8px;
13+
right: 12px;
14+
}
15+
body{
16+
display: flex;
17+
background-image: url("gamesBackground.jpg");
18+
background-repeat: no-repeat;
19+
background-size: cover;
20+
background-position: center;
21+
justify-content: center;
22+
align-items: center;
23+
margin: 0;
24+
min-height: 100vh;
25+
}
26+
h1{
27+
text-align: center;
28+
}
29+
p{
30+
font-size: 20px;
31+
}
32+
label{
33+
font-size: 20px;
34+
}
35+
.attemptBox{
36+
position: absolute;
37+
top: 10px;
38+
right: 10px;
39+
}
40+
button {
41+
background-color: black;
42+
color:white;
43+
border-radius: 5px;
44+
transition: background-color 0.2s ease, transform 0.2s ease;
45+
border: none;
46+
padding: 6px 10px;
47+
cursor: pointer;
48+
}
49+
button:hover {
50+
transform: scale(1.05);
51+
}
52+
53+
#a1-result,
54+
#a2-result,
55+
#a3-result,
56+
#a4-result,
57+
#a5-result,
58+
#scoreText {
59+
min-height: 1.25em; /* ~1 line */
60+
margin: 6px 0;
61+
}

‎practice/.DS_Store‎

0 Bytes
Binary file not shown.

‎practice/api-intro/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<script src="script.js" defer></script>
9+
</head>
10+
<body>
11+
<div id="movies"></div>
12+
</body>
13+
</html>

‎practice/api-intro/script.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
//alert("accessing web api data...")
2+
3+
getMovieData();
4+
5+
async function getMovieData() {
6+
let url = "https://www.omdbapi.com/?apikey=12215ee6&s=superman";
7+
try {
8+
let response = await fetch(url);
9+
try {
10+
let data = await response.json();
11+
console.log(data.Search[0].Poster);
12+
for(let i of data.Search){
13+
14+
}
15+
let moviesEl = document.querySelector("#movies");
16+
let imageEl = document.createElement("img");
17+
imageEl.src = data.Search[2].Poster;
18+
imageEl.width = 300;
19+
let h2El = document.createElement("h2");
20+
h2El.textContent = data.Search[2].Title;
21+
22+
moviesEl.append(h2El);
23+
moviesEl.append(imageEl);
24+
25+
26+
} catch (error) {
27+
console.log("Error parsing data!" + error)
28+
}
29+
} catch(error) {
30+
console.log("Network Error! " + error)
31+
}
32+
}

‎practice/js-activity/index.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
</head>
9+
<body>
10+
<h1>My grade for CST336</h1>
11+
<select name="gradeOptions" id="gradeOptions">
12+
<option value="o1">100</option>
13+
<option value="o2">95</option>
14+
<option value="o3">85</option>
15+
<option value="o4">75</option>
16+
</select>
17+
<button id="subBtn">Submit</button>
18+
<p id="gradeText"></p>
19+
20+
<script src="script.js"></script>
21+
</body>
22+
</html>

0 commit comments

Comments
 (0)