-
Notifications
You must be signed in to change notification settings - Fork 0
/
08.html
204 lines (189 loc) · 6.98 KB
/
08.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
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
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="utf-8" />
<meta name="description" content="無所不在學習導引機制" />
<meta name="author" content="JennyTsai" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>恐龍時代</title>
<!--放網址小圖示-->
<link rel="icon" href="picture/favicon.ico" type="image/x-icon" />
<!-- 清除預設樣式 -->
<link href="assets/css/YUI-reset.css" rel="stylesheet" />
<!-- 套用自己的樣式 -->
<link href="css/01_style.css" rel="stylesheet" media="screen" />
<link href="css/Emobile_style.css" rel="stylesheet" media="handheld, screen and (max-width: 480px)" />
<!-- 舊版IE相容性 -->
<!-- 修正CSS相容性問題 -->
<!--[if lt IE 9]> <script src="assets/js/html5shiv.js"></script> <![endif]-->
<!-- 修正Png背景透明問題 -->
<!--[if lt IE 7]>
<script src="assets/js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script> <script type="text/javascript">
DD_belatedPNG.fix('*');
</script>
<![endif]-->
</head>
<body>
<div id="page">
<header>
<div class="inner">
<!-- 這是header頁首區塊 -->
</div>
</header>
<div id="content" class="con_total">
<div class="inner">
<article>
<h1>恐龍再現</h1>
<div class="middle_line">
<img class="pic_size_09" src="p-ering/10/C3.bmp" alt="C3">
<br/><br/>
</div>
<p>恐龍已在六千五百萬年前滅絕了。沒有人有機會看過活的恐龍，透過化石和各種科學的研究發現，
這提供了我們無限的想像空間去復原恐龍。首先是恐龍骨骼結構的復原，接著是以生物力學分析行為模式，
再加上肌肉和皮膚，於是栩栩如生的恐龍又復活了。其實每一種膚色或每一個動作，
都代表著科學家對這些遠古生物的生活方式的一種推測，是對是錯，有待更多的科學發現來驗證。
科學的本質就是不斷探索。</p>
<br/>
<figure>
<img class="pic_size_05 classname1" src="p-ering/10/C5.png" alt="將恐龍骨骼結構復原">
<figcaption class="pic_dis">將恐龍骨骼結構復原</figcaption>
</figure>
<figure>
<img class="pic_size_05 classname1" src="p-ering/10/C6.png" alt="以生物力學分析行為模式">
<figcaption class="pic_dis">以生物力學分析行為模式</figcaption>
</figure>
<figure>
<img class="pic_size_05 classname1" src="p-ering/10/C7.bmp" alt="加上肌肉與皮膚">
<figcaption class="pic_dis">加上肌肉與皮膚</figcaption>
</figure>
</article>
<p class="last_line"></p>
<div class="middle_line">
<input id="fin_but" type="button" class="btn btn-danger btn btn-lg" onClick="finish_click()" value="學習完成">
</div>
<p/>
</div>
</div>
<div id="question1" class="section black middle_line">
<h3> Q： 透過化石和各種科學的研究發現，提供了我們無限的想像空間去復原恐龍。復原恐龍的步驟為？</h3>
<div class="abreast-07">
<button type="button" data-toggle="modal" data-target="#fault_ans" class="button_answer" onClick="alertno()">
(A) 以生物力學分析行為模式→將恐龍骨骼結構復原→加上肌肉與皮膚</button>
<br/><br/>
<button type="button" data-toggle="modal" data-target="#fault_ans" class="button_answer" onClick="alertno()">
(B) 加上肌肉與皮膚→以生物力學分析行為模式→將恐龍骨骼結構復原</button>
<br/><br/>
<button type="button" data-toggle="modal" data-target="#correct_ans" class="button_answer" onClick="alertyes()">
(C) 將恐龍骨骼結構復原→以生物力學分析行為模式→加上肌肉與皮膚</button>
</div>
<p class="abreast-08"/>
</div>
<div id="fault_ans" class="alert_ans modal fade" role="dialog" data-backdrop="static" data-backdrop="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">答錯囉!!</h4>
</div>
<div class="modal-body">
<p>請回去教材再學習一次喔!!<p/>
</div>
<div class="modal-footer">
<button class="button_answer_ok" data-dismiss="modal" onClick="return_study()">OK</button>
</div>
</div>
</div>
</div>
<div id="correct_ans" class="alert_ans modal fade" role="dialog" data-backdrop="static" data-backdrop="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">恭喜答對囉!!</h4>
</div>
<div class="modal-body">
<p>前往下一個標的吧!!<p/>
</div>
<div class="modal-footer">
<button class="button_answer_ok" data-dismiss="modal" onClick="learnFinish()">OK</button>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script>
//data-toggle="modal" data-target="#fault_ans"
var ansQID = []; //存放題號
var ansCheck = []; //答題對錯(1:對,0:錯)
var count = 2; //倒數的次數
var n = 0;
var i = 0;
var j = 0;
var timeOut;
<!--學習完教材按下「學習完成」扭-->
function finish_click()
{
$('html, body').scrollTop(0); //捲軸回到0的位置
if( i == 0 )
{
n = 1;
$("div#content").css("display","none");
$("div#question1").css("display","inline");
}
}
<!--跳出答錯的alert視窗-->
function alertno()
{
$("#fault_ans").css("display","inline");
ansQID[j] = "8-1";
ansCheck[j] = 0;
j++;
$("#fault_ans").modal({show:false});
}
<!--答錯跳出的alert按下OK時回到教材再學習一次-->
function return_study()
{
$('html, body').scrollTop(0); //捲軸回到0的位置
$("div#question1").css("display","none");
$("div#fault_ans").css("display","none");
$("div#content").css("display","inline");
i = i + 1;
count = 2;
ftime();
}
<!--按鈕倒數計時-->
function ftime(){ time(); }
function time()
{
if (count == 0) {
$("input#fin_but").attr("disabled", false);
$("input#fin_but").val("學習完成");
i = 0;
clearTimeout(timeOut);
}
else {
count--;
$("input#fin_but").attr("disabled", "disabled");
$("input#fin_but").val("請再學習一次!!(" + count.toString() + ")");
timeOut = setTimeout(time, 1000);
}
}
<!--跳出答對的alert視窗-->
function alertyes()
{
//ansQID[j] = 題號, j = 0 ~ 答對的那題
//ansCheck[j] = 答題對錯, j = 0 ~ 答對的那題
ansQID[j] = "8-1";
ansCheck[j] = 1;
$("#fault_ans").css("display","inline");
}
<!--答對的alert視窗按下OK後的動作-->
function learnFinish()
{
Android.learnFinish(ansQID,ansCheck);
}
</script>
</body>
</html>