-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathsub-build-your-own-skelton-what-are-they-made-of.html
161 lines (137 loc) · 8.07 KB
/
sub-build-your-own-skelton-what-are-they-made-of.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
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
<!-- i-C-a -->
<div data-role="page" id="sub-build-your-own-skelton-what-are-bones-what-are-they-made-of">
<script src="js/hammer.js"></script>
<script src="js/jquery.hammer.js"></script>
<script src="js/slidebar_build_your_own_skelton.js"></script>
<link rel="stylesheet" href="css/style_build_your_own_skelton.css" />
<div class="menuhousing"></div>
<div class="homebtnholder"><div class="homebtnskelton"></div></div>
<div class="mpbtnholder"><div class="mpbtnskelton"></div></div>
<div class="cpbtnholder"><div class="cpbtnskelton"></div></div>
<div class="infobtnholder"><div class="infobtnskelton"></div></div>
<div class="credsbtnholder"><div class="credsbtnskelton"></div></div>
<div class="menubtnholder"><div class="menubtnskelton"></div></div>
<div class="bptitleholder"><h1>What are they made of?</h1></div>
<div id="spacechar">
<div data-role="content" class="kidzcontent">
<div class="v-spacer"></div>
<div class="sidebarleft-half">
<a id="img1" style="visibility:hidden;" href="JavaScript:html5Lightbox.showLightbox(0, 'css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of/Image_Card_1_Hi_Res.jpg', 'Long bone cross section showing intricate spongy layer. (Courtesy: Monash University)');">click here</a>
<a id="img2" style="visibility:hidden;" href="JavaScript:html5Lightbox.showLightbox(0, 'css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of/Image_Card_2_Hi_Res.jpg', 'Long bone cross section showing hollow middle layer. (Courtesy: Monash University)');">click here</a>
<a id="img3" style="visibility:hidden;" href="JavaScript:html5Lightbox.showLightbox(0, 'css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of/Image_Card_3_Hi_Res.jpg', 'Long bone cross section showing intricate spongy layer. (Courtesy: Monash University)');">click here</a>
<a id="img4" style="visibility:hidden;" href="JavaScript:html5Lightbox.showLightbox(0, 'css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of/Image_Card_4_Hi_Res.jpg', 'Inner spongy layer showing holes that make it strong but light!');">click here</a>
<div id="zoomwrapper">
<div id="pol1" class="pPiece" style="left:100px;top:270px;">
<img src="css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of/Image_Card_1.png" alt="" />
</div>
<div id="pol2" class="pPiece" style="left:75px;top:290px;">
<img src="css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of/Image_Card_2.png" alt="" />
</div>
<div id="pol3" class="pPiece" style="left:80px;top:270px;">
<img src="css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of/Image_Card_3.png" alt="" />
</div>
<div id="pol4" class="pPiece" style="left:80px;top:270px;">
<img src="css/images/9-12/Human_Body/Build_Your_Own_Skelton/What_Are_Bones/What_Are_They_Made_Of/Image_Card_4.png" alt="" />
</div>
</div><!--/zoomwrapper-->
</div>
<div class="bpcontentskelton">
<p>Your bones are made of many compounds including calcium, just like your teeth. This compound is what makes your bones hard! But your bones also contain collagen, which is bendy like rope! Together these provide the best framework for your bones to be strong AND flexible!</p>
<p>Each of your bones are made of two layers. The first is a hard outer shell, which is called compact bone. Touch your arm bone - that's the hard part! Inside is the second spongy layer. But it's not soft like a sponge - it has a lot of holes in it like a honeycomb! This allows your bones to be strong but light. </p>
<p>All of your bones are wrapped in a material called the periosteum. It contains lots of nerves, which makes it very sensitive. Have you ever been kicked in the shins? The pain you feel is from hurting the nerves in your periosteum.</p>
</div>
<div class="botlogoholder"><a href="home.html" class="homelinkbh"><img src="css/images/9-12/Human_Body/bottomhomehb.png"></a></div>
</div> <!-- end content -->
</div><!--/spacechar-->
<!-- <div class="audiopanel"> -->
<!-- images are in slidebarnat.js
note: change the ids to be able play the narration
-->
<div class="micbtnholder"><div class="micbtnskelton" id="playstopwhataretheymadeof"></div></div>
<div class="bskelton"><div class="rwskelton" id="whataretheymadeofaudiobbtn"></div></div>
<div class="plskelton"><div class="plpsskelton" id="whataretheymadeofaudioplbtn"></div></div>
<div class="fskelton"><div class="fwskelton" id="whataretheymadeofaudiofbtn"></div></div>
<div id="actualaudio-whataretheymadeof" style="visibility:hidden;"></div>
<!-- </div> -->
<script>
// sound setup is in home.html and index.js
sound = new Audio(); // 'sound' is now an audio object
var playing;
var paused;
(function() {
$('div#pol1').css("z-index", 3);
$('div#pol2').css("z-index", 2);
$('div#pol3').css("z-index", 1);
$('div#pol1 > img').css("-webkit-transform", "rotate(0deg)");
$('div#pol2 > img').css("-webkit-transform", "rotate(5deg)");
$('div#pol3 > img').css("-webkit-transform", "rotate(-3deg)");
$('div#pol4 > img').css("-webkit-transform", "rotate(-3deg)");
playing = false;
paused = true;
if(sound.canPlayType('audio/mpeg')) {
$('#actualaudio-whataretheymadeof').html('<audio id="whataretheymadeofaudio" controls preload onpause="pauseskelton()" onplay="playsskelton()"><source src="audio/Build_Your_Own_Skelton/What_Are_They_Made_Of.mp3" type="audio/mpeg"></audio>');
}
$("#sub-build-your-own-skelton-what-are-bones-what-are-they-made-of").swipe( { swipeRight:goBack, allowPageScroll:"auto"} );
})();
$('.homelinkbh').on('tap', function() { bgsoundskelton.pause(); bgsoundskelton.currentTime = 0; mainaudiobg.play(); });
function goBack() {
$.mobile.changePage("sub-build-your-own-skelton.html", {transition: "slide", reverse: true });
}
$("#pol1").on('tap', function() {
$('#img1')[0].click();
});
$("#pol2").on('tap', function() {
$('#img2')[0].click();
});
$("#pol3").on('tap', function() {
$('#img3')[0].click();
});
$("#pol4").on('tap', function() {
$('#img4')[0].click();
});
function playsskelton() {
bgsoundskelton.play();
}
function pauseskelton() {
bgsoundskelton.pause();
}
/* ******************** */
/* this is the microphone button */
$("#playstopwhataretheymadeof").on('tap', function() {
if(!playing) {
whataretheymadeofaudio.play();
$('.micbtnskelton').css('background-position-x', '-81px');
playing = true;
paused = false;
} else {
whataretheymadeofaudio.pause(); whataretheymadeofaudio.currentTime = 0;
$('.micbtnskelton').css('background-position-x', '0px');
playing = false;
paused = true;
}
});
$("#whataretheymadeofaudioplbtn").on('tap', function() {
if(!paused) {
whataretheymadeofaudio.pause();
paused = true;
} else {
whataretheymadeofaudio.play();
paused = false;
}
//$(".audiopanel").css({"backgroundPosition":"-197px 0px"});
});
$("#whataretheymadeofaudiofbtn").on('tap', function() {
var ctime = whataretheymadeofaudio.currentTime;
whataretheymadeofaudio.currentTime = ctime + 10;
});
$("#whataretheymadeofaudiobbtn").on('tap', function() {
var ctime = whataretheymadeofaudio.currentTime;
whataretheymadeofaudio.currentTime = ctime - 10;
});
$("#whataretheymadeofaudiopsbtn").on('tap', function() {
whataretheymadeofaudio.pause();
//$(".audiopanel").css({"backgroundPosition":"0px 0px"});
});
</script>
<script src="js/fourcardLogic.js"></script> <!-- for card dragging effects -->
</div> <!--//home-->