HTML Samples

HTML for "Choose from list"

<!DOCTYPE html>

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

}

#question {

font-size: 18px;

margin-bottom: 20px;

}

.option {

display: inline-block;

width: 200px;

padding: 10px;

margin-right: 10px;

background-color: #D4E6F1;

cursor: pointer;

border-radius: 5px;

}

#replay-btn {

display: none;

margin-top: 20px;

padding: 10px 20px;

background-color: #D4E6F1;

border: none;

border-radius: 5px;

cursor: pointer;

}

.correct {

background-color: rgba(0, 128, 0, 0.7);

}

.incorrect {

background-color: rgba(255, 0, 0, 0.7);

}

#progress-bar-container {

margin-top: 30px;

width: 300px;

height: 20px;

border: 1px solid #ccc;

background-color: #F1F1F1;

border-radius: 5px;

}

#progress-bar {

width: 0;

height: 100%;

transition: width 0.5s ease;

}

.red {

background-color: #ff0000;

}

.yellow {

background-color: #ffff00;

}

.green {

background-color: #00ff00;

}

</style>

</head>

<body>

<h1>Adivina la palabra</h1>

</div>

<button id="replay-btn" onclick="restartGame()">Replay</button>

</div>

var words = {

"abuelo": "El padre de mi madre o de mi padre.",

"abuela": "La madre de mi madre o de mi padre.",

"padre": "El progenitor masculino.",

"madre": "La progenitora femenina.",

"hermano": "Un hombre o niño que tiene los mismos padres que yo.",

"hermana": "Una mujer o niña que tiene los mismos padres que yo.",

"hijo": "Un niño o descendiente masculino.",

"hija": "Una niña o descendiente femenina.",

"nieto": "El hijo de mi hijo o hija.",

"nieta": "La hija de mi hijo o hija.",

"tío": "El hermano de mi padre o madre.",

"tía": "La hermana de mi padre o madre.",

"primo": "El hijo de mi tío o tía.",

"prima": "La hija de mi tío o tía.",

"sobrino": "El hijo de mi hermano o hermana.",

"sobrina": "La hija de mi hermano o hermana.",

"esposo": "Mi marido o cónyuge masculino.",

"esposa": "Mi esposa o cónyuge femenina.",

"cuñado": "El hermano de mi esposo o esposa.",

"cuñada": "La hermana de mi esposo o esposa.",

"suegro": "El padre de mi esposo o esposa.",

"suegra": "La madre de mi esposo o esposa.",

"yerno": "El esposo de mi hija o hijo.",

"nuera": "La esposa de mi hijo o hija."

};

var options = document.getElementsByClassName("option");

var correctAnswer = "";

var score = 0;

var totalQuestions = 0;

function generateQuestion() {

var keys = Object.keys(words);

var randomIndex = Math.floor(Math.random() * keys.length);

var word = keys[randomIndex];

var definition = words[word];

document.getElementById("question").textContent = definition;

assignOptions(word);

}

function assignOptions(correctWord) {

var randomOption = Math.floor(Math.random() * options.length);

correctAnswer = correctWord;

options[randomOption].textContent = correctWord;

totalQuestions++;

var incorrectWords = getIncorrectWords(correctWord);

var incorrectOptions = Array.from(options).filter((_, index) => index !== randomOption);

for (var i = 0; i < incorrectOptions.length; i++) {

var incorrectWord = incorrectWords[i];

incorrectOptions[i].textContent = incorrectWord;

}

function getIncorrectWords(correctWord) {

var keys = Object.keys(words);

var incorrectWords = [];

while (incorrectWords.length < 2) {

var randomIndex = Math.floor(Math.random() * keys.length);

var randomWord = keys[randomIndex];

if (randomWord !== correctWord && !incorrectWords.includes(randomWord)) {

incorrectWords.push(randomWord);

}

return incorrectWords;

}

function checkAnswer(option) {

var selectedWord = option.textContent;

if (selectedWord === correctAnswer) {

option.classList.add("correct");

document.getElementById("question").textContent = "¡Correcto!";

score++;

} else {

option.classList.add("incorrect");

document.getElementById("question").textContent = "¡Ay, no!";

}

disableOptions();

setTimeout(nextQuestion, 1500);

}

function disableOptions() {

for (var i = 0; i < options.length; i++) {

options[i].style.pointerEvents = "none";

}

function enableOptions() {

for (var i = 0; i < options.length; i++) {

options[i].style.pointerEvents = "auto";

options[i].classList.remove("correct", "incorrect");

}

function nextQuestion() {

if (totalQuestions < 10) {

enableOptions();

generateQuestion();

} else {

showResult();

}

updateProgressBar();

}

function showResult() {

var result = score === totalQuestions ? "¡Felicidades! Has acertado todas las preguntas." : "Puntuación final: " + score + "/" + totalQuestions;

document.getElementById("question").textContent = result;

document.getElementById("options").style.display = "none";

document.getElementById("replay-btn").style.display = "block";

}

function updateProgressBar() {

var percentage = (score / totalQuestions) * 100;

var progressBar = document.getElementById("progress-bar");

progressBar.style.width = percentage + "%";

if (percentage <= 40) {

progressBar.className = "red";

} else if (percentage <= 60) {

progressBar.className = "yellow";

} else {

progressBar.className = "green";

}

function restartGame() {

score = 0;

totalQuestions = 0;

enableOptions();

generateQuestion();

document.getElementById("options").style.display = "block";

document.getElementById("replay-btn").style.display = "none";

resetProgressBar();

}

function resetProgressBar() {

var progressBar = document.getElementById("progress-bar");

progressBar.style.width = "0";

progressBar.className = "";

}

// Start the game

generateQuestion();

</script>

</body>

</html>

HTML for "Fill in the blank"

<!DOCTYPE html>

<html>

<head>

<title>¡Adivinanzas!</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

}

h1 {

color: #239B56;

}

#game-container {

margin: 50px auto;

width: 500px;

}

#definition {

font-size: 18px;

margin-bottom: 20px;

}

#guess-input {

padding: 5px;

font-size: 16px;

width: 200px;

margin-bottom: 10px;

}

#submit-button, #skip-button, #replay-button {

padding: 10px 20px;

font-size: 16px;

background-color: #239B56;

color: white;

border: none;

cursor: pointer;

}

