Question

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

Answer 1

    $(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>

Answer 2

点击此链接创建Jquery quiz using Google Docs。自动计算分数，立即将结果显示给用户。也有点动画。

Answer 3

这就是@gov所说的，但基本上我只是抓住表格的提交：

<form id="myform" onsubmit="return mySubmitHandler()">

然后有一个处理提交的功能：

function mySubmitHandler()
{
    // the following are just examples of what you could do
    var q1val = jQuery('#q1').val();
    var q2val = jQuery('#q2').val();
    if(q1val + q2val > 5)
        jQuery('#success').show();
    else
        jQuery('#fail').show();
    // end example
    return false; // this keeps the form from doing a postback
}

Answer 4

        .block{
            padding:10px 15px;
            margin-bottom:15px;
            border:2px solid #dadada;
            border-radius:5px;
        }
        .correct{
        border:2px solid green;    
        }
        .incorrect{
        border:2px solid red;    
        }
        input{
            padding:10px;
            border:1px solid #dadada;
        }
        span{
            padding:2px 10px;
            display:inline-block;
        }

    
    <!DOCTYPE html>
    <html>
    <title>HTML Tutorial</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" ></script>
    
    
    <body>
    
    <div class="container">
        <br/>
    <h4 class="answer"></h4>    
    <div id="que1" class="block">
      <h2>Gender?</h2>
      <input type="radio" name="gender" value="male"><span>male</span> <br>
      <input type="radio" name="gender" value="female"><span>female</span> 
    </div>
    
    <div id="que2" class="block">
      <h2>Vehicle?</h2>
      <input type="checkbox"  value="bus"><span>bus</span> <br>
      <input type="checkbox"  value="bike"><span>bike</span> <br>
      <input type="checkbox"  value="car"><span>car</span>  
    </div>
    
    <div id="que3" class="block">
      <h2>Hobby?</h2>
      <input type="checkbox"  value="painting"><span>painting</span>  <br>
      <input type="checkbox"  value="sketches"><span>sketches</span>  <br>
      <input type="checkbox"  value="pool"><span>pool</span>  <br>
        <input type="checkbox"  value="cricket"><span>cricket</span>  
    </div>
    
    <div id="que5" class="block">
      <h2>National Game?</h2>
      <input type="radio" name="game" value="cricket"><span>cricket</span> <br>
      <input type="radio" name="game" value="hocky"><span>hocky</span> 
    </div>
    
    <div id="que6" class="block">
      <h2>Gender?</h2>
      <input type="radio" name="gender2" value="male"><span>male</span> <br>
      <input type="radio" name="gender2" value="female"><span>female</span> 
    </div>
    
    <div id="que7" class="block">
      <h2>Vehicle?</h2>
      <input type="checkbox"  value="bus"><span>bus</span> <br>
      <input type="checkbox"  value="bike"><span>bike</span> <br>
      <input type="checkbox"  value="car"><span>car</span>  
    </div>
    
    <div id="que8" class="block">
      <h2>Hobby?</h2>
      <input type="checkbox"  value="painting"><span>painting</span>  <br>
      <input type="checkbox"  value="sketches"><span>sketches</span>  <br>
      <input type="checkbox"  value="pool"><span>pool</span>  
    </div>
    
    <div id="que9" class="block">
      <h2>National Game?</h2>
      <input type="radio" name="game2" value="cricket"><span>cricket</span> <br>
      <input type="radio" name="game2" value="hocky"><span>hocky</span> 
    </div>
    
    
    <br/>
    <a href="javascript:void(0)" class="checkBtn btn btn-primary">Submit</a>
    
    </div>
    </body>
    
    </html>

unstack

使用jQuery创建测验

4 个答案: