Preguntas de HTML Versión 1

Volver a Juegos

Formas de agregar comentario:

/* Esto es un comentario en CSS */
// Esto es un comentario en JavaScript

<!DOCTYPE html>

<head>

<title>Juego de Preguntas sobre HTML</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin: 20px;

}

.question-container {

margin: 20px auto;

padding: 15px;

border: 1px solid #ccc;

width: 50%;

text-align: left;

}

.btn {

margin-top: 10px;

padding: 10px;

background-color: #007bff;

color: white;

border: none;

cursor: pointer;

}

.btn:hover {

background-color: #0056b3;

}

</style>

</head>

<body>

<h1>Juego de Preguntas sobre HTML</h1>

<p>Responde las siguientes preguntas y al final recibirás tu puntuación y retroalimentación.</p>

<button type="button" class="btn" onclick="calculateScore()">Finalizar</button>

</form>

const questions = [

{ question: "HTML es un lenguaje de programación", correct: "false", feedback: "HTML es un lenguaje de marcado, no de programación." },

{ question: "¿La etiqueta p se usa para definir un párrafo (es siempre entre caracteres menor < y mayor >)?", correct: "true", feedback: "Correcto, la etiqueta <p> define un párrafo." },

{ question: "¿El atributo 'alt' en una imagen es obligatorio?", correct: "true", feedback: "Es recomendable para accesibilidad y SEO." },

{ question: "Es recomendable anidar etiquetas h1 dentro de otras etiquetas h1", correct: "false", feedback: "No es recomendable ya que afecta la jerarquía del documento." },

{ question: "¿HTML significa Hyper Transfer Markup Language?", correct: "false", feedback: "No, significa HyperText Markup Language." },

{ question: "¿La etiqueta <div> se usa para crear divisiones en una página web?", correct: "true", feedback: "Sí, <div> es un contenedor genérico en HTML." },

{ question: "¿La etiqueta <br> se usa para insertar una línea horizontal?", correct: "false", feedback: "No, <br> inserta un salto de línea. Para una línea horizontal se usa <hr>." },

{ question: "HTML5 permite el uso de elementos semánticos como header y footer?", correct: "true", feedback: "Sí, HTML5 introdujo etiquetas semánticas como header, footer y article, entre otras." },

{ question: "¿Se puede usar CSS dentro de una etiqueta HTML con el atributo 'style'?", correct: "true", feedback: "Sí, se puede usar CSS en línea con el atributo 'style', aunque no es la mejor práctica." },

{ question: "¿El atributo 'href' en un enlace <a> es opcional?", correct: "false", feedback: "No, sin 'href' el enlace no tendrá un destino válido." }

];

function loadQuestions() {

const container = document.getElementById("questions");

container.innerHTML = "";

questions.forEach((q, index) => {

const div = document.createElement("div");

div.classList.add("question-container");

div.innerHTML = `<p>${index + 1}. ${q.question}</p>`;

div.innerHTML += `

<label><input type="radio" name="q${index}" value="true"> Verdadero</label><br>

<label><input type="radio" name="q${index}" value="false"> Falso</label><br>

`;

container.appendChild(div);

});

}

function calculateScore() {

let score = 0;

let feedbackHTML = "";

questions.forEach((q, index) => {

const selected = document.querySelector(`input[name="q${index}"]:checked`);

if (selected) {

if (selected.value === q.correct) {

score++;

feedbackHTML += `<p style='color:green;'>${index + 1}. Correcto - ${q.feedback}</p>`;

} else {

feedbackHTML += `<p style='color:red;'>${index + 1}. Incorrecto - ${q.feedback}</p>`;

}

} else {

feedbackHTML += `<p style='color:orange;'>${index + 1}. No respondido - ${q.feedback}</p>`;

}

});

document.getElementById("score").innerHTML = `Puntuación: ${score} / 10`;

document.getElementById("feedback").innerHTML = feedbackHTML;

}

loadQuestions();

</script>

</body>

</html>

Volver a Juegos