🔄 Explorador Visual de Equivalencias de Conjuntos con Diagramas de Venn
| Equivalencia |
Ejemplo |
Gráfico |
|
|
![Diagrama Venn]() |
packages = ["matplotlib"]
import asyncio
import random
import json
from js import document, fetch
from pyodide.ffi import create_proxy
from js import Option # Importar constructor de opciones HTML
async def cargar_equivalencias():
response = await fetch("equivalencias.json")
texto = await response.text()
return json.loads(texto)
async def main():
equivalencias = await cargar_equivalencias()
select = document.getElementById("opciones")
for clave, info in equivalencias.items():
opcion = Option.new(info["titulo"], clave)
select.appendChild(opcion)
# Actualizar contenido al cambiar opción
def actualizar_contenido(event=None):
clave = select.value
datos = equivalencias[clave]
document.getElementById("descripcion").innerHTML = datos["descripcion"]
document.getElementById("ejemplo").innerHTML = datos["ejemplo"]
img = document.getElementById("img-operacion")
img.setAttribute("src", datos["img"])
img.setAttribute("alt", datos["titulo"])
document.getElementById("ejemplo-contextual").innerHTML = ""
def generar_ejemplo_contextual(equivalencias, select):
clave = select.value
ejemplos = equivalencias[clave].get("ejemplos_contextuales", [])
if ejemplos:
elegido = random.choice(ejemplos)
document.getElementById("ejemplo-contextual").innerHTML = f"📌 {elegido}"
else:
document.getElementById("ejemplo-contextual").innerHTML = "No hay ejemplos contextuales disponibles."
# Inicializar en la primera carga
document.getElementById("opciones").addEventListener("change", create_proxy(actualizar_contenido))
actualizar_contenido()
# Evento para el botón
btn = document.getElementById("generar-ejemplo")
btn.addEventListener("click", create_proxy(lambda e: generar_ejemplo_contextual(equivalencias, select)))
asyncio.ensure_future(main())