QCM 4 images multiples

Messages postés
3
Date d'inscription
jeudi 8 août 2019
Statut
Membre
Dernière intervention
12 août 2019
- - Dernière réponse :  hebus - 13 août 2019 à 02:57
Bonjour, le but de mon projet est de faire un Quiz avec à chaque fois 4 réponses possibles. Un son est lancé et 4 choix son proposés à l'utilisateur. pour l'instant mon quiz ressemble à (voir photo 1)

et j'aimerai remplacer ces cases avec des mots, par des photos (voir photo 2). le but de ce sujet est de vous demander si vous avez une idée de comment changer les 4 images proposé à chaque fois que je passe à la question suivante. (j'ai 6 questions). Merci !

Voici mon bout de code contenant les réponses mot (photo 1):

function questions(numero)
{
		
	switch(numero)
	{
		//Rossignol philomèle
		case 1:
			chaine="*.*.*.*.*2";
				playSound("chant/Nachtigall.mp3");
			break;
			

		//Mésange charbonnière
		case 2:
			chaine="*peruche*coco*merle*chat*3";
				playSound("chant/Kohlmeise.mp3");
			break;
		

		//Coucou gris
		case 3:
			chaine="*Moineau*coco*merle*chat*1";
				playSound("chant/Kuckuck.mp3");
			break;
			
		//Merle noir
		case 4:
			chaine="*.*.*.*.*3";
				playSound("chant/Amsel.mp3");
			break;
			
		//Pinson des arbres
		case 5:
			chaine="*.*.*.*.*3";
				playSound("chant/Buchfink.mp3");
			break;
			
		//Pic épeiche
		case 6:
			chaine="*.*.*.*.*3";
				playSound("chant/Buntspecht.mp3");
			break;
		
	}
	
	return chaine;
}


photo 1



photo 2





Configuration: Windows / Chrome 75.0.3770.142
Afficher la suite 

2 réponses

0
Merci
Salut,
euh quel est le problème? Il s'agit de faire un input à choix multiple qui contient des images. Rien de bien sorcier en HTML...
https://www.w3schools.com/tags/att_input_type_radio.asp
stuprematie
Messages postés
3
Date d'inscription
jeudi 8 août 2019
Statut
Membre
Dernière intervention
12 août 2019
-
la photo numéro 2 est une maquette photoshop. enfaîte j'aimerai que quand je clic sur valider la réponse, les 4 images changes pour passer à la question suivante
Commenter la réponse de hebus
Messages postés
3
Date d'inscription
jeudi 8 août 2019
Statut
Membre
Dernière intervention
12 août 2019
0
Merci
Serait-ce possible de travailler dans mon switch - case -break, avec l'adresses des images directement plutôt qu'avec des mots ? sachant que dans mon JS, une variable split mes 4 réponses en prenant le '*' comme repère, merci.
case 2:
			chaine="*peruche*coco*merle*chat*3";
				playSound("chant/Kohlmeise.mp3");
			break;
euh tout est possible... ça veut pas dire que c'est adapté ou optimisé. En l'état un switch ne l'est pas.

"Il s'agit de faire un input à choix multiple qui contient des images. Rien de bien sorcier en HTML... "

2 solutions pour préciser:

_ la plus simple (et donc la meilleure)vous faites une nouvelle page pour chaque question
_vous effacez le contenu existant et ajouter un nouveau contenu(ça peut se faire avec document.removeElement(... et document.createElement( et beaucoup de patience si ce n'st du temps inutile.


Je confirme qu'un switch est pas vraiment idéal: ça alourdit et complique le code, c'est redondant et casse pieds aussi bien à mettre en place que devoir modifié. Pourquoi ne pas utiliser une fonction ayant en paramètres les valeurs à utiliser? ça permet d'automatiser et de pas traîner des tonnes de code inutile puisque une seule question est posée à la fois, pett exemple ad hoc :

function faireQuestion(choix,reponse,son){
//-- remplir ici

}
//-- et en application ça donne:
fairequestion([peruche,coco,merle,chat],3,chant/Kohlmeise.mp3);

/* VOIRE ENCORE PLUS SIMPLE AVEC UN OBJET*/


let question1{
choix:[peruche,coco,merle,chat],
reponse:merle,
son:chant/Kohlmeise.mp3,
afficher:function(cible){
 let formulaire=document.createElement('form');
let choix1=document.createElement('radio');
choix1.value=this.choix[0];
formulaire.appendChild(choix1);
//-- bien sûr à compléter selon les besoins, on peut même utiliser une boucle
 cible.appendChild(formulaire);
return choix.length;
 }
}


Commenter la réponse de stuprematie