Quelqu'un a-t-il un exemple de quiz réalisé avec jQuery, sans traitement des résultats côté serveur ? Après avoir répondu aux questions, le résultat apparaît instantanément :)
Réponses
Trop de publicités?
Paul Vincent Craven
Points
1063
$(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>
Kyle
Points
1274
C'est un peu ce dont @gov parlait, mais en fait, je voudrais juste capturer l'envoi du formulaire :
<form id="myform" onsubmit="return mySubmitHandler()">Disposez ensuite d'une fonction pour gérer la soumission :
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
}
Vaibhav Panchal
Points
1
$(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>
