Misión: El Universo de los Conjuntos
by AstroKoala881023 lines46.7 KB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Misión: El Universo de los Conjuntos</title>
<style>
:root{
--purple:#7046d8;--dark:#292044;--pink:#ff7bac;
--blue:#57b9ef;--green:#27bd80;--red:#e45c70;
--yellow:#ffd45c;--bg:#f5f2ff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--dark);font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
button{font:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:not-allowed;transform:none!important}
.top{background:linear-gradient(120deg,#5332b4,#9063ec);color:white;padding:23px 5%;text-align:center}
.top h1{font-size:clamp(25px,5vw,39px);margin:0}
.top p{margin:8px 0 0;opacity:.9}
.progress-wrap{max-width:950px;margin:17px auto 0}
.progress-label{display:flex;justify-content:space-between;font-size:13px}
.progress{height:11px;background:#ffffff40;border-radius:20px;overflow:hidden;margin-top:7px}
.progress span{display:block;height:100%;width:0;background:var(--yellow);transition:.3s}
.stats{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;padding:13px;background:white;border-bottom:1px solid #e9e3fa}
.stat{background:#f4f0ff;padding:8px 15px;border-radius:30px;font-weight:750;font-size:14px}
nav{
display:flex;justify-content:center;gap:8px;flex-wrap:wrap;
padding:12px 10px;max-width:1100px;margin:auto;
position:sticky;top:0;z-index:100;background:#f5f2ff;
border-bottom:1px solid #e9e2fa;
}
nav button,.btn{
border:0;border-radius:13px;padding:11px 16px;background:white;
color:var(--dark);font-weight:750;box-shadow:0 3px 9px #34205a12;
}
nav button.active,.btn.primary{background:var(--purple);color:white}
nav button:hover,.btn:hover{transform:translateY(-2px)}
main{max-width:1000px;margin:0 auto;padding:12px 17px 50px}
.page{scroll-margin-top:85px}
.panel{background:white;border-radius:22px;padding:clamp(17px,4vw,30px);box-shadow:0 8px 30px #49318a12;margin-bottom:18px}
.panel h2{margin-top:0;color:var(--purple)}
.panel h3{color:#52399a}
.intro{background:linear-gradient(120deg,#eee8ff,#e4f6ff);border-radius:18px;padding:20px;margin-bottom:18px}
.intro .big{font-size:53px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.card{background:#f8f6ff;border:2px solid #eee8ff;padding:17px;border-radius:16px}
.card .symbol{font-size:32px;color:var(--purple);font-weight:850}
.card p{margin-bottom:0;line-height:1.55}
.example{background:#f1faff;border-left:5px solid var(--blue);padding:14px;border-radius:10px;margin:12px 0}
.tip{background:#edfff7;border-left:5px solid var(--green);padding:13px;border-radius:10px;margin:12px 0}
.big-equation{font-size:clamp(23px,5vw,35px);font-weight:850;color:var(--purple);text-align:center;padding:15px}
.challenge{border:2px solid #eee8ff;border-radius:17px;padding:18px;margin:13px 0}
.items{display:flex;gap:10px;flex-wrap:wrap;margin:15px 0}
.item{padding:12px 15px;border:2px solid #ded5f6;background:#faf8ff;border-radius:13px;font-size:17px;font-weight:700;cursor:grab;user-select:none;touch-action:manipulation}
.item.selected{border-color:var(--purple);background:#eee7ff}
.item:focus{outline:3px solid #aa91ee}
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.zone{border:3px dashed #b9a8e9;border-radius:17px;min-height:130px;padding:14px;background:#faf8ff;text-align:center}
.zone h3{margin:0 0 10px}
.zone.over{background:#eee7ff;border-color:var(--purple)}
.zone .items{justify-content:center}
.zone .item{font-size:14px;padding:7px 10px}
.feedback{padding:13px;border-radius:12px;margin:12px 0;font-weight:700;display:none}
.feedback.good{display:block;background:#e5fff3;color:#137b50}
.feedback.bad{display:block;background:#fff0f1;color:#b33a50}
.feedback.info{display:block;background:#edf5ff;color:#285b9b}
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:14px 0}
.option{background:#f7f4ff;border:2px solid #e7defa;border-radius:13px;padding:13px;text-align:left;font-weight:700;color:var(--dark)}
.option:hover:not(:disabled){border-color:var(--purple);background:#f0eaff}
.option.correct{background:#e4fff1;border-color:#31bb80;color:#137b50}
.option.wrong{background:#fff0f1;border-color:#e45c70;color:#b33a50}
.answer-row{padding:13px;border:2px solid #eee8ff;border-radius:12px;margin:10px 0}
.answer-row.correct{border-color:#31bb80;background:#edfff6}
.answer-row.wrong{border-color:#e45c70;background:#fff0f1}
.answer-row select{width:100%;margin-top:9px;padding:12px;border-radius:10px;border:2px solid #ddd4f3;font:inherit;background:white}
.answer-row.correct select{border-color:#31bb80}
.answer-row.wrong select{border-color:#e45c70}
.answer-status{font-size:13px;font-weight:750;margin-top:7px}
.symbol-match{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:center;margin:10px 0}
.venn{position:relative;height:220px;max-width:480px;margin:20px auto;display:flex;justify-content:center;align-items:center}
.circle{position:absolute;width:190px;height:170px;border-radius:50%;border:3px solid #7453cf;background:#9477ed44;display:flex;align-items:center;justify-content:center;font-weight:800;padding:20px}
.circle.left{left:calc(50% - 170px);background:#f17ca644}
.circle.right{right:calc(50% - 170px);background:#58b9e966}
.venn-center{z-index:2;font-weight:900;color:#42278d;font-size:20px}
.action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;align-items:center}
.small{color:#706b80;font-size:13px}
.hidden{display:none!important}
.progress-mini{height:8px;background:#eee9f9;border-radius:20px;overflow:hidden;margin:10px 0}
.progress-mini span{display:block;height:100%;background:var(--purple);transition:.3s}
.drag-pool{display:flex;gap:10px;flex-wrap:wrap;padding:12px;background:#f8f6ff;border-radius:15px;min-height:70px}
.drag-target{border:3px dashed #9d85df;border-radius:16px;text-align:center;padding:20px;min-height:120px;background:#faf8ff}
.drag-target.over{background:#eee7ff;border-color:var(--purple)}
.drag-target .items{justify-content:center}
.result-number{text-align:center;font-size:clamp(30px,7vw,53px);font-weight:900;color:var(--purple);margin:14px 0}
.result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.result-stat{background:#f5f1ff;border-radius:15px;padding:15px;text-align:center}
.result-stat strong{font-size:25px;display:block;color:var(--purple)}
footer{text-align:center;color:#827a97;padding:20px;font-size:13px}
@media(max-width:520px){
nav button{font-size:12px;padding:9px}
.symbol-match{grid-template-columns:1fr}
.circle{width:155px;height:145px}
.circle.left{left:calc(50% - 140px)}
.circle.right{right:calc(50% - 140px)}
.item{font-size:15px;padding:10px}
}
</style>
</head>
<body>
<header class="top">
<h1>🍎 Misión: El Universo de los Conjuntos</h1>
<p>¡Explora, aprende, juega y conviértete en un maestro de las matemáticas!</p>
<div class="progress-wrap">
<div class="progress-label"><span>Tu aventura de aprendizaje</span><strong id="progressText">0%</strong></div>
<div class="progress"><span id="progressBar"></span></div>
</div>
</header>
<div class="stats">
<div class="stat">⭐ Puntos: <span id="score">0</span></div>
<div class="stat">🏆 Nivel: <span id="level">1</span></div>
<div class="stat">🎯 Retos: <span id="completed">0</span>/5</div>
</div>
<nav id="mainNav">
<button class="active" data-page="learn">📚 Aprender</button>
<button data-page="symbols">🔣 Símbolos</button>
<button data-page="classify">🍎 Clasificar</button>
<button data-page="venn">⭕ Diagramas</button>
<button data-page="quiz">🏆 Gran reto</button>
</nav>
<main>
<!-- APRENDER -->
<section id="learn" class="page">
<div class="intro">
<div class="big">🌎</div>
<h2>¡Bienvenido, explorador!</h2>
<p>Imagina que tienes una caja llena de juguetes, frutas o animales. Si agrupas los elementos que tienen algo en común, ¡estás formando conjuntos!</p>
<p><strong>Tu misión:</strong> aprender qué son los conjuntos y superar cinco desafíos matemáticos.</p>
</div>
<div class="panel">
<h2>1. ¿Qué es la teoría de conjuntos?</h2>
<p>La <strong>teoría de conjuntos</strong> es una parte de las matemáticas que estudia las agrupaciones de objetos o elementos. A cada agrupación la llamamos <strong>conjunto</strong>.</p>
<div class="example"><strong>Ejemplo:</strong> A = {🍎, 🍌, 🍇, 🍊}. Este es un conjunto formado por frutas.</div>
<h3>¿Qué debemos saber?</h3>
<ul>
<li>Los conjuntos se representan generalmente con letras mayúsculas: A, B, C...</li>
<li>Sus elementos se escriben entre llaves: { }.</li>
<li>Los elementos pueden ser números, letras, animales, objetos, etc.</li>
<li>En un conjunto no importa el orden de los elementos.</li>
<li>No se cuentan elementos repetidos más de una vez.</li>
</ul>
</div>
<div class="panel">
<h2>2. ¿Cómo se representan los conjuntos?</h2>
<div class="grid">
<div class="card"><div class="symbol">A = {1, 2, 3}</div><strong>Por extensión</strong><p>Escribimos todos los elementos del conjunto.</p></div>
<div class="card"><div class="symbol">A = {x | x es par}</div><strong>Por comprensión</strong><p>Describimos la característica que cumplen sus elementos.</p></div>
<div class="card"><div class="symbol">⭕</div><strong>Diagrama de Venn</strong><p>Representamos los conjuntos mediante círculos y colocamos dentro sus elementos.</p></div>
</div>
<div class="example">Ejemplo por comprensión: A = {x | x es una vocal}. Por extensión: A = {a, e, i, o, u}.</div>
</div>
<div class="panel">
<h2>3. Tipos de conjuntos</h2>
<div class="grid">
<div class="card"><div class="symbol">∅</div><strong>Conjunto vacío</strong><p>No tiene elementos. Ejemplo: los meses del año con 40 días.</p></div>
<div class="card"><div class="symbol">{1,2,3}</div><strong>Conjunto finito</strong><p>Tiene una cantidad limitada de elementos.</p></div>
<div class="card"><div class="symbol">ℕ</div><strong>Conjunto infinito</strong><p>Tiene infinitos elementos. Ejemplo: los números naturales.</p></div>
<div class="card"><div class="symbol">U</div><strong>Conjunto universal</strong><p>Contiene todos los elementos que se consideran en un ejercicio.</p></div>
<div class="card"><div class="symbol">A = B</div><strong>Conjuntos iguales</strong><p>Tienen exactamente los mismos elementos.</p></div>
<div class="card"><div class="symbol">A ⊂ B</div><strong>Subconjunto propio</strong><p>Todos los elementos de A están en B y A es diferente de B.</p></div>
<div class="card"><div class="symbol">A ∩ B = ∅</div><strong>Disjuntos</strong><p>No tienen elementos en común.</p></div>
<div class="card"><div class="symbol">{7}</div><strong>Conjunto unitario</strong><p>Tiene exactamente un elemento.</p></div>
</div>
</div>
<div class="panel">
<h2>4. Operaciones entre conjuntos</h2>
<div class="card">
<h3>Unión (∪)</h3><p>Reúne los elementos de ambos conjuntos sin repetirlos.</p>
<div class="big-equation">A = {1,2,3} · B = {3,4,5}</div>
<div class="big-equation">A ∪ B = {1,2,3,4,5}</div>
</div>
<div class="card">
<h3>Intersección (∩)</h3><p>Son los elementos que tienen en común ambos conjuntos.</p>
<div class="big-equation">A ∩ B = {3}</div>
</div>
<div class="card">
<h3>Diferencia (−)</h3><p>Son los elementos que están en el primer conjunto, pero no en el segundo.</p>
<div class="big-equation">A − B = {1,2}</div>
</div>
<div class="card">
<h3>Complemento (Aᶜ)</h3><p>Son los elementos del conjunto universal que no pertenecen a A.</p>
<div class="big-equation">U = {1,2,3,4,5} · A = {1,2}</div>
<div class="big-equation">Aᶜ = {3,4,5}</div>
</div>
<div class="tip">💡 ¡Consejo! Aprende primero qué elementos pertenecen a cada conjunto. Después las operaciones serán mucho más fáciles.</div>
</div>
<div class="action-row">
<button class="btn primary" onclick="go('symbols')">¡Comenzar los retos de símbolos! ➜</button>
</div>
</section>
<!-- SIMBOLOS -->
<section id="symbols" class="page hidden">
<div class="panel">
<h2>🔣 Diccionario de símbolos matemáticos</h2>
<p>Aprende a reconocer los símbolos más importantes de la teoría de conjuntos.</p>
<div class="grid">
<div class="card"><div class="symbol">∈</div><strong>Pertenece</strong><p>El elemento forma parte del conjunto. Ejemplo: 2 ∈ {1,2,3}.</p></div>
<div class="card"><div class="symbol">∉</div><strong>No pertenece</strong><p>El elemento no forma parte del conjunto. Ejemplo: 5 ∉ {1,2,3}.</p></div>
<div class="card"><div class="symbol">⊂</div><strong>Subconjunto propio</strong><p>Todos los elementos de A están en B y A es diferente de B.</p></div>
<div class="card"><div class="symbol">⊆</div><strong>Subconjunto o igual</strong><p>A está contenido en B, permitiendo que sean iguales.</p></div>
<div class="card"><div class="symbol">∪</div><strong>Unión</strong><p>Junta los elementos de dos conjuntos.</p></div>
<div class="card"><div class="symbol">∩</div><strong>Intersección</strong><p>Elementos que tienen en común.</p></div>
<div class="card"><div class="symbol">∅</div><strong>Conjunto vacío</strong><p>Conjunto que no tiene elementos.</p></div>
<div class="card"><div class="symbol">U</div><strong>Universal</strong><p>Conjunto que contiene todos los elementos del universo de estudio.</p></div>
<div class="card"><div class="symbol">−</div><strong>Diferencia</strong><p>Elementos de un conjunto que no están en el otro.</p></div>
<div class="card"><div class="symbol">Aᶜ</div><strong>Complemento</strong><p>Elementos de U que no están en A.</p></div>
<div class="card"><div class="symbol">=</div><strong>Igualdad</strong><p>Dos conjuntos tienen los mismos elementos.</p></div>
<div class="card"><div class="symbol">≠</div><strong>Desigualdad</strong><p>Los conjuntos no son iguales.</p></div>
<div class="card"><div class="symbol">|A|</div><strong>Cardinalidad</strong><p>Cantidad de elementos de A.</p></div>
<div class="card"><div class="symbol">ℕ</div><strong>Naturales</strong><p>Conjunto de números naturales.</p></div>
<div class="card"><div class="symbol">ℤ</div><strong>Enteros</strong><p>Conjunto de números enteros.</p></div>
<div class="card"><div class="symbol">ℝ</div><strong>Reales</strong><p>Conjunto de números reales.</p></div>
</div>
</div>
<div class="panel">
<h2>🎯 Actividad: relaciona el símbolo con su significado</h2>
<p>Selecciona el símbolo correcto para cada definición. Al comprobar, las respuestas correctas aparecerán en verde y las incorrectas en rojo.</p>
<div id="symbolGame"></div>
<div id="symbolFeedback" class="feedback"></div>
<div class="action-row">
<button class="btn primary" onclick="checkSymbols()">Comprobar respuestas</button>
<button class="btn" onclick="go('learn')">← Volver al inicio</button>
<button class="btn" id="symbolNext" disabled onclick="go('classify')">Continuar a Clasificar ➜</button>
</div>
<p class="small" id="symbolHint">Debes responder correctamente las cinco preguntas para continuar.</p>
</div>
</section>
<!-- CLASIFICAR -->
<section id="classify" class="page hidden">
<div class="panel">
<h2>🍎 Misión 1: ¡Organiza los elementos!</h2>
<p>Tenemos dos conjuntos: FRUTAS y ANIMALES. Selecciona un elemento y después selecciona el conjunto correcto. También puedes arrastrarlo si estás en computadora.</p>
<div class="tip">🎮 ¡Cada clasificación correcta vale 10 puntos!</div>
<div id="itemsPool" class="items">
<div class="item" draggable="true" tabindex="0" data-type="fruta" data-name="Manzana">🍎 Manzana</div>
<div class="item" draggable="true" tabindex="0" data-type="animal" data-name="Perro">🐶 Perro</div>
<div class="item" draggable="true" tabindex="0" data-type="fruta" data-name="Plátano">🍌 Plátano</div>
<div class="item" draggable="true" tabindex="0" data-type="animal" data-name="Gato">🐱 Gato</div>
<div class="item" draggable="true" tabindex="0" data-type="fruta" data-name="Uvas">🍇 Uvas</div>
<div class="item" draggable="true" tabindex="0" data-type="animal" data-name="León">🦁 León</div>
<div class="item" draggable="true" tabindex="0" data-type="fruta" data-name="Naranja">🍊 Naranja</div>
<div class="item" draggable="true" tabindex="0" data-type="animal" data-name="Conejo">🐰 Conejo</div>
</div>
<div class="zones">
<div class="zone" data-zone="fruta"><h3>🍓 CONJUNTO FRUTAS</h3><div class="items"></div></div>
<div class="zone" data-zone="animal"><h3>🐾 CONJUNTO ANIMALES</h3><div class="items"></div></div>
</div>
<div id="classFeedback" class="feedback"></div>
<p id="classCount" class="small">Elementos clasificados: 0 de 8</p>
</div>
<div class="panel">
<h2>🧠 Misión 2: ¿Pertenece o no pertenece?</h2>
<p>Observa el conjunto A = {2, 4, 6, 8, 10}. Decide si el número mostrado pertenece o no pertenece al conjunto.</p>
<div class="big-equation">A = {2, 4, 6, 8, 10}</div>
<div id="belongProgress" class="small">Pregunta 1 de 5</div>
<div class="progress-mini"><span id="belongBar" style="width:0%"></span></div>
<div id="belongGame"></div>
<div id="belongFeedback" class="feedback"></div>
<div class="action-row">
<button class="btn" onclick="go('symbols')">← Volver a Símbolos</button>
<button class="btn primary hidden" id="belongNext" onclick="nextBelong()">Siguiente pregunta ➜</button>
<button class="btn primary hidden" id="belongContinue" onclick="go('venn')">¡Terminé! Ir a Diagramas ➜</button>
</div>
</div>
</section>
<!-- DIAGRAMAS -->
<section id="venn" class="page hidden">
<div class="panel">
<h2>⭕ Misión 3: Explora los diagramas de Venn</h2>
<p>Los diagramas de Venn son dibujos que permiten visualizar cómo se relacionan los conjuntos.</p>
<div class="venn">
<div class="circle left">A</div>
<div class="circle right">B</div>
<div class="venn-center">A ∩ B</div>
</div>
<div class="example"><strong>Ejemplo:</strong> A = {1,2,3} y B = {3,4,5}. El número 3 está en ambos conjuntos. Por eso A ∩ B = {3}.</div>
<h3>¡Experimenta con las operaciones!</h3>
<p>Selecciona una operación para descubrir qué elementos resultan.</p>
<div class="options">
<button class="option" onclick="showOperation('union')">A ∪ B — Unión</button>
<button class="option" onclick="showOperation('intersection')">A ∩ B — Intersección</button>
<button class="option" onclick="showOperation('difference')">A − B — Diferencia</button>
<button class="option" onclick="showOperation('complement')">Aᶜ — Complemento</button>
</div>
<div id="operationResult" class="example">Selecciona una operación para ver el resultado.</div>
</div>
<div class="panel">
<h2>🎯 Actividad: resuelve las operaciones</h2>
<p>Responde las cuatro preguntas. Si te equivocas, podrás seleccionar otra respuesta hasta acertar.</p>
<div id="vennProgress" class="small">Pregunta 1 de 4</div>
<div class="progress-mini"><span id="vennBar" style="width:0%"></span></div>
<div id="vennQuestion"></div>
<div id="vennFeedback" class="feedback"></div>
<div class="action-row">
<button class="btn" onclick="go('classify')">← Volver a Clasificar</button>
<button class="btn primary hidden" id="vennNext" onclick="nextVenn()">Siguiente pregunta ➜</button>
<button class="btn primary hidden" id="vennContinue" onclick="go('quiz')">¡Listo! Ir al Gran Reto ➜</button>
</div>
</div>
</section>
<!-- GRAN RETO -->
<section id="quiz" class="page hidden">
<div class="panel">
<h2>🏆 Gran desafío: ¡Demuestra lo que sabes!</h2>
<p>La prueba final tiene 10 preguntas de conocimientos y 3 desafíos interactivos de arrastrar y clasificar.</p>
<div class="tip">⭐ Cada respuesta correcta vale 10 puntos. Puedes corregir tus errores antes de avanzar.</div>
<div id="quizArea"></div>
<div id="quizFeedback" class="feedback"></div>
<div class="action-row">
<button class="btn" onclick="go('venn')">← Volver a Diagramas</button>
<button class="btn primary" id="quizNext" onclick="nextQuiz()">Comenzar desafío ➜</button>
</div>
</div>
<div id="finalResult" class="panel hidden">
<h2>🎉 ¡Felicidades! Has terminado el curso</h2>
<div style="font-size:55px;text-align:center">🏆🌟🎓</div>
<h3 id="finalTitle" style="text-align:center"></h3>
<p id="finalText" style="text-align:center"></p>
<div class="result-number" id="finalScore"></div>
<div class="result-grid">
<div class="result-stat"><strong id="finalCorrect">0</strong><span>Respuestas correctas</span></div>
<div class="result-stat"><strong id="finalWrong">0</strong><span>Errores en la prueba</span></div>
<div class="result-stat"><strong id="finalPercent">0%</strong><span>Porcentaje de errores</span></div>
<div class="result-stat"><strong id="globalPercent">0%</strong><span>Errores de todo el curso</span></div>
</div>
<div class="example" id="finalExplanation"></div>
<h3>¿Qué deseas hacer ahora?</h3>
<div class="action-row">
<button class="btn primary" onclick="startFinalAgain()">🔄 Repetir la prueba</button>
<button class="btn" onclick="go('learn')">🏠 Volver al inicio</button>
</div>
</div>
</section>
</main>
<footer>🌟 Misión: El Universo de los Conjuntos · Aprende matemáticas jugando 🌟</footer>
<script>
/* =========================================
ESTADO GENERAL Y NAVEGACIÓN
========================================= */
let score=0;
let completed=new Set();
let attempts=0;
let errors=0;
let finalAttempts=0;
let finalErrors=0;
function updateStats(){
document.getElementById("score").textContent=score;
document.getElementById("level").textContent=Math.min(5,1+Math.floor(score/40));
document.getElementById("completed").textContent=completed.size;
const percent=Math.round(completed.size/5*100);
document.getElementById("progressText").textContent=percent+"%";
document.getElementById("progressBar").style.width=percent+"%";
}
function award(id,points){
if(completed.has(id))return;
completed.add(id);
score+=points;
updateStats();
}
function recordAttempt(correct,isFinal=false){
attempts++;
if(isFinal)finalAttempts++;
if(!correct){
errors++;
if(isFinal)finalErrors++;
}
}
function percentErrors(wrong,total){
return total?Math.round(wrong/total*100):0;
}
function go(page){
document.querySelectorAll(".page").forEach(p=>p.classList.add("hidden"));
const section=document.getElementById(page);
section.classList.remove("hidden");
document.querySelectorAll("nav button").forEach(b=>{
b.classList.toggle("active",b.dataset.page===page);
});
requestAnimationFrame(()=>{
section.scrollIntoView({behavior:"smooth",block:"start"});
});
}
document.querySelectorAll("nav button").forEach(b=>{
b.addEventListener("click",()=>go(b.dataset.page));
});
/* =========================================
ACTIVIDAD DE SÍMBOLOS
========================================= */
const symbolQuestions=[
{q:"¿Qué símbolo significa que un elemento pertenece a un conjunto?",a:["∈","∉","∪"],correct:"∈"},
{q:"¿Qué símbolo representa la unión?",a:["∩","∪","∅"],correct:"∪"},
{q:"¿Qué símbolo representa la intersección?",a:["⊂","∅","∩"],correct:"∩"},
{q:"¿Qué símbolo representa el conjunto vacío?",a:["∅","∈","⊆"],correct:"∅"},
{q:"¿Qué símbolo significa que un elemento NO pertenece?",a:["∈","∉","∪"],correct:"∉"}
];
let symbolLastValues={};
function buildSymbolGame(){
let html="";
symbolQuestions.forEach((q,i)=>{
html+=`<div class="answer-row" id="symRow${i}">
<strong>${i+1}. ${q.q}</strong>
<select id="sym${i}" onchange="symbolChanged(${i})">
<option value="">Elige un símbolo...</option>
${q.a.map(x=>`<option value="${x}">${x}</option>`).join("")}
</select>
<div class="answer-status" id="symStatus${i}"></div>
</div>`;
});
document.getElementById("symbolGame").innerHTML=html;
symbolLastValues={};
document.getElementById("symbolNext").disabled=true;
}
function symbolChanged(i){
document.getElementById("symRow"+i).className="answer-row";
document.getElementById("symStatus"+i).textContent="Respuesta modificada. Pulsa comprobar.";
document.getElementById("symbolFeedback").className="feedback";
document.getElementById("symbolNext").disabled=true;
}
function checkSymbols(){
let correct=0,answered=0;
symbolQuestions.forEach((q,i)=>{
const value=document.getElementById("sym"+i).value;
const row=document.getElementById("symRow"+i);
const status=document.getElementById("symStatus"+i);
if(value){
answered++;
if(symbolLastValues[i]!==value){
recordAttempt(value===q.correct);
symbolLastValues[i]=value;
}
}
if(value===q.correct){
correct++;
row.className="answer-row correct";
status.textContent="✓ ¡Correcto! Muy bien.";
}else if(value){
row.className="answer-row wrong";
status.textContent="✗ Incorrecto. La respuesta correcta es: "+q.correct;
}else{
row.className="answer-row wrong";
status.textContent="✗ Falta seleccionar una respuesta.";
}
});
const f=document.getElementById("symbolFeedback");
if(correct===5){
f.className="feedback good";
f.textContent="¡Excelente! Las cinco respuestas son correctas. Has dominado los símbolos. ⭐";
award("symbols",30);
document.getElementById("symbolNext").disabled=false;
document.getElementById("symbolHint").textContent="¡Ya puedes continuar a la siguiente actividad!";
}else{
f.className="feedback bad";
f.textContent=`Tienes ${correct} de 5 respuestas correctas. Las respuestas incorrectas están marcadas en rojo. Corrígelas y vuelve a comprobar.`;
document.getElementById("symbolNext").disabled=true;
}
}
buildSymbolGame();
/* =========================================
CLASIFICACIÓN DE FRUTAS Y ANIMALES
========================================= */
let selectedItem=null;
let dragItem=null;
function chooseItem(el){
if(!el||!el.classList.contains("item")||el.parentElement.closest(".zone"))return;
document.querySelectorAll("#itemsPool .item").forEach(x=>x.classList.remove("selected"));
selectedItem=el;
el.classList.add("selected");
}
document.getElementById("itemsPool").addEventListener("click",e=>{
const el=e.target.closest(".item");
if(el)chooseItem(el);
});
document.getElementById("itemsPool").addEventListener("keydown",e=>{
if(e.key==="Enter"||e.key===" "){
const el=e.target.closest(".item");
if(el){e.preventDefault();chooseItem(el);}
}
});
document.addEventListener("dragstart",e=>{
const el=e.target.closest("#itemsPool .item");
if(el){
dragItem=el;
e.dataTransfer.setData("text/plain",el.dataset.name);
}
});
document.querySelectorAll(".zone").forEach(zone=>{
zone.addEventListener("dragover",e=>{
e.preventDefault();zone.classList.add("over");
});
zone.addEventListener("dragleave",()=>zone.classList.remove("over"));
zone.addEventListener("drop",e=>{
e.preventDefault();zone.classList.remove("over");
if(dragItem)placeItem(dragItem,zone);
});
zone.addEventListener("click",()=>{
if(selectedItem)placeItem(selectedItem,zone);
});
});
function placeItem(item,zone){
if(!item||!zone||item.parentElement.closest(".zone"))return;
if(item.dataset.type===zone.dataset.zone){
recordAttempt(true);
zone.querySelector(".items").appendChild(item);
item.classList.remove("selected");
selectedItem=null;
dragItem=null;
const f=document.getElementById("classFeedback");
f.className="feedback good";
f.textContent="¡Muy bien! "+item.dataset.name+" pertenece a este conjunto. 🎉";
const n=document.querySelectorAll(".zone .item").length;
document.getElementById("classCount").textContent=`Elementos clasificados: ${n} de 8`;
if(n===8){
award("classify",40);
f.textContent="¡Misión superada! Clasificaste correctamente los 8 elementos. +40 puntos ⭐";
}
}else{
recordAttempt(false);
const f=document.getElementById("classFeedback");
f.className="feedback bad";
f.textContent="¡No es ese conjunto! "+item.dataset.name+" no pertenece aquí. Inténtalo en el otro conjunto. 💡";
}
}
/* =========================================
PERTENECE O NO PERTENECE
========================================= */
const belongQuestions=[
{n:2,correct:true},
{n:5,correct:false},
{n:8,correct:true},
{n:1,correct:false},
{n:10,correct:true}
];
let belongIndex=0;
let belongSolved=false;
function showBelong(){
belongSolved=false;
const q=belongQuestions[belongIndex];
document.getElementById("belongProgress").textContent=`Pregunta ${belongIndex+1} de ${belongQuestions.length}`;
document.getElementById("belongBar").style.width=(belongIndex/belongQuestions.length*100)+"%";
document.getElementById("belongGame").innerHTML=`
<div class="challenge">
<h3>¿El número ${q.n} pertenece al conjunto A?</h3>
<div class="options">
<button class="option" onclick="answerBelong(true,this)">Sí, pertenece (∈)</button>
<button class="option" onclick="answerBelong(false,this)">No pertenece (∉)</button>
</div>
</div>`;
document.getElementById("belongFeedback").className="feedback";
document.getElementById("belongNext").classList.add("hidden");
document.getElementById("belongContinue").classList.add("hidden");
}
function answerBelong(answer,btn){
if(belongSolved)return;
const q=belongQuestions[belongIndex];
const correct=answer===q.correct;
recordAttempt(correct);
if(correct){
belongSolved=true;
btn.classList.add("correct");
document.querySelectorAll("#belongGame .option").forEach(b=>b.disabled=true);
const f=document.getElementById("belongFeedback");
f.className="feedback good";
f.textContent="¡Correcto! Has identificado bien la pertenencia. ⭐";
if(belongIndex===belongQuestions.length-1){
document.getElementById("belongBar").style.width="100%";
award("belong",30);
document.getElementById("belongContinue").classList.remove("hidden");
f.textContent="¡Excelente! Terminaste las cinco preguntas. +30 puntos. Ya puedes ir a Diagramas.";
}else{
document.getElementById("belongNext").classList.remove("hidden");
}
}else{
btn.classList.add("wrong");
const f=document.getElementById("belongFeedback");
f.className="feedback bad";
f.textContent="Esa respuesta no es correcta. La opción está marcada en rojo. ¡Puedes intentarlo de nuevo!";
}
}
function nextBelong(){
if(!belongSolved)return;
belongIndex++;
showBelong();
}
showBelong();
/* =========================================
OPERACIONES Y DIAGRAMAS DE VENN
========================================= */
function showOperation(type){
const data={
union:["A ∪ B","{1, 2, 3, 4, 5}","Se juntan todos los elementos de A y B sin repetir.","A={1,2,3} y B={3,4,5}."],
intersection:["A ∩ B","{3}","Solo aparece el elemento que está en los dos conjuntos.","A={1,2,3} y B={3,4,5}."],
difference:["A − B","{1, 2}","Son los elementos que están en A, pero no en B.","A={1,2,3} y B={3,4,5}."],
complement:["Aᶜ","{4, 5}","Son los elementos de U que no están en A.","U={1,2,3,4,5} y A={1,2,3}."]
};
const d=data[type];
document.getElementById("operationResult").innerHTML=`<strong>${d[0]} — ${d[3]}</strong><div class="big-equation">${d[1]}</div>${d[2]}`;
}
const vennQuestions=[
{q:"Si A={1,2,3} y B={3,4,5}, ¿cuál es A ∪ B?",a:["{3}","{1,2,3,4,5}","{1,2}"],c:1,why:"La unión reúne todos los elementos de ambos conjuntos sin repetir."},
{q:"Si A={1,2,3} y B={3,4,5}, ¿cuál es A ∩ B?",a:["{1,2,3,4,5}","{1,2}","{3}"],c:2,why:"La intersección contiene únicamente los elementos comunes: el número 3."},
{q:"Si A={1,2,3} y B={3,4,5}, ¿cuál es A − B?",a:["{1,2}","{3,4,5}","{1,2,3,4,5}"],c:0,why:"La diferencia A−B contiene los elementos de A que no están en B."},
{q:"Si U={1,2,3,4,5} y A={1,2,3}, ¿cuál es Aᶜ?",a:["{1,2,3}","{4,5}","{3,4,5}"],c:1,why:"El complemento contiene los elementos del universal que no están en A."}
];
let vennIndex=0;
let vennSolved=false;
function renderVennQuestion(){
vennSolved=false;
const q=vennQuestions[vennIndex];
document.getElementById("vennProgress").textContent=`Pregunta ${vennIndex+1} de ${vennQuestions.length}`;
document.getElementById("vennBar").style.width=(vennIndex/vennQuestions.length*100)+"%";
document.getElementById("vennQuestion").innerHTML=`
<div class="challenge"><h3>${q.q}</h3>
<div class="options">${q.a.map((a,i)=>`<button class="option" onclick="answerVenn(${i},this)">${String.fromCharCode(65+i)}) ${a}</button>`).join("")}</div>
</div>`;
document.getElementById("vennFeedback").className="feedback";
document.getElementById("vennNext").classList.add("hidden");
document.getElementById("vennContinue").classList.add("hidden");
}
function answerVenn(i,btn){
if(vennSolved)return;
const q=vennQuestions[vennIndex];
if(i===q.c){
recordAttempt(true);
vennSolved=true;
btn.classList.add("correct");
document.querySelectorAll("#vennQuestion .option").forEach(b=>b.disabled=true);
const f=document.getElementById("vennFeedback");
f.className="feedback good";
f.textContent="¡Correcto! "+q.why;
if(vennIndex===vennQuestions.length-1){
document.getElementById("vennBar").style.width="100%";
award("venn",30);
document.getElementById("vennContinue").classList.remove("hidden");
f.textContent="¡Terminaste las cuatro operaciones! +30 puntos. Ya puedes comenzar el Gran Reto.";
}else{
document.getElementById("vennNext").classList.remove("hidden");
}
}else{
recordAttempt(false);
btn.classList.add("wrong");
const f=document.getElementById("vennFeedback");
f.className="feedback bad";
f.textContent="¡Esa respuesta es incorrecta! Está marcada en rojo. Piensa en la operación y prueba otra opción.";
}
}
function nextVenn(){
if(!vennSolved)return;
vennIndex++;
renderVennQuestion();
}
renderVennQuestion();
/* =========================================
GRAN RETO: 10 PREGUNTAS
========================================= */
const quizQuestions=[
{q:"¿Qué es un conjunto?",a:["Una agrupación de elementos","Una operación matemática","Un número"],c:0,e:"Un conjunto es una agrupación bien definida de elementos."},
{q:"¿Con qué símbolos se escriben los elementos de un conjunto?",a:["( )","[ ]","{ }"],c:2,e:"Los elementos se escriben entre llaves."},
{q:"¿Qué símbolo significa pertenece?",a:["∈","∪","∅"],c:0,e:"∈ indica que un elemento pertenece al conjunto."},
{q:"¿Cuál representa un conjunto vacío?",a:["{1,2}","∅","{a}"],c:1,e:"El conjunto vacío no tiene ningún elemento."},
{q:"Si A={1,2,3}, ¿el 2 pertenece a A?",a:["Sí","No","No se puede saber"],c:0,e:"El número 2 está dentro de A."},
{q:"¿Qué operación reúne todos los elementos?",a:["Intersección","Unión","Diferencia"],c:1,e:"La unión reúne los elementos de los conjuntos sin repetir."},
{q:"Si A={1,2,3} y B={3,4}, ¿cuál es A ∩ B?",a:["{1,2,3,4}","{1,2}","{3}"],c:2,e:"El 3 es el único elemento que comparten."},
{q:"¿Qué es un conjunto infinito?",a:["Tiene un elemento","Tiene infinitos elementos","No tiene elementos"],c:1,e:"Los números naturales son un ejemplo de conjunto infinito."},
{q:"¿Qué es un subconjunto?",a:["Un conjunto cuyos elementos están contenidos en otro","Un conjunto sin elementos","Un conjunto universal"],c:0,e:"Todos los elementos del subconjunto también pertenecen al conjunto mayor."},
{q:"¿Qué es la intersección?",a:["Todos los elementos juntos","Los elementos comunes","Los elementos que no pertenecen"],c:1,e:"La intersección contiene únicamente los elementos comunes."}
];
let quizIndex=0;
let quizCorrect=0;
let quizSolved=false;
let quizStarted=false;
function renderQuiz(){
const q=quizQuestions[quizIndex];
quizSolved=false;
document.getElementById("quizArea").innerHTML=`
<p><strong>Pregunta ${quizIndex+1} de ${quizQuestions.length}</strong></p>
<div class="progress-mini"><span style="width:${quizIndex/quizQuestions.length*100}%"></span></div>
<div class="challenge"><h3>${q.q}</h3>
<div class="options">${q.a.map((a,i)=>`<button class="option" onclick="answerQuiz(${i},this)">${String.fromCharCode(65+i)}) ${a}</button>`).join("")}</div>
</div>`;
document.getElementById("quizFeedback").className="feedback";
document.getElementById("quizNext").classList.add("hidden");
}
function nextQuiz(){
if(!quizStarted){
quizStarted=true;
quizIndex=0;
quizCorrect=0;
startFinalAgain(false);
quizStarted=true;
renderQuiz();
return;
}
if(quizIndex<quizQuestions.length-1){
quizIndex++;
renderQuiz();
}else{
startFinalDrag();
}
}
function answerQuiz(i,btn){
if(quizSolved)return;
const q=quizQuestions[quizIndex];
if(i===q.c){
recordAttempt(true,true);
quizSolved=true;
quizCorrect++;
btn.classList.add("correct");
document.querySelectorAll("#quizArea .option").forEach(b=>b.disabled=true);
const f=document.getElementById("quizFeedback");
f.className="feedback good";
f.textContent="¡Correcto! ⭐ "+q.e;
document.getElementById("quizNext").textContent=quizIndex===quizQuestions.length-1?"Continuar a los retos de arrastrar ➜":"Siguiente pregunta ➜";
document.getElementById("quizNext").classList.remove("hidden");
}else{
recordAttempt(false,true);
btn.classList.add("wrong");
btn.disabled=true;
const f=document.getElementById("quizFeedback");
f.className="feedback bad";
f.textContent="¡Respuesta incorrecta! Está marcada en rojo. Revisa las opciones y vuelve a intentarlo.";
}
}
/* =========================================
GRAN RETO: 3 ACTIVIDADES DE ARRASTRAR
========================================= */
const finalDragChallenges=[
{
title:"Desafío 1 de 3: arrastra la fruta al conjunto FRUTAS.",
target:"🍎 CONJUNTO DE FRUTAS",
items:[
{label:"🍎 Manzana",good:true},
{label:"🐶 Perro",good:false},
{label:"🚗 Automóvil",good:false}
]
},
{
title:"Desafío 2 de 3: arrastra un número par al conjunto NÚMEROS PARES.",
target:"🔢 NÚMEROS PARES",
items:[
{label:"8",good:true},
{label:"7",good:false},
{label:"3",good:false}
]
},
{
title:"Desafío 3 de 3: arrastra una vocal al conjunto VOCALES.",
target:"🔤 CONJUNTO DE VOCALES",
items:[
{label:"A",good:true},
{label:"B",good:false},
{label:"M",good:false}
]
}
];
let finalDragIndex=0;
let finalDragSolved=false;
let finalCorrect=0;
let finalDragSelected=null;
function startFinalDrag(){
document.getElementById("quizArea").classList.add("hidden");
document.getElementById("quizFeedback").className="feedback";
document.getElementById("quizNext").classList.add("hidden");
finalDragIndex=0;
renderFinalDrag();
}
function renderFinalDrag(){
finalDragSolved=false;
finalDragSelected=null;
const q=finalDragChallenges[finalDragIndex];
document.getElementById("quizArea").classList.remove("hidden");
document.getElementById("quizArea").innerHTML=`
<p><strong>Prueba interactiva: ${finalDragIndex+1} de 3</strong></p>
<div class="progress-mini"><span style="width:${finalDragIndex/3*100}%"></span></div>
<div class="challenge">
<h3>${q.title}</h3>
<p>Selecciona un elemento y toca el recuadro, o arrástralo con el mouse.</p>
<div class="drag-pool" id="finalDragPool">
${q.items.map((item,i)=>`<div class="item" draggable="true" tabindex="0" data-good="${item.good}" data-index="${i}">${item.label}</div>`).join("")}
</div>
<h3 style="margin-top:20px">Coloca aquí el elemento correcto:</h3>
<div class="drag-target" id="finalDragTarget">
<strong>${q.target}</strong>
<div class="items" id="finalDragPlaced"></div>
</div>
</div>`;
document.getElementById("quizNext").classList.add("hidden");
document.getElementById("quizFeedback").className="feedback";
const pool=document.getElementById("finalDragPool");
const target=document.getElementById("finalDragTarget");
pool.addEventListener("click",e=>{
const item=e.target.closest(".item");
if(!item||finalDragSolved)return;
pool.querySelectorAll(".item").forEach(x=>x.classList.remove("selected"));
finalDragSelected=item;
item.classList.add("selected");
});
pool.addEventListener("keydown",e=>{
if((e.key==="Enter"||e.key===" ")&&e.target.classList.contains("item")){
e.preventDefault();
pool.querySelectorAll(".item").forEach(x=>x.classList.remove("selected"));
finalDragSelected=e.target;
e.target.classList.add("selected");
}
});
pool.addEventListener("dragstart",e=>{
const item=e.target.closest(".item");
if(item){
finalDragSelected=item;
e.dataTransfer.setData("text/plain",item.dataset.index);
}
});
target.addEventListener("dragover",e=>{
e.preventDefault();
target.classList.add("over");
});
target.addEventListener("dragleave",()=>target.classList.remove("over"));
target.addEventListener("drop",e=>{
e.preventDefault();
target.classList.remove("over");
if(finalDragSelected)placeFinalDrag(finalDragSelected);
});
target.addEventListener("click",()=>{
if(finalDragSelected)placeFinalDrag(finalDragSelected);
});
}
function placeFinalDrag(item){
if(!item||finalDragSolved)return;
if(item.dataset.good==="true"){
recordAttempt(true,true);
finalDragSolved=true;
finalCorrect++;
item.classList.remove("selected");
document.getElementById("finalDragPlaced").appendChild(item);
document.querySelectorAll("#finalDragPool .item").forEach(x=>x.draggable=false);
document.getElementById("finalDragPool").style.opacity=".5";
const f=document.getElementById("quizFeedback");
f.className="feedback good";
f.textContent="¡Excelente! Elegiste el elemento correcto. 🎉";
const next=document.getElementById("quizNext");
next.textContent=finalDragIndex===2?"Ver mi resultado final 🏆":"Siguiente desafío ➜";
next.onclick = nextFinalDrag;
next.classList.remove("hidden");
}else{
recordAttempt(false,true);
item.classList.add("wrong");
const f=document.getElementById("quizFeedback");
f.className="feedback bad";
f.textContent="¡Ese elemento no pertenece a este conjunto! Está marcado en rojo. Prueba con otro.";
}
}
/* =========================================
RESULTADOS Y REPETICIÓN DE LA PRUEBA
========================================= */
function nextFinalDrag(){
if(!finalDragSolved) return;
if(finalDragIndex < finalDragChallenges.length - 1){
finalDragIndex++;
renderFinalDrag();
}else{
finishQuiz();
}
}
function finishQuiz(){
document.getElementById("quizArea").classList.add("hidden");
document.getElementById("quizFeedback").className="feedback";
document.getElementById("quizNext").classList.add("hidden");
document.getElementById("finalResult").classList.remove("hidden");
const total=quizQuestions.length+finalDragChallenges.length;
const points=finalCorrect*10;
score+=points;
award("final",0);
updateStats();
const wrong=finalErrors;
const errorPercent=percentErrors(wrong,finalAttempts);
const globalPercent=percentErrors(errors,attempts);
let title=finalCorrect>=12?"¡MAESTRO DE LOS CONJUNTOS! 🏆":
finalCorrect>=9?"¡GRAN EXPLORADOR! 🌟":
finalCorrect>=6?"¡BUEN TRABAJO, APRENDIZ! 🚀":
"¡SIGUE PRACTICANDO! 💪";
document.getElementById("finalTitle").textContent=title;
document.getElementById("finalText").textContent=
"¡Has completado todas las actividades del curso! Puedes volver a estudiar o repetir la prueba para mejorar tu resultado.";
document.getElementById("finalScore").textContent=`${finalCorrect} / ${total} aciertos`;
document.getElementById("finalCorrect").textContent=finalCorrect;
document.getElementById("finalWrong").textContent=wrong;
document.getElementById("finalPercent").textContent=errorPercent+"%";
document.getElementById("globalPercent").textContent=globalPercent+"%";
document.getElementById("finalExplanation").textContent=
`En tu prueba final realizaste ${finalAttempts} intentos y tuviste ${wrong} errores. El porcentaje de errores se calcula dividiendo los errores entre todos los intentos. En todo el curso llevas ${errors} errores de ${attempts} intentos.`;
}
function startFinalAgain(resetMetrics=true){
if(resetMetrics){
finalAttempts=0;
finalErrors=0;
quizCorrect=0;
quizIndex=0;
quizSolved=false;
quizStarted=true;
finalCorrect=0;
finalDragIndex=0;
finalDragSolved=false;
document.getElementById("finalResult").classList.add("hidden");
document.getElementById("quizArea").classList.remove("hidden");
document.getElementById("quizNext").classList.remove("hidden");
document.getElementById("quizNext").textContent="Comenzar prueba ➜";
document.getElementById("quizFeedback").className="feedback";
document.getElementById("quizArea").innerHTML="<div class='intro'><h3>¡Vamos de nuevo!</h3><p>Prepárate para responder las 10 preguntas y los 3 desafíos interactivos.</p></div>";
document.getElementById("quizNext").onclick=function(){
quizIndex=0;quizCorrect=0;finalCorrect=0;renderQuiz();
document.getElementById("quizNext").onclick=nextQuiz;
};
go("quiz");
}else{
finalAttempts=0;
finalErrors=0;
quizCorrect=0;
quizIndex=0;
quizSolved=false;
quizStarted=false;
finalCorrect=0;
finalDragIndex=0;
finalDragSolved=false;
}
}
function restartAll(){
score=0;
completed.clear();
attempts=0;
errors=0;
finalAttempts=0;
finalErrors=0;
quizIndex=0;
quizCorrect=0;
quizSolved=false;
quizStarted=false;
finalCorrect=0;
finalDragIndex=0;
belongIndex=0;
vennIndex=0;
updateStats();
resetClassify();
buildSymbolGame();
showBelong();
renderVennQuestion();
document.getElementById("finalResult").classList.add("hidden");
document.getElementById("quizArea").classList.remove("hidden");
document.getElementById("quizNext").classList.remove("hidden");
document.getElementById("quizNext").textContent="Comenzar desafío ➜";
document.getElementById("quizNext").onclick=nextQuiz;
document.getElementById("quizFeedback").className="feedback";
go("learn");
}
/* =========================================
REINICIAR LA CLASIFICACIÓN
========================================= */
function resetClassify(){
const pool=document.getElementById("itemsPool");
document.querySelectorAll(".zone .item").forEach(x=>pool.appendChild(x));
document.querySelectorAll(".zone").forEach(z=>z.classList.remove("over"));
selectedItem=null;
dragItem=null;
document.getElementById("classFeedback").className="feedback";
document.getElementById("classCount").textContent="Elementos clasificados: 0 de 8";
}
document.getElementById("quizNext").onclick=nextQuiz;
updateStats();
</script>
</body>
</html>
Game Source: Misión: El Universo de los Conjuntos
Creator: AstroKoala88
Libraries: none
Complexity: complex (1023 lines, 46.7 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: misi-n-el-universo-de-los-conjuntos-astrokoala88" to link back to the original. Then publish at arcadelab.ai/publish.