<!DOCTYPE html>
<html lang=»es»>
<head>
<meta charset=»UTF-8″>
<title>Juego de Preguntas estilo ‘Quién quiere ser millonario'</title>
<style>
body {
font-family: ‘Arial’, sans-serif;
background: #0a0a23;
/* Fondo oscuro para el efecto de «Quién quiere ser millonario» */
color: #fff;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#game {
text-align: center;
width: 600px;
padding: 20px;
background-color: #3030b4;
/* Azul oscuro para el contenedor del juego */
border-radius: 10px;
box-shadow: 0 0 20px #000;
}
#score,
#timer {
font-size: 24px;
margin: 10px 0;
}
#question {
margin: 20px 0;
font-size: 28px;
}
.answer {
display: block;
margin: 10px auto;
padding: 10px 20px;
width: 90%;
color: #131357;
/* Color de texto para las respuestas */
background-color: #fff;
/* Fondo claro para las respuestas */
border: 2px solid #131357;
/* Borde del color principal */
border-radius: 5px;
cursor: pointer;
font-size: 20px;
transition: background-color 0.5s, color 0.5s;
}
.answer:hover {
background-color: #131357;
color: #fff;
}
.correct,
.incorrect {
pointer-events: none;
}
.correct {
background-color: green;
color: #fff;
}
.incorrect {
background-color: red;
color: #fff;
}
#startScreen {
text-align: center;
width: 600px;
padding: 20px;
background-color: #131357;
/* Azul oscuro para el contenedor del juego */
border-radius: 10px;
box-shadow: 0 0 20px #000;
}
#startButton {
padding: 10px 20px;
font-size: 20px;
color: #131357;
/* Color de texto para el botón */
background-color: #fff;
/* Fondo claro para el botón */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, color 0.3s;
}
#startButton:hover {
background-color: #131357;
color: #fff;
}
#progressBar {
position: absolute;
top: 20px;
/* Ajusta según necesites */
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
width: 100%;
padding: 10px 0;
}
.progressDot {
height: 15px;
width: 15px;
background-color: #131357;
border-radius: 50%;
display: inline-block;
margin: 0 5px;
}
.active {
background-color: #fff;
/* Color para la pregunta actual */
}
</style>
</head>
<body>
<div id=»game»>
<div id=»questionCount»> Primera pregunta </div>
<div id=»score»>Puntuación: 0 </div>
<div id=»timer»>15</div> <!–Esto es el número de segundos que tiene la persona para responder a cada pregunta.–>
<div id=»question»></div>
<div id=»answers»></div>
</div>
<div id=»startScreen»>
<h2>¿Estás listo para comenzar?</h2> <!–Texto para el inicio del juego–>
<button id=»startButton»>Comenzar</button>
</div>
<div id=»progressBar»></div>
<script>
//Aqui se añaden las preguntas, para añadir más copia todo el contenido desde entre llaves ‘{}’, las llaves incluidas.
//Pon una ‘,’ entre pregunta y pregunta.
//
//Si en la propiedad ‘correct’ pones un true, significa que la respuesta es correcta, si pones un false, significa que es incorrecta.
//Puede haber más de una correcta.
const questions = [
{
question: «¿Cuantos hijos tienes?»,
answers: [
{ text: «1», correct: true },
{ text: «2», correct: false },
{ text: «3», correct: false },
{ text: «NO TENGO», correct: false }
]
},
{
question: «¿Cuál es mi color favorito?»,
answers: [
{ text: «Azul», correct: true },
{ text: «Rojo», correct: false },
{ text: «Verde», correct: false },
{ text: «Amarillo», correct: false }
]
},
{
question: «¿Cuál es mi animal favorito?»,
answers: [
{ text: «Perro», correct: true },
{ text: «Gato», correct: false },
{ text: «Tigre», correct: false },
{ text: «Jirafa», correct: false }
]
},
{
question: «¿TIENES ALZHAIMER?»,
answers: [
{ text: «TAL VEZ», correct: true },
{ text: «NO ME ACUERDO», correct: false },
{ text: «NO SE», correct: false },
{ text: «SI», correct: false }
]
},
{
question: «¿QUE AÑO ES?»,
answers: [
{ text: «2024», correct: true },
{ text: «2021», correct: false },
{ text: «2025», correct: false },
{ text: «París», correct: false }
]
},
{
question: «¿Dónde nos conocimos?»,
answers: [
{ text: «Barcelona», correct: true },
{ text: «Madrid», correct: false },
{ text: «Berlín», correct: false },
{ text: «París», correct: false }
]
},
{
question: «¿Dónde nos conocimos?»,
answers: [
{ text: «Barcelona», correct: true },
{ text: «Madrid», correct: false },
{ text: «Berlín», correct: false },
{ text: «París», correct: false }
]
},
{
question: «¿Dónde nos conocimos?»,
answers: [
{ text: «Barcelona», correct: true },
{ text: «Madrid», correct: false },
{ text: «Berlín», correct: false },
{ text: «París», correct: false }
]
},
{
question: «¿Dónde nos conocimos?»,
answers: [
{ text: «Barcelona», correct: true },
{ text: «Madrid», correct: false },
{ text: «Berlín», correct: false },
{ text: «París», correct: false }
]
},
{
question: «¿Dónde nos conocimos?»,
answers: [
{ text: «Barcelona», correct: true },
{ text: «Madrid», correct: false },
{ text: «Berlín», correct: false },
{ text: «París», correct: false }
]
}
];
function showFinalScore() {
const gameElement = document.getElementById(‘game’);
gameElement.innerHTML = `<h2>Tu puntuación final es: ${score} de ${questions.length}</h2>`; //Este es el texto que aparece al acabar el juego.
// Opción para reiniciar el juego o salir
}
let currentQuestionIndex = 0;
let question = 0;
let score = 0;
let timer;
document.addEventListener(‘DOMContentLoaded’, () => {
const startScreen = document.getElementById(‘startScreen’);
const startButton = document.getElementById(‘startButton’);
const gameElement = document.getElementById(‘game’);
// Asegúrate de que la pantalla de inicio sea visible y el juego no, al cargar la página
startScreen.style.display = ‘block’; // Mostrar pantalla de inicio
gameElement.style.display = ‘none’; // Ocultar juego
startButton.addEventListener(‘click’, () => {
startScreen.style.display = ‘none’; // Ocultar pantalla de inicio
gameElement.style.display = ‘block’; // Mostrar juego
showQuestion(questions[currentQuestionIndex]);
updateProgressBar();
});
});
function showQuestion(question) {
const questionElement = document.getElementById(‘question’);
const answersElement = document.getElementById(‘answers’);
questionElement.textContent = question.question;
answersElement.innerHTML = »;
question.answers.forEach(answer => {
const button = document.createElement(‘button’);
button.classList.add(‘answer’);
button.textContent = answer.text;
button.onclick = () => selectAnswer(answer.correct, button);
answersElement.appendChild(button);
});
startTimer();
}
function startTimer() {
const timerElement = document.getElementById(‘timer’);
timeLeft = 10;
timerElement.textContent = timeLeft;
clearInterval(timer); // Asegúrate de detener cualquier temporizador anterior
timer = setInterval(() => {
timeLeft–;
timerElement.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(timer);
showNextQuestion(); // Mostrar la siguiente pregunta o finalizar si es la última
}
}, 1000);
}
function selectAnswer(correct, button) {
clearInterval(timer); // Detener el temporizador
const answersButtons = document.querySelectorAll(‘.answer’);
answersButtons.forEach(btn => {
btn.disabled = true; // Deshabilita todos los botones para evitar múltiples respuestas
if (btn === button) {
btn.classList.add(correct ? ‘correct’ : ‘incorrect’);
}
});
question++;
if (correct) {
score++;
}
document.getElementById(‘score’).textContent = `Puntuación ${score} / ${question}`;
setTimeout(showNextQuestion, 2000); // Espera 2 segundos antes de mostrar la siguiente pregunta
}
function showNextQuestion() {
if (currentQuestionIndex + 1 < questions.length) {
showQuestion(questions[currentQuestionIndex + 1]);
} else {
showFinalScore();
}
currentQuestionIndex++;
updateProgressBar();
document.getElementById(‘questionCount’).textContent = `Pregunta ${question + 1} de ${questions.length}`;
}
function updateProgressBar() {
const progressBar = document.getElementById(‘progressBar’);
progressBar.innerHTML = »; // Limpia la barra de progreso
questions.forEach((_, index) => {
const dot = document.createElement(‘span’);
dot.classList.add(‘progressDot’);
if (index === currentQuestionIndex ) {
dot.classList.add(‘active’); // Asegúrate de que esto se actualice correctamente
}
progressBar.appendChild(dot);
});
}
</script>
</body>
</html>