Réaliser un quiz question par question

**valentin45000** · 14/06/2011, 11h27

Bonjour,

Voilà comme dit dans le titre j'aimerais réaliser un quiz question par question (c'est à dire afficher les question une par une).

En fait pour comparaison j'aimerais un peu reproduire se qui se fait souvent sur des test du code de la route (qui sont en flash) mais en javascript.

Donc avec un contenu HTML (qui sera du texte et une image, ou vidéo) pour la question et les réponse possible noté en A-B-C et en dessous les boutons à cocher (checkbox) correspondant à A-B-C puis un bouton validé qui va afficher la réponse, puis si on reclique dessus passe à la question suivante. Et enfin un petit timer de 20 ou 30 secondes pour chaque question.

-----------------------------

J'ai essayé de me tourner vers jQuery et j'ai trouvé jQuizMe mais il ne remplis pas tous se que je souhaite.
Je pense donc qu'il faut développé un truc de toute pièce pour cela mais je suis un peu (beaucoup).

Après je dois envoyé les données par l'Ajax mais ça je sais faire, mais pour se que j'ai cité au dessus par du tout, j'en est déjà réaliser beaucoup en PHP, mais jamais en javascript.

Une idée ?
D'avance merci

Valentin.

**RomainVALERI** · 14/06/2011, 14h00

Envoyé par valentin45000

Une idée ?

Une idée de quoi ?

Tu as l'air de savoir ce qu'il te reste à faire d'une manière générale... Alors quel est le problème en fait ?

(un point de la conception difficile à appréhender ? un problème technique spécifique ? un devoir à rendre en urgence ?

)

**Pymento** · 14/06/2011, 15h07

Salut, tout dépend de si tu veux faire un boulot propre ou pas

Du genre passer par du xml ect..

Moi comme ça en vitesse , j'aurai fais

code approximatif)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
var questions = new Array();
questions[0] = new Array();
questions[0][0] = 'titre';
questions[0][1] = 'question';
questions[0][2] = new Array('A','B','C','D');
questions[0][3] = 'url_photo';
questions[0][4] = 'reponse_exacte';
[...]

Ensuite tu à juste à te servir de ton tableau questions avec un curseur correctement modifié.

Si non pour quelque chose de plus propre, un fichier xml que tu vas consulter en ajax, au moins tu peux rajouter sans soucis une question etc...

**valentin45000** · 14/06/2011, 16h00

Tout d'abord merci de ses réponses rapides.

En réalité (et se qui peut paraitre ... bizarre) j'arrive très bien à imaginer la fin du code le traitement l'envoie des données par PHP dans une BDD etc...
Mais je n'arrive pas du à faire le début, à chaque fois que j'entreprends quelque chose ça foire donc je commence autre chose etc...

J'avais effectivement imaginer un array (je sais que c'est pas bien mais il est rare que je travail proprement, le seul truc que j'organise c'est l'indentation

) et ensuite un while qui irait afficher un éléments (donc une questions) au hasard du tableau puis qui le supprime, affiche la suivant aussi tiré au hasard parmis celle qui reste et ainsi de suite jusqu'à se qui n'y est plus de question. Mais c'est le seul point que j'arrive à trouvé (et encore ça se trouve que je me complique la vie

).

En fait c'est quelque chose que je doit intégré dans un de mes projets, mais je ne fait que débuter dans le javascript, d'habitude je travail avec le PHP ou là je n'est aucun soucis, mais je ne sais pas pourquoi, malgré les similitude avec le PHP j'ai du mal à passer au javascript.

Je suis désolé (car je sais à quel ça peut pénible ayant fait du support un certain temps) mais je pense qu'il va falloir me donné pas mal de bout de code, mais contrairement à d'autre j'aimerais bien des explications qui vont avec, bon bute n'est pas que d'arriver au résultat que je souhaite mais aussi de comprendre ... sinon je vois pas vraiment à quoi ça sert ...

Edit : SI ça peut aider je parler de quelque chose comme cela Demo.
Bon but serait d'arriver à quelque chose comme cela (fait en javascript) sans le son qui utile que si c'est un test comme là sur le code de la route.

**RomainVALERI** · 14/06/2011, 16h27

Envoyé par valentin45000

En fait c'est quelque chose que je doit intégré dans un de mes projets, mais je ne fait que débuter dans le javascript, d'habitude je travail avec le PHP ou là je n'est aucun soucis, mais je ne sais pas pourquoi, malgré les similitude avec le PHP j'ai du mal à passer au javascript.

