How to learn js properly（week4）使用js建立的动态测试网页

最新推荐文章于 2024-04-24 15:12:54 发布

KeevaJ

最新推荐文章于 2024-04-24 15:12:54 发布

阅读量774

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/mm9mm8/article/details/17281889

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<style type="text/css">
body { padding:0; margin:0;  font-family:Georgia, "Times New Roman", Times, serif; background:#FFC;}
#wrapper { width:960px; margin:0 auto;}
#question {
	margin:20px 0; font-size:20px;}
#answers {font-size:16px; }
#result { display:none;}
</style>
</head>

<body>
<div id="wrapper">
<h1>HTML测试题
</h1>
<div id="test">
<p id="info">本测试共<span class="total">0</span>题，当前第<span class="num">0</span>题，每题20分。</p>
<p id="question">题目</p>
<p id="answers">选项</p>
<button type="button" id="prev" style="display:none;">上一题</button>
<button type="button" id="next">下一题</button>
</div>
<div id="result">
	<h2>你的测试成绩是<span id="score">0</span>分</h2>
    <button type="button" id="retry">再试一次</button>
</div>
</div>
</body>
<script>
$(document).ready(function() {
    var questions = [{question:"Html是指超文本连接标识语言。它主要告诉浏览器什么？",answers:["什么是网页","有哪些浏览资源","资源存放的位置","网址是什么"],correctAnswer:2},{question:"下列程序不能编辑Html文件的是？",answers:["记事本","写字板","word","计算器"],correctAnswer:2},{question:"网页文件的扩展名可以是？",answers:[".htm",".bat",".doc",".rar"],correctAnswer:0}];
	var totalQues = questions.length;
	var currQues = 0;
	var userAnswers = [];
	var score = 0;
	showQuestion(currQues,questions);
	$("#next").on("click",function(){
		switch(currQues) {
			case 0 :
				currQues = 1;
				$("#prev").show();
				showQuestion(currQues,questions);
				break;
			case (totalQues - 2) :
				currQues += 1;
				$("#next").text("查看测试结果");
				showQuestion(currQues,questions);
				break;
			case totalQues - 1 :
				showResult();
				break;
			default :
				currQues += 1;
				showQuestion(currQues,questions);			
		}
		

	});
	$("#prev").on("click",function(){
		switch(currQues) {
			case 1 :
				currQues = 0;
				$("#prev").hide();
				showQuestion(currQues,questions);
				break;
			case (totalQues - 1) :
				currQues -= 1;
				$("#next").text("下一题");
				showQuestion(currQues,questions);
				break;
			default :
				currQues -= 1;
				showQuestion(currQues,questions);				
		}
	});
	
$("#answers").on("click",":radio",function(){
		userAnswers[currQues] = $(this).val();
	});
	
	$("#retry").on("click",function(){
		window.location.reload();
	});

	function showQuestion(num,questions) {
		var total = questions.length;
		var atext = "";
		$("#info").find(".total").text(total);
		$("#info").find(".num").text(num + 1);
		$("#question").text(questions[num].question);
		if(userAnswers[num]) {
			for(var i=0;i<questions[num].answers.length;i++){
				if(userAnswers[num] == i) {
					atext += '<input name="answers" type="radio" checked="checked" value="'+ i +'">' + questions[num].answers[i];
				} else {
					atext += '<input name="answers" type="radio" value="'+ i +'">' + questions[num].answers[i];
				}
			}
		} else {
			for(var i=0;i<questions[num].answers.length;i++){
				atext += '<input name="answers" type="radio" value="'+ i +'">' + questions[num].answers[i];
			}
		}
		$("#answers").html(atext);
	}
	
	function showResult() {
		for(var i in questions) {
			if(userAnswers[i] == questions[i].correctAnswer) {
				score += 20;
			}
		}
		$("#score").text(score);
		$("#test").hide();
		$("#result").show();
	}
});
</script>
</html>