Embedded Files
Formas de agregar comentario:
<!-- Esto es un comentario en HTML -->
/* Esto es un comentario en CSS */
// Esto es un comentario en JavaScript
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Juego de Preguntas sobre HTML</title>
<!-- ==== INICIO DEL CSS ==== -->
<style>
body {
font-family: Arial, sans-serif;
font-size: 10px;
text-align: left;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
}
h1, h2 {
font-size: 12px;
text-align: left;
}
p {
font-size: 10px;
text-align: left;
}
.question-container {
margin: 10px 0;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
background: #fafafa;
}
fieldset {
border: none;
padding: 0;
}
legend {
font-weight: bold;
font-size: 10px;
}
label {
display: block;
margin: 5px 0;
cursor: pointer;
font-size: 10px;
}
.btn {
margin: 10px 5px;
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 10px;
transition: background 0.3s;
text-align: center;
}
.btn:hover {
background-color: #0056b3;
}
.feedback {
text-align: left;
padding: 10px;
margin-top: 10px;
font-size: 10px;
}
.correct {
color: green;
}
.incorrect {
color: red;
}
.unanswered {
color: orange;
}
#score {
font-size: 12px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="container">
<h1>Juego de Preguntas sobre HTML</h1>
<p>Responde las siguientes preguntas y al final recibirás tu puntuación y retroalimentación.</p>
<form id="quizForm">
<div id="questions"></div>
<button type="button" class="btn" onclick="calculateScore()">Finalizar</button>
<button type="button" class="btn" onclick="resetQuiz()">Reiniciar</button>
</form>
<h2 id="score"></h2>
<div id="feedback" class="feedback"></div>
</div>
<!-- ==== INICIO DEL JAVASCRIPT ==== -->
<script>
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?", 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 = `
<fieldset>
<legend><strong>${index + 1}. ${q.question}</strong></legend>
<label><input type="radio" name="q${index}" value="true"> Verdadero</label>
<label><input type="radio" name="q${index}" value="false"> Falso</label>
</fieldset>
`;
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 class="correct">${index + 1}. Correcto - ${q.feedback}</p>`;
} else {
feedbackHTML += `<p class="incorrect">${index + 1}. Incorrecto - ${q.feedback}</p>`;
}
} else {
feedbackHTML += `<p class="unanswered">${index + 1}. No respondido - ${q.feedback}</p>`;
}
});
document.getElementById("score").innerHTML = `Puntuación: ${score} / 10`;
document.getElementById("feedback").innerHTML = feedbackHTML;
}
function resetQuiz() {
document.getElementById("quizForm").reset();
document.getElementById("score").innerHTML = "";
document.getElementById("feedback").innerHTML = "";
}
loadQuestions();
</script>
</body>
</html>
Page updated
Google Sites
Report abuse