-
Notifications
You must be signed in to change notification settings - Fork 6
/
guessing_game.html
146 lines (146 loc) · 5.86 KB
/
guessing_game.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="game, guess, planets, solar system, year, year length">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Solar System University: Earth</title>
<script language="javascript" type="text/javascript" src="game_script.js"></script>
</head>
<body>
<header>
<h1>SSU : EARTH</h1>
</header>
<main>
<hr>
<section id="letter">
<p>
Dear Professor,
</p>
<p id="letter_body">
Ten years ago, NASA secretly established communications with the intelligent alien
lifeforms that had been hiding out in our solar system for years. After a decade of
sending Earth’s best academic journals—via radio wave—into space, Solar System
University’s board of trustees has allowed a satellite campus to be opened on earth.
SSU Earth is opening its shiny metal doors soon, and you’ve been selected as its
first Professor of Terrestrial History.
</p>
<p>
Sincerely,
</p>
<p>
Dr. Wáxblürk, Vice Provost, SSUE
</p>
<button class="button" id="accept_position">Accept Position</button>
</section>
<section id="alien_professor">
<div id="professor_question">
<p class="naration">
Welcome to SSUE!
</p>
<p class="narration">
Outside your classroom, one of your new colleagues stretches out its tentacly
arm to shake your pink, squishy one.
</p>
<p class="speech">
"Hi, I'm Professor ßåxtëµ. Welcome to the faculty! What was your name again?"
</p>
<form onsubmit="event.preventDefault()">
<input id="name_input" type="text" placeholder="Name">
<button class="button" id="name_button">"Nice to meet you."</button>
</form>
</div>
<div id="professor_greeting">
<p class="narration">
Professor ßåxtëµ's face contorts into what you hope is a smile, and it pats you on the back.
</p>
<p class="speech">
"Nice to meet you, too, Professor <span class="player_name"></span>. I'm sure we'll be fast friends"
</p>
<button class="button" id="enter_classroom">Enter your classroom.</button>
</div>
</section>
<section id="textbook">
<p class="narration">
You walk into your classroom, and see a textbook is sitting on your desk.
<em>Earth History: Greatest Hits</em> reads its cover. What will you teach your first
class?
</p>
<ol id="textbook_list">
<li>
<button class="textbook_button" id="custom_event_button">MAKE YOUR OWN EVENT</button>
<ul id="placeholder_date">
<li>? / ? / ?</li>
</ul>
<form id="custom_event_form" onsubmit="event.preventDefault()">
<input id="event_name" type="text" placeholder="Event Name">
<ul>
<li>
<input id="event_month" type="text" placeholder="Event Month"> / <input id="event_date" type="text" placeholder="Event Date"> / <input id="event_year" type="text" placeholder="Event Year"> <button class="textbook_button" id="set_custom_date">Set Event</button>
</li>
</ul>
</form>
</li>
</ol>
<span id="date_guidance"></span>
</section>
<section id="classroom">
<div id="blackboard">
<span id="blackboard_text"></span>
</div>
<div><strong>Class Time Remaining: </strong><progress max="45" id="class_time"></progress></div>
<div id="students">
<p class="narration" id="gameplay_narration"></p>
<p class="speech" id="student_speech"></p>
<figure id="mercurian">
<img src="" alt="Mercurian Student">
<figcaption>Mercurian Student</figcaption>
</figure>
<figure id="venusian">
<img src="" alt="Venusian Student">
<figcaption>Venusian Student</figcaption>
</figure>
<figure id="martian">
<img src="" alt="Martian Student">
<figcaption>Martian Student</figcaption>
</figure>
<figure id="jovian">
<img src="" alt="Jovian Student">
<figcaption>Jovian Student</figcaption>
</figure>
<figure id="saturnian">
<img src="" alt="Saturnian Student">
<figcaption>Saturnian Student</figcaption>
</figure>
<figure id="uranian">
<img src="" alt="Uranian Student">
<figcaption>Uranian Student</figcaption>
</figure>
<figure id="neptunian">
<img src="" alt="Neptunian Student">
<figcaption>Neptunian Student</figcaption>
</figure>
<div class="speech" id="student_speech"></div>
</div>
<div id="player_answer">
<form onsubmit="event.preventDefault()">
<span class="speech">"It's been about <input id="answer_input" type="number" placeholder="Years"> since," </span>
<button class="button" id="answer_button">you reply.</button>
</form>
</div>
<div id="farewell">
<button class="button" id="farewell_button">"Ok, have a nice day."</button>
</div>
</section>
</main>
<footer>
<hr>
<h2>Teacher Evaluation</h2>
<ul id="teacher_eval">
<li><strong>Name:</strong> <span class="player_name"></span></li>
<li><strong>Satisfied Students:</strong> <span id="satisfied_students"></span></li>
<li><strong>Dissatisfied Students:</strong> <span id="dissatisfied_students"></span></li>
</ul>
</footer>
</body>
</html>