Eres un experto en HTML, CSS y JavaScript

Crea un test de inteligencia sobre esta tematica: [ VARIABLE 1 ]

Para crear el test debes utilizar este codigo:

<div id="quiz-container"></div>

<style>
.quiz-container {
font-family: Arial, sans-serif !important;
max-width: 700px !important;
margin: auto !important;
background: #fdfdfd !important;
padding: 25px !important;
border-radius: 12px !important;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.08) !important;
}

.quiz-header {
display: flex !important;
justify-content: space-between !important;
margin-bottom: 10px !important;
font-size: 18px !important;
}

.quiz-timer {
color: #e74c3c !important;
font-weight: bold !important;
}

.quiz-progress-bar {
height: 10px !important;
background: #ddd !important;
border-radius: 5px !important;
overflow: hidden !important;
margin-bottom: 20px !important;
}

.quiz-progress {
height: 100% !important;
background: #4caf50 !important;
transition: width 0.3s !important;
}

.quiz-question {
font-size: 22px !important;
font-weight: 600 !important;
margin-bottom: 20px !important;
}

.quiz-options {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 15px !important;
}

.quiz-option-button {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 14px !important;
font-size: 16px !important;
background: #f0f0f0 !important;
border: 2px solid transparent !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: all 0.2s ease-in-out !important;
text-align: left !important;
}

.quiz-option-button.correct {
background: #c8f7c5 !important;
border-color: #27ae60 !important;
color: #2d7d33 !important;
font-weight: bold !important;
}

.quiz-option-button.incorrect {
background: #f8d7da !important;
border-color: #c0392b !important;
color: #c0392b !important;
font-weight: bold !important;
}

.quiz-option-label {
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
background: #3498db !important;
color: white !important;
font-weight: bold !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}

.quiz-controls {
margin-top: 20px !important;
text-align: center !important;
}

.quiz-controls button {
width: 100% !important;
padding: 14px !important;
font-size: 16px !important;
background: #3498db !important;
color: white !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
}

.quiz-result-title {
font-size: 26px !important;
font-weight: bold !important;
margin-bottom: 15px !important;
text-align: center !important;
}

.quiz-result-description {
font-size: 17px !important;
line-height: 1.6 !important;
white-space: pre-line !important;
text-align: center !important;
}

.quiz-result-buttons {
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
margin-top: 25px !important;
text-align: center !important;
}

.quiz-result-buttons button {
padding: 12px !important;
font-size: 16px !important;
border: none !important;
border-radius: 8px !important;
cursor: pointer !important;
}

.quiz-restart-btn {
background-color: #2ecc71 !important;
color: white !important;
}

.quiz-share-btn {
background-color: #25D366 !important;
color: white !important;
}

@media (max-width: 600px) {
.quiz-options {
grid-template-columns: 1fr !important;
}
}
</style>

