0

Estoy intentando hacer un trivial sencillo en el que se hay un array bidimensional con sus preguntas y sus respectivas respuestas. Creo la pregunta, un texto para introducir la respuesta y luego un botón de aceptar, al lado de cada pregunta.

El problema lo tengo al pulsar el botón, no se cómo hacerlo para implementarlo y que me reconozca el id de la pregunta y el id de la respuesta, para que al pulsar el botón salga la información de si se ha contestado bien o no... ¿Cómo lo haríais?

El código y la estructura que tengo actualmente es el siguiente:

var preguntas = [['¿Cuál es la capital de Austria?', 'Viena'], //0,1
                                    ['¿Cuál es la capital de Noruega?', 'Oslo'], // 1,1
                                    ['¿Qué lengua se habla en Madagascar?', 'Malgache'], //2,1
                                    ['¿Cómo se llaman los habitantes de Panamá?','Panameños'] //3,1
                            ];
              
//Mostrar en el navegador las preguntas junto con un cuadro de texto para introducir las respuestas
let body = document.getElementsByTagName("body")[0];

let h1 = document.createElement("h1");
h1.innerHTML = "Responde a las preguntas."
body.appendChild(h1);
for (let i = 0; i<preguntas.length;i++){
    let p = document.createElement("p");
  p.id = `idPregunta${i}`; //Crear id para la pregunta
  let inputRespuesta = document.createElement("input"); //Cuadro de texto para poner la respuesta
  inputRespuesta.type = "text";
  inputRespuesta.id = `idRespuesta${i}`; //Crear id para la respuesta
  let validarRespuesta = document.createElement("input"); //Validar respuesta
  validarRespuesta.type = "button";
  validarRespuesta.value = "Aceptar";
  validarRespuesta.style.marginLeft = "10px";
  validarRespuesta.onclick = comprobarRespuesta ; //¿?¿?¿?¿?
  
 p.innerHTML = preguntas[i][0] + "    ";
  body.appendChild(p);
  p.appendChild(inputRespuesta);
  p.appendChild(validarRespuesta);
  
}

function comprobarRespuesta(idPregunta,respuesta){
    //PROBLEMA AQUI.
}

Muchas gracias de antemano.

0

1 respuesta 1

0

Vas bien encaminado, solo haria unos leves retoques al generar el HTML.

Al input de respuesta le coloco un data-attribute para que no haya inputs duplicados.

Luego coloco unn listener para captar los clicks, si el click no pertenece a un boton lo ignoro y si pertenece tomo el valor de su id el cual envio a la funcion de validar.

La funcion de validar selecciona unn elemento del DOM que tenga un atributo respuesta con el numero del id que viene como parametro y despues valido que en la matriz de preguntas se corresponda con lo que trae el input con la respuesta en su value.

var preguntas = [['¿Cuál es la capital de Austria?', 'Viena'], //0,1
                                    ['¿Cuál es la capital de Noruega?', 'Oslo'], // 1,1
                                    ['¿Qué lengua se habla en Madagascar?', 'Malgache'], //2,1
                                    ['¿Cómo se llaman los habitantes de Panamá?','Panameños'] //3,1
                            ];
              
//Mostrar en el navegador las preguntas junto con un cuadro de texto para introducir las respuestas
let body = document.getElementsByTagName("body")[0];

let h1 = document.createElement("h1");
h1.innerHTML = "Responde a las preguntas."
body.appendChild(h1);
for (let i = 0; i<preguntas.length;i++){
    let p = document.createElement("p");
  p.id = `idPregunta${i}`; //Crear id para la pregunta
  let inputRespuesta = document.createElement("input"); //Cuadro de texto para poner la respuesta
  inputRespuesta.type = "text";
  inputRespuesta.setAttribute("respuesta", i); //Crear id para la respuesta
  let validarRespuesta = document.createElement("input"); //Validar respuesta
  validarRespuesta.type = "button";
  validarRespuesta.value = "Aceptar";
  validarRespuesta.style.marginLeft = "10px";
  validarRespuesta.id = i
  //validarRespuesta.onclick = comprobarRespuesta() ; //¿?¿?¿?¿?
  
 p.innerHTML = preguntas[i][0] + "    ";
  body.appendChild(p);
  p.appendChild(inputRespuesta);
  p.appendChild(validarRespuesta);
  
}

document.addEventListener('click',(e)=>{
 if(e.target.type != 'button') return;
 validarRespuesta(e.target.id);
})

function validarRespuesta(resID){
 let respuesta = document.querySelector('[respuesta=' + CSS.escape(resID) + "]").value;

 if(respuesta == preguntas[resID][1]) alert("MUY BIEN!!!")
 else alert("RESPUESTA INCORRECTA")
}

3
  • Muchas gracias Hernán!! Solucionado.
    – Brok3r
    el 13 may. 2022 a las 6:16
  • Hay una forma mas facil si siempre vas a tener el boton justo atras del input. Lo puedes seleccionar con previousElementSibling y te ahorras algo de codigo el 13 may. 2022 a las 9:35
  • 1
    @Brok3r si realmente quieres agradecérselo debes aceptar su respuesta, pues es así como funciona este sitio. Está bien ser agradecido, pero aquí se demuestra votando a favor de la respuesta y/o aceptándola, para que además la pregunta no quede eternamente pendiente de respuesta y la comunidad vea y encuentre la respuesta que solucionó tu problema. Pulsa en este enlace para aprender a aceptar respuestas y entender mejor el porque es importante hacerlo, gracias.
    – masterguru
    el 18 may. 2022 a las 9:48

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.