-
Notifications
You must be signed in to change notification settings - Fork 3
/
cover.html
86 lines (80 loc) · 4.29 KB
/
cover.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
<!--Make the Front Page look Pretty-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zot Racer</title>
<link type="text/css" rel="stylesheet" href="./cover.css"/>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Patrick+Hand&display=swap" rel="stylesheet">
<script src="./cover.js"></script>
</head>
<body>
<!--h1>PLAY</h1-->
<div id="section1">
<h1 class= "title">Welcome to Zot Racer!</h1>
<div class="clouds">
<div class="cloud"></div>
<button class="cover_button" onclick="create_link()"><span>PLAY</span></button>
<div class="cloud"></div>
</div>
<div class="centerplay marginbutton">
<!--choose set-->
<button class="setbutton" id="I&CSCI31" onclick="set_chosen(id); getCourse(id)">ICS31</button>
<button class="setbutton" id="I&CSCI32" onclick="set_chosen(id); getCourse(id)">ICS32</button>
<button class="setbutton" id="I&CSCI33" onclick="set_chosen(id); getCourse(id)">ICS33</button>
<button class="setbutton" id="CreateYourOwn" onclick="set_chosen(id); getCourse(id)">Create Your Own</button>
<br></br>
</div>
<div id="select_course" style="font-family: 'Chewy', cursive;">
Select a course :)
</div>
<br></br>
<div id="course_info"> </div>
<br></br>
<div class="centerplay">
<button class= "sectionbutton" id='zotracerinfo'onclick="window.location.href='#section2'">What is Zot Racer?</button>
</div>
</div>
<div id="section2">
<h1 class="title">About Zot Racer</h1>
<div id="hook">
<p>
<span style="color:#668245">Finals suck, huh? </span> Studying is tedious, and during the final weeks of the quarter, we are completely <span style="color:#668245">drained of all
our motivation</span>. Instead of paying attention during class, you sit in the back of the lecture hall, hood up,
playing type racer with your friends to stay awake. I'm sure someone can relate. Rather than wasting time and
losing brain cells mindlessly typing, <span style="color:#668245">you can play our game Zot Racer instead!</span>
<br></br>
Zot Racer revamps studying and motivates students to <span style="color:#668245">finish the quarter strong.</span> In the game, you, the lovely Anteater, are placed
<span style="color:#668245">head to head</span> to our favorite Starship ZotBot!
</p>
</div>
<br></br>
<div id="about_info">
<p style="font-size: 30px;">How to Play</p>
1. <span style="color:#498cb2">Select </span> a set of practice questions that you want to review, or create your own set.
<br></br>
2. After you selected your set, <span style="color:#498cb2">press the big "Play" button!</span>
<br></br>
3. Press the start button to begin answering questions.
A question will appear below the race track. Much like Type Racer, your avatar <span style="color:#498cb2">advances with each
correct answer.</span>
<br></br>
4. After solving the question, <span style="color:#498cb2">click "New Question" </span>to receive the next one.
You can also skip to the next question by clicking "Next Question," but you will eventually have to answer all questions
from the set to finish the race.
<br></br>
<span style="color:#498cb2">Try to get to the other side of the screen before the ZotBot!</span>
<br></br>
</div>
<br></br>
<div class="centerplay">
<button class= "sectionbutton" id="playbutton" onclick="window.location.href='#section1'">Let's Play!</button>
</div>
<p style="font: ducimain, helvectica; color:#668245; font-weight:bold;">Created by: TANK (Taylor Quach, Audrey Lam, Nicole Nguyen, Kristen Yee)</p>
</div>
</body>
</html>