He creado un juego de combinación de palabras. En este juego el programa genera un conjunto de palabras, "claves" y un conjunto de "descripciones". El objetivo de este programa es crear un conjunto de "claves" que puedan coincidir con un conjunto de "descripciones". Por ejemplo, el elemento con id el1 debe emparejarse con el elemento con id dl1 .
Creé el html para la interfaz de usuario y el javascript para representar el html. Hay un botón que muestra la respuesta del juego. Cuando se hace clic en el botón, se show_answer() .
// initialize the answer. var answer = ''; function show_answer() { // retrieve the keys and descriptions. Then load them into their respective arrays. const e_inputs = document.querySelectorAll("[id^='el']"); const d_inputs = document.querySelectorAll("[id^='dl']"); let elArray = []; let dlArray = []; const title = document.getElementById('title_input').value; for (let i = numberOfInputs; i < elArray.length; i++) { text += `${elArray[i]}:${dlArray[i]}\n`; answer += elArray[i]; answer += ':'; answer += dlArray[i]; answer += '\n'; } jAlert(answer, 'Correct Match'); }function show_answer() { // retrieve the keys and descriptions. Then load them into their respective arrays. const e_inputs = document.querySelectorAll("[id^='el']"); const d_inputs = document.querySelectorAll("[id^='dl']"); let elArray = []; let dlArray = []; const title = document.getElementById('title_input').value; e_inputs.forEach( i => { if(i.value) elArray.push(i.value) }); d_inputs.forEach( i => { if(i.value) dlArray.push(i.value) }); //reset the answer once the generate_html() is called. answer = ''; for (let i = 0; i < elArray.length; i++) { answer += `${elArray[i]}`; answer += ':'; answer += `${dlArray[i]}`; answer += '\n'; } jAlert(answer, 'Correct Match'); }