View original (French)

MCQ 4 images multiples

stuprematie Posted messages 3 Status Member -  
 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 sont proposés à l'utilisateur. Pour l'instant mon quiz ressemble à (voir photo 1)

et j'aimerais 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ées à 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

2 answers

Answer 1 / 2
hebus
 
Hi,
uh what's the problem? It's about creating a multiple choice input that contains images. Nothing too complicated in HTML...
https://www.w3schools.com/tags/att_input_type_radio.asp
0
stuprematie Posted messages 3 Status Member
 
The photo number 2 is a Photoshop mockup. Actually, I would like that when I click on "submit the answer," the 4 images change to move on to the next question.
0
Answer 2 / 2
stuprematie Posted messages 3 Status Member
 

case 2: chaine="*peruche*coco*merle*chat*3"; playSound("chant/Kohlmeise.mp3"); break;
0
hebus
 
euh everything is possible... that doesn’t mean it’s suitable or optimized. As it stands, a switch isn’t.

“It’s about making a multiple choice input that contains images. Nothing too complicated in HTML...”

2 solutions to clarify:

_ the simplest (and therefore the best) is to create a new page for each question
_ you erase the existing content and add new content (this can be done with document.removeElement(... and document.createElement( and a lot of patience if it’s not wasted time.


I confirm that a switch isn't really ideal: it makes the code heavier and more complicated, it’s redundant and a hassle both to set up and to modify. Why not use a function with the values to be used as parameters? It allows for automation and avoids dragging tons of unnecessary code since only one question is asked at a time, for example: 

 function faireQuestion(choix,reponse,son){ //-- fill in here } //-- and in application it gives: fairequestion([peruche,coco,merle,chat],3,chant/Kohlmeise.mp3); /* OR EVEN SIMPLER WITH AN OBJECT*/ 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); //-- of course to be completed according to needs, we can even use a loop cible.appendChild(formulaire); return choix.length; } }
0