final/index.html at master · st2839/final · GitHub

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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap2.min.css">
  <link rel="stylesheet" href="css/styles2 copy.css">
  <title>Let's learn about sensor!</title>
</head>

<body>

<!-- Navigation -->
      <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
          <div class="navbar-header">
                  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                      <span class="sr-only">Toggle navigation</span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                      <span class="icon-bar"></span>
                  </button>
                  <a class="navbar-brand page-scroll" href="#page-top">Let's learn about Sensor!</a>
              </div>

<!-- Collect the nav links, forms, and other content for toggling -->
              <div class="collapse navbar-collapse navbar-ex1-collapse">
                  <ul class="nav navbar-nav">
<!-- List for navigation -->
                      <li class="hidden">
                          <a class="page-scroll" href="#page-top"></a>
                      </li>
                      <li>
                          <a class="page-scroll" href="#intro">What is sensor?</a>
                      </li>
                      <li>
                          <a class="page-scroll" href="#types">Types of Sensors</a>
                      </li>
                      <li>
                          <a class="page-scroll" href="#video">Setting up</a>
                      </li>
                      <li>
                          <a class="page-scroll" href="#story">Interactive Story time!</a>
                      </li>
                  </ul>
              </div>
<!-- /.navbar-collapse -->
          </div>
<!-- /.container -->
      </nav>
      <div class="content container">
        <div class="row">
          <section class="col-xs-12">
<!-- Header Section -->
      <section id="page-top" class="page-top-section">
        <header class="bghat">
      <div class="container-fluid">
          <h1 align="right">Let's learn about</h1>
          <h1 align="right">SENSORS!</h1>
      </div>
        </header>
      </section>

<!-- Intro Section -->
  <section id="intro" class="intro-section">
        <div class="content container">
          <div class="row">
            <section class="col-xs-12">
                      <h2 align="center">1. What is sensor?</h2>
                      <h3 align="center">Sensor or input is used to detect something! </h3>

                        <h3 align="center"><img src="sensore.jpg" alt="sensorexplain"><br><br>A sensor is an object that detects events or changes in its environment and sends the information to the computer. The computer then tells the <b>actuator</b> (output devices) to provide the corresponding output. A sensor detects and responds to its physical environment. Light, proximity, temperature, motion, moisture, pressure, and soil humidity are some examples of what the sensors can detect.<br><a href="http://whatis.techtarget.com/definition/sensor"> More info about sensors! </a><br>

                      </h3>
                  </section>
              </div>
          </div>
      </section>
<!--Pictures of Sensors in every day life-->
      <h3 align="center"><b>Let's take a look at everyday objects that use sensors! Can you recognize some of them?</b></h3>
      <div class="container">
          <div class="row">
  <div class="col-sm-6 col-md-4">
      <h4 align="center"><img src="giphy.gif" alt="autolight" style="width:304px;height:228px;"> <br>Light turns on automatically at night when the <b>LIGHT SENSOR</b> detects less LIGHT</br></h4>
  </div>
<!--Auto door-->
      <div class="col-sm-6 col-md-4">
          <h4 align="center"><img src="giphy1.gif" alt="autodoor" style="width:304px;height:228px;"> <br>Door turns on automatically when the <b>PROXIMITY SENSOR</b> detects SOMETHING NEAR.</br></h4>
      </div>
<!--Air con-->
      <div class="col-sm-6 col-md-4">
          <h4 align="center"><img src="giphy2.gif" alt="aircon" style="width:304px;height:228px;"> <br>Heater turns on automatically when the <b>TEMPERATURE SENSOR</b> detects lower temperature.</br></h4>
      </div>
<!-- Types of Sensors Section -->
      <section id="types" class="Sensortype-section">
        <div class="content container">
          <div class="row">
            <section class="col-xs-12">
                      <h2 align="center">2. Types of Sensors</h2>
                      <h3 align="center">There are so many types of sensors in the world but we will explore three common types of sensors for this lesson. Click on the photos to see what each sensor detects and common places that you can find these sensors! </h3>
