-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
38 lines (33 loc) · 3.87 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="./css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="./js/reader.js"></script>
<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
</head>
<body>
<div id="invoerscherm">
<form action="" class="form-group col-md-3">
<input type="text" id='name1' class="form-control" placeholder ="female name"><br>
<input type="text" id="name2" class="form-control" placeholder="female name"><br>
<input type="text" id='name3' class="form-control" placeholder ="male name"><br>
<input type="text" id="object1" class="form-control" placeholder="object"><br>
<input type="text" id="action1" class="form-control" placeholder="first action"><br>
<input type="text" id="action2" class="form-control" placeholder="second action"><br>
<input type="text" id="bodypart" class="form-control" placeholder="bodypart"><br>
<input type="button" class="btn btn-default" id="submitIt" value="Submit">
</form>
</div>
<div class="story">
<h1>story</h1>
<p>One day, <span class="name1box">name1</span>'s mother said to her, “Take this <span class="object1box">object1</span> to <span class="name2box">name2</span>'s cottage, but don't talk to strangers on the way!” Promising not to, <span class="name1box">name1</span> skipped off. On her way she met the Big Bad <span class="name3box">name3</span> who asked, “Where are you going, little girl?” “To my <span class="name2box">name2</span>'s, Mr. <span class="name3box">name3</span>!” she answered.
<span class="name3box">name3</span> then ran to <span class="name2box">name2</span>'s cottage much before <span class="name1box">name1</span>, and knocked on the door. When <span class="name2box">name2</span> opened the door, he locked her up in the cupboard. Wicked <span class="name3box">name3</span> then wore <span class="name2box">name2</span>'s clothes and lay on her bed, waiting for <span class="name1box">name1</span>.
When <span class="name1box">name1</span> reached the cottage, she entered and went to <span class="name2box">name2</span>'s bedside. “My! What big <span class="bodypart">bodypart</span> you have, <span class="name3box">name3</span>!” she said in surprise. “All the better to <span class = "action1box">action1</span> you with, my dear!” replied <span class="name2box">name2</span>. “My! What big <span class="object1box">object1</span>you have, <span class="name2box">name2</span>!” said <span class="name1box">name1</span>. “All the better to <span class="action2box"> action2</span> you with, my dear!” said <span class="name3box">name3</span>. “What big teeth you have, <span class="name2box">name2</span>!” said <span class="name1box">name1</span>. “All the better to eat you with!” <span class = "name2box" >name2</span> growled pouncing on her. <span class="name1box">name1</span> screamed and the woodcutters in the forest came running to the cottage. They beat <span class="name3box">name3</span> and rescued <span class="name2box">name2</span> from the cupboard. <span class="name2box">name2</span> hugged <span class="name1box">name1</span> with joy. <span class="name3box">name3</span> ran away never to be seen again. <span class = "name1box" >name1</span> had learnt her lesson and never spoke to strangers ever again.</p>
</div>
<input id='playVoice' type='button' class="btn btn-default" value='Play' />
<input id='stopVoice' type='button' class="btn btn-default" value='stop' />
</div>
</body>
</html>