-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (98 loc) · 3.78 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
107
108
109
110
111
112
113
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rhythm Dictation: The Game!</title>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/style.css" />
<script src="js/app.js"></script>
</head>
<body>
<nav>
<div id="title">Rhythm Game</div>
<div id="instbutton">Instructions</div>
</nav>
<div id="container">
<div id="sequencer">
<div class="res-row"> <!-- Container For First Half of Sequencer Row -->
<div class="seq-key">
<div class="light" data-index="0"></div>
<div class="key" data-index="0">1</div>
</div>
<div class="seq-key">
<div class="light" data-index="1"></div>
<div class="key" data-index="1">&</div>
</div>
<div class="seq-key" >
<div class="light" data-index="2"></div>
<div class="key" data-index="2">2</div>
</div>
<div class="seq-key" >
<div class="light" data-index="3"></div>
<div class="key" data-index="3">&</div>
</div>
</div> <!-- Container For First Half of Sequencer Row -->
<div class="res-row"> <!-- Container For Second Half of Sequencer Row-->
<div class="seq-key">
<div class="light" data-index="4"></div>
<div class="key" data-index="4">3</div>
</div>
<div class="seq-key">
<div class="light" data-index="5"></div>
<div class="key" data-index="5">&</div>
</div>
<div class="seq-key">
<div class="light" data-index="6"></div>
<div class="key" data-index="6">4</div>
</div>
<div class="seq-key">
<div class="light" data-index="7"></div>
<div class="key" data-index="7">&</div>
</div>
</div> <!-- Container For Second Half of Sequencer Row -->
</div> <!-- sequencer -->
<div id="controls">
<div class="res-row">
<button id="play">PLAY</button>
<button id="stop">STOP</button>
</div>
<div class="res-row">
<button id="submit">SUBMIT</button>
<div id="bpm">
<input type="text"></input>
BPM
</div>
</div>
</div> <!-- control row -->
<div id="error-loss">
<div class="outcome" id="lose">TRY AGAIN</div>
<div class="outcome" id="bad-input">INVALID TEMPO</div>
</div>
<div class="overlay" id="win">
<h1>CORRECT!</h1>
<div id='play-again'>
<button id='replay'>Play Again</button>
<a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><button id='quit'>Quit</button></a>
</div>
</div>
<div id="instructions" class="overlay">
<div id="inst-content">
<h1>How To Play:</h1>
<p>Welcome! In this game, you will be played a rhythm and asked to enter it
on a corresponding set of sequencer keys. You can hear the rhythm as many
times as you'd like.</p>
<h1>Controls:<h1>
<p>Play: Plays the rhythm the player is supposed to enter into the sequencer.</p>
<p>Stop: Stops playback.</p>
<p>Submit: Pressing this button will both play the rhythm that you've entered and
check to see if it is correct.</p>
<p>BPM Field: BPM stands for 'beats per minute', and is a measure of tempo (speed)
in music. Enter a number between 0 and 399 and press 'Enter' to adjust playback
speed.</p>
</div>
</div>
<audio src="audio/snare.wav" data-note="2"></audio>
</div> <!-- container -->
</body>
</html>