<!-- Light Sensors card -->
            <div class="col-sm-6 col-md-4">
            <h5 align="center"><img src="lightcard.jpg" id="slide" onclick="nextslide()">
            <br>This is a <b>LIGHT SENSOR</b>.<br>
            <i>Click to see what it detects!</i><br>
            The light sensor detects light! It can be the light from the sun or from the electricity.<br>
            <i>Click again to see the light sensor in action!</i> <br>
            Have you ever seen a light pole on the street? It turns on automatically at night when its light sensor detects less sun light!<br></h5>
            </div>
<!-- Proximity Sensors card -->
            <div class="col-sm-6 col-md-4">
            <h5 align="center"><img src="proximity.jpg" id="slide2" onclick="nextslide2()">
            <br>This is a <b>PROXIMITY SENSOR</b>.<br>
            <i>Click to see what it detects!</i><br>
            The proximity sensor detects someone or something near!<br>
            <i>Click again to see the proximity sensor in action!</i> <br>
            Have you ever seen an automatic door? It opens automatically when its proximity sensor detects someone or something near!<br></h5>
            </div>
<!-- Temperature Sensors card -->
            <div class="col-sm-6 col-md-4">
            <h5 align="center"><img src="tempcard.jpg" id="slide3" onclick="nextslide3()">
            <br>This is a <b>TEMPERATURE SENSOR</b>.<br>
            <i>Click to see what it detects!</i><br>
            The temperature sensor detects temperature!<br>
            <i>Click again to see the temperature sensor in action!</i> <br>
            Have you ever wonder why a heater turned on automatically when it's cold? The heater turns on automatically when its temperature sensor detects temperate drops!<br></h5>
            </div>
                  </section>
                </div>
            </div>
        </section>
<!-- Sensors Quiz  -->
<h3 align="center"><br>Let's see if you can remember what each sensor does!</h3>
<div class="col-sm-6 col-sm-offset-3 " id='container'>
<br/>
<div id='quiz'></div>
<div class='button' id='next'><a href='#'>Next</a></div>
<div class='button' id='prev'><a href='#'>Prev</a></div>
<div class='button' id='start'> <a href='#'>Start Over</a></div>
<!-- <button class='' id='next'>Next</a></button>
<button class='' id='prev'>Prev</a></button>
<button class='' id='start'> Start Over</a></button> -->
</div>

<!-- Video tutorial -->
  <section id="video" class="video-section">
        <div class="content container">
          <div class="row">
            <section class="col-xs-12">
                      <h2 align="center">3. Setting Up for Interactive Story</h2>
                      <h3 align="center"> This section is for adults to set up Gogo Board sensors as a part of the Interactive Story in the Section #4.<br> <br>
                      Step 1: Use the <a href="https://drive.google.com/file/d/0B2Wi4C7T8YvEZElqTUhvNDJueVk/view">Adult Guide Book from the Gogo Board Toolkit </a> to learn about downloading Gogo Board software.<br> <br>

                      Step 2: Once you connected your Gogo Board and tested that it worked based on page 10-13 in the Adult Guide Book, connect the sensors and an actuator to the board. The picture below shows how the board should be set up. For sensors or inputs: the proximity sensor should be on portal #1. The temperature sensor should be on portal #5. Finally, the light sensor should be on portal #8. We will only connect the LED for the actuator on the portal A. <h3 align="center"><img src="connect.JPG" alt="connect" style="width:450px;height:450px;"> </h3> <br> <br>

                      <h3 align="center">Step 3: Go to <a href="http://tinker.learninginventions.org/"> Tinker: Learning Inventions</a> and code like a photo below. Once you are done press Write to Gogo Board on the top right of the screen. You will hear a beep sound from the board.<h3 align="center"><img src="code.jpg" alt="code"> </h3> <br> <br>

                      <h3> Step 4: Press the run button on the board and test your sensors. You should hear a beep sound when you get your hand closer to the proximity sensor. The LED light should turn on when you cover up the light sensor.<br> <br>

                      Note that the temperature sensor is not connected to the actuator and it is optional to connect it to the board. We include the temperature sensor so there is more complexity to the interactive story. The children will have more options of sensors to choose in order to help Tommy the rabbit.<br> <br> </h3>
                      <h3 align="center">Step 5: Watch the video below to see an example of how to make the story interactive and educational for the kids. <br> <br>
                      <iframe width="560" height="315"  src="https://www.youtube.com/embed/1jc_dljH0lk" frameborder="0" allowfullscreen></iframe>
                    </h3>
                  </section>
              </div>
          </div>
      </section>

