Réaliser un quiz question par question [Résolu]

[valentin45000]

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]

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]

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 faiscode approximatif)

Code :

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]

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]

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]

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

Code :

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 :

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]

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]

Code :

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]

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]

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

Code JS :

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 :

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]

Envoyé par valentin45000

Code :

setTimeout("",temp - 1000);

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

[valentin45000]

Oui c'était le but recherché

[vermine]

Bonsoir,

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

Code :

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

[valentin45000]

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

[valentin45000]

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]

Sans passer par jquery sinon :

Code :

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]

Envoyé par Pymento

Sans passer par jquery sinon :

Code :

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 :

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]

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]

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

Code :

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]

Envoyé par RomainVALERI

Utilise plutot une référence de fonction :

Code :

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

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

Code :

var t=setTimeout(temp_ecoule, 10000);

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