-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
129 lines (122 loc) · 6.14 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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>SpellingBeeForMee!</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<body class="grey lighten-3">
<div class="container flow-text">
<div class="card center-align">
<div class="card-content yellow lighten-5 purple-text text-darken-3">
<p>Click to hear the word:</p>
<a id="play" class="btn-floating btn-large waves-effect waves-light teal"><i class="large material-icons">play_arrow</i></a>
<div id="sentence">Example: </div>
<p>Type your spelling:</p>
<div class="input-field" id="response">
<form>
<div class="row">
<input placeholder="Type your word here" id="responseText" class="col s12 m8" type="text" autofocus autocomplete="off">
<div class="col s12 m4 center">
<button id="enter" class="btn waves-effect waves-light" type="submit" name="action"><i class="material-icons left">input</i>enter</button>
</div>
</div>
</form>
</div>
<div class="divider"></div>
<div id="scoreboard" class="row">
<div id="scoreBoxes" class="col s12 m6">
<span>RIGHT:</span>
<span id="rightScore" class="score">0</span>
<span>WRONG:</span>
<span id="wrongScore" class="score">0</span>
<span>RECORD:</span>
<span id="recordScore" class="score">0</span>
</div>
<div id="resetBox" class="col s12 m6">
<span>RESET HIGH SCORE: <a id="resetScore" class="waves-effect waves-light btn little"><i class="material-icons">restore</i></a></span>
</div>
</div>
<div class="divider"></div>
<div class="row">
<div class="col s10 m6 offset-m2 underline left-align">Give me a hint</div>
<div class="col s1">
<a id="hint" class="waves-effect waves-light btn little"><i class="material-icons">help</i></a></div>
</div>
<div class="row">
<div class="col s10 m6 offset-m2 underline left-align">Skip this word</div>
<div class="col s1">
<a id="skip" class="waves-effect waves-light btn little"><i class="material-icons">skip_next</i></a></div>
</div>
<div class="row">
<div class="col s10 m6 offset-m2 underline left-align">Restart list</div>
<div class="col s1">
<a id="restart" class="waves-effect waves-light btn little"><i class="material-icons">replay</i></a></div>
</div>
<div class="row">
<div class="col s10 m6 offset-m2 underline left-align">Jump to a different word</div>
<div class="col s1">
<a id="jump" class="waves-effect waves-light btn little modal-trigger" data-target="jumpWord"><i class="material-icons">fast_forward</i></a></div>
</div>
<div class="row">
<div class="col s10 m6 offset-m2 underline left-align">Show my study list</div>
<div class="col s1">
<a id="study" class="waves-effect waves-light btn little"><i class="material-icons" href="#studyList">library_books</i></a></div>
</div>
<h6>Andy Bonner, 2016.
<a id="aboutLink" class="modal-trigger" href="#about">ABOUT</a>
</h6>
<div id="jumpWord" class="modal">
<div class="modal-content">
<p class="left-align">
Slide the dot to jump to a point on the list:
</p>
<form id="wordJumper" action="#">
<div class="row">
<div class="col s10">
<p class="range-field">
<input type="range" id="jumpSlider" min="1" max="228">
</p>
</div>
<div class="col s2">
<button id="jumpGo" class="waves-effect waves-light btn little modal-close" type="submit">go</button>
</div>
</div>
</form>
<span>... or jump to a random word:</span>
<a id="random" class="waves-effect waves-light btn little"><i class="modal-action modal-close material-icons">shuffle</i></a>
</div>
</div>
<div id="studyList" class="modal">
<div class="modal-content">
<div class="right"><i class="modal-close material-icons">close</i></div>
<p class="left-align">These are the words that you've gotten wrong or skipped sometimes. You can study them, click the "x" beside each one to remove it from the list, or... <a id="studyClear" class="waves-effect waves-light btn little"><i class="material-icons">delete</i>clear the list</a></p>
<div id="studyListWords" class="left-align chips"></div>
</div>
</div>
<div id="about" class="modal">
<div class="modal-content">
<div class="right"><i class="modal-close material-icons">close</i>
</div>
<ul class="left-align browser-default">
<li>Written by <a href="https://github.com/AbdiViklas">Andy Bonner</a>, 2016</li>
<li>Words from the <a href="http://spellingbee.com/">Scripps National spelling bee</a> 2016 first grade word list</li>
<li>Audio and usage examples from the <a href="http://www.dictionaryapi.com/">Merriam-Webster Collegiate Dictionary</a>, patched with the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API">HTML 5 Web Speech API</a> as
necessary
</li>
<li>Designed with <a href="http://materializecss.com/">Materialize</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>