<!--interactive story -->
  <section id="story" class="lesson-section">
    <div class="content container">
      <div class="row">
        <section class="col-xs-12">
                  <h2 align="center">4. Interactive Story Time!</h2>

                  <h3 align="center">Let's help Tommy with your knowledge about sensors! <br> Below is the instruction for your care givers before begin reading together!</h3>

                  <h3 align="center"><img src="rabbit.jpg" alt="rabbit" style="width:450px;height:450px;"> </h3>
                  <h3 align="center">Here's the story, enjoy!</h3>
<!--carousel-->
              <div class="content container">
                <div class="row">
                  <section class="col-sm-6 col-sm-offset-3 ">

              <div class="carousel slide" id="tommy" data-interval="false">
              <ol class="carousel-indicators">
                  <li data-target="#tommy" data-slide-to="0" class="active"></li>
                  <li data-target="#tommy" data-slide-to="1"></li>
                  <li data-target="#tommy" data-slide-to="2"></li>
                  <li data-target="#tommy" data-slide-to="3"></li>
                  <li data-target="#tommy" data-slide-to="4"></li>
                  <li data-target="#tommy" data-slide-to="5"></li>
                  <li data-target="#tommy" data-slide-to="6"></li>
                  <li data-target="#tommy" data-slide-to="7"></li>
                  <li data-target="#tommy" data-slide-to="8"></li>
                  <li data-target="#tommy" data-slide-to="9"></li>
                  <li data-target="#tommy" data-slide-to="10"></li>
                  <li data-target="#tommy" data-slide-to="11"></li>
                  <li data-target="#tommy" data-slide-to="12"></li>
                  <li data-target="#tommy" data-slide-to="13"></li>
                  <li data-target="#tommy" data-slide-to="14"></li>
                  <li data-target="#tommy" data-slide-to="15"></li>
              </ol>
                <div class="carousel-inner">
                  <div class="item active">
                  <img src="tommy/t1.jpg" alt="t1">
                  <div class="carousel-caption">
                    <h3>Hi Kids, let's help Tommy by figuring out the appropriate sensors!</h3>
                  </div>
                </div>
                <div class="item">
                  <img src="tommy/t2.jpg" alt="t2">
                </div>
                <div class="item">
                  <img src="tommy/t3.jpg" alt="t3">
                  </div>
                <div class="item">
                  <img src="tommy/t4.jpg" alt="t4">
                  </div>
                <div class="item">
                  <img src="tommy/t5.jpg" alt="t5">
                    </div>
                <div class="item">
                  <img src="tommy/t6.jpg" alt="t6">
                    </div>
                <div class="item">
                  <img src="tommy/t7.jpg" alt="t7">
                      </div>
                <div class="item">
                  <img src="tommy/t8.jpg" alt="t8">
                      </div>
                <div class="item">
                  <img src="tommy/t9.jpg" alt="t9">
                        </div>
                <div class="item">
                  <img src="tommy/t10.jpg" alt="t10">
                        </div>
                <div class="item">
                  <img src="tommy/t11.jpg" alt="t11">
                          </div>
                <div class="item">
                  <img src="tommy/t12.jpg" alt="t12">
                          </div>
                <div class="item">
                  <img src="tommy/t13.jpg" alt="t13">
                          </div>
                <div class="item">
                  <img src="tommy/t14.jpg" alt="t14">
                          </div>
                <div class="item">
                  <img src="tommy/t15.jpg" alt="t15">
                          </div>
                <div class="item">
                  <img src="tommy/t16.jpg" alt="t16">
                          </div>
              </div>
              <a class="left carousel-control"a href="#tommy" role="button" data-slide="prev">
              <span class= "glyphicon glyphicon-chevron-left"></span>
              </a>
              <a class="right carousel-control"a href="#tommy" role="button" data-slide="next">
              <span class= "glyphicon glyphicon-chevron-right"></span>
              </a>
            </div> <!--end carousel-->

              </section>
          </div>
      </div>
  </section>

</body>

<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/scriptfinal.js"></script>

</html>