前两天同学推荐玩玩校内的各种测试 进去一看 FLASH做的测试的界面不错 就用jQuery模拟了一下.写了两个版本的 一个是静态的 把调查问题写在页面里面的 一个是可以通过XML文件更新的
主要功能:
测试答题框
可作心理测试等测试题使用
问题和选项通过questions.xml设置
显示当前得分
显示当前答题进度
可作翻看选过的选项
通过不同的得分调取不同结果内容
DEMO 地址 静态版本
DEMO 地址 XML 版本
文件打包下载
下面是装载XML 版本的代码 完整的代码请 打包下载
$(document).ready(function(){
var ua = navigator.userAgent.toLowerCase(); //浏览器检测 本地测试时 FF会找不到路径 用下面的条件避免
var binfo =
{
ve : ua.match(/.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/)[1],
ie : /msie/.test(ua) && !/opera/.test(ua),
op : /opera/.test(ua),
sa : /version.*safari/.test(ua),
ch : /chrome/.test(ua),
ff : /gecko/.test(ua) && !/webkit/.test(ua)
};
var xmlurl="data/questions.xml";
if(binfo.ie) xmlurl="http://nba.titan24.com/focus/kikx/questions.xml"; //本地测试的时候IE 要用绝对地址才行
//if(binfo.ff) xmlurl="questions.xml";
var page="data/result.html"; //存放测试结果的文件
$.ajax({ //页面加载后去调取XML
type:"GET",
url:xmlurl,
dataType:'xml',
timeut:1500,
error:function(){alert("Error loading xml!")},
success:function(xml){ //调取成功后解析XML并执行相应操作
$("#loader").fadeOut(200);
var i=0;
var sld=0;
var res=0;
var prog=100; //$("#prog").css("width");
var ht=420;
var speed=500;
var len=$(xml).find("quesiton").length; //这是问题的总数
$(xml).find("quesiton").each(function(){ //解析XML 转意生成HTML
var h3="<h3>"+$(this).find("title").text()+"</h3>";
var li="";
$(this).find("opt").each(function(){
li+="<li><span> </span><label><input type='radio' value='"+$(this).attr("valume")+"'\/>"+$(this).text()+"</label></li>";
})
var ul="<ul>"+li+"</ul>";
$("<div class='cnt'></div>").html(h3+ul).appendTo($("#issue"));
})
function setporogress(j){ //每做完一个题目的翻转和进度提示函数
i+=j;
i=(i<0)? 0:i;
checkbtn();
if(!$("#info").is(":animated")){
$("#tips span").html((i+1>len?len:i+1)+"\/"+len+"题");
var wh=$("#tips").get(0).offsetWidth;
var ress=Math.round(i*prog/len);
$("#ress").css({"width": ress+"px"});
$("#tips").css({"left":ress-Math.round(wh/2)+"px"});
$("#issue").animate({"top": -i*ht + "px"},500);
}
}
function selec(ele){ //选中项目标识 计算和显示得分
sld++;
ele= $(ele)? $(ele):ele;
ele.parents("div.cnt").addClass("selected");
ele.addClass("sel");
res+=parseInt (ele.find("input").val());
if(sld<len){
$("#temp").html("您目前得分是 "+res);
}else if(sld==len){
$("#temp").html("您最终得分是 "+res);
}
}
$("#prev").click(function(){ //翻看题目 可以翻看回答过的 但是不能翻看没有回答的
checkbtn();
if(i>0) {
setporogress(-1)
}
})
$("#next").click(function(){
checkbtn();
if(sld>i) {
setporogress(1)
}
})
$("#issue").find("li").click(function(){ // 备选答案项目点击后 判断是否执行选中操作
if(!$(this).parents("div.cnt").hasClass("selected")){
selec(this);
}
setporogress(1);
if(i==len){ //全部题目回答完毕 计算回答的结果
result(res);
}
return false;
})
function result(k){ //计算结果 也就是根据得分计算应该调取哪部分内容
var toload;
var sult=$("<div class='result' id='result'></div>");
if(k>=12 && k<=18) toload=page+" #re0";
if(k>18 && k<=24) toload=page+" #re1";
if(k>24 && k<=48) toload=page+" #re2";
sult.load(toload).appendTo($("#issue"));
}
function checkbtn(){ //检测前翻和后翻的可用性 并更新状态
if(i<=0){
$("#prev").addClass("noprev");
}else{
$("#prev").removeClass("noprev");
}
if(sld<=i){
$("#next").addClass("nonext");
}else{
$("#next").removeClass("nonext");
}
}
setporogress(i); //初始化问题框
}
})
})
已有
