<html lang="es">
<head>
<meta charset="UTF-8">
<title>Quiz de Inglés Básico</title>
<style>
.quiz-container {
max-width: 600px;
margin: 0 auto;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
h2 {
color: #2c3e50;
text-align: center;
}
.question {
margin-bottom: 15px;
padding: 10px;
background-color: #fff;
border-radius: 5px;
}
.options {
margin-top: 8px;
}
.option {
display: block;
margin: 5px 0;
}
.result {
margin-top: 5px;
padding: 5px;
border-radius: 3px;
display: none;
}
.correct {
background-color: #d4edda;
color: #155724;
}
.incorrect {
background-color: #f8d7da;
color: #721c24;
}
button {
background-color: #3498db;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 20px;
}
button:hover {
background-color: #2980b9;
}
.score-display {
text-align: center;
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
.check-icon {
color: green;
margin-left: 5px;
}
.x-icon {
color: red;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="quiz-container">
<h2>Quiz de Inglés Básico - 15 Preguntas</h2>
<div id="questions">
<!-- Las preguntas se generarán con JavaScript -->
</div>
<button id="check-answers">Verificar Respuestas</button>
<div class="score-display" id="score"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const questions = [
{
question: "1. ¿Cómo se dice 'Hola' en inglés?",
options: ["Hello", "Goodbye", "Thank you", "Please"],
answer: 0
},
{
question: "2. ¿Cuál es la traducción correcta de 'Gato'?",
options: ["Dog", "Cat", "Bird", "Mouse"],
answer: 1
},
{
question: "3. El verbo 'to be' en presente para 'yo' es:",
options: ["are", "is", "am", "be"],
answer: 2
},
{
question: "4. ¿Cómo se dice 'Buenos días' en inglés?",
options: ["Good night", "Good evening", "Good afternoon", "Good morning"],
answer: 3
},
{
question: "5. ¿Qué significa 'water'?",
options: ["Agua", "Fuego", "Tierra", "Aire"],
answer: 0
},
{
question: "6. El plural de 'child' es:",
options: ["childs", "childes", "children", "childrens"],
answer: 2
},
{
question: "7. ¿Cuál es el pasado simple del verbo 'go'?",
options: ["goed", "went", "gone", "going"],
answer: 1
},
{
question: "8. Los días de la semana en inglés comienzan con:",
options: ["Letra mayúscula", "Letra minúscula", "Depende del contexto", "Ninguna de las anteriores"],
answer: 0
},
{
question: "9. ¿Qué significa 'How are you?'?",
options: ["¿Cómo te llamas?", "¿Cómo estás?", "¿Dónde vives?", "¿Qué haces?"],
answer: 1
},
{
question: "10. El artículo indefinido 'a' se usa antes de:",
options: ["Consonantes", "Vocales", "Cualquier palabra", "Ninguna de las anteriores"],
answer: 0
},
{
question: "11. ¿Qué significa 'apple'?",
options: ["Manzana", "Naranja", "Plátano", "Pera"],
answer: 0
},
{
question: "12. El verbo auxiliar para formar preguntas en presente simple es:",
options: ["have", "did", "do/does", "are"],
answer: 2
},
{
question: "13. ¿Qué pronombre personal corresponde a 'nosotros'?",
options: ["You", "They", "We", "It"],
answer: 2
},
{
question: "14. ¿Cuál es el significado de 'book'?",
options: ["Libro", "Cuaderno", "Lápiz", "Bolígrafo"],
answer: 0
},
{
question: "15. El color 'blue' en español es:",
options: ["Rojo", "Verde", "Amarillo", "Azul"],
answer: 3
}
];
const questionsContainer = document.getElementById('questions');
// Generar preguntas en el DOM
questions.forEach((q, index) => {
const questionDiv = document.createElement('div');
questionDiv.className = 'question';
questionDiv.innerHTML = `
<div class="question-text">${q.question}</div>
<div class="options">
${q.options.map((opt, i) => `
<label class="option">
<input type="radio" name="q${index}" value="${i}"> ${opt}
</label>
`).join('')}
</div>
<div class="result" id="result-${index}"></div>
`;
questionsContainer.appendChild(questionDiv);
});
// Verificar respuestas
document.getElementById('check-answers').addEventListener('click', function() {
let score = 0;
questions.forEach((q, index) => {
const selectedOption = document.querySelector(`input[name="q${index}"]:checked`);
const resultDiv = document.getElementById(`result-${index}`);
resultDiv.style.display = 'block';
if (selectedOption) {
if (parseInt(selectedOption.value) === q.answer) {
resultDiv.textContent = "¡Correcto! ✓";
resultDiv.className = 'result correct';
score++;
} else {
resultDiv.textContent = `Incorrecto ✗ (La respuesta correcta es: ${q.options[q.answer]})`;
resultDiv.className = 'result incorrect';
}
} else {
resultDiv.textContent = "No has seleccionado ninguna respuesta ✗";
resultDiv.className = 'result incorrect';
}
});
// Mostrar puntaje
document.getElementById('score').textContent = `Tu puntaje: ${score} de ${questions.length} (${Math.round(score/questions.length*100)}%)`;
});
});
</script>
</body>
</html>