QCM 4 images multiples
stuprematie
Messages postés
3
Date d'inscription
Statut
Membre
Dernière intervention
-
hebus -
hebus -
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):
photo 1

photo 2

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:
- Ce document contient 4 images. lesquelles perdent en qualité quand on les agrandit ?
- Comment reduire la taille d'un document - Guide
- Réduire qualité image - Guide
- Code gta 4 ps4 - Guide
- Signer un document word - Guide
- Excel si cellule contient partie texte ✓ - Forum Excel
2 réponses
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
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
Statut
Membre
Dernière intervention
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
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 :
"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; } }