-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
106 lines (101 loc) · 4.83 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/style.css">
<title>WOW! The Lunchtime Odyssey</title>
</head>
<body>
<div class="hero">
<div class="content">
<h1 id="application-title">WOW! Owen Wilson's Lunchtime Odyssey</h1>
</div>
</div>
<div id="start-page" class="box">
<div class="box-header">
<h3 id="mission">Your mission should you choose to accept it...</h3>
</div>
<div class="box-body">
<p>Help Owen Wilson reach his favorite <i class="fa-solid fa-burger fa-beat" style="color: #f2ad5f;"></i> by
answering some of the most interesting questions on the <i class="fa-solid fa-globe"
style="color: #20c5ee;"></i></p>
<p>Correct answers move Owen <i class="fa-solid fa-arrow-up-long fa-beat" style="color: #1d951f;"></i> wrong
answers move him <i class="fa-solid fa-arrow-down-long fa-beat" style="color: #e31c1c;"></i> try to get
him there in 5 answers!</p>
<br>
<form id="user-category">
<label for="categories">Choose a Category:</label>
<select id="categories" name="categories">
<option value="arts_and_literature">Arts and Literature</option>
<option value="film_and_tv">Film & TV</option>
<option value="food_and_drink">Food & Drink</option>
<option value="general_knowledge">General Knowledge</option>
<option value="geography">Geography</option>
<option value="history">History</option>
<option value="music">Music</option>
<option value="science">Science</option>
<option value="society_and_culture">Society & Culture</option>
<option value="sport_and_leisure">Sport & Leisure</option>
</select>
<div>
<br>
<button class="button is-rounded is-size-6" id="play-btn">Get Him That Sandwich!</button>
</div>
</form>
</div>
</div>
<div id="game-page-container" class="container">
<div id="game-board">
<!-- owen head will move, so separate div container -->
<div id="road">
<img src="./assets/images/owen.png" id="owen-heads" alt="The face of god"
style="height:140px;width:210px;z-index: 1;">
<img src="./assets/images/cheese-burger.png" id="cheese-burger" alt="gods burger"
style="height:150px;width:175px;">
</div>
<div id="cheeseburger"></div>
</div>
</div>
<div id="trivia-board" class="card">
<div id="carousel" class="card">
<!-- trivia questions -->
<h1 id="question"></h1>
<!-- trivia answer choices -->
<button class="button is-rounded is-size-5" id="choice-one">.....</button>
<button class="button is-rounded is-size-5" id="choice-two">.....</button>
<button class="button is-rounded is-size-5" id="choice-three">.....</button>
<button class="button is-rounded is-size-5" id="choice-four">.....</button>
<p id="right-answer"></p>
</div>
</div>
<!-- This section of HTML will show the end of the game. It will display game over and have the player enter initials and display scores. Scores will be stored and retrieved from local storage.*/ -->
<section id="game-done-container" class="box">
<h1 class="go-memo">Game Over!</h1>
<br>
<h2 id="final-score"></h2>
<br>
<form>
<div id="player-initials">
<label>Player Initials</label>
<input type="text" name="initials" id="initials" placeholder="" />
</div>
<br>
<button class="button is-rounded" id="submit">Submit! </button>
<audio id="audio"></audio>
</form>
<div id="score-board">
<h1>Scoreboard: </h1>
<ul id="scores-list"></ul>
<br>
<div>
<button class="button is-rounded" id="replay">Play Again? </button>
</div>
</div>
</section>
<script src="https://kit.fontawesome.com/4e9c0933eb.js" crossorigin="anonymous"></script>
<script src="./assets/script.js"></script>
</body>
</html>