Pour le moment, le problème n'est ni en JS ni en PHP. Tu en es à la phase de conception, pas à l'implémentation... pourquoi parler de Array, while, etc?

Demande-toi déjà où seront stockées les données des questions/réponses, écris un HTML statique de la page, fais une liste des traitements JS souhaités, et quand tu auras un souci pour implémenter telle ou telle fonctionnalité côté JS, si tu ne trouves pas de réponse dans la FAQ, les forums (JS, AJAX, HTML, etc.) ou les tutoriels, là effectivement, viens poster ton problème ici ^^

Mais pour le moment je ne vois toujours pas ce qui te bloque...

mais je pense qu'il va falloir me donné pas mal de bout de code

*soupir*

**Pymento** · 14/06/2011, 16h30

T'as de la chance que je m'ennuie !
HTML:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
	<script type="text/javascript" src="script.js"></script>
 
</head>
 
<body>
	<div id="question"></div>
	<img src="" id="img"/>
	<div id="reponses"></div>
	<script>show_quizz(0)</script>
</body>
</html>

JS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
var current_index = 0 ;
 
var questionnaire = new Array();
 
 
//QUESTION 1
questionnaire[0] = new Array();
questionnaire[0][0] = "Question 1 ?";
questionnaire[0][1] = "images/monImage.png";
questionnaire[0][2] = new Array("Reponse 1","Reponse 2","Reponse 3","Reponse 4");
//on va conserver la bonne réponse, ou alors l'index de la bonne réponse.
questionnaire[0][3] = "Reponse 2";
 
 
//QUESTION 2
questionnaire[1] = new Array();
questionnaire[1][0] = "Question 2 ?";
questionnaire[1][1] = "images/monImage.png";
questionnaire[1][2] = new Array("Reponse 1","Reponse 2","Reponse 3","Reponse 4");
//on va conserver la bonne réponse, ou alors l'index de la bonne réponse.
questionnaire[1][3] = "Reponse 4";
 
 
//QUESTION 3
questionnaire[2] = new Array();
questionnaire[2][0] = "Question 3 ?";
questionnaire[2][1] = "images/monImage.png";
questionnaire[2][2] = new Array("Reponse 1","Reponse 2","Reponse 3","Reponse 4");
//on va conserver la bonne réponse, ou alors l'index de la bonne réponse.
questionnaire[2][3] = "Reponse 1";
 
function compare(a,b){
	if (a == b){
		alert("bonne réponse");
 
		if ( current_index+1 == questionnaire.length){
			alert("Questionnaire Finis, on revient au debut");
			show_quizz(0);
		}else{
			show_quizz((current_index+1));
		}
	}else{
		alert("mauvaise réponse");
	}
 
}
 
function show_quizz(index){
current_index = index;
document.getElementById("question").innerHTML = questionnaire[index][0];
document.getElementById("img").src = questionnaire[index][1];
reponses = document.getElementById("reponses");
reponses.innerHTML = "";
for (var i = 0; i < questionnaire[index][2].length ; i++){
	reponses.innerHTML += "<input type='button' value='"+questionnaire[index][2][i]+"' onclick=\"compare(\'"+questionnaire[index][2][i]+"\',\'"+questionnaire[index][3]+"\');\" />";
 
}
 
}

Bon pour l'indentation faut dire merci au site

**valentin45000** · 14/06/2011, 16h50

Merci beaucoup Pymento, d'autant plus que la réalisation de se code a été très rapide

Serait-il par contre possible de tiré les question au hasard ?

**Pymento** · 14/06/2011, 17h00

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function randomRange(minVal,maxVal)
{
  var randVal = minVal+(Math.random()*(maxVal-minVal));
  return typeof floatVal=='undefined'?Math.round(randVal):randVal.toFixed();
}
 
alert(randomRange(0,questionnaire.length));

Cette fonction va renvoyer un chiffre entre 0 et la taille de ton tableau de questions.

tu a juste à placer cette valeur dans les appels au show_quizz.

Par contre il faudrait que tu fasse un hasard avec tirage, càd, si tu tire la 2, il faut pas qu'il te la redemande après.

Tu dois mettre en place un array qui va conserver les index déjà tirer et refuser les nombres proposer par la fonction random

**valentin45000** · 14/06/2011, 17h07

Merci à toi avec tout ça je vais m'en sortir.
Merci du temps que tu m'as accordé

Bonne fin de journée à tous les deux