#skip-button {

margin-left: 10px;

}

</style>

</head>

<body>

<h1>¡Adivinanzas!</h1>

<h2>Adivina la palabra según la definición.</h2>

<button id="submit-button" onclick="checkGuess()">Submit</button>

<button id="replay-button" onclick="startGame()" style="display: none;">Replay</button>

</div>

var word;

var definitions = {

"abuelo": "El padre de mi madre o de mi padre.",

"abuela": "La madre de mi madre o de mi padre.",

"padre": "El progenitor masculino.",

"madre": "La progenitora femenina.",

"hermano": "Un hombre o niño que tiene los mismos padres que yo.",

"hermana": "Una mujer o niña que tiene los mismos padres que yo.",

"hijo": "Un niño o descendiente masculino.",

"hija": "Una niña o descendiente femenina.",

"nieto": "El hijo de mi hijo o hija.",

"nieta": "La hija de mi hijo o hija.",

"tío": "El hermano de mi padre o madre.",

"tía": "La hermana de mi padre o madre.",

"primo": "El hijo de mi tío o tía.",

"prima": "La hija de mi tío o tía.",

"sobrino": "El hijo de mi hermano o hermana.",

"sobrina": "La hija de mi hermano o hermana.",

"esposo": "Mi marido o cónyuge masculino.",

"esposa": "Mi esposa o cónyuge femenina.",

"cuñado": "El hermano de mi esposo o esposa.",

"cuñada": "La hermana de mi esposo o esposa.",

"suegro": "El padre de mi esposo o esposa.",

"suegra": "La madre de mi esposo o esposa.",

"yerno": "El esposo de mi hija o hijo.",

"nuera": "La esposa de mi hijo o hija."

};

function startGame() {

var words = Object.keys(definitions);

word = words[Math.floor(Math.random() * words.length)];

document.getElementById("definition").textContent = definitions[word];

document.getElementById("result-message").textContent = "";

document.getElementById("guess-input").value = "";

document.getElementById("submit-button").style.display = "inline";

document.getElementById("skip-button").style.display = "inline";

document.getElementById("replay-button").style.display = "none";

}

function checkGuess() {

var guess = document.getElementById("guess-input").value.trim().toLowerCase();

if (guess === word) {

document.getElementById("result-message").textContent = "¡Felicidades! Has acertado.";

document.getElementById("submit-button").style.display = "none";

document.getElementById("skip-button").style.display = "none";

document.getElementById("replay-button").style.display = "inline";

} else {

document.getElementById("result-message").textContent = "Lo siento, intenta de nuevo.";

}

function skipWord() {

startGame();

}

startGame();

</script>

</body>

</html>

HTML for "Emoji word game"

<html>

<head>

<style>

body {

font-family: Arial, sans-serif;

}

#question {

font-size: 18px;

margin-bottom: 20px;

}

.option {

display: inline-block;

width: 100px;

padding: 10px;

margin-right: 10px;

background-color: #EAFAF1;

cursor: pointer;

border-radius: 7px;

font-size: 40px;

}

#replay-btn {

display: none;

margin-top: 20px;

padding: 10px 20px;

background-color: #D4E6F1;

border: none;

border-radius: 5px;

cursor: pointer;

}

.correct {

background-color: rgba(0, 128, 0, 0.7);

}

.incorrect {

background-color: rgba(255, 0, 0, 0.7);

}

#progress-bar-container {

margin-top: 30px;

width: 300px;

height: 20px;

border: 1px solid #ccc;

background-color: #F1F1F1;

border-radius: 5px;

}

#progress-bar {

width: 0;

height: 100%;

transition: width 0.5s ease;

}

.red {

background-color: #ffff00;

}

.yellow {

background-color: #ffff00;

}

.green {

background-color: #00ff00;

}

</style>

</head>

<body>

<h1>Identify the emotion in Spanish.</h1>

</div>

<button id="replay-btn" onclick="restartGame()">Replay</button>

</div>

