jeopardy/jeopardy.html at master · willmizzi/jeopardy · GitHub

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
<!--

Main HTML file for Jeopardy! Game.

A bare structure for the Javascript code to populate and manipulate. The
structure is in 3 basic sections - the main clue board, a set of 'cards', which
display in place of the main board depending on the game stage and clue
selected, and the scoreboard, which is generally always visible.

-->

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="description" content="An interactive game of Jeopardy">
		<title>Jeopardy</title>
		<link rel="stylesheet" href="styles/style.css">
	</head>
	<body>

<!--== Board Structure =====================================================-->

	<div class="board-container main-board-size">
		<div class="category-grid-container">
			<div class="category" id="cat1"></div>
			<div class="category" id="cat2"></div>
			<div class="category" id="cat3"></div>
			<div class="category" id="cat4"></div>
			<div class="category" id="cat5"></div>
			<div class="category" id="cat6"></div>
		</div>

		<div class="block-grid-container">
			<div class="block" id=clue1_1>$400</div>
			<div class="block" id=clue2_1>$400</div>
			<div class="block" id=clue3_1>$400</div>
			<div class="block" id=clue4_1>$400</div>
			<div class="block" id=clue5_1>$400</div>
			<div class="block" id=clue6_1>$400</div>
			<div class="block" id=clue1_2>$800</div>
			<div class="block" id=clue2_2>$800</div>
			<div class="block" id=clue3_2>$800</div>
			<div class="block" id=clue4_2>$800</div>
			<div class="block" id=clue5_2>$800</div>
			<div class="block" id=clue6_2>$800</div>
			<div class="block" id=clue1_3>$1200</div>
			<div class="block" id=clue2_3>$1200</div>
			<div class="block" id=clue3_3>$1200</div>
			<div class="block" id=clue4_3>$1200</div>
			<div class="block" id=clue5_3>$1200</div>
			<div class="block" id=clue6_3>$1200</div>
			<div class="block" id=clue1_4>$1600</div>
			<div class="block" id=clue2_4>$1600</div>
			<div class="block" id=clue3_4>$1600</div>
			<div class="block" id=clue4_4>$1600</div>
			<div class="block" id=clue5_4>$1600</div>
			<div class="block" id=clue6_4>$1600</div>
			<div class="block" id=clue1_5>$2000</div>
			<div class="block" id=clue2_5>$2000</div>
			<div class="block" id=clue3_5>$2000</div>
			<div class="block" id=clue4_5>$2000</div>
			<div class="block" id=clue5_5>$2000</div>
			<div class="block" id=clue6_5>$2000</div>
		</div>
	</div>

<!--== Dynamic 'Cards' =====================================================-->

	<!-- Text 'Cards' ---------------------------------------->

	<div class="clue-card main-board-size">
	</div>

	<div class="category-card main-board-size" id="display-category-card">
	</div>

	<div class="category-card main-board-size" id="final-jeopardy-category-card">
	</div>

	<!--Image 'Cards' ---------------------------------------->

	<!--   for a future feature - splash screen/category intros:

	<img class="img-card main-board-size" id="splash-img-card">

	-->

	<img class="img-card main-board-size" id="daily-double-img-card" src="images/daily_double.jpg" alt="Daily Double">

	<img class="img-card main-board-size" id="final-jeopardy-img-card" src="images/final_jeopardy.jpg" alt="Final Jeopardy">

	<!--   for a future feature - image and video clues:

	<img class="img-card main-board-size" id="clue-img-card">
	<video class="video-card main-board-size" id="clue-video-card"></video>

	-->

	<!-- Audio accompaniments -------------------------------->

	<audio src="sounds/daily_double.mp3" class="audio" id="daily-double-sound"></audio>
	<audio src="sounds/reveal_ding.mp3" class="audio" id="reveal-ding-sound"></audio>

	<!--   for a future feature - trigger the timeout sound:

	<audio src="sounds/timeout.mp3" class="audio" id="timeout-sound"></audio>

	-->

<!--== Scoreboard Structure ================================================-->

	<div class="scores-container score-board-size">
		<div class="scores-grid">
			<div class="player-score">
			</div>
			<div class="player-score">
			</div>
			<div class="player-score">
			</div>
		</div>
	</div>

<!--== Footer ==============================================================-->

	<footer class="footer">
		<script type="module" src="jeopardy.js"></script>
		<script type="module" src="player.js"></script>
	</footer>

	</body>
</html>