1 ------------------------------------------------------完整版----------------------------------------------------------------------------
$(document).ready(function () { 2 $(".dazhao").click(function(){ 3 $("#fade").hide(200); 4 $(".white_content").hide(200); 5 $("#anwser1").show(300); 6 var hol=$(this).attr("id"); 7 $.post("data.php", {"types":hol},function (data) { 8 var index = 0;//声明一个出题目数量的初始变量 9 $("#anwser1 #question").html("<p>" + (index + 1) + "." + data[index]["question"] + "</p>"); 10 $.each(data[index]["answers"], function (i, item) { 11 var xuanze1 = $("#anwser1 #chose .xuanze1").eq(i); 12 xuanze1.html(" " + xuanze1.attr("id") + "." + item); 13 }); 14 var result=0; //声明一个判断用户答案对错的初始变量 15 $(".xuanze1").click(function () { 16 if($(this).attr("id")==data[index]["correct"]){ 17 result=++result; 18 } 19 // alert(result); 20 index=index+1; 21 if(index<3){ 22 $("#anwser1 #question").html("<p>" + (index + 1) + "." + data[index]["question"] + "</p>"); 23 $.each(data[index]["answers"], function (i, item) { 24 var xuanze1 = $("#anwser1 #chose .xuanze1").eq(i); 25 xuanze1.html(" " + xuanze1.attr("id") + "." + item); 26 }); 27 //alert("正确答案为"+data[index]["correct"]+" 即将进入下一题"); 28 }else{ 29 $("#anwser1").hide(); 30 $("#fenxiang").show(); 31 $("body").css("background-image","url(images/bg_share.jpg)"); 32 //根据用户选择的测试类别进行判断输出 33 switch(hol){ 34 case'ad':hol='广告策划师'; 35 break; 36 case'web':hol='WEB前端工程师'; 37 break; 38 case'produce':hol='产品专员'; 39 break; 40 case'ui':hol='UI设计师'; 41 break; 42 case'php':hol='PHP工程师'; 43 break; 44 case'java':hol='Java工程师'; 45 break; 46 case'and':hol='Android工程师'; 47 break; 48 } 49 //根据答对题目的个数分配比例 50 switch(result){ 51 case 0:result='28%'; 52 break; 53 case 1:result='58%'; 54 break; 55 case 2:result='78%'; 56 break; 57 case 3:result='93%'; 58 break; 59 } 60 $("#fenxiang #p111").html(result); 61 $("#fenxiang #type111").html(hol); 62 } 63 }); 64 }, "JSON"); 65 }); 66 }); 67
1 <div id="anwser1" style="display:none"> 2 <div id="question"> 3 <p id="p1"></p> 4 5 </div> 6 <div id="chose"> 7 <div id="A" class="xuanze1"></div> 8 <div id="B" class="xuanze1"></div> 9 <div id="C" class="xuanze1"></div> 10 </div> 11 </div>
$(document).ready(function () { $(".dazhao").click(function(){ $("#fade").hide(200); $(".white_content").hide(200); $("#anwser1").show(300); var hol=$(this).attr("id"); $.post("data.php", {"types":hol},function (data) { var index = 0; $("#anwser1 #question").html("<p>" + (index + 1) + "." + data[index]["question"] + "</p>"); $.each(data[index]["answers"], function (i, item) { var xuanze1 = $("#anwser1 #chose .xuanze1").eq(i); //因为有3个xuanze1,eq(i)就是获取这个列表对象的第几个条目的对象了 xuanze1.html(" " + xuanze1.attr("id") + "." + item); }); $(".xuanze1").click(function () { // alert("正确答案为"+data[index]["correct"]+" 即将进入下一题"); index=index+1; if(index<3){ $("#anwser1 #question").html("<p>" + (index + 1) + "." + data[index]["question"] + "</p>"); $.each(data[index]["answers"], function (i, item) { var xuanze1 = $("#anwser1 #chose .xuanze1").eq(i); xuanze1.html(" " + xuanze1.attr("id") + "." + item); }); }else{ $("#anwser1").hide(); $("#fenxiang").show(); } }); }, "JSON"); }); });
1 <?php 2 include_once("conn.php"); 3 $types=$_POST['types']; 4 $sql="select distinct* from test01 where types='$types' order by rand() limit 0,3"; 5 $query = mysql_query($sql,$conn); 6 while($row=mysql_fetch_array($query)){ 7 $answers = explode('###',$row['answer']); 8 $arr[]= array( 9 'question' =>$row['question'], 10 'answers' => $answers, 11 'correct'=>$row['correct'], 12 ); 13 } 14 $json=json_encode($arr); 15 echo $json; 16 ?>