var words = {

"😩": "abrumado/a",

"🙏": "agradecido/a",

"😱": "alarmado/a",

"😄": "alegre",

"😌": "aliviado/a",

"😣": "alterado/a",

"😬": "ansioso/a",

"😨": "asustado/a",

"😳": "avergonzado/a",

"😫": "cansado/a",

"😠": "celoso/a",

"😌": "conforme",

"😕": "confundido/a",

"😞": "decepcionado/a",

"😫": "desesperado/a",

"😴": "dormido/a",

"😃": "emocionado/a",

"💘": "enamorado/a",

"😡": "enojado/a",

"😒": "envidioso/a",

"🤞": "esperanzado/a",

"😍": "extático/a",

"😄": "feliz",

"😃": "feliz",

"😖": "frustrado/a",

"🔥": "furioso/a",

"😕": "inseguro/a",

"💪": "motivado/a",

"😊": "orgulloso/a",

"😟": "preocupado/a",

"😌": "relajado/a",

"😌": "satisfecho/a",

"😮": "sorprendido/a",

"😌": "tranquilo/a",

"😢": "triste",

"🦸‍♂️": "valiente",

};

var options = document.getElementsByClassName("option");

var correctAnswer = "";

var score = 0;

var totalQuestions = 0;

function generateQuestion() {

var keys = Object.keys(words);

var randomIndex = Math.floor(Math.random() * keys.length);

var word = keys[randomIndex];

var definition = words[word];

document.getElementById("question").textContent = definition;

assignOptions(word);

}

function assignOptions(correctWord) {

var randomOption = Math.floor(Math.random() * options.length);

correctAnswer = correctWord;

options[randomOption].textContent = correctWord;

totalQuestions++;

var incorrectWords = getIncorrectWords(correctWord);

var incorrectOptions = Array.from(options).filter((_, index) => index !== randomOption);

for (var i = 0; i < incorrectOptions.length; i++) {

var incorrectWord = incorrectWords[i];

incorrectOptions[i].textContent = incorrectWord;

}

function getIncorrectWords(correctWord) {

var keys = Object.keys(words);

var incorrectWords = [];

while (incorrectWords.length < 2) {

var randomIndex = Math.floor(Math.random() * keys.length);

var randomWord = keys[randomIndex];

if (randomWord !== correctWord && !incorrectWords.includes(randomWord)) {

incorrectWords.push(randomWord);

}

return incorrectWords;

}

function checkAnswer(option) {

var selectedWord = option.textContent;

if (selectedWord === correctAnswer) {

option.classList.add("correct");

document.getElementById("question").textContent = "Correct!";

score++;

} else {

option.classList.add("incorrect");

document.getElementById("question").textContent = "Sorry!";

}

disableOptions();

setTimeout(nextQuestion, 1500);

}

function disableOptions() {

for (var i = 0; i < options.length; i++) {

options[i].style.pointerEvents = "none";

}

function enableOptions() {

for (var i = 0; i < options.length; i++) {

options[i].style.pointerEvents = "auto";

options[i].classList.remove("correct", "incorrect");

}

function nextQuestion() {

if (totalQuestions < 12) {

enableOptions();

generateQuestion();

} else {

showResult();

}

updateProgressBar();

}

function showResult() {

var result = score === totalQuestions ? "Wow! 10/10" : "Final score: " + score + "/" + totalQuestions;

document.getElementById("question").textContent = result;

document.getElementById("options").style.display = "none";

document.getElementById("replay-btn").style.display = "block";

}

function updateProgressBar() {

var percentage = (score / totalQuestions) * 100;

var progressBar = document.getElementById("progress-bar");

progressBar.style.width = percentage + "%";

if (percentage <= 40) {

progressBar.className = "red";

} else if (percentage <= 60) {

progressBar.className = "yellow";

} else {

progressBar.className = "green";

}

function restartGame() {

score = 0;

totalQuestions = 0;

enableOptions();

generateQuestion();

document.getElementById("options").style.display = "block";

document.getElementById("replay-btn").style.display = "none";

resetProgressBar();

}

function resetProgressBar() {

var progressBar = document.getElementById("progress-bar");

progressBar.style.width = "0";

progressBar.className = "";

}

// Start the game

generateQuestion();

</script>

</body>

</html>

HTML for binary identification: true/false, this/that, antiguo/artificial

<!DOCTYPE html>

<html>

<head>

<title>Refranes - ¿Antiguo o artificial?</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

}

h1 {

margin-bottom: 30px;

}

#saying {

font-size: 18px;

margin-bottom: 20px;

}

#feedback {

font-size: 24px;

font-weight: bold;

margin-bottom: 20px;

}

#buttons {

display: flex;

justify-content: center;

}

button {

margin: 10px;

padding: 12px 20px;

font-size: 16px;

border: none;

border-radius: 5px;

cursor: pointer;

color: white;

font-weight: bold;

}

#antiguo {

background-color: #1F618D;

}

#artificial {

background-color: #1F618D;

}

</style>

</head>

<body>

<h1>Refranes - ¿Antiguo o artificial?</h1>

<div id="saying">Loading saying...</div>

<button id="antiguo">ANTIGUO</button>

<button id="artificial">ARTIFICIAL</button>

</div>

