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

<!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>
更多相关文章

随机推荐
