使用jQuery创建测验 [英] Creating a Quiz with jQuery

查看:61
本文介绍了使用jQuery创建测验的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

有没有人有一个使用jQuery进行测验的例子,没有服务器端处理结果?回答完问题后,结果立即出现。 :)

Does anyone have an example of a quiz made with jQuery, without server-side processing of the results? After answering the questions, the result appears instantly. :)

推荐答案

    $(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });
    
    $(document).ready(function(){
      var a = $(".question");
      a.each(function(index) {
        var flip = $(this).find(".flip");
        var panel = $(this).find(".panel");
        flip.click(function(){
          panel.slideDown("slow");
        });
      });
    });

 
    div.panel,div.flip
    {
      margin:0px;
      padding:5px;
      text-align:center;
      background:#e5eecc;
      border:solid 1px #c3c3c3;
      width:140px;
    }
    
    div.panel
    {
      display:none;
    }
    div.question
    {
      float:left;
    }
    div.questions
    {
      height: 80px;
    }

Here's an example makes it reasonably easy to add more questions once the initial javascript is in:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    
    
    <title>Javascript sample</title>
    </head>
    
    <body>
    
    <p>1) How many bits are in a byte?</p>
    <div class="questions">
    
    <div class="question">
     <div class="panel">Wrong</div>
     <div class="flip">7</div>
    </div>
    
    <div class="question">
     <div class="panel">Right</div>
     <div class="flip">8</div>
    </div>
    
    </div>
    
    </body>
    </html> 

这篇关于使用jQuery创建测验的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