document.addEventListener("DOMContentLoaded", function() {

const sayings = [

{

text: "Con sabiduría y pasión, se construye un nuevo mañana.",

answer: "ARTIFICIAL"

},

{

text: "Éramos muchos y parió la abuela.",

answer: "ANTIGUO"

},

{

text: "Pueblo pequeño, campana grande.",

answer: "ANTIGUO"

},

{

text: "Salir de Guatemala para caer en Guatepeor.",

answer: "ANTIGUO"

},

{

text: "Una sola golondrina no hace verano.",

answer: "ANTIGUO"

},

{

text: "Poderoso caballero es don dinero.",

answer: "ANTIGUO"

},

{

text: "Más vale estar solo que mal acompañado.",

answer: "ANTIGUO"

},

{

text: "Es mejor malo conocido que bueno por conocer.",

answer: "ANTIGUO"

},

{

text: "Donde manda capitán, no manda marinero.",

answer: "ANTIGUO"

},

{

text: "Cree el león que todos son de su condición.",

answer: "ANTIGUO"

},

{

text: "Cuando el diablo no tiene qué hacer, con el rabo mata moscas.",

answer: "ANTIGUO"

},

{

text: "Cría cuervos y te sacarán los ojos.",

answer: "ANTIGUO"

},

{

text: "Buey viejo ara bien.",

answer: "ANTIGUO"

},

{

text: "Al pan, pan, y al vino, vino.",

answer: "ANTIGUO"

},

{

text: "Hasta arrancar un ajo cuesta trabajo.",

answer: "ANTIGUO"

},

{

text: "Haz bien y no mires a quién.",

answer: "ANTIGUO"

},

{

text: "No hay mal que por bien no venga.",

answer: "ANTIGUO"

},

{

text: "Oficio quita vicio.",

answer: "ANTIGUO"

},

{

text: "Aunque se vista de seda, mona se queda.",

answer: "ANTIGUO"

},

{

text: "Cada oveja con su pareja.",

answer: "ANTIGUO"

},

{

text: "En la calma y en la tormenta, la amistad es una joya que no se encuentra.",

answer: "ARTIFICIAL"

},

{

text: "Al que obra con bondad, la fortuna le sonríe de verdad.",

answer: "ARTIFICIAL"

},

{

text: "Con paciencia y persistencia, se alcanza la excelencia",

answer: "ARTIFICIAL"

},

{

text: "El amor y la gratitud, son la base de la plenitud.",

answer: "ARTIFICIAL"

},

{

text: "Con esfuerzo y perseverancia, se llega a la cima con elegancia.",

answer: "ARTIFICIAL"

},

{

text: "Con pasos firmes y corazón fuerte, ningún desafío nos quita la suerte.",

answer: "ARTIFICIAL"

},

{

text: "Con valentía y determinación, se supera toda situación.",

answer: "ARTIFICIAL"

},

{

text: "Con esfuerzo y pasión, se alcanza la transformación.",

answer: "ARTIFICIAL"

},

{

text: "Si en ti confías y persistes, hasta lo imposible consigues.",

answer: "ARTIFICIAL"

},

{

text: "Con humildad y sabiduría, se construye la mejor compañía.",

answer: "ARTIFICIAL"

},

{

text: "En la curiosidad y el aprendizaje, se encuentra el verdadero viaje.",

answer: "ARTIFICIAL"

},

{

text: "El que mal anda, mal acaba.",

answer: "ANTIGUO"

}

// Add more sayings and answers here...

];

let currentSayingIndex = 0;

const sayingElement = document.getElementById("saying");

const feedbackElement = document.getElementById("feedback");

const antiguoButton = document.getElementById("antiguo");

const artificialButton = document.getElementById("artificial");

function loadSaying() {

sayingElement.textContent = sayings[currentSayingIndex].text;

feedbackElement.textContent = "";

}

function showFeedbackMessage(message) {

feedbackElement.textContent = message;

}

function checkAnswer(answer) {

const correctAnswer = sayings[currentSayingIndex].answer;

if (answer === correctAnswer) {

showFeedbackMessage("¡Correcto! 🎉");

} else {

showFeedbackMessage("¡Incorrecto!😞");

}

// Move to the next saying after a delay

setTimeout(function() {

currentSayingIndex++;

if (currentSayingIndex < sayings.length) {

loadSaying();

} else {

showFeedbackMessage("Game Over! You have completed all sayings.");

}

}, 1500); // Delay of 1.5 seconds (adjust as needed)

}

antiguoButton.addEventListener("click", () => {

checkAnswer("ANTIGUO");

});

artificialButton.addEventListener("click", () => {

checkAnswer("ARTIFICIAL");

});

// Start the game

loadSaying();

});

</script>

</body>

</html>

HTML for "CADENA" game

<!DOCTYPE html>

<html>

<head>

<title>Cadena</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin: 40px;

}

h1 {

color: #333;

}

#game-container {

margin-top: 20px;

}

#message {

margin-top: 10px;

color: #ff0000;

font-weight: bold;

}

#score {

margin-top: 10px;

font-weight: bold;

}

#valid-words {

margin-top: 20px;

font-weight: bold;

}

</style>

</head>

<body>

<h1>Cadena</h1>

<div id="score">Score: 0</div>

<div id="valid-words">Valid words: </div>

</div>

