php：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用數組看圖答題小遊戲</title>
<style type="text/css">
.hide{display: none}
li{cursor: pointer;}
</style>
</head>
<body>
<?php
// 題目的數組
//
// n道題
//
// 1.題目
//
// 2.選項：a/b/c/d
//
// 3.答案
$timu_list = [
1 => [
"timu"=>"圖中的主人公是誰？<img style='width:120px;heigth:160px' src='https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2151645358,34560062&fm=58'>",
"option"=>["曹操","狄仁傑","張飛"],
"result"=>0,
],
2 => [
"timu"=>"好牌怎麼胡？<img style='width:120px;heigth:160px' src='https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=211917072,815486818&fm=85&app=60&f=JPEG?w=121&h=75&s=F3A324E4040E354944278A080300D0DF'>",
"option"=>["3","6","9"],
"result"=>1,
],
3 => [
"timu"=>"你最適合那個英雄？<img style='width:120px;heigth:160px' src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2694240513,652565669&fm=27&gp=0.jpg'>",
"option"=>["曹操","狄仁傑","張飛"],
"result"=>2,
],
];
?>
<div class="timu_box">
<?php
foreach ($timu_list as $key => $value) {
if ($key == 1) {
$class = '';
}else{
$class = 'hide';
}
//php 統計數組的數量 count()
echo "
<ul class='{$class}'>
<li><h2 onclick='console.dir()'>$key/".count($timu_list)."</h2></li>
<li>
<h1>{$value['timu']}</h1>
</li>
<li onclick='doit({$value['result']},0)'>{$value['option'][0]}</li>
<li onclick='doit({$value['result']},1)'>{$value['option'][1]}</li>
<li onclick='doit({$value['result']},2)'>{$value['option'][2]}</li>
<li><button id='btn{$key}' onclick='go_next()'>下一題</button></li>
<li><button id='up-btn{$key}' onclick='go_re()'>上一題</button></li>
</ul>";
}
?>
</div>
<script type="text/javascript">
window.onload=function(){
var timu_ul = document.querySelectorAll('.timu_box ul')
if(cur_timu_index == 0){
document.getElementById('up-btn'+(cur_timu_index+1)).className="hide"
}
if (cur_timu_index == timu_ul.length-1) {
document.getElementById('up-btn'+(cur_timu_index+1)).className=""
// console.log(document.getElementById('up-btn'+(cur_timu_index+1)))
}
}
var cur_timu_index = 0
function go_next(){
var timu_ul = document.querySelectorAll('.timu_box ul');
// console.log(timu_ul)
if (cur_timu_index<timu_ul.length-1) {
// 隱藏之前的題目ul,
// 之前的 cur_timu_index
timu_ul[cur_timu_index].className= "hide";
// 顯示下一個ul
// timu_ul[++cur_timu_index].className= "";
timu_ul[++cur_timu_index].setAttribute("class","");
}if (cur_timu_index == timu_ul.length-1) {
document.getElementById('btn'+(cur_timu_index+1)).className="hide"
}
// class裏面的hide去掉就可以了
//
}
function go_re(){
var timu_ul = document.querySelectorAll('.timu_box ul');
// console.log(timu_ul)
if (cur_timu_index<timu_ul.length) {
// 隱藏之前的題目ul,
// 之前的 cur_timu_index
timu_ul[cur_timu_index].className= "hide";
// 顯示下一個ul
// timu_ul[++cur_timu_index].className= "";
timu_ul[--cur_timu_index].setAttribute("class","");
}if (cur_timu_index == timu_ul.length-1) {
document.getElementById('btn'+(cur_timu_index+1)).className="hide"
}
}
function doit(true_rsl,choise_rsl){
var ul=document.querySelector('ul');
ul.addEventListener('click',function(even){
if(even.target.tagName.toLowerCase() === 'li'){
//toLowerCase() 方法用於把字符串轉換爲小寫。
//判斷到底選擇的是不是正確答案
if (choise_rsl == true_rsl) {
alert(
"你點擊了"+even.target.outerText+'\n'+
'答對了'
)
}else{
alert(
"你點擊了"+even.target.outerText+'\n'+
'答錯了'
)
}
}
});
}
</script>
</body>
</html>
效果：
