一则考试测试题实时答题进度js特效代码

稿源：互联网 2022-04-02 21:38:20 点击： 6864 撤稿纠错

测试题效果，根据考题及答题数量实时显示进度条，非常实用的一款特效代码。

以下讨论的是和测试题考试相关的一则考试测试题实时答题进度js特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title></title>
  <style type="text/css">

</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
  var result={
   "aa":"你是一个小气人",
    "ab":"你是一个胆小人",
    "ac":"你是一个勇敢人",
    "ba":"你是一个软弱人",
    "bb":"你是一个怕死人",
    "bc":"你是一个爱美人",
    "ca":"你是一个自私人",
    "cb":"你是一个勤劳人",
    "cc":"你是一个花心人"
  };
  $(function(){
  var oP1=$("#Problem1"),
      oP2=$("#Problem2"),
      oR=$("#Result"),
      p=oR.find("p"),
      oPro=$(".picbg").find("span"), 
      oBtn1=oP1.find(".but"),
      oBtn2=oP2.find(".but"),
      oBtn3=oR.find(".but"),
      data=[];
  //
  oP1.find("input[type='radio']").change(function(){
    var choose=oP1.find("input[type='radio']:checked").length;
   if(choose){
    oPro.animate({"width":"50%"},400);
   }
   data.push($(this).val());
   return data;
  });
  //
  oBtn1.click(function(){
   var choose=oP1.find("input[type='radio']:checked").length;
    if(choose){
    oP2.fadeIn();
    oP1.hide();
   }else{
    alert("请填写第一题");
    return false;
   }
  });
  //
  oP2.find("input[type='radio']").change(function(){
    var choose2=oP2.find("input[type='radio']:checked").length;
   if(choose2){
    oPro.animate({"width":"100%"},400);
   }    
   data.push($(this).val());
   return data; 
  });
  //
  oBtn2.click(function(){
   var choose2=oP2.find("input[type='radio']:checked").length;
   if(choose2){
    oP2.hide();
    oR.fadeIn();
    var index=data[0]+data[1];
    p.html(result[index]);
   }else{
    alert("请填写第二题");
    return false;
   }
  });
  //
  oBtn3.click(function(){
    data=[];
   oP1.show();
   oP2.hide();
   oR.hide();
   oPro.animate({"width":"0%"},400);
   $("input[type='radio']").attr("checked",""); 
  });
 });
</script>
</head>
<body>
 <div class="checkbox">
<div class="progress">
<p><b>测试进度：</b>还剩下 <i>2</i> 个问题，选择答案按下一步转到下一题！</p>
<p><span><font face="Webdings">6</font>开始</span><span style="margin-left:50%;"><font face="Webdings">6</font>你在这里</span></p>
<p class="picbg"><span style="width:0%;"></span></p>
</div>


<div class="Test">
    <div id="Problem1" >
        <h3>1.问题:你最喜欢何种样式的内衣？</h3>
   <form action="" method="get">
   <ul>
       <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="a"/>A.西瓜乳</li>
       <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="b"/>B.柠檬乳</li>
    <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="c"/>C.柚子乳</li>
  </ul>
        <input type="button"  class="but"  value="下一步" />
  </form>
    </div>
    <div id="Problem2" class="hidden" >
        <h3>2.问题:你最不喜欢何种样式的内衣？</h3>
  <form action="" method="get">
    <ul>
       <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="a"/>A.西瓜乳</li>
       <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="b"/>B.柠檬乳</li>
    <li onmouseout="this.className='';" onmouseover="this.className='myBox';"><input name="select" type="radio" value="c"/>C.柚子乳</li>
  </ul>
        <input type="button" class="but"  value="查看结果" />
  </form>
</div>
    <div id="Result" class="hidden" >
       <h3>测试结果</h3>
    <p>
    </p>
    <input type="button"  class="but"  value="重新测试" onclick=""/>
    </div>
</div>
</div>
</body>
</html>

关于一则考试测试题实时答题进度js特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2011121777311.shtml方便下次再访问哦。

·上一篇： 一个儿童身高测试的js特效实例
·下一篇： 可上下左右切换的jquery动态导航插件

一则考试测试题实时答题进度js特效代码

文章分类LIST >>返回首页

最新游戏

最新新闻