const wordsList = [

"UNO",

"DOS",

"TRES",

"CUATRO",

"CINCO",

"SEIS",

"SIETE",

"OCHO",

"NUEVE",

"DIEZ",

"ONCE",

"DOCE",

"TRECE",

"CATORCE",

"QUINCE",

"DIECISÉIS",

"DIECISIETE",

"DIECIOCHO",

"VESTIDO",

"VIDEOJUEGO",

"MARIPOSA",

"MASCARILLA",

"MÉDICA",

"MESA",

"MOCHILA",

"MODELO",

"MONTAÑA",

"MUJER",

"MÚSICA",

"NACIONALIDAD",

"NADADORA",

"NATACIÓN",

"NATURALEZA",

"AUDIO",

"FRANCÉS",

"JAPONÉS",

"ALEMÁN",

"ESTUDIO",

"VENTAJA",

"PARADOJA",

"VISIÓN",

"IMPROVIZACIÓN",

"INTUICIÓN",

"NUTRICIÓN",

"GLOBALIZACIÓN",

"EDUCACIÓN",

"EVALUACIÓN",

"LIBERACIÓN",

"LIBERTAD",

"DIGNIDAD",

"FRATERNIDAD",

"UNIDAD",

"INDIVIDUALIDAD",

"UNIVERSO",

"ASTRONOMÍA",

"FILOSOFÍA",

"POESÍA",

"FOLOLOGÍA",

"SALUD",

"NARIZ",

"OÍDO",

"CUERPO",

"CEJA",

"CARA",

"PIERNA",

"RODILLA",

"CADERA",

"DEDO",

"PIE",

"PARED",

"BACTERIA",

"BALADA",

"CANCIÓN",

"EVOLUCIÓN",

"SUEÑO",

"VASO",

"PLATO",

"OJO",

"BANDERA",

"FRONTERA",

"BURRO",

"BÚHO",

"ZORRO",

"ZAPATERÍA",

"CARNICERÍA",

"HELADERÍA",

"FRUTERÍA",

"RELOJERÍA",

"SUPERMERCADO",

"HOGAR",

"PIZZA",

"AGUACATE",

"LECHUGA",

"LECHUZA",

"MUNDO",

"MOMENTO",

"ANUNCIO",

"ASCENSO",

"AUMENTO DE SUELDO",

"BANCO",

"BIENESTAR",

"CAJERO AUTOMÁTICO",

"CARTERO",

"CHEQUE",

"MASAJE",

"SELLO",

"SOBRE",

"SUELDO",

"TELETRABAJO",

"TRABAJO",

"CAFEÍNA",

"CALORÍA",

"CARRERA",

"DIRECCIÓN",

"DROGA",

"EMPRESA",

"ENTREVISTA",

"ESQUINA",

"ESTAMPILLA",

"GRASA",

"JOYERÍA",

"LAVANDERÍA",

"MERIENDA",

"OCUPACIÓN",

"PANADERÍA",

"PASTELERÍA",

"PELUQUERÍA",

"PESCADERÍA",

"MUÑECA",

"BRAZO",

"BIGOTE",

"BARBA",

"TRAJE",

"COLOR",

"PODER",

"DIVERSIÓN",

"BONDAD",

"OPTIMISMO",

"ILUSIÓN",

"SUPERACIÓN",

"VITALIDAD",

"TRIUNFO",

"CARIÑO",

"ARMONÍA",

"ÉXITO",

"TRANQUILIDAD",

"VACACIÓN",

"ABRAZO",

"MOTIVACIÓN",

"PAZ",

"CONFIANZA",

"VIAJE",

"MARAVILLA",

"AMANECER",

"HONESTIDAD",

"VERANO",

"PASIÓN",

"MAMÁ",

"AMABILIDAD",

];

let currentWord = "AGUA";

let score = 0;

const validWordsList = [];

function validateWord(word) {

if (word.length === 0) {

return "Please enter a valid word.";

}

if (word.charAt(0) !== currentWord.charAt(currentWord.length - 1)) {

return "Word must start with the last letter of the previous word.";

}

if (!wordsList.includes(word.toUpperCase())) {

return "Not a valid Spanish word.";

}

if (validWordsList.includes(word.toUpperCase())) {

return "Word already used.";

}

return null;

}

function updateScore(word) {

let points = 1;

if (word.charAt(0) === word.charAt(word.length - 1)) {

points += 2;

}

score += points;

validWordsList.push(word.toUpperCase());

}

function displayMessage(message, isError = false) {

const messageDiv = document.getElementById("message");

messageDiv.style.color = isError ? "#ff0000" : "#000";

messageDiv.innerText = message;

}

function updateValidWordsList() {

const validWordsDiv = document.getElementById("valid-words");

validWordsDiv.innerText = `Valid words: ${validWordsList.join(" > ")}`;

}

function playWord() {

const inputElement = document.getElementById("word-input");

const word = inputElement.value.trim().toUpperCase();

const validationMessage = validateWord(word);

if (validationMessage) {

displayMessage(validationMessage, true);

return;

}

displayMessage("");

updateScore(word);

updateValidWordsList();

currentWord = word;

inputElement.value = "";

inputElement.placeholder = `Enter a word starting with '${currentWord.charAt(currentWord.length - 1)}'`;

const scoreDiv = document.getElementById("score");

scoreDiv.innerText = `Score: ${score}`;

}

document.getElementById("play-button").addEventListener("click", playWord);

function startGame() {

const startGameButton = document.getElementById("start-game-button");

startGameButton.style.display = "none";

const wordInput = document.getElementById("word-input");

wordInput.disabled = false;

wordInput.placeholder = `Enter a word starting with '${currentWord.charAt(currentWord.length - 1)}'`;

const playButton = document.getElementById("play-button");

playButton.disabled = false;

}

</script>

<button id="start-game-button" onclick="startGame()">Start Game</button>

</body>

</html>

HTML for "¿CIERTO O FALSO?" game

<!DOCTYPE html>

<head>

<title>Word Guessing Game</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: left;

}

button {

font-size: 18px;

padding: 10px 20px;

margin: 10px;

}

