Creating a Quiz with jQuery [closed]

前端未结

关注

 3  736

生来不讨喜

相关标签:

3条回答

猫巷女王i

2020-12-24 11:38

This is kind of what @gov was talking about but basically I would just capture the submit of the form:

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

Then have a function to handle the submission:

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
}

0 讨论(0)

深忆病人

2020-12-24 11:44

        $(document).ready(function(){
    
            var items = [
              ['male'],
              ['bus','bike'],
              ['painting','cricket'],
              ['hocky'],
              ['female'],
              ['bus','bike','car'],
              ['painting','sketches','pool'],
              ['cricket']
            ];
            var totalQuestion = items.length;
            var correctAns = -1;
            var i = 0;
            var j = 0;
            $('.checkBtn').on('click',function(){
    
                $('.block').each(function(){
                    
                    $(this).children('input').each(function(){
                        
                        if($(this).is(':checked'))
                            {
                                if(items[i][j] == $(this).val()){
                                        $(this).parent().removeClass('incorrect');
                                        $(this).parent().addClass('correct');
                                
                                            if(j < items[i].length - 1){
                                                j++;
                                            } 
                                    }else{
                                        $(this).parent().removeClass('correct');
                                        $(this).parent().addClass('incorrect');
                                        return false;                        
                                    }
                            }else{
                                if(items[i][j] == $(this).val()){
                                    $(this).parent().removeClass('correct');
                                    $(this).parent().addClass('incorrect');
                                }
                            }
                    });
                     i++;
                     j=0;
                
                });
    
                $('.answer').html($('.correct').length + " / " + totalQuestion);
            });
        });

        .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>

0 讨论(0)

一个人的身影

2020-12-24 11:58

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

0 讨论(0)

热议问题