-
Notifications
You must be signed in to change notification settings - Fork 1
/
storyboard.html
133 lines (112 loc) · 6.48 KB
/
storyboard.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
130
131
132
133
<!--Website theme based on Derek Reimer's MakeyMakeyAccessyAccessy, so these pages can be accessible and easily merged-->
<!DOCTYPE html>
<html lang="en">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="http://responsivevoice.org/responsivevoice/responsivevoice.js"></script>
</head>
<body>
<div class="container">
<nav>
<ul class="nav nav-pills nav-justified">
<li role="presentation" class="active"><a href="/teamgadgeteers/index.html">Home</a></li>
<li role="presentation" class="active"><a href="/teamgadgeteers/puzzle.html">Puzzle</a></li>
<li role="presentation" class="active"><a href="/teamgadgeteers/storyboard.html">Story Board</a></li>
</ul>
</nav>
<div tabindex="0" role="main" id="mainContents" class="jumbotron">
<div id="storyboard">
<h1 class="focused" tabindex="-1"> Story Board </h1>
</div>
<p>Welcome to the Story Board! Choose a story from the dropdown menu and fill in the story blanks using the story pieces. Once you've filled it all in, trigger the read story button to hear the whole story.</p>
<div>
<p>Choose a story:
<select id="select_story">
<option value="goodnight">Goodnight</option>
<option value="once">Once Upon a Time</option>
<option value="limerick">Limerick</option>
</select>
<button type="button" onclick="buttonPress()">Read Story</button>
</p>
</div>
<div>
</div>
<div id="story_goodnight">
<p> <span class="b1_goodnight"> Goodnight <span class="a1">[blank]</span>,</span> <span class="b2_goodnight">goodnight <span class="a2">[blank]</span>.</span> <span class="b3_goodnight">Goodnight <span class="a3">[blank]</span>,</span> <span class="b4_goodnight">goodnight <span class="a4">[blank]</span>.</span> <span class="b5_goodnight">Goodnight <span class="a5">[blank]</span>,</span> <span class="b6_goodnight"> and goodnight <span class="a6">[blank]</span>.</span></p>
</div>
<div id="story_once" style="display:none">
<p> <span class="b1_once"> Once upon a time, there was a <span class="a1">[blank]</span>.</span> <span class="b2_once"> One day the <span class="a1">[blank]</span> went for a walk and met a <span class="a2">[blank]</span>.</span> <span class="b3_once">The <span class="a2">[blank]</span> was holding a <span class="a3">[blank]</span> in his hand,</span> <span class="b4_once">and then threw it at a <span class="a4">[blank]</span>.</span> <span class="b5_once">The little <span class="a1">[blank]</span> ran to catch the <span class="a3">[blank]</span>, but a <span class="a5">[blank]</span> fell on its head.</span> <span class="b6_once"> The little <span class="a1">[blank]</span> looked up to find a smiling <span class="a6">[blank]</span> had caught the <span class="a3">[blank]</span> and handed it to him.</span></p>
</div>
<div id="story_limerick" style="display:none">
<p> <span class="b1_limerick"> There once was a <span class="a1">[blank]</span> named Proud.</span><br> <span class="b2_limerick"> Who lived on the highest <span class="a2">[blank]</span>. <br>He saw a large bee.</span> <br><span class="b3_limerick">And ran into a <span class="a3">[blank]</span>. <br>And fell down into the crowd.</span> </p>
<p> <span class="b4_limerick">There once was a <span class="a4">[blank]</span> named June.<br></span> <span class="b5_limerick">Who lived upon the <span class="a5">[blank]</span>.<br> She needed to shower.<br></span> <span class="b6_limerick"> But watered a <span class="a6">[blank]</span>. <br>And ran out of water too soon!</span></p>
</div>
</div>
</div>
</body>
<!-- All JS -->
<script>
var story_val = "goodnight";
$("#select_story").change(function() {
story_val = $(this).val();
$('#story_goodnight').hide();
$('#story_once').hide();
$('#story_limerick').hide();
$('#story_'+story_val).show();
});
function buttonPress(){
responsiveVoice.speak($('#story_'+story_val).text(),'US English Female');
};
window.addEventListener("keydown", checkKeyPressed, false);
var keyBeenPressed=0;
var previousKey=0;
var space=[65, 66, 67, 68, 69, 70];
var piece=[71, 72, 73, 74, 75, 76];
var output = '';
function checkKeyPressed(e) {
console.log(e);
if (keyBeenPressed==0 && space.indexOf(e.keyCode)>-1){
keyBeenPressed++;
previousKey=e;
}
else if (keyBeenPressed==1 && piece.indexOf(e.keyCode)>-1){
switch(e.keyCode) {
case 71: output = "flower"; break;
case 72: output = "star"; break;
case 73: output = "moon"; break;
case 74: output = "house"; break;
case 75: output = "cloud"; break;
case 76: output = "tree"; break;
}
switch(previousKey.keyCode){
case 65: $(".a1").text(output); responsiveVoice.speak($('.b1_'+story_val).text(),'US English Female'); break;
case 66: $(".a2").text(output); responsiveVoice.speak($('.b2_'+story_val).text(),'US English Female'); break;
case 67: $(".a3").text(output); responsiveVoice.speak($('.b3_'+story_val).text(),'US English Female'); break;
case 68: $(".a5").text(output); responsiveVoice.speak($('.b5_'+story_val).text(),'US English Female'); break;
case 69: $(".a4").text(output); responsiveVoice.speak($('.b4_'+story_val).text(),'US English Female'); break;
case 70: $(".a6").text(output); responsiveVoice.speak($('.b6_'+story_val).text(),'US English Female'); break;
}
keyBeenPressed=0;
}
else if (keyBeenPressed==1 && e.keyCode==77){
output="[blank]";
switch(previousKey.keyCode){
case 65: $(".a1").text(output); break;
case 66: $(".a2").text(output); break;
case 67: $(".a3").text(output); break;
case 68: $(".a5").text(output); break;
case 69: $(".a4").text(output); break;
case 70: $(".a6").text(output); break;
}
keyBeenPressed=0;
}
};
</script>
</html>