**valentin45000** · 14/06/2011, 18h19

Dernière chose comment on met un compte à rebours car j'ai essayer en fin de la fonction show_quizz de mettre :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
temp = 0;
jQuery(function(){ for (i=10 ;i > -1;i--){ setTimeout("jQuery('#affichage').text('"+i+"');",temp); temp+=1000; } });
jQuery(function(){ setTimeout("stop_compte_t();",temp - 1000); });

La fonction stop_compte_t contient :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
function stop_compte_t(){
	setTimeout("",temp - 1000);
	alert('Vous avez mis trop de temps !');
	if ( current_index+1 == questionnaire.length){
		alert("Questionnaire Finis, on revient au debut =>" + score);
		show_quizz(0);
	}else{
		show_quizz((current_index+1));
	}
};

Ça marche quand le temps est dépassé mais pas quand l'utilisateur clique sur un bouton (pour la question suivante le compteur se met à décompter n'importe comment) ...

**RomainVALERI** · 14/06/2011, 19h11

Envoyé par valentin45000

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

setTimeout("",temp - 1000);

?
Quel était le but recherché ici ? annuler le setTimeout précédent ?

**valentin45000** · 14/06/2011, 19h33

Oui c'était le but recherché

**vermine** · 14/06/2011, 19h37

Bonsoir,

Ha ben pour ça il existe la méthode clearTimeout.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var mon_timer = setTimeout(...);
clearTimeout(mon_timer);

**valentin45000** · 14/06/2011, 20h44

Chez moi ça ne marche pas, ou alors je place mal le code d'arrêt ...

**valentin45000** · 14/06/2011, 21h01

Mais le problème n'est pas là, ça marche mais uniquement lorsqu'on laisse le temps s'écouler si on choisie une réponse la prochaine question va reprendre le temps de la question précédente, c'est donc un temps global et non par question.

**Pymento** · 15/06/2011, 09h00

Sans passer par jquery sinon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
function temp_ecoule(){
alert('Temps ecoulé, question suivante');
show_quizz(current_index+1);
}
function show_quizz(index){
var t=setTimeout("temp_ecoule()",10000);
[...]

Toute les 10secondes il va changer de question.

**RomainVALERI** · 15/06/2011, 09h29

Envoyé par Pymento

Sans passer par jquery sinon :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function temp_ecoule(){
alert('Temps ecoulé, question suivante');
show_quizz(current_index+1);
}
function show_quizz(index){
var t=setTimeout("temp_ecoule()",10000);
[...]

Toute les 10secondes il va changer de question.

Juste en passant : il est préférable d'éviter de passer une chaine à setTimeout / setInterval car ça revient à faire un eval

donc c'est mal (pourquoi donc ? quelques pistes dans ce thread ^^).

Utilise plutot une référence de fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
function temp_ecoule(){
alert('Temps ecoulé, question suivante');
show_quizz(current_index+1);
}
function show_quizz(index){
var t=setTimeout(function(){temp_ecoule();}, 10000);
[...]

**valentin45000** · 15/06/2011, 10h22

Tiens ! Je savais pas pour le coup de la chaine de caractères dans setTimeout ...

En fait avec se code je retrouve le même problème qu'avant.
SI on laisse le temps s'écouler il affiche le message et passe à la question suivante.
Mais si on clique sur un bouton à part exemple 6secondes de la fin il passe à la question suivante avec comme temps 4secondes, se qu'il reste de l'ancienne question.

**Pymento** · 15/06/2011, 10h39

Ha oui exact..
normalement ça, ça devrait fonctionner :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
var timer = setTimeout(function(){temp_ecoule();},100000)
 
function show_quizz(index){
	//clearTimeout(timer);
	timer=setTimeout(function(){temp_ecoule();},5000);
	current_index = index;

un timer global. Le clear n'est même pas necessaire vu qu'on l'écrase, mais à garder au cas ou il y ai d'autres états.

Et la première instanciation peut se faire avec un timer vide j'imagine. Je fais ça au plus pressé ^^

**Bovino** · 15/06/2011, 10h54

Envoyé par RomainVALERI

Utilise plutot une référence de fonction :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var t=setTimeout(function(){temp_ecoule();}, 10000);

Tu as raison, mais dans ton exemple, on peut faire plus simplement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var t=setTimeout(temp_ecoule, 10000);

la fonction anonyme n'a d'utilité que s'il y a des paramètres à passer au callback

Réaliser un quiz question par question

JavaScript

Partager

Partager