🎮ArcadeLab

Misión: El Universo de los Conjuntos

by AstroKoala88
1023 lines46.7 KB
▶ Play
<!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.