I've created a word matching game. In this game the program generates a set of words, "keys" and a set of "descriptions". The goal of this program is create a set of "keys" that can be matched to a set of "descriptions". For example, element with id el1 should be paired with element with id dl1.
I've created the html for the user interface and the javascript for rendering the html. There is a button that shows the answer for the game. When the button is clicked show_answer() is called.
// 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');
}