QCM 4 images multiples

Fermé

stuprematie Messages postés 3 Date d'inscription jeudi 8 août 2019 Statut Membre Dernière intervention 12 août 2019 - 8 août 2019 à 10:53
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

A voir également:

2 réponses

Réponse 1 / 2

hebus
11 août 2019 à 15:21

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
12 août 2019 à 13:15

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

Réponse 2 / 2

stuprematie Messages postés 3 Date d'inscription jeudi 8 août 2019 Statut Membre Dernière intervention 12 août 2019
12 août 2019 à 14:14

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;

hebus
13 août 2019 à 02:57

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;
 }
}

QCM 4 images multiples

2 réponses

Discussions similaires

Newsletters