#feedback {

margin-top: 20px;

font-size: 18px;

}

.correct {

color: green;

}

.incorrect {

color: red;

}

#word {

font-size: 20px; /* Adjust the font size as needed */

font-weight: bold; /* Optionally, add bold to make it more prominent */

margin-bottom: 10px; /* Add some margin to separate words from buttons */

}

</style>

</head>

<body>

<h1>¿CIERTO O FALSO?</h1>

<button id="CIERTOButton" onclick="checkGuess('CIERTO')">CIERTO</button>

<button id="FALSOButton" onclick="checkGuess('FALSO')">FALSO</button>

<button id="replayButton" onclick="replayGame()" style="display: none;">REPLAY</button>

// Define an array of words with their corresponding categories (EL or LA)

const words = [

{ category: "CIERTO", name:"Pablo es de Bolivia, es boliviano."},

{ category: "CIERTO", name:"Margarita es de Bolivia, es boliviana."},

{ category: "CIERTO", name:"Margarita es de Cuba, es cubana."},

{ category: "CIERTO", name:"Pablo y Pedro son de Cuba, son cubanos."},

{ category: "CIERTO", name:"Margarita y María son de Panamá, son panameños."},

{ category: "CIERTO", name:"Marcos es de Honduras, es hondureño."},

{ category: "CIERTO", name:"Margarita es de Honduras, es hondureña."},

{ category: "CIERTO", name:"Marcos y Miguel son de Honduras, son hondureños."},

{ category: "CIERTO", name:"Pablo es de Puerto Rico, es puertorriqueño."},

{ category: "CIERTO", name:"Pablo es de Costa Rica, es costarricense."},

{ category: "CIERTO", name:"María es de Guatemala, es guatemalteca"},

{ category: "CIERTO", name:"Marta y Marta son de Guatemala, son guatemaltecas."},

{ category: "CIERTO", name:"José es de La República Dominicana, es dominicano."},

{ category: "CIERTO", name:"Marta es de La República Dominicana, es dominicana."},

{ category: "CIERTO", name:"José es de Venezuela, es venezolano."},

{ category: "CIERTO", name:"Patricia es de Venezuela, es venezolana."},

{ category: "CIERTO", name:"José es de El Salvador, es salvadoreño."},

{ category: "CIERTO", name:"Marta es de Paraguay, es paraguaya."},

{ category: "CIERTO", name:"Marcos y Miguel son de España, son españoles"},

{ category: "CIERTO", name:"Dos y ocho son diez."},

{ category: "CIERTO", name:"Diez y dos son doce."},

{ category: "CIERTO", name:"Diez y tres son trece."},

{ category: "CIERTO", name:"Diez y diez son veinte."},

{ category: "CIERTO", name:"Ocho y ocho son dieciséis."},

{ category: "CIERTO", name:"Ocho y tres son once."},

{ category: "CIERTO", name:"Ocho y cinco son quince."},

{ category: "FALSO", name:"Dos y dos son diez."},

{ category: "FALSO", name:"Dos y doce son cero."},

{ category: "FALSO", name:"Dos y ocho son once."},

{ category: "FALSO", name:"Diez y nueve son doce."},

{ category: "FALSO", name:"Diez y dos son trece."},

{ category: "FALSO", name:"Diez y diez son once."},

{ category: "FALSO", name:"Ocho y cinco son dieciséis."},

{ category: "FALSO", name:"Ocho y uno son once."},

{ category: "FALSO", name:"Ocho y cuatro son quince."},

{ category: "FALSO", name:"Hoy es viernes. Mañana es martes."},

{ category: "FALSO", name:"Hoy es lunes. Mañana es sábado."},

{ category: "FALSO", name:"Hoy es sábado. Mañana es miércoles."},

{ category: "FALSO", name:"Hoy es domingo. Mañana es jueves."},

{ category: "FALSO", name:"Hoy es jueves. Mañana es domingo."},

{ category: "FALSO", name:"Hoy es jueves. Mañana es lunes."},

{ category: "FALSO", name:"Hoy es miércoles. Mañana es viernes."},

{ category: "CIERTO", name:"Hoy es lunes. Mañana es martes."},

{ category: "CIERTO", name:"Hoy es viernes. Mañana es sábado."},

{ category: "CIERTO", name:"Hoy es martes. Mañana es miércoles."},

{ category: "CIERTO", name:"Hoy es domingo. Mañana es lunes."},

{ category: "CIERTO", name:"Hoy es sábado. Mañana es domingo."},

{ category: "CIERTO", name:"Hoy es jueves. Mañana es viernes."},

{ category: "CIERTO", name:"Hoy es miércoles. Mañana es jueves."},

{ category: "CIERTO", name:"La fresa es una fruta."},

{ category: "CIERTO", name:"La uva es una fruta."},

{ category: "CIERTO", name:"La naranja es una fruta."},

{ category: "CIERTO", name:"La manzana es una fruta."},

{ category: "CIERTO", name:"La sandía es una fruta."},

{ category: "CIERTO", name:"El plátano es una fruta."},

{ category: "CIERTO", name:"El pepino es una verdura."},

{ category: "CIERTO", name:"La lechuga es una verdura."},

{ category: "CIERTO", name:"El pimiento es una verdura."},

{ category: "CIERTO", name:"El jamón es una carne."},

{ category: "CIERTO", name:"El res es una carne."},

{ category: "CIERTO", name:"El lomo es una carne."},

{ category: "CIERTO", name:"La salchicha es una carne."},

{ category: "CIERTO", name:"El pollo es una carne."},

{ category: "CIERTO", name:"El pavo es una carne."},

{ category: "CIERTO", name:"El cordero es una carne."},

{ category: "FALSO", name:"La fresa es una carne."},

{ category: "FALSO", name:"La uva es una carne."},

{ category: "FALSO", name:"La naranja es una carne."},

{ category: "FALSO", name:"La manzana es una carne."},

{ category: "FALSO", name:"El plátano es unacarne.."},

{ category: "FALSO", name:"El pepino es una carne.."},

{ category: "FALSO", name:"La lechuga es una carne."},

{ category: "FALSO", name:"El pollo es una fruta."},

{ category: "FALSO", name:"El pavo es una fruta."},

{ category: "FALSO", name:"El cordero es una fruta."},

];

