Herramienta de pensamiento crítico digital. 5 secciones con retos variados sobre errores de IA, prompting, privacidad y fake news. Cada respuesta va acompañada de una explicación. Al final recibirás una valoración personalizada.
Errores de cálculo y datos
Generalización, incompletud y distorsión
Prompting inteligente
Privacidad y uso responsable
Fake news y desinformación
La IA no calcula como una calculadora: genera texto estadísticamente probable. A veces se equivoca con números, fechas o nombres con total confianza. ¿Sabrías detectarlo?
Lee lo que dijo la IA y elige qué tipo de error cometió:
🤖 La IA dijo:
"La raíz cuadrada de 144 es 13. Por tanto, si un cuadrado tiene área 144 m², su lado mide 13 metros."
Cómo se creó esta herramienta con IA
El proceso completo: desde el diseño conceptual hasta el código, incluyendo los prompts exactos y cómo ejecutar el resultado que te da la IA.
Claude / ChatGPT
Diseño, preguntas y código
Next.js 13+
Framework con App Router
React (useState)
Lógica interactiva
Revisión humana
Verificación pedagógica
📋 Prompts utilizados (en orden)
Diseño conceptual
Quiero crear una herramienta web interactiva para trabajar el pensamiento crítico ante la IA con alumnos de secundaria (12-16 años). La herramienta debe: - Tener 5 secciones temáticas: errores de cálculo de la IA, generalización/distorsión, prompting, privacidad y fake news - Usar tipos de pregunta variados (no solo test): verdadero/falso, identifica el error, mejora el prompt, escenario con toma de decisión y opción múltiple - Dar feedback explicativo después de cada respuesta - Mostrar un resumen al terminar cada sección y una puntuación final con conclusión personalizada - Incluir al menos 3 preguntas por sección (15 en total) Diseña la estructura de datos completa en formato JSON con todos los campos necesarios para implementarla.
Generación de preguntas y situaciones
A partir de la estructura anterior, genera 15 preguntas de pensamiento crítico distribuidas en 5 secciones. Para cada pregunta incluye: - type: 'multi' | 'truefalse' | 'identify' | 'fix' | 'scenario' - q: enunciado de la pregunta - aiText (solo si el tipo es 'identify' o 'fix'): texto de la IA o prompt malo a analizar - opts: array de 2-4 opciones de respuesta - a: respuesta correcta (texto exacto de una de las opciones) - exp: explicación pedagógica de 2-3 líneas que aclare por qué esa es la respuesta y qué error conceptual evitar - points: 2 (todas valen igual) Usa ejemplos reales de errores de IA: alucinaciones con datos históricos, errores de cálculo, generalizaciones sobre adolescentes y tecnología, situaciones de privacidad en el aula y titulares fake.
Generación del código React/Next.js
Convierte los datos anteriores en un componente React para Next.js 13+ (con App Router). Requisitos técnicos: - Archivo page.js con 'use client' al inicio - Importar useState de React y ParticleHero desde '../../components/ParticleHero' - Estado: sIdx (sección actual), qIdx (pregunta actual), phase ('playing'|'section-end'|'finished'), score, sScore, selected, showExp - Renderizado condicional según el tipo de pregunta: • 'multi': 4 botones en columna • 'truefalse': 2 botones grandes en fila • 'identify': caja con texto de la IA + 4 opciones en columna • 'fix': caja con prompt malo + 3 opciones en columna con etiqueta de letra • 'scenario': caja narrativa + opciones en columna - Al responder: marcar correcta (verde) e incorrecta seleccionada (rojo), mostrar explicación, botón "Siguiente" - Entre secciones: pantalla de feedback con puntos de esa sección, mensaje clave y botón continuar - Final: puntuación total, emoji y mensaje personalizado según porcentaje (4 niveles), botón reiniciar - Responsive: sin librerías externas, solo CSS inline - Debajo del juego: sección "Cómo se creó con IA" con los prompts utilizados y guía de implementación - Paleta de colores: teal oscuro (#0f766e, #14b8a6)
Revisión y mejora
Revisa el componente generado y mejora: 1. Asegúrate de que todos los tipos de pregunta tienen UI claramente distinta (no todo igual) 2. Verifica que el feedback de sección resume el aprendizaje clave, no solo la puntuación 3. Comprueba que las explicaciones son pedagógicas (explican el por qué, no solo la respuesta) 4. Añade una sección final "Cómo puedes adaptar esta herramienta" con ejemplos de temas alternativos 5. Haz el diseño completamente responsive para móvil sin media queries complejas (usar flexWrap, minWidth, clamp)
🚀 Cómo ejecutar el resultado que te da la IA
Crea el archivo
En tu proyecto Next.js, crea la ruta: web/app/recursos/pensamiento-critico/page.js
mkdir -p web/app/recursos/pensamiento-criticoPega el código de la IA
Copia la respuesta de la IA en el archivo. Asegúrate de que empieza con 'use client' y los imports correctos.
// Línea 1 del archivo:
'use client'Prueba en local
Lanza el servidor de desarrollo y comprueba que funciona:
cd web && npm run dev
# Abre: http://localhost:3000/recursos/pensamiento-criticoAñade la tarjeta en /recursos
Edita web/app/recursos/page.js y añade el nuevo objeto al array TOOLS con id, emoji, título, descripción y href.
// En el array TOOLS de page.js:
{ id: 'pensamiento-critico', emoji: '🧠', href: '/recursos/pensamiento-critico', ... }Deploy
Haz commit y push para desplegar automáticamente (si usas Vercel u otro CI):
git add web/app/recursos/pensamiento-critico/
git commit -m "feat: recurso pensamiento crítico"
git push origin HEAD:main🔄 Cómo adaptar esta herramienta a otro contexto
Copia el Prompt 2 ("Generación de preguntas") y cambia el tema. En minutos tendrás un cuestionario de pensamiento crítico sobre cualquier materia o contexto.