Ruleta actvidad completa en React
This commit is contained in:
+24
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"$schema": "./node_modules/oxlint/configuration_schema.json",
|
||||||
|
"plugins": ["react", "oxc"],
|
||||||
|
"rules": {
|
||||||
|
"react/rules-of-hooks": "error",
|
||||||
|
"react/only-export-components": ["warn", { "allowConstantExport": true }]
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,238 @@
|
|||||||
|
# 🎡 Ruleta Interactiva — SCORM 1.2
|
||||||
|
|
||||||
|
Actividad e-learning interactiva basada en una ruleta con preguntas de cultura general, construida con React, TypeScript, Tailwind CSS y empaquetada como contenido SCORM 1.2.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🛠️ Stack Tecnológico
|
||||||
|
|
||||||
|
| Tecnología | Versión | Uso |
|
||||||
|
|---|---|---|
|
||||||
|
| React | 19 | UI y manejo de estado |
|
||||||
|
| TypeScript | 5 | Tipado estático |
|
||||||
|
| Tailwind CSS | 4 | Estilos utilitarios |
|
||||||
|
| Vite | 6 | Bundler y dev server |
|
||||||
|
| Howler.js | 2 | Manejo de audio |
|
||||||
|
| scorm-again | 3 | Simulador SCORM en desarrollo |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📁 Estructura del Proyecto
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
├── audio/
|
||||||
|
│ ├── ExtendedHowl.ts # Clase que extiende Howl con eventos de timeupdate (250ms)
|
||||||
|
│ ├── AudioController.ts # Controlador global de audio + sonidos precargados
|
||||||
|
│ └── audios.ts # Constantes con rutas de archivos de audio
|
||||||
|
│
|
||||||
|
├── components/
|
||||||
|
│ ├── ui/
|
||||||
|
│ │ └── Button.tsx # Botón reutilizable (variantes: primary, secondary, outline, danger)
|
||||||
|
│ ├── layout/
|
||||||
|
│ │ ├── Header.tsx # Cabecera de la aplicación
|
||||||
|
│ │ └── Footer.tsx # Pie de página
|
||||||
|
│ ├── screens/
|
||||||
|
│ │ ├── Cover.tsx # Pantalla de portada con introducción y botón comenzar
|
||||||
|
│ │ ├── Game.tsx # Pantalla principal del juego
|
||||||
|
│ │ └── Result.tsx # Pantalla de cierre (3 estados)
|
||||||
|
│ └── game/
|
||||||
|
│ ├── Ruleta/
|
||||||
|
│ │ └── RuletaSVG.tsx # Ruleta SVG con 4 secciones de colores
|
||||||
|
│ ├── QuestionModal.tsx # Modal de pregunta con temporizador y feedback
|
||||||
|
│ └── ResultModal.tsx # Modal interno (reservado)
|
||||||
|
│
|
||||||
|
├── data/
|
||||||
|
│ └── preguntas.json # 4 categorías × 8 preguntas + banco genérico
|
||||||
|
│
|
||||||
|
├── hooks/
|
||||||
|
│ ├── useAudio.ts # Hook para consumir el AudioController
|
||||||
|
│ ├── useIntentos.ts # Manejo de intentos con persistencia en sessionStorage
|
||||||
|
│ ├── useRuleta.ts # Lógica completa del juego
|
||||||
|
│ ├── useSCORM.ts # Hook para inicializar y usar SCORM 1.2
|
||||||
|
│ └── useScale.ts # Escalado adaptativo 1920×1080
|
||||||
|
│
|
||||||
|
├── layouts/
|
||||||
|
│ └── MainLayout.tsx # Template principal con escalado adaptativo
|
||||||
|
│
|
||||||
|
├── scorm/
|
||||||
|
│ └── scorm.ts # Funciones SCORM 1.2 con fallback a sessionStorage
|
||||||
|
│
|
||||||
|
├── types/
|
||||||
|
│ └── index.ts # Interfaces TypeScript (Pregunta, Categoria, PreguntasData)
|
||||||
|
│
|
||||||
|
├── App.tsx # Manejo de pantallas y flujo de intentos
|
||||||
|
└── main.tsx # Entry point con simulador SCORM en desarrollo
|
||||||
|
|
||||||
|
public/
|
||||||
|
├── audios/
|
||||||
|
│ ├── click.mp3 # Sonido de clic en botones
|
||||||
|
│ ├── wheel-spin.mp3 # Sonido al girar la ruleta
|
||||||
|
│ ├── feedback-correct.mpeg # Sonido de respuesta correcta
|
||||||
|
│ └── feedback-incorrect.mpeg # Sonido de respuesta incorrecta
|
||||||
|
├── img/
|
||||||
|
│ ├── ruleta.png # Imagen de ruleta (respaldo)
|
||||||
|
│ └── indicador.png # Imagen de indicador (respaldo)
|
||||||
|
└── imsmanifest.xml # Manifiesto SCORM 1.2 requerido por el LMS
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎮 Flujo de la Actividad
|
||||||
|
|
||||||
|
```
|
||||||
|
Portada (Cover)
|
||||||
|
│
|
||||||
|
│ clic en "Comenzar" → consume 1 intento + sonido click
|
||||||
|
▼
|
||||||
|
Juego (Game)
|
||||||
|
│
|
||||||
|
│ clic en la ruleta → gira + sonido wheel-spin (4s)
|
||||||
|
▼
|
||||||
|
Detecta sección (4 categorías × 90°)
|
||||||
|
│
|
||||||
|
▼
|
||||||
|
Modal de Pregunta (temporizador 30s)
|
||||||
|
├── Respuesta correcta → sonido correct → feedback → círculo de progreso
|
||||||
|
├── Respuesta incorrecta → sonido incorrect → feedback → círculo de progreso
|
||||||
|
└── Tiempo agotado → cuenta como incorrecta → feedback
|
||||||
|
│
|
||||||
|
│ 10 preguntas respondidas
|
||||||
|
▼
|
||||||
|
Pantalla de Resultado
|
||||||
|
├── ≥ 8 correctas → ¡Felicidades! (sin botón)
|
||||||
|
├── < 8 correctas + intentos disponibles → "Casi" + botón Reintentar
|
||||||
|
└── Sin intentos → Mensaje final (persiste al recargar)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🎯 Categorías de Preguntas
|
||||||
|
|
||||||
|
| # | Categoría | Color | Preguntas |
|
||||||
|
|---|---|---|---|
|
||||||
|
| 1 | 🏛️ Historia | Morado `#7C3AED` | 8 |
|
||||||
|
| 2 | 🌍 Geografía | Verde `#059669` | 8 |
|
||||||
|
| 3 | 🔬 Ciencia | Rojo `#DC2626` | 8 |
|
||||||
|
| 4 | 🎨 Arte y Literatura | Naranja `#D97706` | 8 |
|
||||||
|
|
||||||
|
> Las preguntas se seleccionan aleatoriamente sin repetir dentro de cada categoría.
|
||||||
|
> Si se agotan las preguntas de una categoría, se usa el **banco genérico** (5 preguntas).
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🏆 Criterios de Aprobación
|
||||||
|
|
||||||
|
| Criterio | Valor |
|
||||||
|
|---|---|
|
||||||
|
| Preguntas por actividad | 10 |
|
||||||
|
| Mínimo para aprobar | 8 correctas |
|
||||||
|
| Intentos totales | 3 |
|
||||||
|
| Tiempo por pregunta | 30 segundos |
|
||||||
|
| Tiempo agotado | Cuenta como incorrecta |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔄 Sistema de Intentos
|
||||||
|
|
||||||
|
- El intento se consume al hacer clic en **"Comenzar"**
|
||||||
|
- Se persiste en `sessionStorage`, por lo que recargar la página **no** recupera el intento
|
||||||
|
- Al agotar los 3 intentos, la pantalla de cierre final persiste aunque se recargue
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📐 Escalado Adaptativo
|
||||||
|
|
||||||
|
El hook `useScale` escala toda la actividad a una resolución base de **1920×1080** manteniendo proporciones en cualquier pantalla:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
const BASE_WIDTH = 1920
|
||||||
|
const BASE_HEIGHT = 1080
|
||||||
|
const scale = Math.min(window.innerWidth / BASE_WIDTH, window.innerHeight / BASE_HEIGHT)
|
||||||
|
```
|
||||||
|
|
||||||
|
> Solo orientación horizontal. No aplica diseño para pantallas verticales.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🔊 Audio
|
||||||
|
|
||||||
|
Los audios se precargan al iniciar la aplicación mediante `AudioController`:
|
||||||
|
|
||||||
|
```ts
|
||||||
|
sounds.click?.play() // Botones de navegación
|
||||||
|
sounds.wheelSpin?.play() // Al girar la ruleta
|
||||||
|
sounds.correct?.play() // Respuesta correcta
|
||||||
|
sounds.incorrect?.play() // Respuesta incorrecta
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📡 SCORM 1.2
|
||||||
|
|
||||||
|
El módulo SCORM (`src/scorm/scorm.ts`) implementa todas las funciones estándar con **fallback automático a `sessionStorage`** cuando no hay LMS disponible:
|
||||||
|
|
||||||
|
| Función | CMI Key |
|
||||||
|
|---|---|
|
||||||
|
| `initSCORM()` | Inicializa y establece status `incomplete` |
|
||||||
|
| `getStudentName()` | `cmi.core.student_name` |
|
||||||
|
| `getLessonStatus()` / `setLessonStatus()` | `cmi.core.lesson_status` |
|
||||||
|
| `getLessonLocation()` / `setLessonLocation()` | `cmi.core.lesson_location` |
|
||||||
|
| `getScore()` / `setScore()` | `cmi.core.score.raw/max/min` |
|
||||||
|
| `getSuspendData()` / `setSuspendData()` | `cmi.suspend_data` |
|
||||||
|
| `getScormData()` / `setScormData()` | Cualquier clave CMI |
|
||||||
|
| `finishSCORM()` | Calcula `session_time` en HH:MM:SS y cierra |
|
||||||
|
| `completeLesson()` | Establece status `completed` |
|
||||||
|
|
||||||
|
> En desarrollo, `scorm-again` simula el `window.API` del LMS automáticamente.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🧩 Componente Button
|
||||||
|
|
||||||
|
```tsx
|
||||||
|
<Button variant="primary" size="lg" onClick={fn}>Texto</Button>
|
||||||
|
<Button variant="secondary" size="md">Texto</Button>
|
||||||
|
<Button variant="outline" size="sm">Texto</Button>
|
||||||
|
<Button variant="danger" disabled>Texto</Button>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Comandos
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Instalar dependencias
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Desarrollo
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# Build para producción
|
||||||
|
npm run build
|
||||||
|
|
||||||
|
# Verificar TypeScript
|
||||||
|
npx tsc --noEmit
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📦 Empaquetado SCORM
|
||||||
|
|
||||||
|
Para publicar en un LMS (Moodle, Cornerstone, etc.):
|
||||||
|
|
||||||
|
1. Ejecutar `npm run build`
|
||||||
|
2. Abrir la carpeta `dist/` — el `imsmanifest.xml` se copia automáticamente
|
||||||
|
3. Seleccionar **todo** el contenido de `dist/` y comprimir en un `.zip`
|
||||||
|
4. Subir el `.zip` al LMS como paquete SCORM 1.2
|
||||||
|
|
||||||
|
> El `masteryscore` está configurado en **80** en el `imsmanifest.xml`.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 Pendientes
|
||||||
|
|
||||||
|
- [ ] Reemplazar categorías y preguntas de cultura general por el contenido real del cliente
|
||||||
|
- [ ] Integrar `setScore` y `completeLesson` con SCORM al finalizar la actividad
|
||||||
|
- [ ] Pruebas en LMS real (Moodle)
|
||||||
|
- [ ] Definir diseño visual final (colores, logo, imágenes del cliente)
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"folders": [
|
||||||
|
{
|
||||||
|
"path": "."
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"settings": {}
|
||||||
|
}
|
||||||
+13
@@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>ruleta</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+2384
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,29 @@
|
|||||||
|
{
|
||||||
|
"name": "ruleta",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "oxlint",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"howler": "^2.2.4",
|
||||||
|
"react": "^19.2.7",
|
||||||
|
"react-dom": "^19.2.7",
|
||||||
|
"scorm-again": "^3.1.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@tailwindcss/vite": "^4.3.3",
|
||||||
|
"@types/howler": "^2.2.13",
|
||||||
|
"@types/react": "^19.2.17",
|
||||||
|
"@types/react-dom": "^19.2.3",
|
||||||
|
"@vitejs/plugin-react": "^6.0.3",
|
||||||
|
"oxlint": "^1.71.0",
|
||||||
|
"tailwindcss": "^4.3.3",
|
||||||
|
"typescript": "^7.0.2",
|
||||||
|
"vite": "^8.1.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 9.3 KiB |
@@ -0,0 +1,24 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<symbol id="bluesky-icon" viewBox="0 0 16 17">
|
||||||
|
<g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
|
||||||
|
<defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="discord-icon" viewBox="0 0 20 19">
|
||||||
|
<path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="documentation-icon" viewBox="0 0 21 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="github-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="social-icon" viewBox="0 0 20 20">
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
|
||||||
|
<path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
|
||||||
|
</symbol>
|
||||||
|
<symbol id="x-icon" viewBox="0 0 19 19">
|
||||||
|
<path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
|
||||||
|
</symbol>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 410 B |
Binary file not shown.
|
After Width: | Height: | Size: 973 B |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -0,0 +1,30 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<manifest identifier="ruleta_scorm_12" version="1.0"
|
||||||
|
xmlns="http://www.imsproject.org/xsd/imscp_rootv1p1p2"
|
||||||
|
xmlns:adlcp="http://www.adlnet.org/xsd/adlcp_rootv1p2"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://www.imsproject.org/xsd/imscp_rootv1p1p2 imscp_rootv1p1p2.xsd
|
||||||
|
http://www.adlnet.org/xsd/adlcp_rootv1p2 adlcp_rootv1p2.xsd">
|
||||||
|
|
||||||
|
<metadata>
|
||||||
|
<schema>ADL SCORM</schema>
|
||||||
|
<schemaversion>1.2</schemaversion>
|
||||||
|
</metadata>
|
||||||
|
|
||||||
|
<organizations default="ruleta_org">
|
||||||
|
<organization identifier="ruleta_org">
|
||||||
|
<title>Ruleta Interactiva</title>
|
||||||
|
<item identifier="item_1" identifierref="resource_1">
|
||||||
|
<title>Ruleta Interactiva</title>
|
||||||
|
<adlcp:masteryscore>80</adlcp:masteryscore>
|
||||||
|
</item>
|
||||||
|
</organization>
|
||||||
|
</organizations>
|
||||||
|
|
||||||
|
<resources>
|
||||||
|
<resource identifier="resource_1" type="webcontent" adlcp:scormtype="sco" href="index.html">
|
||||||
|
<file href="index.html"/>
|
||||||
|
</resource>
|
||||||
|
</resources>
|
||||||
|
|
||||||
|
</manifest>
|
||||||
+184
@@ -0,0 +1,184 @@
|
|||||||
|
.counter {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--accent);
|
||||||
|
background: var(--accent-bg);
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-color: var(--accent-border);
|
||||||
|
}
|
||||||
|
&:focus-visible {
|
||||||
|
outline: 2px solid var(--accent);
|
||||||
|
outline-offset: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.base,
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
inset-inline: 0;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base {
|
||||||
|
width: 170px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework,
|
||||||
|
.vite {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.framework {
|
||||||
|
z-index: 1;
|
||||||
|
top: 34px;
|
||||||
|
height: 28px;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
|
||||||
|
scale(1.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vite {
|
||||||
|
z-index: 0;
|
||||||
|
top: 107px;
|
||||||
|
height: 26px;
|
||||||
|
width: auto;
|
||||||
|
transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
|
||||||
|
scale(0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#center {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
place-content: center;
|
||||||
|
place-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 32px 20px 24px;
|
||||||
|
gap: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
flex: 1 1 0;
|
||||||
|
padding: 32px;
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
padding: 24px 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
flex-direction: column;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#docs {
|
||||||
|
border-right: 1px solid var(--border);
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
border-right: none;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#next-steps ul {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
gap: 8px;
|
||||||
|
margin: 32px 0 0;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--text-h);
|
||||||
|
font-size: 16px;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--social-bg);
|
||||||
|
display: flex;
|
||||||
|
padding: 6px 12px;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: box-shadow 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow);
|
||||||
|
}
|
||||||
|
.button-icon {
|
||||||
|
height: 18px;
|
||||||
|
width: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
margin-top: 20px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
li {
|
||||||
|
flex: 1 1 calc(50% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#spacer {
|
||||||
|
height: 88px;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
@media (max-width: 1024px) {
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ticks {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&::before,
|
||||||
|
&::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -4.5px;
|
||||||
|
border: 5px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
left: 0;
|
||||||
|
border-left-color: var(--border);
|
||||||
|
}
|
||||||
|
&::after {
|
||||||
|
right: 0;
|
||||||
|
border-right-color: var(--border);
|
||||||
|
}
|
||||||
|
}
|
||||||
+51
@@ -0,0 +1,51 @@
|
|||||||
|
import { useState } from 'react'
|
||||||
|
import MainLayout from './layouts/MainLayout'
|
||||||
|
import Cover from './components/screens/Cover'
|
||||||
|
import Game from './components/screens/Game'
|
||||||
|
import Result from './components/screens/Result'
|
||||||
|
import { consumirIntento, intentosAgotados } from './hooks/useIntentos'
|
||||||
|
|
||||||
|
type Screen = 'cover' | 'game' | 'result'
|
||||||
|
|
||||||
|
interface ResultState {
|
||||||
|
aprobado: boolean
|
||||||
|
sinIntentos: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const [screen, setScreen] = useState<Screen>(() =>
|
||||||
|
intentosAgotados() ? 'result' : 'cover'
|
||||||
|
)
|
||||||
|
const [resultState, setResultState] = useState<ResultState>({
|
||||||
|
aprobado: false,
|
||||||
|
sinIntentos: intentosAgotados(),
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleStart() {
|
||||||
|
consumirIntento()
|
||||||
|
setScreen('game')
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleGameEnd(aprobado: boolean) {
|
||||||
|
setResultState({ aprobado, sinIntentos: intentosAgotados() })
|
||||||
|
setScreen('result')
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleReintentar() {
|
||||||
|
setScreen('cover')
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MainLayout>
|
||||||
|
{screen === 'cover' && <Cover onStart={handleStart} />}
|
||||||
|
{screen === 'game' && <Game onEnd={handleGameEnd} />}
|
||||||
|
{screen === 'result' && (
|
||||||
|
<Result
|
||||||
|
aprobado={resultState.aprobado}
|
||||||
|
sinIntentos={resultState.sinIntentos}
|
||||||
|
onReintentar={handleReintentar}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</MainLayout>
|
||||||
|
)
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.5 KiB |
@@ -0,0 +1,80 @@
|
|||||||
|
import { Howler } from 'howler'
|
||||||
|
import { ExtendedHowl, createSound, stopAllSounds } from './ExtendedHowl'
|
||||||
|
import { AUDIOS } from './audios'
|
||||||
|
|
||||||
|
export class AudioController {
|
||||||
|
private audioElement: ExtendedHowl | null = null
|
||||||
|
private isMuted = false
|
||||||
|
|
||||||
|
load(url: string): void {
|
||||||
|
this.audioElement?.stop()
|
||||||
|
this.audioElement = createSound(url)
|
||||||
|
}
|
||||||
|
|
||||||
|
setHowl(howl: ExtendedHowl): void {
|
||||||
|
this.audioElement?.stop()
|
||||||
|
this.audioElement = howl
|
||||||
|
}
|
||||||
|
|
||||||
|
stopAllAndPlay(howl: ExtendedHowl): void {
|
||||||
|
stopAllSounds()
|
||||||
|
this.setHowl(howl)
|
||||||
|
this.play()
|
||||||
|
}
|
||||||
|
|
||||||
|
play(): void {
|
||||||
|
this.audioElement?.play()
|
||||||
|
}
|
||||||
|
|
||||||
|
pause(): void {
|
||||||
|
this.audioElement?.pause()
|
||||||
|
}
|
||||||
|
|
||||||
|
stop(): void {
|
||||||
|
this.audioElement?.stop()
|
||||||
|
}
|
||||||
|
|
||||||
|
toggle(): void {
|
||||||
|
if (!this.audioElement) return
|
||||||
|
this.audioElement.playing() ? this.pause() : this.play()
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleMute(): void {
|
||||||
|
this.isMuted = !this.isMuted
|
||||||
|
Howler.mute(this.isMuted)
|
||||||
|
}
|
||||||
|
|
||||||
|
isPlaying(): boolean {
|
||||||
|
return this.audioElement?.playing() ?? false
|
||||||
|
}
|
||||||
|
|
||||||
|
getMuted(): boolean {
|
||||||
|
return this.isMuted
|
||||||
|
}
|
||||||
|
|
||||||
|
getDuration(): number {
|
||||||
|
return (this.audioElement?.duration() as number) ?? 0
|
||||||
|
}
|
||||||
|
|
||||||
|
onTimeUpdate(cb: (currentTime: number) => void): void {
|
||||||
|
this.audioElement?.onTimeUpdate(cb)
|
||||||
|
}
|
||||||
|
|
||||||
|
offTimeUpdate(cb: (currentTime: number) => void): void {
|
||||||
|
this.audioElement?.offTimeUpdate(cb)
|
||||||
|
}
|
||||||
|
|
||||||
|
on(event: string, cb: () => void): void {
|
||||||
|
this.audioElement?.on(event, cb)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const audioController = new AudioController()
|
||||||
|
|
||||||
|
// Sonidos precargados listos para usar
|
||||||
|
export const sounds = {
|
||||||
|
click: createSound(AUDIOS.click),
|
||||||
|
wheelSpin: createSound(AUDIOS.wheelSpin),
|
||||||
|
correct: createSound(AUDIOS.correct),
|
||||||
|
incorrect: createSound(AUDIOS.incorrect),
|
||||||
|
}
|
||||||
@@ -0,0 +1,69 @@
|
|||||||
|
import { Howl, Howler } from 'howler'
|
||||||
|
|
||||||
|
type TimeUpdateCallback = (currentTime: number) => void
|
||||||
|
|
||||||
|
declare module 'howler' {
|
||||||
|
interface HowlerGlobal {
|
||||||
|
_howls: Howl[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ExtendedHowl extends Howl {
|
||||||
|
private _timeupdateListeners: TimeUpdateCallback[] = []
|
||||||
|
private _interval: ReturnType<typeof setInterval> | null = null
|
||||||
|
|
||||||
|
constructor(options: ConstructorParameters<typeof Howl>[0]) {
|
||||||
|
super(options)
|
||||||
|
this._startTimeUpdate()
|
||||||
|
}
|
||||||
|
|
||||||
|
private _startTimeUpdate(): void {
|
||||||
|
this._interval = setInterval(() => {
|
||||||
|
if (this.playing()) this._emitTimeUpdate(this.seek() as number)
|
||||||
|
}, 250)
|
||||||
|
}
|
||||||
|
|
||||||
|
private _emitTimeUpdate(currentTime: number): void {
|
||||||
|
this._timeupdateListeners.forEach((cb) => cb(currentTime))
|
||||||
|
}
|
||||||
|
|
||||||
|
onTimeUpdate(cb: TimeUpdateCallback): void {
|
||||||
|
this._timeupdateListeners.push(cb)
|
||||||
|
}
|
||||||
|
|
||||||
|
offTimeUpdate(cb: TimeUpdateCallback): void {
|
||||||
|
this._timeupdateListeners = this._timeupdateListeners.filter((l) => l !== cb)
|
||||||
|
}
|
||||||
|
|
||||||
|
play(id?: number): number {
|
||||||
|
const result = super.play(id as number)
|
||||||
|
if (!this._interval) this._startTimeUpdate()
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
|
||||||
|
pause(id?: number): this {
|
||||||
|
super.pause(id)
|
||||||
|
if (this._interval) {
|
||||||
|
clearInterval(this._interval)
|
||||||
|
this._interval = null
|
||||||
|
}
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
|
||||||
|
stop(id?: number): this {
|
||||||
|
super.stop(id)
|
||||||
|
if (this._interval) {
|
||||||
|
clearInterval(this._interval)
|
||||||
|
this._interval = null
|
||||||
|
}
|
||||||
|
return this
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createSound(audioUrl?: string): ExtendedHowl | null {
|
||||||
|
return audioUrl ? new ExtendedHowl({ src: [audioUrl] }) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function stopAllSounds(): void {
|
||||||
|
Howler._howls?.forEach((sound: Howl) => sound.stop())
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
export const AUDIOS = {
|
||||||
|
click: '/audios/click.mp3',
|
||||||
|
wheelSpin: '/audios/wheel-spin.mp3',
|
||||||
|
correct: '/audios/feedback-correct.mpeg',
|
||||||
|
incorrect: '/audios/feedback-incorrect.mpeg',
|
||||||
|
} as const
|
||||||
@@ -0,0 +1,124 @@
|
|||||||
|
import { useEffect, useRef, useState } from 'react'
|
||||||
|
import type { Pregunta, Categoria } from '../../types'
|
||||||
|
|
||||||
|
interface QuestionModalProps {
|
||||||
|
pregunta: Pregunta
|
||||||
|
categoria: Categoria
|
||||||
|
mostrarFeedback: boolean
|
||||||
|
feedbackCorrecto: boolean
|
||||||
|
onResponder: (indice: number | null) => void
|
||||||
|
onCerrar: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const LETRAS = ['A', 'B', 'C', 'D']
|
||||||
|
const TIEMPO_LIMITE = 30
|
||||||
|
|
||||||
|
export default function QuestionModal({ pregunta, categoria, mostrarFeedback, feedbackCorrecto, onResponder, onCerrar }: QuestionModalProps) {
|
||||||
|
const [tiempo, setTiempo] = useState(TIEMPO_LIMITE)
|
||||||
|
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null)
|
||||||
|
const tiempoAgotadoRef = useRef(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (mostrarFeedback) {
|
||||||
|
if (intervalRef.current) clearInterval(intervalRef.current)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setTiempo(TIEMPO_LIMITE)
|
||||||
|
tiempoAgotadoRef.current = false
|
||||||
|
intervalRef.current = setInterval(() => {
|
||||||
|
setTiempo((prev) => {
|
||||||
|
if (prev <= 1) {
|
||||||
|
clearInterval(intervalRef.current!)
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
return prev - 1
|
||||||
|
})
|
||||||
|
}, 1000)
|
||||||
|
|
||||||
|
return () => { if (intervalRef.current) clearInterval(intervalRef.current) }
|
||||||
|
}, [pregunta.id, mostrarFeedback])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (tiempo === 0 && !mostrarFeedback && !tiempoAgotadoRef.current) {
|
||||||
|
tiempoAgotadoRef.current = true
|
||||||
|
onResponder(null)
|
||||||
|
}
|
||||||
|
}, [tiempo, mostrarFeedback])
|
||||||
|
|
||||||
|
const porcentaje = (tiempo / TIEMPO_LIMITE) * 100
|
||||||
|
const colorBarra = porcentaje > 50 ? '#22c55e' : porcentaje > 25 ? '#f97316' : '#ef4444'
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 px-4">
|
||||||
|
<div className="bg-white rounded-2xl border-4 w-full max-w-xl shadow-2xl overflow-hidden" style={{ borderColor: categoria.color }}>
|
||||||
|
|
||||||
|
{!mostrarFeedback && (
|
||||||
|
<>
|
||||||
|
{/* Header con categoría */}
|
||||||
|
<div className="px-6 py-4 flex flex-col items-center gap-1" style={{ backgroundColor: categoria.color }}>
|
||||||
|
<span className="text-3xl">{categoria.emoji}</span>
|
||||||
|
<p className="text-white/80 text-sm font-medium">{categoria.nombre}</p>
|
||||||
|
<p className="text-white font-bold text-lg text-center">{pregunta.pregunta}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Temporizador */}
|
||||||
|
<div className="px-5 pt-4">
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<span className="text-sm font-medium text-gray-500">Tiempo restante</span>
|
||||||
|
<span className="text-sm font-bold" style={{ color: colorBarra }}>{tiempo}s</span>
|
||||||
|
</div>
|
||||||
|
<div className="w-full bg-gray-200 rounded-full h-3 overflow-hidden">
|
||||||
|
<div
|
||||||
|
className="h-3 rounded-full transition-all duration-1000"
|
||||||
|
style={{ width: `${porcentaje}%`, backgroundColor: colorBarra }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Opciones */}
|
||||||
|
<div className="p-5 flex flex-col gap-3">
|
||||||
|
{pregunta.opciones.map((opcion, i) => (
|
||||||
|
<button
|
||||||
|
key={i}
|
||||||
|
onClick={() => onResponder(i)}
|
||||||
|
className="flex items-stretch w-full rounded-lg border border-gray-200 bg-gray-50 hover:shadow-md hover:-translate-y-0.5 transition-all duration-200 overflow-hidden text-left"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="text-white font-bold w-10 flex items-center justify-center shrink-0"
|
||||||
|
style={{ backgroundColor: categoria.color }}
|
||||||
|
>
|
||||||
|
{LETRAS[i]}
|
||||||
|
</span>
|
||||||
|
<span className="px-4 py-3 text-gray-700 font-medium">{opcion}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Feedback */}
|
||||||
|
{mostrarFeedback && (
|
||||||
|
<div className="p-8 flex flex-col items-center gap-4 text-center">
|
||||||
|
<span className="text-5xl">{feedbackCorrecto ? '🎉' : '❌'}</span>
|
||||||
|
<h3 className={`text-2xl font-bold ${feedbackCorrecto ? 'text-green-600' : 'text-red-500'}`}>
|
||||||
|
{feedbackCorrecto ? '¡Correcto!' : '¡Incorrecto!'}
|
||||||
|
</h3>
|
||||||
|
{feedbackCorrecto
|
||||||
|
? <p className="text-gray-600">{pregunta.retroalimentacion}</p>
|
||||||
|
: <p className="text-gray-600">{tiempo === 0 ? 'Se agotó el tiempo.' : 'Respuesta incorrecta.'}</p>
|
||||||
|
}
|
||||||
|
<button
|
||||||
|
onClick={onCerrar}
|
||||||
|
className="mt-2 text-white font-semibold px-8 py-2.5 rounded-xl transition-colors"
|
||||||
|
style={{ backgroundColor: categoria.color }}
|
||||||
|
>
|
||||||
|
Continuar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
interface ResultModalProps {
|
||||||
|
totalPuntos: number
|
||||||
|
onCerrar: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ResultModal({ totalPuntos, onCerrar }: ResultModalProps) {
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 px-4">
|
||||||
|
<div className="bg-white rounded-2xl border-4 border-purple-600 w-full max-w-sm shadow-2xl p-8 flex flex-col items-center gap-4 text-center">
|
||||||
|
<span className="text-6xl">🏆</span>
|
||||||
|
<h3 className="text-2xl font-bold text-purple-700">¡Bien hecho!</h3>
|
||||||
|
<p className="text-gray-600">Has concluido la actividad.</p>
|
||||||
|
<p className="text-4xl font-bold text-purple-600">{totalPuntos} pts</p>
|
||||||
|
<button
|
||||||
|
onClick={onCerrar}
|
||||||
|
className="mt-2 bg-purple-600 hover:bg-purple-700 text-white font-semibold px-8 py-2.5 rounded-xl transition-colors"
|
||||||
|
>
|
||||||
|
Cerrar
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,99 @@
|
|||||||
|
import type { Categoria } from '../../../types'
|
||||||
|
|
||||||
|
interface RuletaSVGProps {
|
||||||
|
categorias: Categoria[]
|
||||||
|
rotacion: number
|
||||||
|
isSpinning: boolean
|
||||||
|
onClick: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function RuletaSVG({ categorias, rotacion, isSpinning, onClick }: RuletaSVGProps) {
|
||||||
|
const cx = 200
|
||||||
|
const cy = 200
|
||||||
|
const r = 180
|
||||||
|
const total = categorias.length
|
||||||
|
const angleStep = 360 / total
|
||||||
|
|
||||||
|
function polarToCartesian(angle: number, radius: number) {
|
||||||
|
const rad = (angle - 90) * (Math.PI / 180)
|
||||||
|
return {
|
||||||
|
x: cx + radius * Math.cos(rad),
|
||||||
|
y: cy + radius * Math.sin(rad),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function sectorPath(startAngle: number, endAngle: number) {
|
||||||
|
const start = polarToCartesian(startAngle, r)
|
||||||
|
const end = polarToCartesian(endAngle, r)
|
||||||
|
const largeArc = endAngle - startAngle > 180 ? 1 : 0
|
||||||
|
return `M ${cx} ${cy} L ${start.x} ${start.y} A ${r} ${r} 0 ${largeArc} 1 ${end.x} ${end.y} Z`
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative flex items-center justify-center">
|
||||||
|
|
||||||
|
{/* Indicador */}
|
||||||
|
<div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-2 z-10">
|
||||||
|
<div className="w-0 h-0 border-l-[12px] border-r-[12px] border-t-[24px] border-l-transparent border-r-transparent border-t-gray-800 drop-shadow-md" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ruleta SVG */}
|
||||||
|
<svg
|
||||||
|
width="400"
|
||||||
|
height="400"
|
||||||
|
viewBox="0 0 400 400"
|
||||||
|
onClick={!isSpinning ? onClick : undefined}
|
||||||
|
className={`select-none drop-shadow-xl ${!isSpinning ? 'cursor-pointer' : 'cursor-not-allowed'}`}
|
||||||
|
style={{
|
||||||
|
transition: 'transform 4s cubic-bezier(0.25, 0.1, 0.25, 1)',
|
||||||
|
transform: `rotate(${rotacion}deg)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{categorias.map((cat, i) => {
|
||||||
|
const startAngle = i * angleStep
|
||||||
|
const endAngle = startAngle + angleStep
|
||||||
|
const midAngle = startAngle + angleStep / 2
|
||||||
|
const textPos = polarToCartesian(midAngle, r * 0.62)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<g key={cat.id}>
|
||||||
|
{/* Sector */}
|
||||||
|
<path
|
||||||
|
d={sectorPath(startAngle, endAngle)}
|
||||||
|
fill={cat.color}
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth="3"
|
||||||
|
/>
|
||||||
|
{/* Emoji */}
|
||||||
|
<text
|
||||||
|
x={textPos.x}
|
||||||
|
y={textPos.y - 14}
|
||||||
|
textAnchor="middle"
|
||||||
|
dominantBaseline="middle"
|
||||||
|
fontSize="28"
|
||||||
|
>
|
||||||
|
{cat.emoji}
|
||||||
|
</text>
|
||||||
|
{/* Nombre */}
|
||||||
|
<text
|
||||||
|
x={textPos.x}
|
||||||
|
y={textPos.y + 16}
|
||||||
|
textAnchor="middle"
|
||||||
|
dominantBaseline="middle"
|
||||||
|
fontSize="13"
|
||||||
|
fontWeight="bold"
|
||||||
|
fill="white"
|
||||||
|
>
|
||||||
|
{cat.nombre}
|
||||||
|
</text>
|
||||||
|
</g>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
|
{/* Centro */}
|
||||||
|
<circle cx={cx} cy={cy} r={22} fill="white" stroke="#e5e7eb" strokeWidth="3" />
|
||||||
|
<circle cx={cx} cy={cy} r={10} fill="#7C3AED" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,9 @@
|
|||||||
|
export default function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="w-full bg-gray-800 text-gray-400 text-sm">
|
||||||
|
<div className="max-w-5xl mx-auto px-4 py-3 text-center">
|
||||||
|
© {new Date().getFullYear()} Actividad Interactiva — Todos los derechos reservados
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
export default function Header() {
|
||||||
|
return (
|
||||||
|
<header className="w-full bg-purple-700 text-white shadow-md">
|
||||||
|
<div className="max-w-5xl mx-auto px-4 py-4 flex items-center justify-between">
|
||||||
|
<span className="text-2xl font-bold tracking-wide">🎡 Ruleta</span>
|
||||||
|
<span className="text-sm opacity-75">Actividad Interactiva</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import hero from '../../assets/hero.png'
|
||||||
|
import Button from '../ui/Button'
|
||||||
|
import { useAudio } from '../../hooks/useAudio'
|
||||||
|
|
||||||
|
interface CoverProps {
|
||||||
|
onStart: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Cover({ onStart }: CoverProps) {
|
||||||
|
const { sounds } = useAudio()
|
||||||
|
|
||||||
|
function handleStart() {
|
||||||
|
sounds.click?.play()
|
||||||
|
onStart()
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col-reverse md:flex-row items-center justify-center text-center gap-10 py-10">
|
||||||
|
|
||||||
|
{/* Texto izquierdo */}
|
||||||
|
<div className="flex-1 flex flex-col gap-5 text-center md:text-left">
|
||||||
|
<h1 className="text-4xl font-bold text-purple-700 leading-tight">
|
||||||
|
¡Bienvenido a la Ruleta Interactiva!
|
||||||
|
</h1>
|
||||||
|
<p className="text-gray-600 text-lg">
|
||||||
|
Pon a prueba tus conocimientos girando la ruleta.
|
||||||
|
Responde cada pregunta correctamente y acumula el mayor puntaje posible.
|
||||||
|
</p>
|
||||||
|
<div>
|
||||||
|
<Button size="lg" onClick={handleStart}>
|
||||||
|
Comenzar ▶
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Imagen derecha */}
|
||||||
|
<div className="flex-1 flex justify-center">
|
||||||
|
<img
|
||||||
|
src={hero}
|
||||||
|
alt="Ruleta Interactiva"
|
||||||
|
className="w-full max-w-sm object-contain drop-shadow-xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,72 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
import { useRuleta } from '../../hooks/useRuleta'
|
||||||
|
import { sounds } from '../../audio/AudioController'
|
||||||
|
import QuestionModal from '../game/QuestionModal'
|
||||||
|
import RuletaSVG from '../game/Ruleta/RuletaSVG'
|
||||||
|
|
||||||
|
interface GameProps {
|
||||||
|
onEnd: (aprobado: boolean) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Game({ onEnd }: GameProps) {
|
||||||
|
const { estado, categorias, girar, responder, cerrarFeedback, MAX_PREGUNTAS } = useRuleta()
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (estado.completado) onEnd(estado.aprobado)
|
||||||
|
}, [estado.completado])
|
||||||
|
|
||||||
|
function handleGirar() {
|
||||||
|
sounds.click?.play()
|
||||||
|
girar()
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center gap-6 py-6 w-full">
|
||||||
|
|
||||||
|
{/* Instrucciones */}
|
||||||
|
<div className="bg-purple-50 border border-purple-200 rounded-xl px-6 py-4 max-w-lg text-center">
|
||||||
|
<p className="text-purple-700 font-semibold text-lg">¿Cómo jugar?</p>
|
||||||
|
<p className="text-gray-600 mt-1">
|
||||||
|
Haz clic en la <strong>ruleta</strong> para girarla y responde correctamente para ganar puntos.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col items-center gap-4 w-full">
|
||||||
|
|
||||||
|
{/* Progreso de preguntas */}
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{Array.from({ length: MAX_PREGUNTAS }).map((_, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className={`w-6 h-6 rounded-full border-2 border-purple-600 transition-all duration-500 ${
|
||||||
|
i < estado.preguntasRespondidas ? 'bg-purple-600' : 'bg-white'
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Ruleta SVG */}
|
||||||
|
<RuletaSVG
|
||||||
|
categorias={categorias}
|
||||||
|
rotacion={estado.rotacion}
|
||||||
|
isSpinning={estado.isSpinning}
|
||||||
|
onClick={handleGirar}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Modal pregunta */}
|
||||||
|
{estado.preguntaActual && !estado.completado && (
|
||||||
|
<QuestionModal
|
||||||
|
pregunta={estado.preguntaActual}
|
||||||
|
categoria={estado.categoriaActual!}
|
||||||
|
mostrarFeedback={estado.mostrarFeedback}
|
||||||
|
feedbackCorrecto={estado.feedbackCorrecto}
|
||||||
|
onResponder={responder}
|
||||||
|
onCerrar={cerrarFeedback}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
interface ResultProps {
|
||||||
|
aprobado: boolean
|
||||||
|
sinIntentos: boolean
|
||||||
|
onReintentar: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Result({ aprobado, sinIntentos, onReintentar }: ResultProps) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-center justify-center gap-8 py-10 w-full text-center">
|
||||||
|
|
||||||
|
{/* Aprobado */}
|
||||||
|
{aprobado && (
|
||||||
|
<>
|
||||||
|
<span className="text-8xl">🏆</span>
|
||||||
|
<h2 className="text-4xl font-bold text-purple-700">¡Felicidades!</h2>
|
||||||
|
<p className="text-gray-600 text-xl max-w-md">
|
||||||
|
Has completado la actividad exitosamente. ¡Excelente desempeño!
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Reprobado con intentos disponibles */}
|
||||||
|
{!aprobado && !sinIntentos && (
|
||||||
|
<>
|
||||||
|
<span className="text-8xl">💪</span>
|
||||||
|
<h2 className="text-4xl font-bold text-orange-500">¡Casi lo logras!</h2>
|
||||||
|
<p className="text-gray-600 text-xl max-w-md">
|
||||||
|
Aún te falta un poco. Vuelve a intentarlo, ¡tú puedes!
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={onReintentar}
|
||||||
|
className="bg-purple-600 hover:bg-purple-700 text-white font-bold px-10 py-4 rounded-xl text-lg transition-colors"
|
||||||
|
>
|
||||||
|
Reintentar
|
||||||
|
</button>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Sin intentos */}
|
||||||
|
{sinIntentos && (
|
||||||
|
<>
|
||||||
|
<span className="text-8xl">😔</span>
|
||||||
|
<h2 className="text-4xl font-bold text-red-600">Intentos agotados</h2>
|
||||||
|
<p className="text-gray-600 text-xl max-w-md">
|
||||||
|
Has utilizado todos tus intentos disponibles. Te recomendamos repasar el contenido del curso antes de volver a intentarlo.
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
import type { ReactNode } from 'react'
|
||||||
|
|
||||||
|
type Variant = 'primary' | 'secondary' | 'danger' | 'outline'
|
||||||
|
type Size = 'sm' | 'md' | 'lg'
|
||||||
|
|
||||||
|
interface ButtonProps {
|
||||||
|
children: ReactNode
|
||||||
|
variant?: Variant
|
||||||
|
size?: Size
|
||||||
|
disabled?: boolean
|
||||||
|
onClick?: () => void
|
||||||
|
type?: 'button' | 'submit' | 'reset'
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const variants: Record<Variant, string> = {
|
||||||
|
primary: 'bg-purple-600 text-white hover:bg-purple-700 active:bg-purple-800',
|
||||||
|
secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300 active:bg-gray-400',
|
||||||
|
danger: 'bg-red-500 text-white hover:bg-red-600 active:bg-red-700',
|
||||||
|
outline: 'border-2 border-purple-600 text-purple-600 hover:bg-purple-50 active:bg-purple-100',
|
||||||
|
}
|
||||||
|
|
||||||
|
const sizes: Record<Size, string> = {
|
||||||
|
sm: 'px-3 py-1.5 text-sm',
|
||||||
|
md: 'px-5 py-2.5 text-base',
|
||||||
|
lg: 'px-7 py-3.5 text-lg',
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Button({
|
||||||
|
children,
|
||||||
|
variant = 'primary',
|
||||||
|
size = 'md',
|
||||||
|
disabled = false,
|
||||||
|
onClick,
|
||||||
|
type = 'button',
|
||||||
|
className = '',
|
||||||
|
}: ButtonProps) {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type={type}
|
||||||
|
onClick={onClick}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`
|
||||||
|
rounded-xl font-semibold transition-colors duration-200 cursor-pointer
|
||||||
|
disabled:opacity-50 disabled:cursor-not-allowed
|
||||||
|
${variants[variant]} ${sizes[size]} ${className}
|
||||||
|
`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,297 @@
|
|||||||
|
{
|
||||||
|
"categorias": [
|
||||||
|
{
|
||||||
|
"id": 0,
|
||||||
|
"nombre": "Historia",
|
||||||
|
"color": "#7C3AED",
|
||||||
|
"emoji": "🏛️",
|
||||||
|
"preguntas": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"pregunta": "¿En qué año cayó el Muro de Berlín?",
|
||||||
|
"opciones": ["1987", "1989", "1991", "1993"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "El Muro de Berlín cayó el 9 de noviembre de 1989, marcando el fin de la Guerra Fría."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"pregunta": "¿Quién fue el primer presidente de los Estados Unidos?",
|
||||||
|
"opciones": ["Abraham Lincoln", "Thomas Jefferson", "George Washington", "Benjamin Franklin"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "George Washington fue el primer presidente de EE.UU., gobernando de 1789 a 1797."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"pregunta": "¿En qué año comenzó la Primera Guerra Mundial?",
|
||||||
|
"opciones": ["1912", "1914", "1916", "1918"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "La Primera Guerra Mundial comenzó en 1914 tras el asesinato del archiduque Francisco Fernando."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 4,
|
||||||
|
"pregunta": "¿Qué civilización construyó las pirámides de Giza?",
|
||||||
|
"opciones": ["Griega", "Romana", "Egipcia", "Mesopotámica"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "Las pirámides de Giza fueron construidas por los antiguos egipcios hace más de 4,500 años."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 5,
|
||||||
|
"pregunta": "¿En qué año llegó Cristóbal Colón a América?",
|
||||||
|
"opciones": ["1488", "1490", "1492", "1495"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "Cristóbal Colón llegó a América el 12 de octubre de 1492."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 6,
|
||||||
|
"pregunta": "¿Quién fue Napoleón Bonaparte?",
|
||||||
|
"opciones": ["Rey de España", "Emperador de Francia", "Presidente de Italia", "General inglés"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "Napoleón Bonaparte fue Emperador de Francia entre 1804 y 1815."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 7,
|
||||||
|
"pregunta": "¿En qué país se originó la Revolución Industrial?",
|
||||||
|
"opciones": ["Francia", "Alemania", "Estados Unidos", "Inglaterra"],
|
||||||
|
"correcta": 3,
|
||||||
|
"retroalimentacion": "La Revolución Industrial comenzó en Inglaterra a mediados del siglo XVIII."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 8,
|
||||||
|
"pregunta": "¿Cuál fue el primer país en conceder el voto a la mujer?",
|
||||||
|
"opciones": ["Francia", "Nueva Zelanda", "Estados Unidos", "Suecia"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "Nueva Zelanda fue el primer país en conceder el voto a la mujer en 1893."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"nombre": "Geografía",
|
||||||
|
"color": "#059669",
|
||||||
|
"emoji": "🌍",
|
||||||
|
"preguntas": [
|
||||||
|
{
|
||||||
|
"id": 9,
|
||||||
|
"pregunta": "¿Cuál es el río más largo del mundo?",
|
||||||
|
"opciones": ["Amazonas", "Nilo", "Yangtsé", "Misisipi"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "El río Nilo, con aproximadamente 6,650 km, es considerado el río más largo del mundo."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 10,
|
||||||
|
"pregunta": "¿Cuál es el país más grande del mundo por superficie?",
|
||||||
|
"opciones": ["China", "Canadá", "Estados Unidos", "Rusia"],
|
||||||
|
"correcta": 3,
|
||||||
|
"retroalimentacion": "Rusia es el país más grande del mundo con 17.1 millones de km²."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 11,
|
||||||
|
"pregunta": "¿En qué continente se encuentra el desierto del Sahara?",
|
||||||
|
"opciones": ["Asia", "América", "África", "Australia"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "El Sahara se encuentra en África y es el desierto cálido más grande del mundo."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 12,
|
||||||
|
"pregunta": "¿Cuál es la capital de Australia?",
|
||||||
|
"opciones": ["Sídney", "Melbourne", "Canberra", "Brisbane"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "Canberra es la capital de Australia, no Sídney como muchos creen."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 13,
|
||||||
|
"pregunta": "¿Cuántos océanos hay en el planeta?",
|
||||||
|
"opciones": ["3", "4", "5", "6"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "Hay 5 océanos: Pacífico, Atlántico, Índico, Ártico y Antártico."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 14,
|
||||||
|
"pregunta": "¿Cuál es el volcán activo más alto del mundo?",
|
||||||
|
"opciones": ["Etna", "Kilimanjaro", "Ojos del Salado", "Cotopaxi"],
|
||||||
|
"correcta": 3,
|
||||||
|
"retroalimentacion": "El Cotopaxi en Ecuador es uno de los volcanes activos más altos del mundo con 5,897 metros."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 15,
|
||||||
|
"pregunta": "¿En qué país se encuentra la Torre de Pisa?",
|
||||||
|
"opciones": ["España", "Francia", "Italia", "Portugal"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "La Torre de Pisa se encuentra en la ciudad de Pisa, Italia."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 16,
|
||||||
|
"pregunta": "¿Cuál es el país más pequeño del mundo?",
|
||||||
|
"opciones": ["Mónaco", "San Marino", "Liechtenstein", "Ciudad del Vaticano"],
|
||||||
|
"correcta": 3,
|
||||||
|
"retroalimentacion": "Ciudad del Vaticano es el país más pequeño del mundo con apenas 0.44 km²."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"nombre": "Ciencia",
|
||||||
|
"color": "#DC2626",
|
||||||
|
"emoji": "🔬",
|
||||||
|
"preguntas": [
|
||||||
|
{
|
||||||
|
"id": 17,
|
||||||
|
"pregunta": "¿Cuál es el elemento más abundante en el universo?",
|
||||||
|
"opciones": ["Oxígeno", "Carbono", "Hidrógeno", "Helio"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "El hidrógeno es el elemento más abundante del universo, constituyendo el 75% de su masa."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 18,
|
||||||
|
"pregunta": "¿A qué velocidad viaja la luz en el vacío?",
|
||||||
|
"opciones": ["200,000 km/s", "300,000 km/s", "400,000 km/s", "150,000 km/s"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "La luz viaja a aproximadamente 299,792 km/s en el vacío."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 19,
|
||||||
|
"pregunta": "¿Cuántos huesos tiene el cuerpo humano adulto?",
|
||||||
|
"opciones": ["196", "206", "216", "226"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "El cuerpo humano adulto tiene 206 huesos."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 20,
|
||||||
|
"pregunta": "¿Cuál es el planeta más grande del sistema solar?",
|
||||||
|
"opciones": ["Saturno", "Neptuno", "Júpiter", "Urano"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "Júpiter es el planeta más grande del sistema solar."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 21,
|
||||||
|
"pregunta": "¿Qué gas es el más abundante en la atmósfera terrestre?",
|
||||||
|
"opciones": ["Oxígeno", "Dióxido de carbono", "Nitrógeno", "Argón"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "El nitrógeno constituye aproximadamente el 78% de la atmósfera terrestre."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 22,
|
||||||
|
"pregunta": "¿Cuántos cromosomas tiene una célula humana normal?",
|
||||||
|
"opciones": ["23", "44", "46", "48"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "Las células humanas normales tienen 46 cromosomas, organizados en 23 pares."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 23,
|
||||||
|
"pregunta": "¿Quién formuló la teoría de la relatividad?",
|
||||||
|
"opciones": ["Isaac Newton", "Albert Einstein", "Nikola Tesla", "Stephen Hawking"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "Albert Einstein formuló la teoría de la relatividad especial en 1905 y la general en 1915."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 24,
|
||||||
|
"pregunta": "¿Cuál es el símbolo químico del oro?",
|
||||||
|
"opciones": ["Go", "Ag", "Au", "Or"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "El símbolo químico del oro es Au, del latín Aurum."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"nombre": "Arte y Literatura",
|
||||||
|
"color": "#D97706",
|
||||||
|
"emoji": "🎨",
|
||||||
|
"preguntas": [
|
||||||
|
{
|
||||||
|
"id": 25,
|
||||||
|
"pregunta": "¿Quién escribió 'Cien años de soledad'?",
|
||||||
|
"opciones": ["Mario Vargas Llosa", "Pablo Neruda", "Gabriel García Márquez", "Jorge Luis Borges"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "Gabriel García Márquez escribió Cien años de soledad en 1967, obra cumbre del realismo mágico."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 26,
|
||||||
|
"pregunta": "¿Quién pintó 'La noche estrellada'?",
|
||||||
|
"opciones": ["Pablo Picasso", "Claude Monet", "Salvador Dalí", "Vincent van Gogh"],
|
||||||
|
"correcta": 3,
|
||||||
|
"retroalimentacion": "La noche estrellada fue pintada por Vincent van Gogh en 1889."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 27,
|
||||||
|
"pregunta": "¿En qué país nació Mozart?",
|
||||||
|
"opciones": ["Alemania", "Austria", "Italia", "Francia"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "Wolfgang Amadeus Mozart nació en Salzburgo, Austria, en 1756."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 28,
|
||||||
|
"pregunta": "¿Quién escribió 'Don Quijote de la Mancha'?",
|
||||||
|
"opciones": ["Lope de Vega", "Miguel de Cervantes", "Francisco de Quevedo", "Garcilaso de la Vega"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "Don Quijote de la Mancha fue escrita por Miguel de Cervantes y publicada en 1605."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 29,
|
||||||
|
"pregunta": "¿Quién compuso la Quinta Sinfonía?",
|
||||||
|
"opciones": ["Mozart", "Bach", "Beethoven", "Chopin"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "La Quinta Sinfonía fue compuesta por Ludwig van Beethoven entre 1804 y 1808."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 30,
|
||||||
|
"pregunta": "¿En qué museo se encuentra la Mona Lisa?",
|
||||||
|
"opciones": ["Museo del Prado", "Museo Británico", "Museo del Louvre", "Museo Uffizi"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "La Mona Lisa se encuentra en el Museo del Louvre en París, Francia."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 31,
|
||||||
|
"pregunta": "¿Quién escribió 'Romeo y Julieta'?",
|
||||||
|
"opciones": ["Charles Dickens", "William Shakespeare", "Jane Austen", "Victor Hugo"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "Romeo y Julieta fue escrita por William Shakespeare alrededor de 1595."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 32,
|
||||||
|
"pregunta": "¿Qué movimiento artístico lideró Salvador Dalí?",
|
||||||
|
"opciones": ["Cubismo", "Impresionismo", "Surrealismo", "Expresionismo"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "Salvador Dalí fue uno de los principales representantes del Surrealismo."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"bancoGenerico": [
|
||||||
|
{
|
||||||
|
"id": 101,
|
||||||
|
"pregunta": "¿Cuál es el océano más grande del mundo?",
|
||||||
|
"opciones": ["Atlántico", "Índico", "Pacífico", "Ártico"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "El océano Pacífico es el más grande, cubriendo más de 165 millones de km²."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 102,
|
||||||
|
"pregunta": "¿Cuántos planetas tiene el sistema solar?",
|
||||||
|
"opciones": ["7", "8", "9", "10"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "El sistema solar tiene 8 planetas desde que Plutón fue reclasificado en 2006."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 103,
|
||||||
|
"pregunta": "¿Cuál es el animal terrestre más rápido?",
|
||||||
|
"opciones": ["León", "Guepardo", "Antílope", "Caballo"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "El guepardo puede alcanzar velocidades de hasta 120 km/h, siendo el animal terrestre más rápido."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 104,
|
||||||
|
"pregunta": "¿En qué año se fundó la ONU?",
|
||||||
|
"opciones": ["1943", "1945", "1947", "1950"],
|
||||||
|
"correcta": 1,
|
||||||
|
"retroalimentacion": "La ONU fue fundada el 24 de octubre de 1945 tras el fin de la Segunda Guerra Mundial."
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 105,
|
||||||
|
"pregunta": "¿Cuál es el idioma más hablado en el mundo?",
|
||||||
|
"opciones": ["Inglés", "Español", "Mandarín", "Hindi"],
|
||||||
|
"correcta": 2,
|
||||||
|
"retroalimentacion": "El mandarín es el idioma con más hablantes nativos, con más de 900 millones."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,23 @@
|
|||||||
|
import { useEffect, useCallback } from 'react'
|
||||||
|
import { audioController, sounds } from '../audio/AudioController'
|
||||||
|
import { createSound, stopAllSounds } from '../audio/ExtendedHowl'
|
||||||
|
|
||||||
|
export function useAudio() {
|
||||||
|
useEffect(() => {
|
||||||
|
return () => audioController.stop()
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const load = useCallback((url: string) => audioController.load(url), [])
|
||||||
|
const play = useCallback(() => audioController.play(), [])
|
||||||
|
const pause = useCallback(() => audioController.pause(), [])
|
||||||
|
const stop = useCallback(() => audioController.stop(), [])
|
||||||
|
const toggle = useCallback(() => audioController.toggle(), [])
|
||||||
|
const toggleMute = useCallback(() => audioController.toggleMute(), [])
|
||||||
|
const stopAll = useCallback(() => stopAllSounds(), [])
|
||||||
|
const playNew = useCallback((url: string) => {
|
||||||
|
const howl = createSound(url)
|
||||||
|
if (howl) audioController.stopAllAndPlay(howl)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return { load, play, pause, stop, toggle, toggleMute, stopAll, playNew, sounds, audioController }
|
||||||
|
}
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
const KEY_INTENTOS = 'ruleta_intentos_usados'
|
||||||
|
const KEY_AGOTADOS = 'ruleta_intentos_agotados'
|
||||||
|
const MAX_INTENTOS = 3
|
||||||
|
|
||||||
|
function getIntentosUsados(): number {
|
||||||
|
return parseInt(sessionStorage.getItem(KEY_INTENTOS) ?? '0', 10)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setIntentosUsados(n: number): void {
|
||||||
|
sessionStorage.setItem(KEY_INTENTOS, String(n))
|
||||||
|
if (n >= MAX_INTENTOS) {
|
||||||
|
sessionStorage.setItem(KEY_AGOTADOS, 'true')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function intentosAgotados(): boolean {
|
||||||
|
return sessionStorage.getItem(KEY_AGOTADOS) === 'true'
|
||||||
|
}
|
||||||
|
|
||||||
|
export function intentosRestantes(): number {
|
||||||
|
return Math.max(0, MAX_INTENTOS - getIntentosUsados())
|
||||||
|
}
|
||||||
|
|
||||||
|
export function consumirIntento(): void {
|
||||||
|
setIntentosUsados(getIntentosUsados() + 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resetIntentos(): void {
|
||||||
|
sessionStorage.removeItem(KEY_INTENTOS)
|
||||||
|
sessionStorage.removeItem(KEY_AGOTADOS)
|
||||||
|
}
|
||||||
@@ -0,0 +1,134 @@
|
|||||||
|
import { useState, useRef } from 'react'
|
||||||
|
import type { Pregunta, Categoria, PreguntasData } from '../types'
|
||||||
|
import data from '../data/preguntas.json'
|
||||||
|
import { sounds } from '../audio/AudioController'
|
||||||
|
|
||||||
|
const { categorias, bancoGenerico } = data as PreguntasData
|
||||||
|
const MAX_PREGUNTAS = 10
|
||||||
|
const MIN_CORRECTAS = 8
|
||||||
|
const SECCIONES = categorias.length
|
||||||
|
const ANGULO_SECCION = 360 / SECCIONES
|
||||||
|
|
||||||
|
export interface EstadoJuego {
|
||||||
|
isSpinning: boolean
|
||||||
|
rotacion: number
|
||||||
|
preguntaActual: Pregunta | null
|
||||||
|
categoriaActual: Categoria | null
|
||||||
|
mostrarFeedback: boolean
|
||||||
|
feedbackCorrecto: boolean
|
||||||
|
preguntasRespondidas: number
|
||||||
|
correctas: number
|
||||||
|
completado: boolean
|
||||||
|
aprobado: boolean
|
||||||
|
preguntasUsadas: Record<number, number[]>
|
||||||
|
bancoPreguntasUsadas: number[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useRuleta() {
|
||||||
|
const [estado, setEstado] = useState<EstadoJuego>({
|
||||||
|
isSpinning: false,
|
||||||
|
rotacion: 0,
|
||||||
|
preguntaActual: null,
|
||||||
|
categoriaActual: null,
|
||||||
|
mostrarFeedback: false,
|
||||||
|
feedbackCorrecto: false,
|
||||||
|
preguntasRespondidas: 0,
|
||||||
|
correctas: 0,
|
||||||
|
completado: false,
|
||||||
|
aprobado: false,
|
||||||
|
preguntasUsadas: {},
|
||||||
|
bancoPreguntasUsadas: [],
|
||||||
|
})
|
||||||
|
|
||||||
|
const rotacionRef = useRef(0)
|
||||||
|
|
||||||
|
function seleccionarPregunta(categoria: Categoria, preguntasUsadas: Record<number, number[]>, bancoPreguntasUsadas: number[]): { pregunta: Pregunta, esGenerica: boolean } {
|
||||||
|
const usadas = preguntasUsadas[categoria.id] ?? []
|
||||||
|
const disponibles = categoria.preguntas.filter((_, i) => !usadas.includes(i))
|
||||||
|
|
||||||
|
if (disponibles.length > 0) {
|
||||||
|
const idx = Math.floor(Math.random() * disponibles.length)
|
||||||
|
return { pregunta: disponibles[idx], esGenerica: false }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Banco genérico
|
||||||
|
const disponiblesGenericas = bancoGenerico.filter((_, i) => !bancoPreguntasUsadas.includes(i))
|
||||||
|
const pool = disponiblesGenericas.length > 0 ? disponiblesGenericas : bancoGenerico
|
||||||
|
const idx = Math.floor(Math.random() * pool.length)
|
||||||
|
return { pregunta: pool[idx], esGenerica: true }
|
||||||
|
}
|
||||||
|
|
||||||
|
function girar() {
|
||||||
|
if (estado.isSpinning || estado.completado) return
|
||||||
|
|
||||||
|
sounds.wheelSpin?.play()
|
||||||
|
|
||||||
|
const vueltas = 3 + Math.random() * 2
|
||||||
|
const anguloFinal = Math.random() * 360
|
||||||
|
const rotacionTotal = rotacionRef.current + vueltas * 360 + anguloFinal
|
||||||
|
rotacionRef.current = rotacionTotal
|
||||||
|
|
||||||
|
setEstado((prev) => ({ ...prev, isSpinning: true, rotacion: rotacionTotal }))
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
const anguloNormalizado = ((360 - (rotacionRef.current % 360)) + 360) % 360
|
||||||
|
const indiceCategoria = Math.floor(anguloNormalizado / ANGULO_SECCION) % SECCIONES
|
||||||
|
const categoria = categorias[indiceCategoria]
|
||||||
|
|
||||||
|
setEstado((prev) => {
|
||||||
|
const { pregunta, esGenerica } = seleccionarPregunta(categoria, prev.preguntasUsadas, prev.bancoPreguntasUsadas)
|
||||||
|
const originalIdx = esGenerica
|
||||||
|
? bancoGenerico.indexOf(pregunta)
|
||||||
|
: categoria.preguntas.indexOf(pregunta)
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prev,
|
||||||
|
preguntaActual: pregunta,
|
||||||
|
categoriaActual: categoria,
|
||||||
|
preguntasUsadas: esGenerica ? prev.preguntasUsadas : {
|
||||||
|
...prev.preguntasUsadas,
|
||||||
|
[categoria.id]: [...(prev.preguntasUsadas[categoria.id] ?? []), originalIdx],
|
||||||
|
},
|
||||||
|
bancoPreguntasUsadas: esGenerica
|
||||||
|
? [...prev.bancoPreguntasUsadas, originalIdx]
|
||||||
|
: prev.bancoPreguntasUsadas,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}, 4000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function responder(indiceOpcion: number | null) {
|
||||||
|
if (!estado.preguntaActual) return
|
||||||
|
const esCorrecta = indiceOpcion !== null && indiceOpcion === estado.preguntaActual.correcta
|
||||||
|
|
||||||
|
if (esCorrecta) sounds.correct?.play()
|
||||||
|
else sounds.incorrect?.play()
|
||||||
|
|
||||||
|
const nuevasCorrectas = estado.correctas + (esCorrecta ? 1 : 0)
|
||||||
|
const nuevasRespondidas = estado.preguntasRespondidas + 1
|
||||||
|
const completado = nuevasRespondidas >= MAX_PREGUNTAS
|
||||||
|
const aprobado = completado && nuevasCorrectas >= MIN_CORRECTAS
|
||||||
|
|
||||||
|
setEstado((prev) => ({
|
||||||
|
...prev,
|
||||||
|
correctas: nuevasCorrectas,
|
||||||
|
preguntasRespondidas: nuevasRespondidas,
|
||||||
|
mostrarFeedback: true,
|
||||||
|
feedbackCorrecto: esCorrecta,
|
||||||
|
completado,
|
||||||
|
aprobado,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
function cerrarFeedback() {
|
||||||
|
setEstado((prev) => ({
|
||||||
|
...prev,
|
||||||
|
preguntaActual: null,
|
||||||
|
categoriaActual: null,
|
||||||
|
mostrarFeedback: false,
|
||||||
|
isSpinning: false,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
return { estado, categorias, girar, responder, cerrarFeedback, MAX_PREGUNTAS, MIN_CORRECTAS }
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
import { useEffect } from 'react'
|
||||||
|
import {
|
||||||
|
initSCORM,
|
||||||
|
finishSCORM,
|
||||||
|
getScore,
|
||||||
|
setScore,
|
||||||
|
getLessonStatus,
|
||||||
|
setLessonStatus,
|
||||||
|
getLessonLocation,
|
||||||
|
setLessonLocation,
|
||||||
|
getSuspendData,
|
||||||
|
setSuspendData,
|
||||||
|
getStudentName,
|
||||||
|
getScormData,
|
||||||
|
setScormData,
|
||||||
|
completeLesson,
|
||||||
|
isConnected,
|
||||||
|
} from '../scorm/scorm'
|
||||||
|
|
||||||
|
export function useSCORM() {
|
||||||
|
useEffect(() => {
|
||||||
|
initSCORM()
|
||||||
|
window.addEventListener('beforeunload', finishSCORM)
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('beforeunload', finishSCORM)
|
||||||
|
finishSCORM()
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return {
|
||||||
|
isConnected,
|
||||||
|
getStudentName,
|
||||||
|
getScore,
|
||||||
|
setScore,
|
||||||
|
getLessonStatus,
|
||||||
|
setLessonStatus,
|
||||||
|
getLessonLocation,
|
||||||
|
setLessonLocation,
|
||||||
|
getSuspendData,
|
||||||
|
setSuspendData,
|
||||||
|
getScormData,
|
||||||
|
setScormData,
|
||||||
|
completeLesson,
|
||||||
|
finishSCORM,
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,34 @@
|
|||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
|
||||||
|
const BASE_WIDTH = 1920
|
||||||
|
const BASE_HEIGHT = 1080
|
||||||
|
|
||||||
|
export function useScale() {
|
||||||
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function scale() {
|
||||||
|
const el = ref.current
|
||||||
|
if (!el) return
|
||||||
|
|
||||||
|
const scaleX = window.innerWidth / BASE_WIDTH
|
||||||
|
const scaleY = window.innerHeight / BASE_HEIGHT
|
||||||
|
const s = Math.min(scaleX, scaleY)
|
||||||
|
|
||||||
|
el.style.transform = `scale(${s})`
|
||||||
|
el.style.transformOrigin = 'top left'
|
||||||
|
el.style.width = `${BASE_WIDTH}px`
|
||||||
|
el.style.height = `${BASE_HEIGHT}px`
|
||||||
|
el.style.position = 'absolute'
|
||||||
|
el.style.left = `${(window.innerWidth - BASE_WIDTH * s) / 2}px`
|
||||||
|
el.style.top = `${(window.innerHeight - BASE_HEIGHT * s) / 2}px`
|
||||||
|
el.style.overflow = 'hidden'
|
||||||
|
}
|
||||||
|
|
||||||
|
scale()
|
||||||
|
window.addEventListener('resize', scale)
|
||||||
|
return () => window.removeEventListener('resize', scale)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return ref
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
import type { ReactNode } from 'react'
|
||||||
|
import { useScale } from '../hooks/useScale'
|
||||||
|
import Header from '../components/layout/Header'
|
||||||
|
import Footer from '../components/layout/Footer'
|
||||||
|
|
||||||
|
interface MainLayoutProps {
|
||||||
|
children: ReactNode
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function MainLayout({ children }: MainLayoutProps) {
|
||||||
|
const scaleRef = useScale()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-screen h-screen overflow-hidden bg-white relative">
|
||||||
|
<div ref={scaleRef} className="bg-gray-100 flex flex-col">
|
||||||
|
<Header />
|
||||||
|
<main className="flex-1 flex items-center justify-center px-4 py-8">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import './index.css'
|
||||||
|
import App from './App.tsx'
|
||||||
|
|
||||||
|
// Simulador SCORM solo en desarrollo
|
||||||
|
if (import.meta.env.DEV) {
|
||||||
|
const { Scorm12API } = await import('scorm-again')
|
||||||
|
const api = new Scorm12API({})
|
||||||
|
window.API = api
|
||||||
|
api.lmsInitialize()
|
||||||
|
}
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
@@ -0,0 +1,145 @@
|
|||||||
|
interface SCORM12API {
|
||||||
|
LMSInitialize: (s: string) => string
|
||||||
|
LMSGetValue: (key: string) => string
|
||||||
|
LMSSetValue: (key: string, value: string) => string
|
||||||
|
LMSCommit: (s: string) => string
|
||||||
|
LMSFinish: (s: string) => string
|
||||||
|
}
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
API?: SCORM12API
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let sessionStartTime: number | null = null
|
||||||
|
let scormFinished = false
|
||||||
|
|
||||||
|
// ─── API ──────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
function getAPI(): SCORM12API | null {
|
||||||
|
if (window.API) return window.API
|
||||||
|
if (window.parent?.API) return window.parent.API
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
function isConnected(): boolean {
|
||||||
|
return getAPI() !== null
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Get / Set genérico con fallback a sessionStorage ────────────────────────
|
||||||
|
|
||||||
|
export function getScormData(key: string): string {
|
||||||
|
const api = getAPI()
|
||||||
|
if (api) return api.LMSGetValue(key) ?? ''
|
||||||
|
return sessionStorage.getItem(key) ?? ''
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setScormData(key: string, value: string): boolean {
|
||||||
|
const api = getAPI()
|
||||||
|
if (api) {
|
||||||
|
const ok = api.LMSSetValue(key, value)
|
||||||
|
api.LMSCommit('')
|
||||||
|
return ok === 'true'
|
||||||
|
}
|
||||||
|
sessionStorage.setItem(key, value)
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Inicialización ───────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function initSCORM(): void {
|
||||||
|
const api = getAPI()
|
||||||
|
if (api) {
|
||||||
|
api.LMSInitialize('')
|
||||||
|
const status = api.LMSGetValue('cmi.core.lesson_status')
|
||||||
|
if (status === 'not attempted') {
|
||||||
|
api.LMSSetValue('cmi.core.lesson_status', 'incomplete')
|
||||||
|
api.LMSCommit('')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
sessionStartTime = Date.now()
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Lesson status ────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function getLessonStatus(): string {
|
||||||
|
return getScormData('cmi.core.lesson_status')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setLessonStatus(status: 'passed' | 'failed' | 'completed' | 'incomplete'): boolean {
|
||||||
|
return setScormData('cmi.core.lesson_status', status)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Lesson location ──────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function getLessonLocation(): string {
|
||||||
|
return getScormData('cmi.core.lesson_location')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setLessonLocation(location: string): boolean {
|
||||||
|
return setScormData('cmi.core.lesson_location', location)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Score ────────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function getScore(): number | null {
|
||||||
|
const val = getScormData('cmi.core.score.raw')
|
||||||
|
return val !== '' ? Number(val) : null
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setScore(score: number, maxScore = 100, minScore = 0): void {
|
||||||
|
setScormData('cmi.core.score.raw', String(score))
|
||||||
|
setScormData('cmi.core.score.max', String(maxScore))
|
||||||
|
setScormData('cmi.core.score.min', String(minScore))
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Suspend data ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function getSuspendData<T = unknown>(): T | null {
|
||||||
|
const val = getScormData('cmi.suspend_data')
|
||||||
|
if (!val) return null
|
||||||
|
try {
|
||||||
|
return JSON.parse(val) as T
|
||||||
|
} catch {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setSuspendData(data: unknown): boolean {
|
||||||
|
return setScormData('cmi.suspend_data', JSON.stringify(data))
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Student name ─────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function getStudentName(): string {
|
||||||
|
return getScormData('cmi.core.student_name')
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Finish con session_time ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function finishSCORM(): void {
|
||||||
|
if (scormFinished) return
|
||||||
|
const api = getAPI()
|
||||||
|
if (!api) return
|
||||||
|
|
||||||
|
if (sessionStartTime) {
|
||||||
|
const elapsed = Math.floor((Date.now() - sessionStartTime) / 1000)
|
||||||
|
const hh = String(Math.floor(elapsed / 3600)).padStart(2, '0')
|
||||||
|
const mm = String(Math.floor((elapsed % 3600) / 60)).padStart(2, '0')
|
||||||
|
const ss = String(elapsed % 60).padStart(2, '0')
|
||||||
|
api.LMSSetValue('cmi.core.session_time', `${hh}:${mm}:${ss}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
api.LMSCommit('')
|
||||||
|
api.LMSFinish('')
|
||||||
|
scormFinished = true
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Helper: completar lección ────────────────────────────────────────────────
|
||||||
|
|
||||||
|
export function completeLesson(): void {
|
||||||
|
setLessonStatus('completed')
|
||||||
|
}
|
||||||
|
|
||||||
|
export { isConnected }
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
export interface Pregunta {
|
||||||
|
id: number
|
||||||
|
pregunta: string
|
||||||
|
opciones: string[]
|
||||||
|
correcta: number
|
||||||
|
retroalimentacion: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface Categoria {
|
||||||
|
id: number
|
||||||
|
nombre: string
|
||||||
|
color: string
|
||||||
|
emoji: string
|
||||||
|
preguntas: Pregunta[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface PreguntasData {
|
||||||
|
categorias: Categoria[]
|
||||||
|
bancoGenerico: Pregunta[]
|
||||||
|
}
|
||||||
Vendored
+11
@@ -0,0 +1,11 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
|
|
||||||
|
declare module '*.png' {
|
||||||
|
const src: string
|
||||||
|
export default src
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module '*.svg' {
|
||||||
|
const src: string
|
||||||
|
export default src
|
||||||
|
}
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react(), tailwindcss()],
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user