let currentWordIndex = 0;

let score = 0;

let tries = 0;

// Function to shuffle the array using Fisher-Yates algorithm

function shuffleArray(array) {

for (let i = array.length - 1; i > 0; i--) {

const j = Math.floor(Math.random() * (i + 1));

[array[i], array[j]] = [array[j], array[i]];

}

function displayWordAndFeedback() {

if (currentWordIndex < words.length && tries < 12) {

const wordElement = document.getElementById("word");

// Shuffle the array before displaying the word

shuffleArray(words);

wordElement.textContent = words[currentWordIndex].name;

const feedbackElement = document.getElementById("feedback");

feedbackElement.textContent = ""; // Clear previous feedback

} else {

const wordElement = document.getElementById("word");

wordElement.textContent = "Game Over!";

const scoreElement = document.getElementById("score");

scoreElement.textContent = `Your score: ${score} / 12`;

const replayButton = document.getElementById("replayButton");

replayButton.style.display = "block";

}

function checkGuess(selectedCategory) {

const currentWord = words[currentWordIndex];

const feedbackElement = document.getElementById("feedback");

if (currentWord.category === selectedCategory) {

feedbackElement.textContent = "SÍ 🎉😎";

feedbackElement.classList.add("correct");

feedbackElement.classList.remove("incorrect");

score++;

} else {

feedbackElement.textContent = "NO 😫❌";

feedbackElement.classList.add("incorrect");

feedbackElement.classList.remove("correct");

}

tries++;

currentWordIndex++;

setTimeout(displayWordAndFeedback, 1000); // Show the next word and clear feedback after 1 second

}

function replayGame() {

currentWordIndex = 0;

score = 0;

tries = 0;

const wordElement = document.getElementById("word");

wordElement.textContent = "";

const feedbackElement = document.getElementById("feedback");

feedbackElement.textContent = "";

const scoreElement = document.getElementById("score");

scoreElement.textContent = "";

const replayButton = document.getElementById("replayButton");

replayButton.style.display = "none";

displayWordAndFeedback();

}

// Load the first word when the page loads

window.onload = displayWordAndFeedback;

</script>

</body>

</html>

HTML for hybrid hangman/crossword game

<html>

<head>

<title>Spanish Word Guessing Game</title>

<style>

body {

font-family: Arial, sans-serif;

}

.keyboard-row {

display: flex;

justify-content: center;

}

.keyboard-key {

width: 40px;

height: 40px;

display: flex;

justify-content: center;

align-items: center;

border: 1px solid #ccc;

margin: 5px;

font-size: 18px;

cursor: pointer;

}

.guessed {

background-color: #ccc;

pointer-events: none;

}

#clue-display {

font-size: 24px;

margin-bottom: 10px;

}

#word-display {

font-size: 30px;

margin-bottom: 20px;

}

#strike-counter {

font-size: 24px;

margin-bottom: 10px;

}

</style>

</head>

<body>

<h1>Spanish Word Guessing Game</h1>

<div id="strike-counter">Strikes: </div>

</div>

</div>

<button onclick="replayGame()">Replay</button>

