/
index.html
216 lines (212 loc) · 12.3 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/all.css">
<title>填答表單</title>
</head>
<body>
<div class="container-fluid">
<div class="row gameQuiz justify-content-center">
<div class="Quiz-Start col-12 col-md-6 col-lg-4">
<img src="img/detect.png" alt="">
<p class="text-center text-white">
記住，你沒有選擇錯誤的餘地<br>謹慎小心的作答!
</p>
<a href="#" class="btn btn-outline-light">開始測驗</a>
</div>
<!-- 第一題 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h2>Q<span>1</span></h2>
<h3>
先來驗證個身分，說出你的暗號
</h3>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>lily</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>violate</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='1'>Saffron</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>Marigold</a>
<a href="#" class="btn btn-primary confirm-Btn" >確定送出</a>
</div>
</div>
<!-- 第二題 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h2>Q<span>2</span></h2>
<h3>
測試一下你的情蒐能力是否成熟，以下何者的資訊是可信的？
</h3>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>環評局的檢驗人員表示，雖然的確有在村內用水檢測出有害物質禿頭劑，不過含量在安全範圍內，且所有取水處皆有測出</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='1'>檢驗報告指出：蔡姓男子的DNA與嫌疑被害人其子女的基因高度相符，並發現帶有其基因的孩童，均有光頭表徵，無一例外</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>昨日公布污水傾倒畫面，畫面顯示村長一行人在河流上游進行傾到。但眼尖網友指出，其影像有經過第二手處理，想必村長是被人陷害</a>
<a href="#" class="btn btn-primary confirm-Btn">確定送出</a>
</div>
</div>
<!-- 第三題 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h2>Q<span>3</span></h2>
<h3>
博德村的秘密與何種議題相關？
</h3>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='1'>倫理道德議題</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>種族歧視議題</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>環境保護議題</a>
<a href="#" class="btn btn-primary confirm-Btn">確定送出</a>
</div>
</div>
<!-- 第四題 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h2>Q<span>4</span></h2>
<h3>
茂盛生髮水公司當初為什麼要關廠？
</h3>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='1'>被舉報有傾倒污水的嫌疑，導致村內多數兒童有掉髮現象</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>被隔壁村同行的生髮水公司誣陷，懷疑有傾倒污水的嫌疑</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>被過去員工舉報和政府有貪污嫌疑</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>村內多名孩童因使用茂盛生髮水而有光頭症狀產生</a>
<a href="#" class="btn btn-primary confirm-Btn">確定送出</a>
</div>
</div>
<!-- 第五題 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h2>Q<span>5</span></h2>
<h3>
請問汙水案出現了什麼逆轉?
</h3>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='1'>環評局發現禿頭劑只在部分區域被驗出</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>發現禿頭劑是因為村長為了報復工廠而偷偷傾倒的</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>發現禿頭劑是村民為了詐領金援而偷倒的</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>發現水中禿頭劑含量不足並不會造成禿頭</a>
<a href="#" class="btn btn-primary confirm-Btn">確定送出</a>
</div>
</div>
<!-- 第六題 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h2>Q<span>6</span></h2>
<h3>
我收到了多方情報，以下何者情報有誤？
</h3>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>蔡男因高超的番紅花種植技術成為唯一一位入贅博德村的村外人</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>蔡男具有超強光頭基因</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='1'>蔡男和村長過去曾有私人恩怨</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>蔡男曾與村內多名女性交歡，並且皆為你情我願</a>
<a href="#" class="btn btn-primary confirm-Btn">確定送出</a>
</div>
</div>
<!-- 第七題 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h2>Q<span>7</span></h2>
<h3>
為何村內會出現多名光頭兒童？
</h3>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>飲用水被上游的茂盛生髮水公司污染，感染有毒物質而有掉髮現象</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>村長帶有超強光頭基因，又有濫交習慣，因此光頭基因感染全村</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='1'>蔡男和村內多名婦女交歡，產下許多具有光頭基因的孩童</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>光頭為博德村流傳已久的隱性基因，到近幾年才越來越外顯</a>
<a href="#" class="btn btn-primary confirm-Btn">確定送出</a>
</div>
</div>
<!-- 第八題 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h2>Q<span>8</span></h2>
<h3>
你有聽清楚我偷錄的影音檔吧？下列關於村民大會的情報何者有誤？
</h3>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>有人想將村內習俗公開，因此出賣村長</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='1'>蔡男曾在村民大會中吐露心聲，要求大家別再誣陷</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>村長和保守黨站在同一陣線</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='0'>村內存在著對「公布習俗」持有不同的意見</a>
<a href="#" class="btn btn-primary confirm-Btn">確定送出</a>
</div>
</div>
<!-- 結束 -->
<div class="Quiz col-12 col-md-6 col-lg-4">
<div class="Qus-Panel">
<div>
<h5>幹得好，探員。我們認為這次合作非常愉快且順利。辛苦你這幾個月的潛伏。現在，快向政府稟報，讓我們村裡能夠光明磊落的生活下去！</h5>
<p class="text-center mt-2">【你的決定是？】</p>
</div>
</div>
<div class="Ans-Panel">
<a href="#" class="btn btn-outline-light select-Btn" data-ans='2'>稟報</a>
<a href="#" class="btn btn-outline-light select-Btn" data-ans='3'>銷毀</a>
<a href="#" class="btn btn-primary confirm-Btn">確定送出</a>
</div>
</div>
<!-- 探員成功 -->
<div class="Quiz col-12 col-md-6 col-lg-4 End" id="Win2">
<div class="Qus-Panel">
<div class="text-center">
<h2>探員勝利</h2>
<a href="#" class="btn btn-primary">重新開始</a>
</div>
</div>
</div>
<!-- 間諜成功 -->
<div class="Quiz col-12 col-md-6 col-lg-4 End" id="Win3">
<div class="Qus-Panel">
<div class="text-center">
<h2>間諜勝利</h2>
<a href="#" class="btn btn-primary">重新開始</a>
</div>
</div>
</div>
<!-- 失敗 -->
<div class="Quiz col-12 col-md-6 col-lg-4 Lose" id="Lose">
<div class="Qus-Panel">
<div class="text-center">
<h2>失敗</h2>
<a href="#" class="btn btn-primary">重新開始</a>
</div>
</div>
</div>
</div>
</div>
<!-- js 不是用 bootstrap 官網的 -->
<script src="js/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- 自己 JS -->
<script src="js/all.js"></script>
</body>
</html>