<script>
(function() {
const quizData = [
{ question: "👤 ¿Quién es el fundador principal de Facebook?", options: ["Larry Page", "Jeff Bezos", "Mark Zuckerberg", "Elon Musk"], answer: 2 },
{ question: "📅 ¿En qué año se fundó Facebook?", options: ["2002", "2004", "2006", "2008"], answer: 1 },
{ question: "🏛️ ¿Qué universidad fue clave en su creación?", options: ["Yale", "Harvard", "Stanford", "MIT"], answer: 1 },
{ question: "🕵️‍♂️ ¿Cómo se llamaba originalmente Facebook?", options: ["FaceNet", "ConnectU", "TheFacebook", "UniBook"], answer: 2 },
{ question: "🎯 ¿Cuál fue la primera función principal de Facebook?", options: ["Videos", "Fotos", "Red universitaria", "Marketplace"], answer: 2 },
{ question: "🏢 ¿Empresa matriz desde 2021?", options: ["Alpha", "Meta", "NextGen", "FaceCorp"], answer: 1 },
{ question: "📸 ¿Qué app compró Facebook en 2012?", options: ["Snapchat", "Telegram", "Instagram", "TikTok"], answer: 2 },
{ question: "👍 ¿Qué hace el botón 'Me gusta'?", options: ["Bloquear", "Reportar", "Compartir", "Aprobar contenido"], answer: 3 },
{ question: "📻 ¿Red rival en los inicios?", options: ["Twitter", "MySpace", "LinkedIn", "Reddit"], answer: 1 },
{ question: "💼 ¿Qué tipo de empresa es Facebook?", options: ["Red social", "Videojuegos", "E-commerce", "Educación"], answer: 0 }
];

let current = 0;
let score = 0;
let timer;
let timeLeft = 15;

function startTimer() {
timeLeft = 15;
document.getElementById("quiz-timer").innerText = timeLeft;
clearInterval(timer);
timer = setInterval(() => {
timeLeft--;
document.getElementById("quiz-timer").innerText = timeLeft;
if (timeLeft === 0) {
clearInterval(timer);
disableOptions();
revealCorrect();
}
}, 1000);
}

function renderQuestion() {
const q = quizData[current];
const letters = ["A", "B", "C", "D"];
document.getElementById("quiz-container").className = "quiz-container";
document.getElementById("quiz-container").innerHTML = `
<div class="quiz-header">
<span>Pregunta ${current + 1} de ${quizData.length}</span>
<span class="quiz-timer">⏳ Tiempo: <span id="quiz-timer">15</span>s</span>
</div>
<div class="quiz-progress-bar"><div class="quiz-progress" style="width: ${(current / quizData.length) * 100}%"></div></div>
<div class="quiz-question">${q.question}</div>
<div class="quiz-options">
${q.options.map((opt, i) => `
<button class="quiz-option-button" onclick="selectAnswer(${i})" id="opt-${i}">
<div class="quiz-option-label">${letters[i]}</div>
<span>${opt}</span>
</button>
`).join("")}
</div>
<div class="quiz-controls">
<button onclick="nextQuestion()" id="next-btn" disabled>Siguiente</button>
</div>
`;
startTimer();
}

window.selectAnswer = function(index) {
clearInterval(timer);
const correct = quizData[current].answer;
const buttons = document.querySelectorAll(".quiz-option-button");
buttons.forEach((btn, i) => {
btn.disabled = true;
if (i === correct) btn.classList.add("correct");
if (i === index && index !== correct) btn.classList.add("incorrect");
});
if (index === correct) score++;
document.getElementById("next-btn").disabled = false;
};

function disableOptions() {
const buttons = document.querySelectorAll(".quiz-option-button");
buttons.forEach(btn => btn.disabled = true);
document.getElementById("next-btn").disabled = false;
}

function revealCorrect() {
const correct = quizData[current].answer;
const buttons = document.querySelectorAll(".quiz-option-button");
buttons[correct].classList.add("correct");
}

window.nextQuestion = function() {
current++;
if (current < quizData.length) {
renderQuestion();
} else {
showResults();
}
};

function showResults() {
let message = "";
if (score === quizData.length) {
message = "¡Excelente! Has respondido todo correctamente. 🏆";
} else if (score >= quizData.length * 0.7) {
message = "Muy bien hecho, tienes un gran conocimiento. 💡";
} else if (score >= quizData.length * 0.4) {
message = "Nada mal, pero puedes mejorar. 📘";
} else {
message = "Es un buen momento para aprender más. 🌱";
}

const shareText = `¡He acertado ${score} de ${quizData.length} preguntas sobre Facebook en un test! ¿Te atreves a superarme? responderapido.com`;

document.getElementById("quiz-container").innerHTML = `
<div class="quiz-result-title">Has acertado ${score} de ${quizData.length} preguntas</div>
<div class="quiz-result-description">${message}</div>
<div class="quiz-result-buttons">
<button class="quiz-restart-btn" onclick="restartQuiz()">Reiniciar test</button>
<button class="quiz-share-btn" onclick="shareWhatsApp('${encodeURIComponent(shareText)}')">Compartir por WhatsApp</button>
</div>
`;
}

window.restartQuiz = function() {
current = 0;
score = 0;
renderQuestion();
};

window.shareWhatsApp = function(text) {
const url = `https://api.whatsapp.com/send?text=${text}`;
window.open(url, '_blank');
};

renderQuestion();
})();
</script>

--

Instrucciones:

-Modifica function showResults() para adaptarlos a la tematica del test y que muestre frases mas personalizadas

- No puedes cambiar nada del codigo, solo adapta las preguntas del test en funcion de la tematica que recibas

- Esto es MUY IMPORTANTE, devuelve el código HTML completo, pero no uses html ni ningún tipo de formato Markdown. Solo el HTML tal cual.

- Crea un codigo para un test que tenga 10 preguntas

- Recuerda cerrar siempre <script> </script>

- La clase del boton de las respuestas debe llamarse quiz-option-button siempre