const words = [

{ clue: "individuos, seres humanos", answer:"personas"},

{ clue: "ocasiones", answer:"veces"},

{ clue: "objetos, elementos", answer:"cosas"},

{ clue: "seres del género femenino", answer:"mujeres"},

{ clue: "unidades de tiempo", answer:"horas"},

{ clue: "extremidades superiores del cuerpo humano", answer:"manos"},

{ clue: "unidades lingüísticas", answer:"palabras"},

{ clue: "organizaciones comerciales", answer:"empresas"},

{ clue: "circunstancias, situaciones", answer:"condiciones"},

{ clue: "acciones, tareas", answer:"actividades"},

{ clue: "creaciones artísticas o literarias", answer:"obras"},

{ clue: "conexiones, vínculos", answer:"relaciones"},

{ clue: "unidades de medida", answer:"medidas"},

{ clue: "actos, acciones", answer:"acciones"},

{ clue: "entidades con poder o mando", answer:"autoridades"},

{ clue: "organizaciones o entidades establecidas", answer:"instituciones"},

{ clue: "configuraciones, estructuras", answer:"formas"},

{ clue: "unidades de tiempo", answer:"semanas"},

{ clue: "componentes, segmentos", answer:"partes"},

{ clue: "tipos o categorías", answer:"especies"},

{ clue: "potencias, energías", answer:"fuerzas"},

{ clue: "áreas geográficas", answer:"zonas"},

{ clue: "representaciones visuales", answer:"imágenes"},

{ clue: "atributos, cualidades", answer:"características"},

{ clue: "conceptos, pensamientos", answer:"ideas"},

{ clue: "momentos específicos", answer:"ocasiones"},

{ clue: "decisiones y acciones gubernamentales", answer:"políticas"},

{ clue: "grupos de individuos en un área geográfica", answer:"comunidades"},

{ clue: "dolencias, trastornos de salud", answer:"enfermedades"},

{ clue: "grupos de parientes", answer:"familias"},

{ clue: "procesos de votación", answer:"elecciones"},

{ clue: "orígenes, recursos", answer:"fuentes"},

{ clue: "regiones, extensiones geográficas", answer:"áreas"},

{ clue: "conjunto de acciones planificadas", answer:"programa"},

{ clue: "lugar de compra y venta de bienes", answer:"mercado"},

{ clue: "área o lugar", answer:"espacio"},

{ clue: "descendiente", answer:"hijo"},

{ clue: "comunidad, localidad", answer:"pueblo"},

{ clue: "área o división", answer:"sector"},

{ clue: "líder, persona a cargo", answer:"director"},

{ clue: "categoría de clasificación", answer:"género"},

{ clue: "incremento o crecimiento", answer:"aumento"},

{ clue: "estructura que rodea", answer:"marco"},

{ clue: "parte frontal de la cabeza", answer:"rostro"},

{ clue: "institución financiera", answer:"banco"},

{ clue: "lugar de presentación", answer:"escenario"},

{ clue: "periodo de tiempo", answer:"plazo"},

{ clue: "regalo o contribución", answer:"don"},

{ clue: "contenido escrito", answer:"texto"},

{ clue: "cantidad completa", answer:"total"},

{ clue: "acción o trabajo aplicado", answer:"esfuerzo"},

{ clue: "tiempo anterior", answer:"pasado"},

{ clue: "décimo mes del año", answer:"octubre"},

{ clue: "forma distintiva o manera", answer:"estilo"},

{ clue: "entorno o atmósfera", answer:"ambiente"},

{ clue: "lugar hacia el cual se dirige", answer:"destino"},

{ clue: "séptimo mes del año", answer:"julio"},

{ clue: "cuarto mes del año", answer:"abril"},

{ clue: "efecto o influencia", answer:"impacto"},

{ clue: "tema o materia", answer:"asunto"},

{ clue: "área geográfica definida", answer:"territorio"},

{ clue: "sexto mes del año", answer:"junio"},

{ clue: "periódico, registro cotidiano", answer:"diario"},

{ clue: "acto de ayuda o preferencia", answer:"favor"},

{ clue: "cosa material o abstracta", answer:"objeto"},

];

let chosenWord = '';

let guessedLetters = [];

let strikes = 0;

function getRandomWord() {

return words[Math.floor(Math.random() * words.length)];

}

function displayClue() {

const clueDisplay = document.getElementById('clue-display');

clueDisplay.textContent = "Clue: " + chosenWord.clue;

}

function displayWord() {

const wordDisplay = document.getElementById('word-display');

let displayText = '';

for (let letter of chosenWord.answer) {

if (guessedLetters.includes(letter)) {

displayText += letter + ' ';

} else {

displayText += '_ ';

}

wordDisplay.textContent = displayText;

}

function displayStrikeCounter() {

const strikeCounter = document.getElementById('strike-counter');

strikeCounter.textContent = "Strikes: " + "❌".repeat(strikes);

}

function guessLetter(letter) {

if (!guessedLetters.includes(letter)) {

guessedLetters.push(letter);

if (!chosenWord.answer.includes(letter)) {

strikes++;

if (strikes >= 3) {

endGame("¡Perdiste! La palabra era: " + chosenWord.answer);

}

displayWord();

displayKeyboard();

displayStrikeCounter();

checkGameStatus();

}

function checkGameStatus() {

if (!document.getElementById('word-display').textContent.includes('_')) {

endGame("¡Felicidades! ¡Ganaste!");

}

function endGame(message) {

document.getElementById('game-message').textContent = message;

disableKeyboard();

}

function replayGame() {

chosenWord = getRandomWord();

guessedLetters = [];

strikes = 0;

document.getElementById('game-message').textContent = '';

displayClue();

displayWord();

enableKeyboard();

displayStrikeCounter();

}

function displayKeyboard() {

const keyboardKeys = document.querySelectorAll('.keyboard-key');

keyboardKeys.forEach((key) => {

const letter = key.textContent;

if (guessedLetters.includes(letter)) {

key.classList.add('guessed');

}

});

}

function disableKeyboard() {

const keyboardKeys = document.querySelectorAll('.keyboard-key');

keyboardKeys.forEach((key) => {

key.removeEventListener('click', () => guessLetter());

key.style.cursor = 'default';

});

}

function enableKeyboard() {

const keyboardKeys = document.querySelectorAll('.keyboard-key');

keyboardKeys.forEach((key) => {

key.addEventListener('click', () => guessLetter(key.textContent));

key.style.cursor = 'pointer';

key.classList.remove('guessed');

});

}

// Start the game when the page loads

window.addEventListener('load', () => {

chosenWord = getRandomWord();

displayClue();

displayWord();

enableKeyboard();

displayStrikeCounter();

});

</script>

</body>

</html>