答題APP

最新推荐文章于 2025-01-13 23:21:10 发布

傻瓜不可语

最新推荐文章于 2025-01-13 23:21:10 发布

阅读量154

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42245220/article/details/95648503

HTML代碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=375,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>

		<div class="page startGame active">
			<button class="startBtn">开始答题</button>
		</div>

		<div class="page gaming">
			<h1 class="timu"></h1>
			<div class="options">
				
			</div>
		</div>

		<div class="page endGame">
			<h1>恭喜您获取：<span class="score">100</span>分</h1>
			<button class="reStart">重新答题</button>
		</div>
		
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	
	</body>
</html>

CSS代碼

var tikuList = [];
var currentTimu = {};
var score = 0;
var isChoose = false;
var num = 10

//ajax获取题目内容
$.get("dati.json",function(res){
	console.log(res)
	tikuList = res
})


//点击开始答题按钮切换页面
$('.startBtn').click(function(e){
	$('.gaming').addClass("active")
	$('.startGame').removeClass('active')
	randomRender()
})


function randomRender(){
	var randomIndex = parseInt(Math.random()*tikuList.length);
	currentTimu =  tikuList.splice(randomIndex,1)[0];
	console.log(currentTimu);
	$('.timu').html(currentTimu.quiz)
	$(".options").html("");
	currentTimu.options.forEach(function(item,index){
		$(".options").append(`<div data-index="${index}">${index+1}. ${item}</div>`)
	})
	
}


$('.options').click(function(e){
	if(!isChoose){
		console.log(e)
		//获取索引值
		var index = parseInt(e.target.dataset.index) ;
		console.log(index+1)
		if(currentTimu.answer==(index+1)){
			score += 10;
			$('[data-index='+index+']').addClass("correct")
		}else{
			var correctIndex = currentTimu.answer -1;
			$('[data-index='+correctIndex+']').addClass("correct")
			$('[data-index='+index+']').addClass("error")
		}
		
		isChoose = true;
		
		num -- ;
		
		
		setTimeout(function(){
			if(num==0){
				$(".endGame").addClass("active")
				$('.score').html(score)
			}else{
				isChoose = false;
				randomRender()
			}

		},2000)
	}
	
	
	
})


//重新刷新页面即可重新答题
$('.reStart').click(function(){
	location.reload()
})

JavaScript代碼

*{
	margin: 0;
	padding: 0;
	/*设置不会因为内边距和 边框撑开宽度和高度*/
	box-sizing: border-box;
}

html,body{
	overflow: hidden;
	width: 100%;
	height: 100%;
	background: deepskyblue;
}
.page{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background: deepskyblue;
	transform: translateX(375px);
	transition: all 1s;
}

.active{
	 transform: translateX(0px) !important;
 }
.startGame{
	display: flex;
	justify-content: center;
	align-items: center;
}

.startBtn{
	width: 200px;
	height: 60px;
	line-height: 60px;
	font-size: 30px;
	border: none;
	background: purple;
	color: #fff;
	/*阴影不进行偏移*/
	box-shadow:0 0 30px purple;
	border-radius: 10px;
	
}


.gaming{
	background: deeppink;
}


.gaming{
	padding:40px  20px;
	
}
.gaming h1{
	margin: 20px 0;
	font-size: 24px;
	 color: #fff;
}
.gaming .options>div{
	margin: 10px 0;
	padding: 5px 10px;
	color:  #fff;
	border-radius: 5px;
}

.correct{
	background-color: darksalmon;
}
.error{
	background: red;
}


.endGame{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.endGame h1{
	margin: 40px;
}

.reStart{
	width: 200px;
	height: 60px;
	line-height: 60px;
	font-size: 30px;
	border: none;
	background: purple;
	color: #fff;
	/*阴影不进行偏移*/
	box-shadow:0 0 30px purple;
	border-radius: 10px;
}

json數據簡要

[{
	"__v" : 0,
	"_id" : "ObjectId(5a5ecf926fa5c97ef40d9d1b)",
	"answer" : 4,
	"contributor" : "似鲸向海",
	"curTime" : "1516162961",
	"endTime" : "1516162976",
	"meta" : {
		"updatedAt" : "2018-01-17T12:22:42.014+08:00)",
		"createdAt" : "2018-01-17T12:22:42.014+08:00)"
	},
	"options" : [
		"貂蝉",
		"杨玉环",
		"王昭君",
		"赵飞燕"
	],
	"quiz" : "下列选项中哪个不属于古代四大美女？",
	"school" : "文科",
	"type" : "语文"
},
{
	"__v" : 0,
	"_id" : "ObjectId(5a5ecf926fa5c97ef40d9d1c)",
	"answer" : 4,
	"contributor" : "Mr^左",
	"curTime" : "1516162962",
	"endTime" : "1516162977",
	"meta" : {
		"updatedAt" : "2018-01-17T12:22:42.701+08:00)",
		"createdAt" : "2018-01-17T12:22:42.701+08:00)"
	},
	"options" : [
		"钠",
		"铝",
		"铜",
		"铁"
	],
	"quiz" : "Fe是什么元素的化学式？",
	"school" : "理科",
	"type" : "理化"
},
{
	"__v" : 0,
	"_id" : "ObjectId(5a5ecf936fa5c97ef40d9d1d)",
	"answer" : 2,
	"contributor" : "?swaggy?",
	"curTime" : "1516162963",
	"endTime" : "1516162978",
	"meta" : {
		"updatedAt" : "2018-01-17T12:22:43.484+08:00)",
		"createdAt" : "2018-01-17T12:22:43.484+08:00)"
	},
	"options" : [
		"成都",
		"重庆",
		"武汉",
		"南京"
	],
	"quiz" : "日军侵华期间国民政府曾经定以下哪个城市为陪都？",
	"school" : "文科",
	"type" : "历史"
}]