Ver originales (Francés)

QCM 4 imágenes múltiples

stuprematie Mensajes publicados 3 Estado Miembro -  
 hebus -
```html 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 ```

2 respuestas

Respuesta 1 / 2
hebus
 
Hola,
eh, ¿cuál es el problema? Se trata de hacer un input de opción múltiple que contenga imágenes. Nada del otro mundo en HTML...
https://www.w3schools.com/tags/att_input_type_radio.asp
0
stuprematie Mensajes publicados 3 Estado Miembro
 
La foto número 2 es un modelo de Photoshop. De hecho, me gustaría que cuando haga clic en validar la respuesta, las 4 imágenes cambien para pasar a la siguiente pregunta.
0
Respuesta 2 / 2
stuprematie Mensajes publicados 3 Estado Miembro
 
Sería posible trabajar en mi switch - case - break, con las direcciones de las imágenes directamente en lugar de con palabras? sabiendo que en mi JS, una variable separa mis 4 respuestas tomando el '*' como referencia, gracias. 
case 2: chaine="*periquito*coco*merlo*gato*3"; playSound("chant/Kohlmeise.mp3"); break;
0
hebus
 
euh, todo es posible... eso no significa que sea adecuado u optimizado. En el estado actual, un switch no lo es.

"Se trata de hacer una entrada de elección múltiple que contenga imágenes. Nada del otro mundo en HTML... "

2 soluciones para precisar:

_ la más simple (y por tanto la mejor) es hacer una nueva página para cada pregunta
_ eliminar el contenido existente y agregar un nuevo contenido (eso se puede hacer con document.removeElement(... y document.createElement( y mucha paciencia si no es tiempo perdido.


Confirmo que un switch no es realmente ideal: eso pesa y complica el código, es redundante y es molesto tanto para implementar como para modificar. ¿Por qué no usar una función que tenga como parámetros los valores a usar? eso permite automatizar y no arrastrar toneladas de código innecesario, ya que solo se hace una pregunta a la vez, pequeño ejemplo ad hoc: 

 function hacerPregunta(eleccion,respuesta,sonido){ //-- completar aquí } //-- y en la aplicación eso da: hacerPregunta([periquito,coco,mirlo,gato],3,canto/Kohlmeise.mp3); /* O AÚN MÁS SIMPLE CON UN OBJETO*/ let pregunta1={ eleccion:[periquito,coco,mirlo,gato], respuesta:mirlo, sonido:canto/Kohlmeise.mp3, mostrar:function(objetivo){ let formulario=document.createElement('form'); let eleccion1=document.createElement('radio'); eleccion1.value=this.eleccion[0]; formulario.appendChild(eleccion1); //-- por supuesto, hay que completar según las necesidades, incluso se puede usar un bucle objetivo.appendChild(formulario); return eleccion.length; } }
0