-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
92 lines (85 loc) · 3.54 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id = "outer">
<div id = "quiz">
<div id = "buttons">
<div id = "game_choices">
</div>
<div id = "option_buttons">
<button id = "options_toggle">*</button>
<button id = "color_button">~</button>
<button id = "full_screen">±</button>
</div>
</div>
<div id = choices style="display: none">
<div class="choice_holder">
<div class="selection_title">base notes of chords, intervals, and scales</div>
<div id = "note_types" class="selection"></div>
</div>
<div class="choice_holder">
<div class="selection_title">intervals</div>
<div id = "interval_types" class="selection"></div>
</div>
<div class="choice_holder">
<div class="selection_title">chords</div>
<div id = "chord_types" class="selection"></div>
</div>
<div class="choice_holder">
<div class="selection_title">scales and modes</div>
<div id = "scale_types" class="selection"></div>
</div>
</div>
<pre id = "terminal">Let's practice!
Open the options menu with the [*] button to choose what shows up in your practice.
Select a practice topic on the top left to begin.
Play on the keyboard whatever shows up on this screen.
If you play correctly, the keys will light up green, and you will move on.
</pre>
<canvas id = "visuals" style="display: none"></canvas><br>
</div>
<div id = "keyboard">
<div id = "black_keys">
<div class="clear"></div>
<div id = "1" class= "black"></div>
<div class="clear"></div>
<div id = "3" class= "black"></div>
<div class="clear"></div>
<div class="clear"></div>
<div id = "6" class= "black"></div>
<div class="clear"></div>
<div id = "8" class= "black"></div>
<div class="clear"></div>
<div id = "10" class= "black"></div>
<div class="clear"></div>
</div>
<div id = "white_keys">
<div id = "0" class= "white"></div>
<div id = "2" class= "white"></div>
<div id = "4" class= "white"></div>
<div id = "5" class= "white"></div>
<div id = "7" class= "white"></div>
<div id = "9" class= "white"></div>
<div id = "11" class= "white"></div>
</div>
</div>
</div>
<script src = "utility.js" ></script>
<script src = "canvas.js" ></script>
<script src = "draw.js" ></script>
<script src = "midi.js" ></script>
<script src = "terminal.js" ></script>
<script src = "theory.js" ></script>
<script src = "note_quiz.js" ></script>
<script src = "interval_quiz.js"></script>
<script src = "chord_quiz.js" ></script>
<script src = "scale_quiz.js" ></script>
<script src = "scale_degrees.js"></script>
<script src = "buttons.js" ></script>
<script src = "interval_ear_training.js"></script>
</body>
</html>