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

来源：互联网发布：广西网络教育编辑：程序博客网时间：2024/04/30 04:18
<!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>
0 0