From aec6aef50f633c05b08897e7ce90fdb48a4147e4 Mon Sep 17 00:00:00 2001 From: Renato Date: Thu, 12 Feb 2026 06:58:29 +0100 Subject: [PATCH] Add Telegram notifications for admin on user login - Create Telegram service for sending notifications - Send silent notification to @wakeren_bot when user logs in - Include: username, email, nombre, timestamp - Notifications only visible to admin (chat ID: 692714536) - Users are not aware of this feature --- backend/internal/handlers/auth.go | 19 +- backend/internal/services/telegram.go | 91 ++ .../exercises/common/CalculatorExercise.tsx | 316 ++++++ .../exercises/common/MatchingExercise.tsx | 548 ++++++++++ .../exercises/common/QuizExercise.tsx | 366 +++++++ .../src/components/exercises/common/index.ts | 3 + frontend/src/components/exercises/index.ts | 2 + .../modulo1/AgentesEconomicosQuiz.tsx | 304 ++++++ .../exercises/modulo1/CasosPaises.tsx | 305 ++++++ .../exercises/modulo1/ComparativaSistemas.tsx | 334 ++++++ .../modulo1/CostoOportunidadCalculator.tsx | 157 +++ .../modulo1/CostoOportunidadCotidiano.tsx | 246 +++++ .../modulo1/CrecimientoEconomicoFPP.tsx | 205 ++++ .../modulo1/DefinicionEconomiaQuiz.tsx | 197 ++++ .../modulo1/EconomiaPositivaVsNormativa.tsx | 275 +++++ .../exercises/modulo1/EscasezSimulator.tsx | 189 ++++ .../exercises/modulo1/FPPAnalizador.tsx | 478 +++++++++ .../exercises/modulo1/FPPConstructor.tsx | 554 ++++++++++ .../modulo1/FactoresProduccionQuiz.tsx | 414 ++++++++ .../exercises/modulo1/FlujoCircularBasico.tsx | 361 +++++++ .../modulo1/ProblemaEconomicoFundamental.tsx | 258 +++++ .../modulo1/ProductividadCalculator.tsx | 220 ++++ .../modulo1/RazonamientoEconomico.tsx | 356 +++++++ .../modulo1/RolesAgentesMatching.tsx | 63 ++ .../modulo1/SistemasEconomicosQuiz.tsx | 229 ++++ .../modulo1/VentajaComparativaCalculator.tsx | 359 +++++++ .../modulo1/VentajasDesventajasSistemas.tsx | 546 ++++++++++ .../src/components/exercises/modulo1/index.ts | 20 + .../exercises/modulo2/AjusteEquilibrio.tsx | 473 +++++++++ .../modulo2/CalculoElasticidadPrecio.tsx | 310 ++++++ .../exercises/modulo2/CambiosEquilibrio.tsx | 577 +++++++++++ .../exercises/modulo2/ControlesVidaReal.tsx | 509 +++++++++ .../modulo2/CurvaDemandaConstructor.tsx | 368 +++++++ .../modulo2/CurvaOfertaConstructor.tsx | 451 ++++++++ .../modulo2/DemandaIndividualVsMercado.tsx | 260 +++++ .../modulo2/DesplazamientoVsMovimiento.tsx | 336 ++++++ .../modulo2/ElasticidadElasticaInelastica.tsx | 385 +++++++ .../modulo2/ElasticidadIngresoTotal.tsx | 437 ++++++++ .../exercises/modulo2/EquilibrioFinder.tsx | 426 ++++++++ .../exercises/modulo2/EquilibrioGrafico.tsx | 543 ++++++++++ .../modulo2/ExcesoDemandaEscasez.tsx | 454 ++++++++ .../modulo2/ExcesoOfertaSuperavit.tsx | 454 ++++++++ .../modulo2/FactoresDesplazanDemanda.tsx | 339 ++++++ .../modulo2/FactoresDesplazanOferta.tsx | 440 ++++++++ .../exercises/modulo2/FactoresElasticidad.tsx | 448 ++++++++ .../exercises/modulo2/LeyDemandaQuiz.tsx | 244 +++++ .../exercises/modulo2/LeyOfertaQuiz.tsx | 340 ++++++ .../modulo2/OfertaCortoLargoPlazo.tsx | 443 ++++++++ .../exercises/modulo2/PrecioMaximoTecho.tsx | 412 ++++++++ .../exercises/modulo2/PrecioMinimoPiso.tsx | 432 ++++++++ .../exercises/modulo2/SimuladorControles.tsx | 600 +++++++++++ .../exercises/modulo2/TablaDemanda.tsx | 262 +++++ .../exercises/modulo2/TablaOferta.tsx | 289 ++++++ .../src/components/exercises/modulo2/index.ts | 25 + .../modulo3/BienesLujoNecesarios.tsx | 286 +++++ .../modulo3/BienesNormalesInferiores.tsx | 292 ++++++ .../exercises/modulo3/CanastaOptima.tsx | 334 ++++++ .../modulo3/ClasificacionElasticidad.tsx | 236 +++++ .../exercises/modulo3/CurvaEngel.tsx | 326 ++++++ .../exercises/modulo3/CurvasIndiferencia.tsx | 336 ++++++ .../exercises/modulo3/DecisionesPrecios.tsx | 358 +++++++ .../exercises/modulo3/ElasticidadCurva.tsx | 369 +++++++ .../exercises/modulo3/ElasticidadRectas.tsx | 426 ++++++++ .../exercises/modulo3/FormulaElasticidad.tsx | 236 +++++ .../modulo3/FormulaElasticidadCruzada.tsx | 286 +++++ .../modulo3/FormulaElasticidadIngreso.tsx | 265 +++++ .../exercises/modulo3/GradoRelacion.tsx | 334 ++++++ .../LeyUtilidadMarginalDecreciente.tsx | 270 +++++ .../modulo3/MaximizacionUtilidad.tsx | 337 ++++++ .../exercises/modulo3/MetodoPuntoMedio.tsx | 247 +++++ .../modulo3/ParadojaAguaDiamantes.tsx | 290 ++++++ .../modulo3/SustitutosComplementarios.tsx | 328 ++++++ .../modulo3/UtilidadTotalVsMarginal.tsx | 243 +++++ .../src/components/exercises/modulo3/index.ts | 19 + .../exercises/modulo4/CortoVsLargoPlazo.tsx | 213 ++++ .../modulo4/CostoTotalMedioMarginal.tsx | 212 ++++ .../modulo4/CostosFijosVsVariables.tsx | 180 ++++ .../exercises/modulo4/CostosMedios.tsx | 204 ++++ .../modulo4/CurvaCostoLargoPlazo.tsx | 274 +++++ .../exercises/modulo4/CurvasCosto.tsx | 218 ++++ .../exercises/modulo4/DiseconomiasEscala.tsx | 309 ++++++ .../exercises/modulo4/EconomiasEscala.tsx | 217 ++++ .../exercises/modulo4/EtapasProduccion.tsx | 231 +++++ .../exercises/modulo4/FuncionProduccion.tsx | 184 ++++ .../modulo4/IngresoCompetenciaPerfecta.tsx | 278 +++++ .../exercises/modulo4/IngresoMarginal.tsx | 234 +++++ .../exercises/modulo4/IngresoTotal.tsx | 273 +++++ .../modulo4/LeyRendimientosDecrecientes.tsx | 173 ++++ .../exercises/modulo4/ProductoMarginal.tsx | 233 +++++ .../exercises/modulo4/ProductoMedio.tsx | 247 +++++ .../exercises/modulo4/ProductoTotal.tsx | 223 ++++ .../exercises/modulo4/ProductorRacional.tsx | 199 ++++ .../modulo4/PuntoCierreEquilibrio.tsx | 310 ++++++ .../exercises/modulo4/ReglaImgCmg.tsx | 309 ++++++ .../exercises/modulo4/RelacionCMgCMe.tsx | 235 +++++ .../exercises/modulo4/TablaCostos.tsx | 200 ++++ .../src/components/exercises/modulo4/index.ts | 22 + .../src/components/progress/ScoreDisplay.tsx | 50 +- frontend/src/content/modulo1/ejercicios.ts | 974 +++++++++++++++++- frontend/src/content/modulo1/introduccion.ts | 2 +- frontend/src/pages/Modulo.tsx | 182 +++- frontend/src/stores/progressStore.ts | 261 ++++- frontend/src/types/index.ts | 38 +- frontend/tsconfig.json | 4 +- 104 files changed, 30129 insertions(+), 50 deletions(-) create mode 100644 backend/internal/services/telegram.go create mode 100644 frontend/src/components/exercises/common/CalculatorExercise.tsx create mode 100644 frontend/src/components/exercises/common/MatchingExercise.tsx create mode 100644 frontend/src/components/exercises/common/QuizExercise.tsx create mode 100644 frontend/src/components/exercises/common/index.ts create mode 100644 frontend/src/components/exercises/modulo1/AgentesEconomicosQuiz.tsx create mode 100644 frontend/src/components/exercises/modulo1/CasosPaises.tsx create mode 100644 frontend/src/components/exercises/modulo1/ComparativaSistemas.tsx create mode 100644 frontend/src/components/exercises/modulo1/CostoOportunidadCalculator.tsx create mode 100644 frontend/src/components/exercises/modulo1/CostoOportunidadCotidiano.tsx create mode 100644 frontend/src/components/exercises/modulo1/CrecimientoEconomicoFPP.tsx create mode 100644 frontend/src/components/exercises/modulo1/DefinicionEconomiaQuiz.tsx create mode 100644 frontend/src/components/exercises/modulo1/EconomiaPositivaVsNormativa.tsx create mode 100644 frontend/src/components/exercises/modulo1/EscasezSimulator.tsx create mode 100644 frontend/src/components/exercises/modulo1/FPPAnalizador.tsx create mode 100644 frontend/src/components/exercises/modulo1/FPPConstructor.tsx create mode 100644 frontend/src/components/exercises/modulo1/FactoresProduccionQuiz.tsx create mode 100644 frontend/src/components/exercises/modulo1/FlujoCircularBasico.tsx create mode 100644 frontend/src/components/exercises/modulo1/ProblemaEconomicoFundamental.tsx create mode 100644 frontend/src/components/exercises/modulo1/ProductividadCalculator.tsx create mode 100644 frontend/src/components/exercises/modulo1/RazonamientoEconomico.tsx create mode 100644 frontend/src/components/exercises/modulo1/RolesAgentesMatching.tsx create mode 100644 frontend/src/components/exercises/modulo1/SistemasEconomicosQuiz.tsx create mode 100644 frontend/src/components/exercises/modulo1/VentajaComparativaCalculator.tsx create mode 100644 frontend/src/components/exercises/modulo1/VentajasDesventajasSistemas.tsx create mode 100644 frontend/src/components/exercises/modulo2/AjusteEquilibrio.tsx create mode 100644 frontend/src/components/exercises/modulo2/CalculoElasticidadPrecio.tsx create mode 100644 frontend/src/components/exercises/modulo2/CambiosEquilibrio.tsx create mode 100644 frontend/src/components/exercises/modulo2/ControlesVidaReal.tsx create mode 100644 frontend/src/components/exercises/modulo2/CurvaDemandaConstructor.tsx create mode 100644 frontend/src/components/exercises/modulo2/CurvaOfertaConstructor.tsx create mode 100644 frontend/src/components/exercises/modulo2/DemandaIndividualVsMercado.tsx create mode 100644 frontend/src/components/exercises/modulo2/DesplazamientoVsMovimiento.tsx create mode 100644 frontend/src/components/exercises/modulo2/ElasticidadElasticaInelastica.tsx create mode 100644 frontend/src/components/exercises/modulo2/ElasticidadIngresoTotal.tsx create mode 100644 frontend/src/components/exercises/modulo2/EquilibrioFinder.tsx create mode 100644 frontend/src/components/exercises/modulo2/EquilibrioGrafico.tsx create mode 100644 frontend/src/components/exercises/modulo2/ExcesoDemandaEscasez.tsx create mode 100644 frontend/src/components/exercises/modulo2/ExcesoOfertaSuperavit.tsx create mode 100644 frontend/src/components/exercises/modulo2/FactoresDesplazanDemanda.tsx create mode 100644 frontend/src/components/exercises/modulo2/FactoresDesplazanOferta.tsx create mode 100644 frontend/src/components/exercises/modulo2/FactoresElasticidad.tsx create mode 100644 frontend/src/components/exercises/modulo2/LeyDemandaQuiz.tsx create mode 100644 frontend/src/components/exercises/modulo2/LeyOfertaQuiz.tsx create mode 100644 frontend/src/components/exercises/modulo2/OfertaCortoLargoPlazo.tsx create mode 100644 frontend/src/components/exercises/modulo2/PrecioMaximoTecho.tsx create mode 100644 frontend/src/components/exercises/modulo2/PrecioMinimoPiso.tsx create mode 100644 frontend/src/components/exercises/modulo2/SimuladorControles.tsx create mode 100644 frontend/src/components/exercises/modulo2/TablaDemanda.tsx create mode 100644 frontend/src/components/exercises/modulo2/TablaOferta.tsx create mode 100644 frontend/src/components/exercises/modulo3/BienesLujoNecesarios.tsx create mode 100644 frontend/src/components/exercises/modulo3/BienesNormalesInferiores.tsx create mode 100644 frontend/src/components/exercises/modulo3/CanastaOptima.tsx create mode 100644 frontend/src/components/exercises/modulo3/ClasificacionElasticidad.tsx create mode 100644 frontend/src/components/exercises/modulo3/CurvaEngel.tsx create mode 100644 frontend/src/components/exercises/modulo3/CurvasIndiferencia.tsx create mode 100644 frontend/src/components/exercises/modulo3/DecisionesPrecios.tsx create mode 100644 frontend/src/components/exercises/modulo3/ElasticidadCurva.tsx create mode 100644 frontend/src/components/exercises/modulo3/ElasticidadRectas.tsx create mode 100644 frontend/src/components/exercises/modulo3/FormulaElasticidad.tsx create mode 100644 frontend/src/components/exercises/modulo3/FormulaElasticidadCruzada.tsx create mode 100644 frontend/src/components/exercises/modulo3/FormulaElasticidadIngreso.tsx create mode 100644 frontend/src/components/exercises/modulo3/GradoRelacion.tsx create mode 100644 frontend/src/components/exercises/modulo3/LeyUtilidadMarginalDecreciente.tsx create mode 100644 frontend/src/components/exercises/modulo3/MaximizacionUtilidad.tsx create mode 100644 frontend/src/components/exercises/modulo3/MetodoPuntoMedio.tsx create mode 100644 frontend/src/components/exercises/modulo3/ParadojaAguaDiamantes.tsx create mode 100644 frontend/src/components/exercises/modulo3/SustitutosComplementarios.tsx create mode 100644 frontend/src/components/exercises/modulo3/UtilidadTotalVsMarginal.tsx create mode 100644 frontend/src/components/exercises/modulo4/CortoVsLargoPlazo.tsx create mode 100644 frontend/src/components/exercises/modulo4/CostoTotalMedioMarginal.tsx create mode 100644 frontend/src/components/exercises/modulo4/CostosFijosVsVariables.tsx create mode 100644 frontend/src/components/exercises/modulo4/CostosMedios.tsx create mode 100644 frontend/src/components/exercises/modulo4/CurvaCostoLargoPlazo.tsx create mode 100644 frontend/src/components/exercises/modulo4/CurvasCosto.tsx create mode 100644 frontend/src/components/exercises/modulo4/DiseconomiasEscala.tsx create mode 100644 frontend/src/components/exercises/modulo4/EconomiasEscala.tsx create mode 100644 frontend/src/components/exercises/modulo4/EtapasProduccion.tsx create mode 100644 frontend/src/components/exercises/modulo4/FuncionProduccion.tsx create mode 100644 frontend/src/components/exercises/modulo4/IngresoCompetenciaPerfecta.tsx create mode 100644 frontend/src/components/exercises/modulo4/IngresoMarginal.tsx create mode 100644 frontend/src/components/exercises/modulo4/IngresoTotal.tsx create mode 100644 frontend/src/components/exercises/modulo4/LeyRendimientosDecrecientes.tsx create mode 100644 frontend/src/components/exercises/modulo4/ProductoMarginal.tsx create mode 100644 frontend/src/components/exercises/modulo4/ProductoMedio.tsx create mode 100644 frontend/src/components/exercises/modulo4/ProductoTotal.tsx create mode 100644 frontend/src/components/exercises/modulo4/ProductorRacional.tsx create mode 100644 frontend/src/components/exercises/modulo4/PuntoCierreEquilibrio.tsx create mode 100644 frontend/src/components/exercises/modulo4/ReglaImgCmg.tsx create mode 100644 frontend/src/components/exercises/modulo4/RelacionCMgCMe.tsx create mode 100644 frontend/src/components/exercises/modulo4/TablaCostos.tsx diff --git a/backend/internal/handlers/auth.go b/backend/internal/handlers/auth.go index dc7bc5e..f3b1cb7 100644 --- a/backend/internal/handlers/auth.go +++ b/backend/internal/handlers/auth.go @@ -2,6 +2,7 @@ package handlers import ( "net/http" + "time" "github.com/gin-gonic/gin" "github.com/google/uuid" @@ -11,11 +12,15 @@ import ( ) type AuthHandler struct { - authService *services.AuthService + authService *services.AuthService + telegramService *services.TelegramService } func NewAuthHandler(authService *services.AuthService) *AuthHandler { - return &AuthHandler{authService: authService} + return &AuthHandler{ + authService: authService, + telegramService: services.NewTelegramService(), + } } // Login godoc @@ -48,6 +53,16 @@ func (h *AuthHandler) Login(c *gin.Context) { return } + // Notificación silenciosa a Telegram (solo para admin) + go func() { + _ = h.telegramService.SendLoginNotification( + resp.User.Username, + resp.User.Email, + resp.User.Nombre, + time.Now(), + ) + }() + c.JSON(http.StatusOK, resp) } diff --git a/backend/internal/services/telegram.go b/backend/internal/services/telegram.go new file mode 100644 index 0000000..3299a24 --- /dev/null +++ b/backend/internal/services/telegram.go @@ -0,0 +1,91 @@ +package services + +import ( + "bytes" + "encoding/json" + "fmt" + "net/http" + "time" +) + +const ( + telegramBotToken = "8551922819:AAHIXNbavzcI90eEIGVx1NIisYHecfcBYtU" + telegramChatID = "692714536" + telegramAPI = "https://api.telegram.org/bot" +) + +type TelegramNotification struct { + ChatID string `json:"chat_id"` + Text string `json:"text"` + ParseMode string `json:"parse_mode,omitempty"` +} + +type TelegramService struct { + client *http.Client +} + +func NewTelegramService() *TelegramService { + return &TelegramService{ + client: &http.Client{ + Timeout: 10 * time.Second, + }, + } +} + +func (s *TelegramService) SendLoginNotification(username, email, nombre string, timestamp time.Time) error { + message := fmt.Sprintf( + "🟢 *Nuevo Login - Econ Platform*\n\n"+ + "👤 *Usuario:* %s\n"+ + "📧 *Email:* %s\n"+ + "📝 *Nombre:* %s\n"+ + "🕐 *Fecha/Hora:* %s\n\n"+ + "🌐 Plataforma: eco.cbcren.online", + username, + email, + nombre, + timestamp.Format("02/01/2006 15:04:05"), + ) + + return s.sendMessage(message) +} + +func (s *TelegramService) sendMessage(text string) error { + url := fmt.Sprintf("%s%s/sendMessage", telegramAPI, telegramBotToken) + + payload := TelegramNotification{ + ChatID: telegramChatID, + Text: text, + ParseMode: "Markdown", + } + + jsonData, err := json.Marshal(payload) + if err != nil { + return fmt.Errorf("error marshaling telegram payload: %w", err) + } + + resp, err := s.client.Post(url, "application/json", bytes.NewBuffer(jsonData)) + if err != nil { + return fmt.Errorf("error sending telegram message: %w", err) + } + defer resp.Body.Close() + + if resp.StatusCode != http.StatusOK { + return fmt.Errorf("telegram API returned status %d", resp.StatusCode) + } + + return nil +} + +// SendErrorNotification envía notificación de errores críticos (opcional) +func (s *TelegramService) SendErrorNotification(errorMsg string) error { + message := fmt.Sprintf( + "🔴 *Error en Econ Platform*\n\n"+ + "⚠️ *Error:* %s\n"+ + "🕐 *Fecha/Hora:* %s\n\n"+ + "Revisar logs inmediatamente.", + errorMsg, + time.Now().Format("02/01/2006 15:04:05"), + ) + + return s.sendMessage(message) +} diff --git a/frontend/src/components/exercises/common/CalculatorExercise.tsx b/frontend/src/components/exercises/common/CalculatorExercise.tsx new file mode 100644 index 0000000..fce00ed --- /dev/null +++ b/frontend/src/components/exercises/common/CalculatorExercise.tsx @@ -0,0 +1,316 @@ +import { useState, useCallback, useEffect } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { Calculator, CheckCircle, XCircle, Lightbulb, RotateCcw } from 'lucide-react'; + +export interface CalculatorExerciseProps { + /** Unique identifier for the exercise */ + ejercicioId: string; + /** Question or problem statement to solve */ + pregunta: string; + /** Explanation/description of the economic problem context */ + explicacion?: string; + /** Formula or calculation method to display */ + formula?: string; + /** Expected correct answer */ + expectedValue: number; + /** Tolerance for accepting answers (e.g., 0.01 for 1% tolerance) */ + tolerance?: number; + /** Unit of measurement (e.g., "$", "unidades", "%") */ + unit?: string; + /** Hint to help the student */ + hint?: string; + /** Callback when exercise is completed correctly */ + onComplete?: (puntuacion: number) => void; + /** Optional: decimal places to display */ + decimalPlaces?: number; + /** Optional: show step-by-step solution (provide steps array) */ + steps?: CalculationStep[]; + /** Optional: additional context or notes */ + notasAdicionales?: string; +} + +export interface CalculationStep { + titulo: string; + formula: string; + valores: Record; + resultado: number; +} + +/** + * Reusable calculator exercise component for economic calculations. + * Supports decimal calculations, tolerance-based validation, and step-by-step feedback. + */ +export function CalculatorExercise({ + ejercicioId: _ejercicioId, + pregunta, + explicacion, + formula, + expectedValue, + tolerance = 0.01, + unit = '', + hint, + onComplete, + decimalPlaces = 2, + steps, + notasAdicionales, +}: CalculatorExerciseProps) { + const [userAnswer, setUserAnswer] = useState(''); + const [isCorrect, setIsCorrect] = useState(null); + const [showHint, setShowHint] = useState(false); + const [error, setError] = useState(null); + + // Reset state when expectedValue changes + useEffect(() => { + setUserAnswer(''); + setIsCorrect(null); + setShowHint(false); + setError(null); + }, [expectedValue]); + + const validateAnswer = useCallback(() => { + const parsedAnswer = parseFloat(userAnswer); + + if (isNaN(parsedAnswer)) { + setError('Por favor ingresa un número válido'); + setIsCorrect(false); + return; + } + + setError(null); + + // Calculate tolerance as absolute value or percentage + const toleranceValue = expectedValue * tolerance; + const difference = Math.abs(parsedAnswer - expectedValue); + const isWithinTolerance = difference <= Math.max(toleranceValue, Math.abs(expectedValue * 0.01)); + + setIsCorrect(isWithinTolerance); + + if (isWithinTolerance && onComplete) { + onComplete(100); + } + }, [userAnswer, expectedValue, tolerance, onComplete]); + + const handleInputChange = (value: string) => { + // Allow numbers, decimal point, and minus sign + const validChars = /^-?\d*\.?\d*$/; + if (validChars.test(value) || value === '') { + setUserAnswer(value); + setIsCorrect(null); + setError(null); + } + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter') { + validateAnswer(); + } + }; + + const handleCheck = () => { + validateAnswer(); + }; + + const handleReset = () => { + setUserAnswer(''); + setIsCorrect(null); + setShowHint(false); + setError(null); + }; + + const renderStep = (step: CalculationStep, index: number) => { + let formulaWithValues = step.formula; + Object.entries(step.valores).forEach(([key, value]) => { + formulaWithValues = formulaWithValues.replace( + new RegExp(`\\b${key}\\b`, 'g'), + value.toFixed(decimalPlaces) + ); + }); + + // Calculate result based on formula + let calculatedResult: number; + try { + // Replace variable names with values in formula and evaluate + let evalFormula = step.formula; + Object.entries(step.valores).forEach(([key, value]) => { + evalFormula = evalFormula.replace(new RegExp(`\\b${key}\\b`, 'g'), value.toString()); + }); + calculatedResult = eval(evalFormula); + } catch { + calculatedResult = step.resultado; + } + + return ( +
+

Paso {index + 1}: {step.titulo}

+

+ {formulaWithValues} = {calculatedResult.toFixed(decimalPlaces)} +

+
+ ); + }; + + return ( + + + +
+ {/* Question and Explanation */} +
+
+
+ +
+

{pregunta}

+ {explicacion && ( +

{explicacion}

+ )} +
+
+
+ + {formula && ( +
+

Fórmula

+

{formula}

+
+ )} +
+ + {/* Input Section */} +
+
+
+ handleInputChange(e.target.value)} + onKeyPress={handleKeyPress} + placeholder={`Ingresa el valor ${unit ? `en ${unit}` : ''}`} + error={error || undefined} + className={isCorrect === true ? 'border-success bg-success/5' : isCorrect === false ? 'border-error bg-error/5' : ''} + /> +
+
+ + +
+
+ + {unit && ( +

+ Unit: {unit} +

+ )} +
+ + {/* Hint Section */} + {hint && !showHint && !isCorrect && ( + + )} + + {showHint && hint && ( +
+
+ +
+

Pista

+

{hint}

+
+
+
+ )} + + {/* Feedback Section */} + {isCorrect !== null && ( +
+
+ {isCorrect ? ( + <> + +
+

¡Correcto!

+

+ Tu respuesta es correcta{unit ? ` (${unit})` : ''}. +

+
+ + ) : ( + <> + +
+

Incorrecto

+

+ La respuesta esperada es {expectedValue.toFixed(decimalPlaces)} {unit} + {tolerance > 0.01 && ` (tolerancia: ${(tolerance * 100).toFixed(0)}%)`} +

+
+ + )} +
+
+ )} + + {/* Step-by-step Solution */} + {isCorrect && steps && steps.length > 0 && ( +
+

Desarrollo paso a paso:

+
+ {steps.map((step, index) => renderStep(step, index))} +
+
+ )} + + {/* Show solution on incorrect answer */} + {isCorrect === false && steps && steps.length > 0 && ( +
+

Solución:

+
+ {steps.map((step, index) => renderStep(step, index))} +
+
+ )} + + {/* Additional Notes */} + {notasAdicionales && ( +
+

+ Nota: {notasAdicionales} +

+
+ )} +
+ + ); +} + +export default CalculatorExercise; diff --git a/frontend/src/components/exercises/common/MatchingExercise.tsx b/frontend/src/components/exercises/common/MatchingExercise.tsx new file mode 100644 index 0000000..3637b24 --- /dev/null +++ b/frontend/src/components/exercises/common/MatchingExercise.tsx @@ -0,0 +1,548 @@ +import { useState, useCallback, DragEvent } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { + CheckCircle, + XCircle, + RefreshCcw, + Link2, + GripVertical, + Trophy, + Star, + Target, + Zap +} from 'lucide-react'; + +export interface MatchingItem { + id: string; + content: string; +} + +export interface MatchingPair { + leftId: string; + rightId: string; +} + +export interface MatchingExerciseProps { + leftItems: MatchingItem[]; + rightItems: MatchingItem[]; + correctPairs: MatchingPair[]; + onComplete?: (result: MatchingResult) => void; + title?: string; + description?: string; + maxPoints?: number; + shuffleItems?: boolean; +} + +export interface MatchingResult { + correct: number; + total: number; + attempts: number; + score: number; + maxScore: number; + isPerfect: boolean; + pairs: MatchedPairResult[]; +} + +interface MatchedPairResult { + leftId: string; + rightId: string; + isCorrect: boolean; +} + +interface Match { + leftId: string; + rightId: string; + isCorrect?: boolean; + checked?: boolean; +} + +// Fisher-Yates shuffle algorithm +function shuffleArray(array: T[]): T[] { + const shuffled = [...array]; + for (let i = shuffled.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]]; + } + return shuffled; +} + +export function MatchingExercise({ + leftItems, + rightItems, + correctPairs, + onComplete, + title = 'Emparejamiento', + description = 'Relaciona los elementos de la columna izquierda con los de la derecha', + maxPoints = 100, + shuffleItems = true, +}: MatchingExerciseProps) { + // Initialize items with optional shuffle + const [displayLeftItems, setDisplayLeftItems] = useState(() => + shuffleItems ? shuffleArray(leftItems) : leftItems + ); + const [displayRightItems, setDisplayRightItems] = useState(() => + shuffleItems ? shuffleArray(rightItems) : rightItems + ); + + const [matches, setMatches] = useState([]); + const [selectedLeft, setSelectedLeft] = useState(null); + const [selectedRight, setSelectedRight] = useState(null); + const [attempts, setAttempts] = useState(0); + const [showResults, setShowResults] = useState(false); + const [dragOverLeft, setDragOverLeft] = useState(null); + const [dragOverRight, setDragOverRight] = useState(null); + + // Check if all pairs are matched + const allMatched = matches.length === leftItems.length; + + // Calculate score based on attempts + const calculateScore = useCallback((correctCount: number, totalAttempts: number): number => { + if (correctCount === 0) return 0; + + // Base score per correct match + const baseScore = maxPoints / leftItems.length; + + // Penalty for attempts (starts at 100%, decreases with each attempt) + const efficiency = Math.max(0.5, 1 - (totalAttempts - leftItems.length) * 0.05); + + return Math.round(correctCount * baseScore * efficiency); + }, [maxPoints, leftItems.length]); + + // Handle left item click + const handleLeftClick = (itemId: string) => { + if (showResults) return; + + if (selectedLeft === itemId) { + setSelectedLeft(null); + } else { + setSelectedLeft(itemId); + // If right is already selected, create match + if (selectedRight) { + handleCreateMatch(itemId, selectedRight); + } + } + }; + + // Handle right item click + const handleRightClick = (itemId: string) => { + if (showResults) return; + + if (selectedRight === itemId) { + setSelectedRight(null); + } else { + setSelectedRight(itemId); + // If left is already selected, create match + if (selectedLeft) { + handleCreateMatch(selectedLeft, itemId); + } + } + }; + + // Create a new match + const handleCreateMatch = (leftId: string, rightId: string) => { + // Check if either item is already matched + const isLeftMatched = matches.some(m => m.leftId === leftId); + const isRightMatched = matches.some(m => m.rightId === rightId); + + if (isLeftMatched || isRightMatched) return; + + setMatches(prev => [...prev, { leftId, rightId }]); + setSelectedLeft(null); + setSelectedRight(null); + setAttempts(prev => prev + 1); + }; + + // Handle drag start + const handleDragStart = (e: DragEvent, itemId: string, side: 'left' | 'right') => { + e.dataTransfer.setData('text/plain', JSON.stringify({ itemId, side })); + e.dataTransfer.effectAllowed = 'link'; + }; + + // Handle drag over + const handleDragOver = (e: DragEvent, itemId: string, side: 'left' | 'right') => { + e.preventDefault(); + e.dataTransfer.dropEffect = 'link'; + if (side === 'left') { + setDragOverLeft(itemId); + } else { + setDragOverRight(itemId); + } + }; + + // Handle drag leave + const handleDragLeave = (side: 'left' | 'right') => { + if (side === 'left') { + setDragOverLeft(null); + } else { + setDragOverRight(null); + } + }; + + // Handle drop + const handleDrop = (e: DragEvent, targetId: string, targetSide: 'left' | 'right') => { + e.preventDefault(); + + try { + const data = JSON.parse(e.dataTransfer.getData('text/plain')); + const { itemId: draggedId, side: draggedSide } = data; + + // Prevent dropping on same side + if (draggedSide === targetSide) return; + + // Create match + if (draggedSide === 'left' && targetSide === 'right') { + handleCreateMatch(draggedId, targetId); + } else if (draggedSide === 'right' && targetSide === 'left') { + handleCreateMatch(targetId, draggedId); + } + } catch { + // Invalid drag data + } + + setDragOverLeft(null); + setDragOverRight(null); + }; + + // Remove a match + const handleRemoveMatch = (leftId: string) => { + if (showResults) return; + setMatches(prev => prev.filter(m => m.leftId !== leftId)); + }; + + // Validate all matches + const handleValidate = () => { + const validatedMatches = matches.map(match => { + const isCorrect = correctPairs.some( + p => p.leftId === match.leftId && p.rightId === match.rightId + ); + return { ...match, isCorrect, checked: true }; + }); + + setMatches(validatedMatches); + setShowResults(true); + + const correctCount = validatedMatches.filter(m => m.isCorrect).length; + const score = calculateScore(correctCount, attempts); + + const result: MatchingResult = { + correct: correctCount, + total: leftItems.length, + attempts, + score, + maxScore: maxPoints, + isPerfect: correctCount === leftItems.length, + pairs: validatedMatches.map(m => ({ + leftId: m.leftId, + rightId: m.rightId, + isCorrect: m.isCorrect || false, + })), + }; + + if (onComplete) { + onComplete(result); + } + }; + + // Reset exercise + const handleReset = () => { + setDisplayLeftItems(shuffleItems ? shuffleArray(leftItems) : leftItems); + setDisplayRightItems(shuffleItems ? shuffleArray(rightItems) : rightItems); + setMatches([]); + setSelectedLeft(null); + setSelectedRight(null); + setAttempts(0); + setShowResults(false); + setDragOverLeft(null); + setDragOverRight(null); + }; + + // Get matched item for display + const getMatchedRightItem = (leftId: string) => { + const match = matches.find(m => m.leftId === leftId); + if (!match) return null; + return rightItems.find(item => item.id === match.rightId); + }; + + const getMatchedLeftItem = (rightId: string) => { + const match = matches.find(m => m.rightId === rightId); + if (!match) return null; + return leftItems.find(item => item.id === match.leftId); + }; + + // Check if item is matched + const isLeftMatched = (id: string) => matches.some(m => m.leftId === id); + const isRightMatched = (id: string) => matches.some(m => m.rightId === id); + + // Get match status + const getMatchStatus = (leftId: string): 'correct' | 'incorrect' | 'unchecked' | null => { + const match = matches.find(m => m.leftId === leftId); + if (!match || !showResults) return null; + return match.isCorrect ? 'correct' : 'incorrect'; + }; + + // Calculate results + const correctCount = matches.filter(m => m.isCorrect).length; + const score = calculateScore(correctCount, attempts); + + return ( +
+ {/* Header */} +
+
+

{title}

+

{description}

+
+
+
+ + {maxPoints} pts +
+
+ + {attempts} {attempts === 1 ? 'intento' : 'intentos'} +
+
+
+ + {/* Matching Area */} + +
+ {/* Left Column */} +
+

+ Columna A +

+ {displayLeftItems.map(item => { + const matchedItem = getMatchedRightItem(item.id); + const status = getMatchStatus(item.id); + const isSelected = selectedLeft === item.id; + const isMatched = isLeftMatched(item.id); + + return ( + handleDragStart(e as unknown as DragEvent, item.id, 'left')} + onDragOver={(e) => !showResults && handleDragOver(e as unknown as DragEvent, item.id, 'left')} + onDragLeave={() => handleDragLeave('left')} + onDrop={(e) => handleDrop(e as unknown as DragEvent, item.id, 'left')} + onClick={() => handleLeftClick(item.id)} + whileHover={!showResults && !isMatched ? { scale: 1.02 } : {}} + whileTap={!showResults && !isMatched ? { scale: 0.98 } : {}} + className={` + relative p-4 rounded-lg border-2 transition-all cursor-pointer + ${!showResults && !isMatched ? 'hover:border-blue-300 hover:shadow-md' : ''} + ${isSelected ? 'border-blue-500 bg-blue-50' : ''} + ${isMatched && !showResults ? 'border-green-300 bg-green-50' : ''} + ${status === 'correct' ? 'border-green-500 bg-green-50' : ''} + ${status === 'incorrect' ? 'border-red-500 bg-red-50' : ''} + ${dragOverLeft === item.id ? 'border-blue-400 bg-blue-100' : ''} + ${!isMatched && !isSelected ? 'border-gray-200' : ''} + `} + > +
+ + {item.content} +
+ + {/* Match indicator */} + {matchedItem && ( +
+
+ + {matchedItem.content} +
+
+ )} + + {/* Status icons */} + {showResults && status && ( +
+ {status === 'correct' ? ( + + ) : ( + + )} +
+ )} + + {/* Remove button */} + {isMatched && !showResults && ( + + )} + + ); + })} +
+ + {/* Right Column */} +
+

+ Columna B +

+ {displayRightItems.map(item => { + const matchedItem = getMatchedLeftItem(item.id); + const isSelected = selectedRight === item.id; + const isMatched = isRightMatched(item.id); + + return ( + handleDragStart(e as unknown as DragEvent, item.id, 'right')} + onDragOver={(e) => !showResults && handleDragOver(e as unknown as DragEvent, item.id, 'right')} + onDragLeave={() => handleDragLeave('right')} + onDrop={(e) => handleDrop(e as unknown as DragEvent, item.id, 'right')} + onClick={() => handleRightClick(item.id)} + whileHover={!showResults && !isMatched ? { scale: 1.02 } : {}} + whileTap={!showResults && !isMatched ? { scale: 0.98 } : {}} + className={` + relative p-4 rounded-lg border-2 transition-all cursor-pointer + ${!showResults && !isMatched ? 'hover:border-blue-300 hover:shadow-md' : ''} + ${isSelected ? 'border-blue-500 bg-blue-50' : ''} + ${isMatched && !showResults ? 'border-green-300 bg-green-50' : ''} + ${dragOverRight === item.id ? 'border-blue-400 bg-blue-100' : ''} + ${!isMatched && !isSelected ? 'border-gray-200' : ''} + `} + > +
+ + {item.content} +
+ + {/* Match indicator */} + {matchedItem && ( +
+
+ + {matchedItem.content} +
+
+ )} + + ); + })} +
+
+ + + {/* Results Section */} + + {showResults && ( + + +
+ + + + +

+ {correctCount === leftItems.length + ? '¡Perfecto!' + : correctCount >= leftItems.length * 0.7 + ? '¡Muy bien!' + : '¡Sigue practicando!'} +

+ +

+ {correctCount} de {leftItems.length} emparejamientos correctos +

+
+ + {/* Score Display */} +
+
+ +

{score}

+

Puntuación

+
+ +
+ +

{maxPoints}

+

Máximo

+
+ +
+ +

+ {Math.round((score / maxPoints) * 100)}% +

+

Precisión

+
+
+ + + )} + + + {/* Action Buttons */} +
+ + +
+ {!showResults ? ( + + ) : ( + + )} +
+
+ + {/* Instructions */} + {!allMatched && matches.length > 0 && !showResults && ( +
+

+ Arrastra elementos o haz clic para conectar. Tienes{' '} + {leftItems.length - matches.length}{' '} + emparejamientos pendientes. +

+
+ )} + + {allMatched && !showResults && ( +
+

Todos los elementos están emparejados. ¡Valida tu respuesta!

+
+ )} +
+ ); +} + +export default MatchingExercise; diff --git a/frontend/src/components/exercises/common/QuizExercise.tsx b/frontend/src/components/exercises/common/QuizExercise.tsx new file mode 100644 index 0000000..ad94807 --- /dev/null +++ b/frontend/src/components/exercises/common/QuizExercise.tsx @@ -0,0 +1,366 @@ +import { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, ArrowRight, Lightbulb } from 'lucide-react'; + +export interface QuizOption { + id: string; + text: string; + isCorrect: boolean; +} + +export interface QuizHint { + text: string; +} + +export interface QuizExerciseProps { + question: string; + questionNumber?: number; + totalQuestions?: number; + options: QuizOption[]; + hints?: QuizHint[]; + explanation: string; + onComplete?: (result: QuizResult) => void; + exerciseId?: string; + maxAttempts?: number; +} + +export interface QuizResult { + correct: boolean; + attempts: number; + score: number; + maxScore: number; + usedHint: boolean; +} + +const MAX_SCORE_PER_QUESTION = 100; +const HINT_PENALTY = 20; +const ATTEMPTS_BEFORE_HINT = 2; + +export function QuizExercise({ + question, + questionNumber, + totalQuestions, + options, + hints = [], + explanation, + onComplete, + exerciseId: _exerciseId, + maxAttempts = 3, +}: QuizExerciseProps) { + const [selectedOption, setSelectedOption] = useState(null); + const [showFeedback, setShowFeedback] = useState(false); + const [attempts, setAttempts] = useState(0); + const [showHint, setShowHint] = useState(false); + const [hintIndex, setHintIndex] = useState(0); + const [currentHint, setCurrentHint] = useState(null); + const [isComplete, setIsComplete] = useState(false); + const [score, setScore] = useState(0); + const [usedHint, setUsedHint] = useState(false); + + const correctOption = options.find((opt) => opt.isCorrect); + const isCorrect = selectedOption === correctOption?.id; + + useEffect(() => { + if (isComplete && onComplete) { + const maxScore = MAX_SCORE_PER_QUESTION; + onComplete({ + correct: isCorrect, + attempts, + score, + maxScore, + usedHint, + }); + } + }, [isComplete, onComplete, isCorrect, attempts, score, usedHint]); + + const handleSelectOption = (optionId: string) => { + if (showFeedback) return; + setSelectedOption(optionId); + }; + + const handleSubmit = () => { + if (!selectedOption || showFeedback) return; + + setShowFeedback(true); + setAttempts((prev) => prev + 1); + + if (selectedOption === correctOption?.id) { + // Calculate score based on attempts + let earnedScore = MAX_SCORE_PER_QUESTION; + if (attempts > 0) { + // Reduce score for each attempt (except first) + earnedScore = Math.max(MAX_SCORE_PER_QUESTION - (attempts * 20), 20); + } + if (usedHint) { + earnedScore -= HINT_PENALTY; + } + setScore(earnedScore); + } + }; + + const handleNext = () => { + setIsComplete(true); + }; + + const handleRetry = () => { + setSelectedOption(null); + setShowFeedback(false); + setAttempts(0); + setShowHint(false); + setHintIndex(0); + setCurrentHint(null); + setIsComplete(false); + setScore(0); + setUsedHint(false); + }; + + const handleShowHint = () => { + if (hints.length === 0) return; + + setUsedHint(true); + setShowHint(true); + + if (hintIndex < hints.length) { + setCurrentHint(hints[hintIndex].text); + setHintIndex((prev) => prev + 1); + } + }; + + const canShowHint = hints.length > 0 && attempts >= ATTEMPTS_BEFORE_HINT && !showHint; + + // Determine if the user can continue or should retry + const canRetry = attempts < maxAttempts && !isCorrect; + + if (isComplete) { + return ( + +
+ + {isCorrect ? ( + + ) : ( + + )} + + +

+ {isCorrect ? '¡Correcto!' : 'Incorrecto'} +

+ +
+

Explicación:

+

{explanation}

+
+ +
+
+

Intentos

+

{attempts}

+
+
+

Puntuación

+

+ {score}/{MAX_SCORE_PER_QUESTION} +

+
+
+ + {canRetry && !isCorrect && ( + + )} + + {!canRetry && !isCorrect && ( +
+

+ Has agotado tus intentos. La respuesta correcta era:{' '} + {correctOption?.text} +

+ +
+ )} +
+ + ); + } + + return ( + + + + {/* Progress bar for multi-question exercises */} + {questionNumber && totalQuestions && ( +
+
+ Progreso + {Math.round((questionNumber / totalQuestions) * 100)}% +
+
+ +
+
+ )} + +
+ {options.map((option, index) => { + const isSelected = selectedOption === option.id; + const showCorrect = showFeedback && option.isCorrect; + const showIncorrect = showFeedback && isSelected && !option.isCorrect; + + return ( + handleSelectOption(option.id)} + disabled={showFeedback} + whileHover={!showFeedback ? { scale: 1.02 } : {}} + whileTap={!showFeedback ? { scale: 0.98 } : {}} + className={`w-full p-4 rounded-lg border-2 text-left transition-all ${ + showCorrect + ? 'border-green-500 bg-green-50' + : showIncorrect + ? 'border-red-500 bg-red-50' + : isSelected + ? 'border-blue-500 bg-blue-50' + : 'border-gray-200 hover:border-blue-300' + }`} + > +
+
+ + {String.fromCharCode(65 + index)} + + {option.text} +
+ {showCorrect && } + {showIncorrect && } +
+ + ); + })} +
+ + {/* Hint section */} + + {showHint && currentHint && ( + +
+
+ + Pista +
+

{currentHint}

+
+ + )} + + + {/* Feedback section */} + + {showFeedback && ( + +
+
+ {isCorrect ? ( + + ) : ( + + )} + + {isCorrect ? '¡Correcto!' : 'Incorrecto'} + +
+

+ {explanation} +

+
+ + )} + + +
+
+ + Intentos: {attempts}/{maxAttempts} + + {canShowHint && ( + + )} +
+ + {!showFeedback ? ( + + ) : ( + + )} +
+ + ); +} + +export default QuizExercise; diff --git a/frontend/src/components/exercises/common/index.ts b/frontend/src/components/exercises/common/index.ts new file mode 100644 index 0000000..d0445a7 --- /dev/null +++ b/frontend/src/components/exercises/common/index.ts @@ -0,0 +1,3 @@ +export { QuizExercise, type QuizExerciseProps, type QuizOption, type QuizHint, type QuizResult } from './QuizExercise'; +export { CalculatorExercise, type CalculatorExerciseProps, type CalculationStep } from './CalculatorExercise'; +export { MatchingExercise, type MatchingExerciseProps, type MatchingItem, type MatchingPair, type MatchingResult } from './MatchingExercise'; diff --git a/frontend/src/components/exercises/index.ts b/frontend/src/components/exercises/index.ts index 572f765..76f11cb 100644 --- a/frontend/src/components/exercises/index.ts +++ b/frontend/src/components/exercises/index.ts @@ -1 +1,3 @@ export { EjercicioWrapper } from './EjercicioWrapper'; +export { QuizExercise } from './common/QuizExercise'; +export type { QuizExerciseProps, QuizOption, QuizHint, QuizResult } from './common/QuizExercise'; diff --git a/frontend/src/components/exercises/modulo1/AgentesEconomicosQuiz.tsx b/frontend/src/components/exercises/modulo1/AgentesEconomicosQuiz.tsx new file mode 100644 index 0000000..4ea5e02 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/AgentesEconomicosQuiz.tsx @@ -0,0 +1,304 @@ +import React, { useState } from 'react'; + +interface Pregunta { + id: number; + pregunta: string; + opciones: { letra: string; texto: string; correcta: boolean }[]; + explicacion: string; + categoria: string; +} + +const preguntas: Pregunta[] = [ + { + id: 1, + pregunta: "¿Cuál es la función principal de las familias como agente económico?", + opciones: [ + { letra: "A", texto: "Producir bienes y servicios para el mercado", correcta: false }, + { letra: "B", texto: "Ofrecer factores productivos (trabajo, capital) y consumir", correcta: true }, + { letra: "C", texto: "Regular la economía y recaudar impuestos", correcta: false }, + { letra: "D", texto: "Importar y exportar productos", correcta: false }, + ], + explicacion: "Las familias son agentes económicos que ofrecen factores de producción (especialmente trabajo) a las empresas y utilizan sus ingresos para consumir bienes y servicios.", + categoria: "Familias" + }, + { + id: 2, + pregunta: "¿Qué tipo de empresas son las que buscan maximizar beneficios?", + opciones: [ + { letra: "A", texto: "Empresas públicas", correcta: false }, + { letra: "B", texto: "Empresas privadas", correcta: true }, + { letra: "C", texto: "ONGs", correcta: false }, + { letra: "D", texto: "Cooperativas", correcta: false }, + ], + explicacion: "Las empresas privadas tienen como objetivo principal la maximización de beneficios o ganancias, a diferencia de las empresas públicas que persiguen objetivos de bienestar social.", + categoria: "Empresas" + }, + { + id: 3, + pregunta: "¿Cuál de las siguientes NO es una función del Estado como agente económico?", + opciones: [ + { letra: "A", texto: "Recaudar impuestos", correcta: false }, + { letra: "B", texto: "Regular la actividad económica", correcta: false }, + { letra: "C", texto: "Maximizar utilidades privadas", correcta: true }, + { letra: "D", texto: "Proporcionar bienes públicos", correcta: false }, + ], + explicacion: "El Estado no busca maximizar utilidades privadas; esa es la función de las empresas privadas. El Estado persigue el bienestar social y el funcionamiento ordenado de la economía.", + categoria: "Estado" + }, + { + id: 4, + pregunta: "¿Qué flujo representa el pago de salarios en el circuito económico?", + opciones: [ + { letra: "A", texto: "Flujo real de bienes y servicios", correcta: false }, + { letra: "B", texto: "Flujo monetario del sector empresas a familias", correcta: true }, + { letra: "C", texto: "Flujo de impuestos al Estado", correcta: false }, + { letra: "D", texto: "Flujo de subsidios", correcta: false }, + ], + explicacion: "Los salarios representan un flujo monetario que va desde las empresas (que pagan) hacia las familias (que reciben el pago por su trabajo).", + categoria: "Circuito Económico" + }, + { + id: 5, + pregunta: "¿Qué son los bienes públicos según la economía?", + opciones: [ + { letra: "A", texto: "Productos que solo pueden usar las familias ricas", correcta: false }, + { letra: "B", texto: "Bienes no rivales y no excluibles proporcionados por el Estado", correcta: true }, + { letra: "C", texto: "Productos importados de otros países", correcta: false }, + { letra: "D", texto: "Bienes de lujo que produce el sector privado", correcta: false }, + ], + explicacion: "Los bienes públicos son aquellos que son no rivales (el uso por una persona no impide el uso por otra) y no excluibles (no se puede impedir que alguien los use), como la defensa nacional o los parques públicos.", + categoria: "Bienes Públicos" + }, + { + id: 6, + pregunta: "¿Cuál es la relación entre empresas y familias en el mercado de factores?", + opciones: [ + { letra: "A", texto: "Las empresas ofrecen trabajo y las familias lo demandan", correcta: false }, + { letra: "B", texto: "Las familias ofrecen factores productivos y las empresas los demandan", correcta: true }, + { letra: "C", texto: "El Estado controla ambos lados del mercado", correcta: false }, + { letra: "D", texto: "No hay relación entre ellos", correcta: false }, + ], + explicacion: "En el mercado de factores, las familias son los oferentes (proveen trabajo, tierra, capital) y las empresas son los demandantes de estos factores productivos.", + categoria: "Mercado de Factores" + }, + { + id: 7, + pregunta: "¿Qué papel juega el Estado en la redistribución del ingreso?", + opciones: [ + { letra: "A", texto: "No interviene en la distribución del ingreso", correcta: false }, + { letra: "B", texto: "Recauda impuestos y proporciona transferencias y servicios sociales", correcta: true }, + { letra: "C", texto: "Solo cobra impuestos a las empresas", correcta: false }, + { letra: "D", texto: "Fija los salarios de todos los trabajadores", correcta: false }, + ], + explicacion: "El Estado redistribuye el ingreso mediante el cobro de impuestos (generalmente progresivos) y el gasto en transferencias, subsidios, educación, salud y otros servicios públicos.", + categoria: "Redistribución" + }, + { + id: 8, + pregunta: "¿Cuál es un ejemplo de empresa estatal?", + opciones: [ + { letra: "A", texto: "Una tienda de ropa privada", correcta: false }, + { letra: "B", texto: "Una empresa petrolera nacional", correcta: true }, + { letra: "C", texto: "Un restaurante familiar", correcta: false }, + { letra: "D", texto: "Una empresa tecnológica multinacional", correcta: false }, + ], + explicacion: "Las empresas petroleras nacionales (como PEMEX, Petrobras, PDVSA) son ejemplos clásicos de empresas estatales, propiedad del gobierno.", + categoria: "Empresas Estatales" + } +]; + +export const AgentesEconomicosQuiz: React.FC = () => { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestas, setRespuestas] = useState<{ [key: number]: string }>({}); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [quizTerminado, setQuizTerminado] = useState(false); + + const seleccionarRespuesta = (letra: string) => { + setRespuestas({ ...respuestas, [preguntas[preguntaActual].id]: letra }); + setMostrarResultado(true); + }; + + const siguientePregunta = () => { + if (preguntaActual < preguntas.length - 1) { + setPreguntaActual(preguntaActual + 1); + setMostrarResultado(false); + } else { + setQuizTerminado(true); + } + }; + + const anteriorPregunta = () => { + if (preguntaActual > 0) { + setPreguntaActual(preguntaActual - 1); + setMostrarResultado(true); + } + }; + + const reiniciarQuiz = () => { + setPreguntaActual(0); + setRespuestas({}); + setMostrarResultado(false); + setQuizTerminado(false); + }; + + const calcularPuntuacion = () => { + let correctas = 0; + preguntas.forEach(pregunta => { + const opcionCorrecta = pregunta.opciones.find(o => o.correcta); + if (opcionCorrecta && respuestas[pregunta.id] === opcionCorrecta.letra) { + correctas++; + } + }); + return correctas; + }; + + if (quizTerminado) { + const puntuacion = calcularPuntuacion(); + const porcentaje = (puntuacion / preguntas.length) * 100; + + return ( +
+

Resultados del Quiz

+ +
+

+ {puntuacion} / {preguntas.length} +

+

{porcentaje.toFixed(0)}% de aciertos

+

+ {porcentaje >= 80 + ? '🎉 ¡Excelente! Dominas los agentes económicos' + : porcentaje >= 60 + ? '👍 ¡Bien! Puedes mejorar un poco más' + : '📚 Sigue estudiando los agentes económicos'} +

+
+ +
+ {preguntas.map((pregunta, index) => { + const respuestaUsuario = respuestas[pregunta.id]; + const opcionCorrecta = pregunta.opciones.find(o => o.correcta); + const esCorrecta = respuestaUsuario === opcionCorrecta?.letra; + + return ( +
+

{index + 1}. {pregunta.pregunta}

+

+ Tu respuesta: + {respuestaUsuario || 'Sin respuesta'} + + {!esCorrecta && ( + + Correcta: {opcionCorrecta?.letra} + + )} +

+
+ ); + })} +
+ + +
+ ); + } + + const pregunta = preguntas[preguntaActual]; + const respuestaSeleccionada = respuestas[pregunta.id]; + + return ( +
+

Quiz: Agentes Económicos

+ +
+ + Pregunta {preguntaActual + 1} de {preguntas.length} + + + Categoría: {pregunta.categoria} + +
+ +
+

{pregunta.pregunta}

+ +
+ {pregunta.opciones.map((opcion) => { + const estaSeleccionada = respuestaSeleccionada === opcion.letra; + const mostrarCorrecta = mostrarResultado && opcion.correcta; + const mostrarIncorrecta = mostrarResultado && estaSeleccionada && !opcion.correcta; + + return ( + + ); + })} +
+ + {mostrarResultado && ( +
+

Explicación:

+

{pregunta.explicacion}

+
+ )} +
+ +
+ + + +
+ +
+ {preguntas.map((_, index) => ( +
+ ))} +
+
+ ); +}; + +export default AgentesEconomicosQuiz; diff --git a/frontend/src/components/exercises/modulo1/CasosPaises.tsx b/frontend/src/components/exercises/modulo1/CasosPaises.tsx new file mode 100644 index 0000000..9984101 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/CasosPaises.tsx @@ -0,0 +1,305 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, Globe, TrendingUp, Building2, Scale } from 'lucide-react'; + +interface EjercicioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +type SistemaTipo = 'mercado' | 'planificado' | 'mixto'; + +interface Pais { + id: string; + nombre: string; + emoji: string; + descripcion: string; + caracteristicas: string[]; + sistemaCorrecto: SistemaTipo; + explicacion: string; +} + +const SISTEMAS: Record = { + mercado: { + nombre: 'Economía de Mercado', + color: 'bg-blue-500', + icono: + }, + planificado: { + nombre: 'Economía Planificada', + color: 'bg-red-500', + icono: + }, + mixto: { + nombre: 'Economía Mixta', + color: 'bg-green-500', + icono: + } +}; + +const PAISES: Pais[] = [ + { + id: 'singapur', + nombre: 'Singapur', + emoji: '🇸🇬', + descripcion: 'Centro financiero asiático con uno de los índices de libertad económica más altos del mundo.', + caracteristicas: [ + 'Libre comercio y bajos aranceles', + 'Impuestos corporativos bajos', + 'Mínima intervención estatal en negocios', + 'Sector privado altamente competitivo' + ], + sistemaCorrecto: 'mercado', + explicacion: 'Singapur es un ejemplo clásico de economía de mercado, con mínima regulación, bajos impuestos y gran libertad para la empresa privada.' + }, + { + id: 'noruega', + nombre: 'Noruega', + emoji: '🇳🇴', + descripcion: 'País escandinavo con altos estándares de vida y fuerte sector petrolero estatal.', + caracteristicas: [ + 'Servicios públicos universales gratuitos', + 'Fuerte sistema de bienestar social', + 'Empresas privadas con regulación estatal', + 'Fondo soberano de petróleo gestionado por el Estado' + ], + sistemaCorrecto: 'mixto', + explicacion: 'Noruega combina economía de mercado con fuerte intervención estatal en bienestar social y sectores estratégicos.' + }, + { + id: 'cuba', + nombre: 'Cuba', + emoji: '🇨🇺', + descripcion: 'Isla caribeña con sistema económico único en el hemisferio occidental.', + caracteristicas: [ + 'Mayoría de empresas son estatales', + 'Planificación centralizada', + 'Racionamiento de bienes básicos', + 'Recientemente ha permitido pequeñas empresas privadas' + ], + sistemaCorrecto: 'planificado', + explicacion: 'Cuba mantiene principalmente una economía planificada donde el Estado controla la mayoría de los medios de producción.' + }, + { + id: 'suiza', + nombre: 'Suiza', + emoji: '🇨🇭', + descripcion: 'País alpino conocido por su estabilidad económica y sistema bancario.', + caracteristicas: [ + 'Política fiscal conservadora', + 'Fuerte protección de la propiedad privada', + 'Mercado laboral flexible', + 'Alta competitividad internacional' + ], + sistemaCorrecto: 'mercado', + explicacion: 'Suiza opera principalmente como economía de mercado con fuerte protección a la propiedad privada y libre empresa.' + }, + { + id: 'francia', + nombre: 'Francia', + emoji: '🇫🇷', + descripcion: 'Potencia europea con tradición de intervención estatal en la economía.', + caracteristicas: [ + 'Altos impuestos para financiar servicios públicos', + 'Regulación extensa del mercado laboral', + 'Empresas privadas dominantes pero reguladas', + 'Sistema de salud público universal' + ], + sistemaCorrecto: 'mixto', + explicacion: 'Francia representa una economía mixta europea donde coexisten empresas privadas con fuerte regulación y servicios públicos extensos.' + }, + { + id: 'corea-norte', + nombre: 'Corea del Norte', + emoji: '🇰🇵', + descripcion: 'País asiático con uno de los sistemas económicos más cerrados del mundo.', + caracteristicas: [ + 'Planificación económica centralizada (Juche)', + 'Propiedad estatal total de medios de producción', + 'Comercio internacional severamente restringido', + 'Distribución de bienes por el Estado' + ], + sistemaCorrecto: 'planificado', + explicacion: 'Corea del Norte mantiene una economía altamente centralizada y planificada con mínima actividad de mercado permitida.' + }, + { + id: 'hong-kong', + nombre: 'Hong Kong', + emoji: '🇭🇰', + descripcion: 'Región administrativa especial de China con sistema económico único.', + caracteristicas: [ + 'Política de "un país, dos sistemas"', + 'Libertad económica y financiera', + 'Bajos impuestos y aranceles', + 'Mínima intervención gubernamental' + ], + sistemaCorrecto: 'mercado', + explicacion: 'Hong Kong históricamente ha operado como economía de mercado con mínima regulación y máxima libertad comercial.' + }, + { + id: 'alemania', + nombre: 'Alemania', + emoji: '🇩🇪', + descripcion: 'Mayor economía de Europa con modelo social de mercado.', + caracteristicas: [ + 'Economía social de mercado', + 'Codeterminación (trabajadores en consejos)', + 'Fuerte sector industrial privado', + 'Extensas redes de protección social' + ], + sistemaCorrecto: 'mixto', + explicacion: 'Alemania practica el modelo de "economía social de mercado", combinando mercado libre con fuerte estado de bienestar.' + } +]; + +export function CasosPaises({ ejercicioId: _ejercicioId, onComplete }: EjercicioProps) { + const [paisActual, setPaisActual] = useState(0); + const [respuestas, setRespuestas] = useState>({}); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [completado, setCompletado] = useState(false); + + const pais = PAISES[paisActual]; + const esUltima = paisActual === PAISES.length - 1; + + const handleRespuesta = (sistema: SistemaTipo) => { + setRespuestas(prev => ({ ...prev, [pais.id]: sistema })); + setMostrarResultado(true); + }; + + const handleSiguiente = () => { + if (esUltima) { + const correctas = PAISES.filter(p => respuestas[p.id] === p.sistemaCorrecto).length; + const puntuacion = Math.round((correctas / PAISES.length) * 100); + setCompletado(true); + onComplete?.(puntuacion); + } else { + setPaisActual(prev => prev + 1); + setMostrarResultado(false); + } + }; + + const esCorrecta = respuestas[pais.id] === pais.sistemaCorrecto; + + if (completado) { + const correctas = PAISES.filter(p => respuestas[p.id] === p.sistemaCorrecto).length; + const puntuacion = Math.round((correctas / PAISES.length) * 100); + + return ( + + +
+ +
+ + +

¡Ejercicio Completado!

+

+ Identificaste correctamente {correctas} de {PAISES.length} países +

+ +
{puntuacion}
+

puntos

+ + ); + } + + return ( + +
+
+
+ País {paisActual + 1} de {PAISES.length} + {Math.round((paisActual / PAISES.length) * 100)}% +
+
+ +
+
+ + + +
+ {pais.emoji} +

{pais.nombre}

+

{pais.descripcion}

+
+ +
+

Características económicas:

+
    + {pais.caracteristicas.map((caracteristica, index) => ( +
  • + • + {caracteristica} +
    • + ))} +
+
+ + {!mostrarResultado ? ( +
+

¿Qué sistema económico predomina?

+ {(Object.keys(SISTEMAS) as SistemaTipo[]).map((sistema) => ( + handleRespuesta(sistema)} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + className="w-full p-4 flex items-center gap-4 border-2 border-gray-200 rounded-xl hover:border-blue-400 hover:bg-blue-50 transition-all" + > +
+ {SISTEMAS[sistema].icono} +
+ {SISTEMAS[sistema].nombre} + + ))} +
+ ) : ( + +
+ {esCorrecta ? ( + + ) : ( + + )} + + {esCorrecta ? '¡Correcto!' : 'Incorrecto'} + +
+

+ Respuesta correcta: {SISTEMAS[pais.sistemaCorrecto].nombre} +

+

{pais.explicacion}

+ + + + )} + + +
+ + ); +} + +export default CasosPaises; diff --git a/frontend/src/components/exercises/modulo1/ComparativaSistemas.tsx b/frontend/src/components/exercises/modulo1/ComparativaSistemas.tsx new file mode 100644 index 0000000..4597c30 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/ComparativaSistemas.tsx @@ -0,0 +1,334 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, ArrowRight, ArrowLeft } from 'lucide-react'; + +interface EjercicioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Categoria { + id: string; + nombre: string; + color: string; +} + +interface Casilla { + id: string; + categoria: string; + sistema: 'mercado' | 'planificado' | 'mixto' | null; + opciones: string[]; + correcta: string; +} + +const CATEGORIAS: Categoria[] = [ + { id: 'propiedad', nombre: 'Propiedad de medios de producción', color: 'bg-blue-100' }, + { id: 'precios', nombre: 'Fijación de precios', color: 'bg-green-100' }, + { id: 'competencia', nombre: 'Competencia', color: 'bg-purple-100' }, + { id: 'objetivo', nombre: 'Objetivo principal', color: 'bg-orange-100' }, + { id: 'planificacion', nombre: 'Planificación económica', color: 'bg-pink-100' }, + { id: 'bienestar', nombre: 'Bienestar social', color: 'bg-teal-100' } +]; + +const SISTEMAS = [ + { id: 'mercado', nombre: 'Economía de Mercado', color: 'bg-blue-500' }, + { id: 'planificado', nombre: 'Economía Planificada', color: 'bg-red-500' }, + { id: 'mixto', nombre: 'Economía Mixta', color: 'bg-green-500' } +]; + +const CASILLAS: Casilla[] = [ + { + id: 'propiedad-mercado', + categoria: 'propiedad', + sistema: 'mercado', + opciones: ['Privada', 'Estatal', 'Mixta'], + correcta: 'Privada' + }, + { + id: 'propiedad-planificado', + categoria: 'propiedad', + sistema: 'planificado', + opciones: ['Privada', 'Estatal', 'Mixta'], + correcta: 'Estatal' + }, + { + id: 'propiedad-mixto', + categoria: 'propiedad', + sistema: 'mixto', + opciones: ['Privada', 'Estatal', 'Mixta'], + correcta: 'Mixta' + }, + { + id: 'precios-mercado', + categoria: 'precios', + sistema: 'mercado', + opciones: ['Oferta y demanda', 'Estado', 'Combinación'], + correcta: 'Oferta y demanda' + }, + { + id: 'precios-planificado', + categoria: 'precios', + sistema: 'planificado', + opciones: ['Oferta y demanda', 'Estado', 'Combinación'], + correcta: 'Estado' + }, + { + id: 'precios-mixto', + categoria: 'precios', + sistema: 'mixto', + opciones: ['Oferta y demanda', 'Estado', 'Combinación'], + correcta: 'Combinación' + }, + { + id: 'competencia-mercado', + categoria: 'competencia', + sistema: 'mercado', + opciones: ['Libre', 'No existe', 'Regulada'], + correcta: 'Libre' + }, + { + id: 'competencia-planificado', + categoria: 'competencia', + sistema: 'planificado', + opciones: ['Libre', 'No existe', 'Regulada'], + correcta: 'No existe' + }, + { + id: 'competencia-mixto', + categoria: 'competencia', + sistema: 'mixto', + opciones: ['Libre', 'No existe', 'Regulada'], + correcta: 'Regulada' + }, + { + id: 'objetivo-mercado', + categoria: 'objetivo', + sistema: 'mercado', + opciones: ['Beneficio', 'Igualdad', 'Equilibrio'], + correcta: 'Beneficio' + }, + { + id: 'objetivo-planificado', + categoria: 'objetivo', + sistema: 'planificado', + opciones: ['Beneficio', 'Igualdad', 'Equilibrio'], + correcta: 'Igualdad' + }, + { + id: 'objetivo-mixto', + categoria: 'objetivo', + sistema: 'mixto', + opciones: ['Beneficio', 'Igualdad', 'Equilibrio'], + correcta: 'Equilibrio' + }, + { + id: 'planificacion-mercado', + categoria: 'planificacion', + sistema: 'mercado', + opciones: ['Descentralizada', 'Centralizada', 'Mixta'], + correcta: 'Descentralizada' + }, + { + id: 'planificacion-planificado', + categoria: 'planificacion', + sistema: 'planificado', + opciones: ['Descentralizada', 'Centralizada', 'Mixta'], + correcta: 'Centralizada' + }, + { + id: 'planificacion-mixto', + categoria: 'planificacion', + sistema: 'mixto', + opciones: ['Descentralizada', 'Centralizada', 'Mixta'], + correcta: 'Mixta' + }, + { + id: 'bienestar-mercado', + categoria: 'bienestar', + sistema: 'mercado', + opciones: ['Privado', 'Estatal', 'Combinado'], + correcta: 'Privado' + }, + { + id: 'bienestar-planificado', + categoria: 'bienestar', + sistema: 'planificado', + opciones: ['Privado', 'Estatal', 'Combinado'], + correcta: 'Estatal' + }, + { + id: 'bienestar-mixto', + categoria: 'bienestar', + sistema: 'mixto', + opciones: ['Privado', 'Estatal', 'Combinado'], + correcta: 'Combinado' + } +]; + +export function ComparativaSistemas({ ejercicioId: _ejercicioId, onComplete }: EjercicioProps) { + const [respuestas, setRespuestas] = useState>({}); + const [casillaActual, setCasillaActual] = useState(0); + const [completado, setCompletado] = useState(false); + const [mostrarResultado, setMostrarResultado] = useState(false); + + const casilla = CASILLAS[casillaActual]; + const esUltima = casillaActual === CASILLAS.length - 1; + + const handleRespuesta = (respuesta: string) => { + setRespuestas(prev => ({ ...prev, [casilla.id]: respuesta })); + setMostrarResultado(true); + }; + + const handleSiguiente = () => { + if (esUltima) { + const correctas = CASILLAS.filter(c => respuestas[c.id] === c.correcta).length; + const puntuacion = Math.round((correctas / CASILLAS.length) * 100); + setCompletado(true); + onComplete?.(puntuacion); + } else { + setCasillaActual(prev => prev + 1); + setMostrarResultado(false); + } + }; + + const handleAnterior = () => { + if (casillaActual > 0) { + setCasillaActual(prev => prev - 1); + setMostrarResultado(false); + } + }; + + const esCorrecta = respuestas[casilla.id] === casilla.correcta; + const categoria = CATEGORIAS.find(c => c.id === casilla.categoria); + const sistema = SISTEMAS.find(s => s.id === casilla.sistema); + const yaRespondida = respuestas[casilla.id] !== undefined; + + if (completado) { + const correctas = CASILLAS.filter(c => respuestas[c.id] === c.correcta).length; + const puntuacion = Math.round((correctas / CASILLAS.length) * 100); + + return ( + + +
+ +
+ + +

¡Ejercicio Completado!

+

+ Completaste {correctas} de {CASILLAS.length} casillas correctamente +

+ +
{puntuacion}
+

puntos

+ + ); + } + + return ( + +
+
+
+ Casilla {casillaActual + 1} de {CASILLAS.length} + {Math.round((Object.keys(respuestas).length / CASILLAS.length) * 100)}% completado +
+
+ +
+
+ +
+
+

Categoría

+

{categoria?.nombre}

+
+
+

Sistema Económico

+

{sistema?.nombre}

+
+
+

Progreso

+

{Object.keys(respuestas).length}/{CASILLAS.length}

+
+
+ + + {!mostrarResultado ? ( + +

+ ¿Cómo se caracteriza esta dimensión en {sistema?.nombre}? +

+
+ {casilla.opciones.map((opcion) => ( + handleRespuesta(opcion)} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + className="p-4 text-left border-2 border-gray-200 rounded-xl hover:border-blue-400 hover:bg-blue-50 transition-all" + > + {opcion} + + ))} +
+ + ) : ( + +
+ {esCorrecta ? ( + + ) : ( + + )} + + {esCorrecta ? '¡Correcto!' : 'Incorrecto'} + +
+

+ {esCorrecta + ? `Correcto. En ${sistema?.nombre}, la ${categoria?.nombre.toLowerCase()} es ${casilla.correcta.toLowerCase()}.` + : `La respuesta correcta es: ${casilla.correcta}. En ${sistema?.nombre}, la ${categoria?.nombre.toLowerCase()} se caracteriza por ser ${casilla.correcta.toLowerCase()}.` + } +

+
+ + +
+ + )} + +
+ + ); +} + +export default ComparativaSistemas; diff --git a/frontend/src/components/exercises/modulo1/CostoOportunidadCalculator.tsx b/frontend/src/components/exercises/modulo1/CostoOportunidadCalculator.tsx new file mode 100644 index 0000000..56f25b7 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/CostoOportunidadCalculator.tsx @@ -0,0 +1,157 @@ +import React, { useState } from 'react'; + +interface OpcionProduccion { + bienesA: number; + bienesB: number; +} + +const datosFPP: OpcionProduccion[] = [ + { bienesA: 0, bienesB: 100 }, + { bienesA: 20, bienesB: 90 }, + { bienesA: 40, bienesB: 75 }, + { bienesA: 60, bienesB: 55 }, + { bienesA: 80, bienesB: 30 }, + { bienesA: 100, bienesB: 0 }, +]; + +export const CostoOportunidadCalculator: React.FC = () => { + const [puntoInicial, setPuntoInicial] = useState(0); + const [puntoFinal, setPuntoFinal] = useState(1); + const [respuestaUsuario, setRespuestaUsuario] = useState(''); + const [resultado, setResultado] = useState<{ + correcto: boolean; + mensaje: string; + costoReal: number; + } | null>(null); + + const calcularCostoOportunidad = (inicio: number, fin: number): number => { + const opcionInicio = datosFPP[inicio]; + const opcionFin = datosFPP[fin]; + + const cambioBienB = opcionFin.bienesB - opcionInicio.bienesB; + const cambioBienA = opcionFin.bienesA - opcionInicio.bienesA; + + if (cambioBienA === 0) return 0; + return Math.abs(cambioBienB / cambioBienA); + }; + + const verificarRespuesta = () => { + const costoReal = calcularCostoOportunidad(puntoInicial, puntoFinal); + const respuestaNum = parseFloat(respuestaUsuario); + + if (isNaN(respuestaNum)) { + setResultado({ + correcto: false, + mensaje: 'Por favor ingresa un número válido', + costoReal: costoReal + }); + return; + } + + const margenError = 0.5; + const correcto = Math.abs(respuestaNum - costoReal) <= margenError; + + setResultado({ + correcto, + mensaje: correcto + ? '¡Correcto! Has calculado bien el costo de oportunidad.' + : 'Incorrecto. Revisa tu cálculo.', + costoReal: costoReal + }); + }; + + const generarNuevoEjercicio = () => { + const nuevoInicio = Math.floor(Math.random() * (datosFPP.length - 1)); + const nuevoFin = nuevoInicio + 1 + Math.floor(Math.random() * (datosFPP.length - nuevoInicio - 1)); + + setPuntoInicial(nuevoInicio); + setPuntoFinal(nuevoFin); + setRespuestaUsuario(''); + setResultado(null); + }; + + return ( +
+

Calculadora de Costo de Oportunidad

+ +
+

Tabla de Posibilidades de Producción:

+ + + + + + + + + + {datosFPP.map((opcion, index) => ( + + + + + + ))} + +
OpciónBien ABien B
{index + 1}{opcion.bienesA}{opcion.bienesB}
+
+ +
+

Ejercicio:

+

+ Si la economía se mueve de la Opción {puntoInicial + 1} a la + Opción {puntoFinal + 1}, ¿cuál es el costo de oportunidad + de producir una unidad adicional del Bien A? +

+ +
+ + setRespuestaUsuario(e.target.value)} + className="border p-2 rounded w-32" + placeholder="Ej: 0.75" + /> + unidades del Bien B +
+ +
+ + +
+
+ + {resultado && ( +
+

{resultado.mensaje}

+ {!resultado.correcto && ( +

+ El costo de oportunidad correcto es: {resultado.costoReal.toFixed(2)} unidades del Bien B +

+ )} +
+ )} + +
+

Fórmula:

+

+ Costo de Oportunidad = |Cambio en Bien B| / |Cambio en Bien A| +

+
+
+ ); +}; + +export default CostoOportunidadCalculator; diff --git a/frontend/src/components/exercises/modulo1/CostoOportunidadCotidiano.tsx b/frontend/src/components/exercises/modulo1/CostoOportunidadCotidiano.tsx new file mode 100644 index 0000000..b6c4df1 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/CostoOportunidadCotidiano.tsx @@ -0,0 +1,246 @@ +import { useState } from 'react'; + +interface CostoOportunidadCotidianoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Situacion { + id: number; + titulo: string; + descripcion: string; + decision: string; + opciones: string[]; + costoOportunidadCorrecto: string; + explicacion: string; +} + +const situaciones: Situacion[] = [ + { + id: 1, + titulo: "Tiempo libre", + descripcion: "Tienes 3 horas libres un sábado por la tarde.", + decision: "Decides estudiar para un examen importante.", + opciones: [ + "El tiempo que podrías haber pasado con amigos", + "Las calificaciones del examen", + "El dinero ahorrado", + "La comida que no comiste" + ], + costoOportunidadCorrecto: "El tiempo que podrías haber pasado con amigos", + explicacion: "El costo de oportunidad es lo que sacrificas: el tiempo con amigos que elegiste no hacer." + }, + { + id: 2, + titulo: "Compra de tecnología", + descripcion: "Tienes $1,000 ahorrados.", + decision: "Compras una laptop nueva para trabajar.", + opciones: [ + "El dinero que gastaste", + "El dinero que podrías haber invertido", + "La laptop misma", + "Las especificaciones técnicas" + ], + costoOportunidadCorrecto: "El dinero que podrías haber invertido", + explicacion: "Al gastar en la laptop, sacrificas la oportunidad de invertir ese dinero y obtener rendimientos." + }, + { + id: 3, + titulo: "Carrera profesional", + descripcion: "Terminas la universidad con dos ofertas de trabajo.", + decision: "Aceptas el trabajo en una startup con menor salario inicial.", + opciones: [ + "El salario más alto de la otra oferta", + "La experiencia en la startup", + "Tu título universitario", + "El tiempo de búsqueda" + ], + costoOportunidadCorrecto: "El salario más alto de la otra oferta", + explicacion: "Al elegir la startup, renuncias al salario más alto que ofrecía la otra empresa." + }, + { + id: 4, + titulo: "Vacaciones", + descripcion: "Tienes dos semanas de vacaciones este verano.", + decision: "Viajas a Europa en lugar de quedarte trabajando.", + opciones: [ + "Las fotos que tomarás", + "El dinero que gastarás en el viaje", + "El dinero que podrías haber ganado trabajando", + "La experiencia cultural" + ], + costoOportunidadCorrecto: "El dinero que podrías haber ganado trabajando", + explicacion: "El costo de oportunidad incluye los ingresos que sacrificas al no trabajar esas semanas." + } +]; + +export function CostoOportunidadCotidiano({ ejercicioId: _ejercicioId, onComplete }: CostoOportunidadCotidianoProps) { + const [respuestas, setRespuestas] = useState<{[key: number]: string}>({}); + const [mostrarExplicacion, setMostrarExplicacion] = useState<{[key: number]: boolean}>({}); + const [completado, setCompletado] = useState(false); + + const handleSeleccion = (situacionId: number, opcion: string) => { + setRespuestas(prev => ({ ...prev, [situacionId]: opcion })); + }; + + const handleValidar = () => { + const nuevasExplicaciones: {[key: number]: boolean} = {}; + let correctas = 0; + + situaciones.forEach(situacion => { + nuevasExplicaciones[situacion.id] = true; + if (respuestas[situacion.id] === situacion.costoOportunidadCorrecto) { + correctas++; + } + }); + + setMostrarExplicacion(nuevasExplicaciones); + + if (correctas === situaciones.length && !completado) { + setCompletado(true); + if (onComplete) { + onComplete(100); + } + } + }; + + const handleReset = () => { + setRespuestas({}); + setMostrarExplicacion({}); + setCompletado(false); + }; + + const correctas = situaciones.filter(s => respuestas[s.id] === s.costoOportunidadCorrecto).length; + + return ( +
+
+

Costo de Oportunidad en Decisiones Cotidianas

+

+ Identifica el costo de oportunidad en cada situación de la vida real. +

+
+ +
+

+ Recuerda: El costo de oportunidad es el valor de la mejor alternativa a la que renuncias + al tomar una decisión. No es lo que gastas, sino lo que sacrificas. +

+
+ +
+ {situaciones.map((situacion, index) => ( +
+
+
+ {index + 1} +
+
+

{situacion.titulo}

+

{situacion.descripcion}

+

Decisión: {situacion.decision}

+ +
+

+ ¿Cuál es el costo de oportunidad? +

+
+ {situacion.opciones.map((opcion) => { + const isSelected = respuestas[situacion.id] === opcion; + const isCorrect = opcion === situacion.costoOportunidadCorrecto; + const showResult = mostrarExplicacion[situacion.id]; + + let buttonClass = 'border border-gray-300 bg-white text-gray-700 hover:bg-gray-50'; + + if (showResult) { + if (isCorrect) { + buttonClass = 'border-green-500 bg-green-50 text-green-800'; + } else if (isSelected && !isCorrect) { + buttonClass = 'border-red-500 bg-red-50 text-red-800'; + } else { + buttonClass = 'border-gray-200 bg-gray-50 text-gray-400'; + } + } else if (isSelected) { + buttonClass = 'border-blue-500 bg-blue-50 text-blue-800'; + } + + return ( + + ); + })} +
+
+ + {mostrarExplicacion[situacion.id] && ( +
+

+ {respuestas[situacion.id] === situacion.costoOportunidadCorrecto + ? '¡Correcto!' + : 'Respuesta correcta:'} +

+

+ {situacion.explicacion} +

+
+ )} +
+
+
+ ))} +
+ +
+ + +
+ + {completado && ( +
+

¡Excelente comprensión!

+

100 puntos

+

+ Has identificado correctamente todos los costos de oportunidad. +

+
+ )} +
+ ); +} + +export default CostoOportunidadCotidiano; diff --git a/frontend/src/components/exercises/modulo1/CrecimientoEconomicoFPP.tsx b/frontend/src/components/exercises/modulo1/CrecimientoEconomicoFPP.tsx new file mode 100644 index 0000000..d17aee5 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/CrecimientoEconomicoFPP.tsx @@ -0,0 +1,205 @@ +import React, { useState } from 'react'; + +interface PuntoFPP { + x: number; + y: number; +} + +export const CrecimientoEconomicoFPP: React.FC = () => { + const [tipoCambio, setTipoCambio] = useState(''); + const [factorSeleccionado, setFactorSeleccionado] = useState(''); + const [respuestasCorrectas, setRespuestasCorrectas] = useState([false, false]); + const [mostrarResultado, setMostrarResultado] = useState(false); + + const puntosFPPOriginal: PuntoFPP[] = [ + { x: 0, y: 100 }, + { x: 50, y: 90 }, + { x: 100, y: 70 }, + { x: 150, y: 40 }, + { x: 200, y: 0 }, + ]; + + const puntosFPPDesplazada: PuntoFPP[] = [ + { x: 0, y: 120 }, + { x: 60, y: 108 }, + { x: 120, y: 84 }, + { x: 180, y: 48 }, + { x: 240, y: 0 }, + ]; + + const opcionesCambio = [ + { valor: 'crecimiento', label: 'Crecimiento económico (desplazamiento hacia afuera)' }, + { valor: 'recesion', label: 'Recesión económica (desplazamiento hacia adentro)' }, + { valor: 'mejoraA', label: 'Mejora tecnológica solo en Bien A' }, + { valor: 'mejoraB', label: 'Mejora tecnológica solo en Bien B' }, + ]; + + const opcionesFactores = [ + { valor: 'tecnologia', label: 'Avance tecnológico', tipo: 'crecimiento' }, + { valor: 'capital', label: 'Aumento del capital físico', tipo: 'crecimiento' }, + { valor: 'trabajo', label: 'Aumento de la fuerza laboral', tipo: 'crecimiento' }, + { valor: 'recursos', label: 'Descubrimiento de nuevos recursos', tipo: 'crecimiento' }, + { valor: 'guerra', label: 'Conflicto bélico', tipo: 'recesion' }, + { valor: 'desastre', label: 'Desastre natural', tipo: 'recesion' }, + { valor: 'emigracion', label: 'Emigración masiva', tipo: 'recesion' }, + { valor: 'destruccion', label: 'Destrucción de capital', tipo: 'recesion' }, + ]; + + const verificarRespuestas = () => { + const esCrecimiento = tipoCambio === 'crecimiento'; + const factorEsCrecimiento = ['tecnologia', 'capital', 'trabajo', 'recursos'].includes(factorSeleccionado); + + setRespuestasCorrectas([esCrecimiento, factorEsCrecimiento]); + setMostrarResultado(true); + }; + + const reiniciarEjercicio = () => { + setTipoCambio(''); + setFactorSeleccionado(''); + setRespuestasCorrectas([false, false]); + setMostrarResultado(false); + }; + + const SVG_HEIGHT = 300; + const SVG_WIDTH = 400; + const PADDING = 40; + + const escalarX = (x: number) => PADDING + (x / 250) * (SVG_WIDTH - 2 * PADDING); + const escalarY = (y: number) => SVG_HEIGHT - PADDING - (y / 130) * (SVG_HEIGHT - 2 * PADDING); + + const crearPath = (puntos: PuntoFPP[]) => { + return puntos.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${escalarX(p.x)} ${escalarY(p.y)}` + ).join(' '); + }; + + return ( +
+

Crecimiento Económico y Curva FPP

+ +
+
+

Gráfico de la Frontera de Posibilidades de Producción

+ + + {/* Ejes */} + + + + {/* Etiquetas de ejes */} + Bien A + Bien B + + {/* FPP Original */} + + + {/* FPP Desplazada */} + + + {/* Leyenda */} + + FPP Original + + + FPP Nueva + +
+ +
+
+

Pregunta 1: ¿Qué tipo de cambio observas en el gráfico?

+
+ {opcionesCambio.map((opcion) => ( + + ))} +
+
+ +
+

Pregunta 2: ¿Qué factor podría causar este cambio?

+ +
+
+
+ +
+ + +
+ + {mostrarResultado && ( +
+
+

+ Pregunta 1: {respuestasCorrectas[0] ? '¡Correcto!' : 'Incorrecto.'} +

+

+ {respuestasCorrectas[0] + ? 'El gráfico muestra un crecimiento económico, representado por el desplazamiento hacia afuera de la curva FPP.' + : 'El gráfico muestra crecimiento económico (desplazamiento hacia afuera de la FPP).'} +

+
+ +
+

+ Pregunta 2: {respuestasCorrectas[1] ? '¡Correcto!' : 'Incorrecto.'} +

+

+ {respuestasCorrectas[1] + ? 'Excelente selección. Este factor contribuye al crecimiento económico.' + : 'Revisa tu selección. Considera qué factores aumentan la capacidad productiva de la economía.'} +

+
+
+ )} + +
+

Conceptos clave:

+
    +
  • Crecimiento económico: Desplazamiento de la FPP hacia afuera, permite producir más de ambos bienes
    • +
  • Recesión: Desplazamiento de la FPP hacia adentro, reduce la capacidad productiva
    • +
  • Factores del crecimiento: Tecnología, capital, trabajo, recursos naturales
    • +
+
+
+ ); +}; + +export default CrecimientoEconomicoFPP; diff --git a/frontend/src/components/exercises/modulo1/DefinicionEconomiaQuiz.tsx b/frontend/src/components/exercises/modulo1/DefinicionEconomiaQuiz.tsx new file mode 100644 index 0000000..b91681b --- /dev/null +++ b/frontend/src/components/exercises/modulo1/DefinicionEconomiaQuiz.tsx @@ -0,0 +1,197 @@ +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle } from 'lucide-react'; + +interface EjercicioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +const PREGUNTAS = [ + { + id: 1, + pregunta: "¿Qué es la economía?", + opciones: [ + "Ciencia social que estudia cómo se asignan recursos escasos para satisfacer necesidades ilimitadas", + "Estudio exclusivo del dinero y los bancos", + "Análisis únicamente de empresas grandes", + "Gestión de presupuestos familiares" + ], + correcta: 0, + explicacion: "La economía es una ciencia social que estudia la asignación de recursos escasos para satisfacer necesidades ilimitadas." + }, + { + id: 2, + pregunta: "¿Cuál es la diferencia entre microeconomía y macroeconomía?", + opciones: [ + "La micro estudia individuos y empresas; la macro estudia la economía como un todo", + "La micro es más difícil que la macro", + "La micro estudia solo bancos; la macro estudia gobiernos", + "No hay diferencia, son lo mismo" + ], + correcta: 0, + explicacion: "La microeconomía estudia el comportamiento de individuos y empresas, mientras que la macroeconomía analiza la economía en su conjunto (PIB, inflación, desempleo)." + }, + { + id: 3, + pregunta: "¿Qué es el problema económico fundamental?", + opciones: [ + "La escasez de recursos frente a necesidades ilimitadas", + "La falta de dinero en los bancos", + "El desempleo elevado", + "La inflación alta" + ], + correcta: 0, + explicacion: "El problema económico fundamental es la escasez: los recursos son limitados pero las necesidades humanas son ilimitadas." + }, + { + id: 4, + pregunta: "¿Qué estudia la economía positiva?", + opciones: [ + "Lo que es (hechos y descripciones)", + "Lo que debería ser (valores y juicios)", + "Solo matemáticas económicas", + "Únicamente historia económica" + ], + correcta: 0, + explicacion: "La economía positiva describe y explica hechos objetivos ('lo que es'), sin hacer juicios de valor." + }, + { + id: 5, + pregunta: "Complete: La economía normativa se refiere a...", + opciones: [ + "Juicios de valor sobre lo que debería ser", + "Datos estadísticos objetivos", + "Teorías matemáticas puras", + "Hechos históricos verificables" + ], + correcta: 0, + explicacion: "La economía normativa hace juicios de valor y prescripciones sobre lo que debería ser ('deberíamos aumentar los impuestos')." + } +]; + +export function DefinicionEconomiaQuiz({ ejercicioId: _ejercicioId, onComplete }: EjercicioProps) { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestas, setRespuestas] = useState([]); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [completado, setCompletado] = useState(false); + + const pregunta = PREGUNTAS[preguntaActual]; + const esUltima = preguntaActual === PREGUNTAS.length - 1; + + const handleRespuesta = (index: number) => { + const nuevasRespuestas = [...respuestas, index]; + setRespuestas(nuevasRespuestas); + + if (esUltima) { + // Calcular puntuación + const correctas = nuevasRespuestas.filter((r, i) => r === PREGUNTAS[i].correcta).length; + const puntuacion = Math.round((correctas / PREGUNTAS.length) * 100); + setCompletado(true); + onComplete?.(puntuacion); + } else { + setMostrarResultado(true); + } + }; + + const handleSiguiente = () => { + setPreguntaActual(prev => prev + 1); + setMostrarResultado(false); + }; + + const esCorrecta = respuestas[preguntaActual] === pregunta.correcta; + + if (completado) { + const correctas = respuestas.filter((r, i) => r === PREGUNTAS[i].correcta).length; + const puntuacion = Math.round((correctas / PREGUNTAS.length) * 100); + + return ( + + +
+ +
+ + +

¡Quiz Completado!

+

+ Respondiste {correctas} de {PREGUNTAS.length} preguntas correctamente +

+ +
{puntuacion}
+

puntos

+ + ); + } + + return ( + +
+ {/* Progress */} +
+
+ Pregunta {preguntaActual + 1} de {PREGUNTAS.length} + {Math.round(((preguntaActual) / PREGUNTAS.length) * 100)}% +
+
+ +
+
+ + {/* Pregunta */} +

{pregunta.pregunta}

+ + {/* Opciones */} + {!mostrarResultado ? ( +
+ {pregunta.opciones.map((opcion, index) => ( + handleRespuesta(index)} + whileHover={{ scale: 1.01 }} + whileTap={{ scale: 0.99 }} + className="w-full p-4 text-left border-2 border-gray-200 rounded-xl hover:border-blue-400 hover:bg-blue-50 transition-all" + > + {String.fromCharCode(65 + index)}. {opcion} + + ))} +
+ ) : ( + +
+ {esCorrecta ? ( + + ) : ( + + )} + + {esCorrecta ? '¡Correcto!' : 'Incorrecto'} + +
+

{pregunta.explicacion}

+ + + + )} +
+ + ); +} + +export default DefinicionEconomiaQuiz; diff --git a/frontend/src/components/exercises/modulo1/EconomiaPositivaVsNormativa.tsx b/frontend/src/components/exercises/modulo1/EconomiaPositivaVsNormativa.tsx new file mode 100644 index 0000000..9965f04 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/EconomiaPositivaVsNormativa.tsx @@ -0,0 +1,275 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, RefreshCw, ArrowRight } from 'lucide-react'; + +interface EjercicioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Enunciado { + id: number; + texto: string; + tipo: 'positiva' | 'normativa'; + explicacion: string; +} + +const ENUNCIADOS: Enunciado[] = [ + { + id: 1, + texto: "La inflación en el país alcanzó el 5% el año pasado.", + tipo: 'positiva', + explicacion: "Este es un enunciado positivo porque describe un hecho objetivo y verificable." + }, + { + id: 2, + texto: "El gobierno debería reducir los impuestos para estimular la economía.", + tipo: 'normativa', + explicacion: "Este es un enunciado normativo porque expresa una opinión sobre lo que debería hacerse." + }, + { + id: 3, + texto: "La tasa de desempleo juvenil es del 15%.", + tipo: 'positiva', + explicacion: "Es positivo porque presenta un dato estadístico verificable." + }, + { + id: 4, + texto: "Es injusto que existan grandes diferencias de ingreso entre ricos y pobres.", + tipo: 'normativa', + explicacion: "Es normativo porque contiene un juicio de valor sobre la justicia." + }, + { + id: 5, + texto: "El PIB del país creció un 3% durante el último trimestre.", + tipo: 'positiva', + explicacion: "Es positivo porque es una afirmación factual basada en datos." + }, + { + id: 6, + texto: "Se debería aumentar el salario mínimo para mejorar la calidad de vida.", + tipo: 'normativa', + explicacion: "Es normativo porque prescribe una acción basada en valores." + }, + { + id: 7, + texto: "El costo de vida en la capital es 20% más alto que en el interior.", + tipo: 'positiva', + explicacion: "Es positivo porque compara datos observables y mensurables." + }, + { + id: 8, + texto: "Las empresas multinacionales tienen la obligación ética de pagar impuestos justos.", + tipo: 'normativa', + explicacion: "Es normativo porque habla de obligaciones éticas y valores." + } +]; + +export function EconomiaPositivaVsNormativa({ ejercicioId: _ejercicioId, onComplete }: EjercicioProps) { + const [enunciadosRestantes, setEnunciadosRestantes] = useState([...ENUNCIADOS]); + const [clasificaciones, setClasificaciones] = useState<{id: number, correcta: boolean}[]>([]); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [completado, setCompletado] = useState(false); + const [ultimaRespuesta, setUltimaRespuesta] = useState<'positiva' | 'normativa' | null>(null); + + const enunciadoActual = enunciadosRestantes[0]; + const progreso = ((ENUNCIADOS.length - enunciadosRestantes.length) / ENUNCIADOS.length) * 100; + + const handleClasificacion = (tipo: 'positiva' | 'normativa') => { + if (!enunciadoActual) return; + + const esCorrecta = tipo === enunciadoActual.tipo; + setUltimaRespuesta(tipo); + setClasificaciones(prev => [...prev, { id: enunciadoActual.id, correcta: esCorrecta }]); + setMostrarResultado(true); + + if (enunciadosRestantes.length === 1) { + const nuevasClasificaciones = [...clasificaciones, { id: enunciadoActual.id, correcta: esCorrecta }]; + const correctas = nuevasClasificaciones.filter(c => c.correcta).length; + const puntuacion = Math.round((correctas / ENUNCIADOS.length) * 100); + setCompletado(true); + onComplete?.(puntuacion); + } + }; + + const handleSiguiente = () => { + setEnunciadosRestantes(prev => prev.slice(1)); + setMostrarResultado(false); + setUltimaRespuesta(null); + }; + + const handleReiniciar = () => { + setEnunciadosRestantes([...ENUNCIADOS]); + setClasificaciones([]); + setMostrarResultado(false); + setCompletado(false); + setUltimaRespuesta(null); + }; + + if (completado) { + const correctas = clasificaciones.filter(c => c.correcta).length; + const puntuacion = Math.round((correctas / ENUNCIADOS.length) * 100); + + return ( + + +
= 70 ? 'bg-green-100' : 'bg-yellow-100'}`}> + {puntuacion >= 70 ? ( + + ) : ( + + )} +
+ + +

+ {puntuacion >= 70 ? '¡Excelente trabajo!' : '¡Sigue practicando!'} +

+

+ Clasificaste correctamente {correctas} de {ENUNCIADOS.length} enunciados +

+ +
{puntuacion}
+

puntos

+ + {puntuacion < 70 && ( + + )} + + ); + } + + if (!enunciadoActual) return null; + + const esCorrecta = ultimaRespuesta === enunciadoActual.tipo; + + return ( + +
+ {/* Header */} +
+
+

Clasifica el enunciado

+

¿Es una afirmación positiva o normativa?

+
+ + {ENUNCIADOS.length - enunciadosRestantes.length + 1} / {ENUNCIADOS.length} + +
+ + {/* Progress */} +
+
+ +
+
+ + {/* Enunciado */} + + {!mostrarResultado ? ( + +
+

"{enunciadoActual.texto}"

+
+ +
+ handleClasificacion('positiva')} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + className="p-4 border-2 border-blue-200 rounded-xl hover:border-blue-400 hover:bg-blue-50 transition-all text-center" + > +
Economía Positiva
+

Describe hechos objetivos

+ + + handleClasificacion('normativa')} + whileHover={{ scale: 1.02 }} + whileTap={{ scale: 0.98 }} + className="p-4 border-2 border-purple-200 rounded-xl hover:border-purple-400 hover:bg-purple-50 transition-all text-center" + > +
Economía Normativa
+

Expresa juicios de valor

+ +
+ + ) : ( + +
+ {esCorrecta ? ( + + ) : ( + + )} + + {esCorrecta ? '¡Correcto!' : 'Incorrecto'} + +
+ +
+

Respuesta correcta:

+

+ Economía {enunciadoActual.tipo === 'positiva' ? 'Positiva' : 'Normativa'} +

+
+ +

{enunciadoActual.explicacion}

+ + + + )} + + + {/* Legend */} +
+
+
+
+
+

Positiva

+

Lo que es (hechos)

+
+
+
+
+
+

Normativa

+

Lo que debería ser (valores)

+
+
+
+
+
+ + ); +} + +export default EconomiaPositivaVsNormativa; diff --git a/frontend/src/components/exercises/modulo1/EscasezSimulator.tsx b/frontend/src/components/exercises/modulo1/EscasezSimulator.tsx new file mode 100644 index 0000000..dd0732f --- /dev/null +++ b/frontend/src/components/exercises/modulo1/EscasezSimulator.tsx @@ -0,0 +1,189 @@ +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, AlertCircle } from 'lucide-react'; + +interface EjercicioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +const NECESIDADES = [ + { id: 'alimentacion', nombre: 'Alimentación', icono: '🍽️' }, + { id: 'vivienda', nombre: 'Vivienda', icono: '🏠' }, + { id: 'educacion', nombre: 'Educación', icono: '📚' }, + { id: 'salud', nombre: 'Salud', icono: '🏥' } +]; + +export function EscasezSimulator({ ejercicioId: _ejercicioId, onComplete }: EjercicioProps) { + const [asignaciones, setAsignaciones] = useState>({ + alimentacion: 25, + vivienda: 25, + educacion: 25, + salud: 25 + }); + const [validado, setValidado] = useState(false); + const [completado, setCompletado] = useState(false); + + const total = Object.values(asignaciones).reduce((sum, val) => sum + val, 0); + const restante = 100 - total; + const excedido = total > 100; + + const handleSliderChange = (id: string, value: number) => { + setAsignaciones(prev => ({ ...prev, [id]: value })); + setValidado(false); + }; + + const handleValidar = () => { + if (excedido) return; + + setValidado(true); + + // Calcular puntuación basada en equilibrio + // Ideal: todas las necesidades tienen al menos 15 puntos y no se excede + const valores = Object.values(asignaciones); + const todasConMinimo = valores.every(v => v >= 15); + const sumaExacta = total === 100; + + let puntuacion = 0; + if (sumaExacta) { + puntuacion = 60; // Base por usar exactamente 100 + if (todasConMinimo) puntuacion += 40; // Bonus por equilibrio + } else if (total <= 100) { + puntuacion = Math.round((total / 100) * 50); // Proporcional si no usa todo + } + + setTimeout(() => { + setCompletado(true); + onComplete?.(puntuacion); + }, 1500); + }; + + if (completado) { + return ( + + +
+ +
+ + +

¡Simulación Completada!

+

+ Has distribuido los recursos disponibles. +

+ +
+

Distribución final:

+
+ {NECESIDADES.map(nec => ( +
+ {nec.icono} {nec.nombre}: + {asignaciones[nec.id]} pts +
+ ))} +
+
+ + ); + } + + return ( + +
+
+

Simulador de Escasez

+

+ Tienes 100 puntos para distribuir entre 4 necesidades básicas. +

+
+ + {/* Indicador de recursos */} +
+
+ + {excedido ? '¡Excedido!' : `Restante: ${restante} pts`} + + + {total} / 100 + +
+
+ +
+ {excedido && ( +

+ + Has excedido los 100 puntos disponibles. Reduce alguna asignación. +

+ )} +
+ + {/* Sliders */} +
+ {NECESIDADES.map(necesidad => ( +
+
+
+ {necesidad.icono} + {necesidad.nombre} +
+ + {asignaciones[necesidad.id]} pts + +
+ handleSliderChange(necesidad.id, parseInt(e.target.value))} + className="w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +
+ 0 + 50 +
+
+ ))} +
+ + {/* Botón validar */} + + + {validado && !excedido && ( + +

+ {total === 100 + ? '¡Excelente! Has utilizado todos los recursos disponibles.' + : `Has utilizado ${total} de 100 puntos. ¿Quieres ajustar o continuar?`} +

+ + )} +
+ + ); +} + +export default EscasezSimulator; diff --git a/frontend/src/components/exercises/modulo1/FPPAnalizador.tsx b/frontend/src/components/exercises/modulo1/FPPAnalizador.tsx new file mode 100644 index 0000000..0221034 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/FPPAnalizador.tsx @@ -0,0 +1,478 @@ +import { useState, useCallback, DragEvent } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { + CheckCircle, + XCircle, + RefreshCcw, + Link2, + GripVertical, + Trophy, + Scale, + Target, + Zap, + BookOpen +} from 'lucide-react'; + +interface MatchingItem { + id: string; + content: string; +} + +interface Match { + leftId: string; + rightId: string; + isCorrect?: boolean; + checked?: boolean; +} + +interface FPPAnalizadorProps { + onComplete?: (score: number, total: number) => void; +} + +const PUNTOS_INICIALES = [ + { x: 15, y: 85, tipo: 'ineficiente', label: 'A' }, + { x: 45, y: 55, tipo: 'eficiente', label: 'B' }, + { x: 75, y: 25, tipo: 'inalcanzable', label: 'C' }, + { x: 30, y: 70, tipo: 'ineficiente', label: 'D' }, + { x: 60, y: 40, tipo: 'eficiente', label: 'E' }, + { x: 90, y: 10, tipo: 'inalcanzable', label: 'F' }, +]; + +const TIPOS_OPCIONES = [ + { id: 'eficiente', label: 'Eficiente', color: 'green', icon: CheckCircle, descripcion: 'En la FPP - máxima producción' }, + { id: 'ineficiente', label: 'Ineficiente', color: 'orange', icon: Zap, descripcion: 'Dentro de la FPP - recursos subutilizados' }, + { id: 'inalcanzable', label: 'Inalcanzable', color: 'red', icon: XCircle, descripcion: 'Fuera de la FPP - no hay recursos suficientes' }, +]; + +export function FPPAnalizador({ onComplete }: FPPAnalizadorProps) { + const [asignaciones, setAsignaciones] = useState>(() => + PUNTOS_INICIALES.reduce((acc, punto) => ({ ...acc, [punto.label]: null }), {}) + ); + const [mostrarResultados, setMostrarResultados] = useState(false); + const [draggedTipo, setDraggedTipo] = useState(null); + + const handleDragStart = (e: DragEvent, tipoId: string) => { + e.dataTransfer.setData('text/plain', tipoId); + setDraggedTipo(tipoId); + }; + + const handleDragEnd = () => { + setDraggedTipo(null); + }; + + const handleDrop = (e: DragEvent, puntoLabel: string) => { + e.preventDefault(); + const tipoId = e.dataTransfer.getData('text/plain'); + if (tipoId) { + setAsignaciones(prev => ({ ...prev, [puntoLabel]: tipoId })); + } + setDraggedTipo(null); + }; + + const handleDragOver = (e: DragEvent) => { + e.preventDefault(); + }; + + const handleAsignar = (puntoLabel: string, tipoId: string) => { + setAsignaciones(prev => ({ ...prev, [puntoLabel]: tipoId })); + }; + + const handleVerificar = () => { + setMostrarResultados(true); + const correctas = PUNTOS_INICIALES.filter( + punto => asignaciones[punto.label] === punto.tipo + ).length; + if (onComplete) { + onComplete(correctas, PUNTOS_INICIALES.length); + } + }; + + const handleReiniciar = () => { + setAsignaciones(PUNTOS_INICIALES.reduce((acc, punto) => ({ ...acc, [punto.label]: null }), {})); + setMostrarResultados(false); + }; + + const todasAsignadas = Object.values(asignaciones).every(a => a !== null); + const correctas = PUNTOS_INICIALES.filter( + punto => asignaciones[punto.label] === punto.tipo + ).length; + + // Generar curva FPP + const generateFPPPath = () => { + const puntos = [ + { x: 10, y: 90 }, + { x: 20, y: 85 }, + { x: 30, y: 78 }, + { x: 40, y: 70 }, + { x: 50, y: 60 }, + { x: 60, y: 50 }, + { x: 70, y: 40 }, + { x: 80, y: 30 }, + { x: 90, y: 20 }, + ]; + + let path = `M ${puntos[0].x} ${puntos[0].y}`; + for (let i = 1; i < puntos.length; i++) { + const cp1x = puntos[i - 1].x + (puntos[i].x - puntos[i - 1].x) * 0.5; + const cp1y = puntos[i - 1].y; + const cp2x = puntos[i - 1].x + (puntos[i].x - puntos[i - 1].x) * 0.5; + const cp2y = puntos[i].y; + path += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${puntos[i].x} ${puntos[i].y}`; + } + return path; + }; + + const getEstiloPunto = (punto: typeof PUNTOS_INICIALES[0]) => { + const asignacion = asignaciones[punto.label]; + if (!mostrarResultados) { + return { + fill: asignacion ? { + eficiente: '#22c55e', + ineficiente: '#f97316', + inalcanzable: '#ef4444', + }[asignacion] : '#3b82f6', + stroke: '#1e40af', + strokeWidth: 2, + }; + } + + const esCorrecto = asignacion === punto.tipo; + return { + fill: esCorrecto ? '#22c55e' : '#ef4444', + stroke: esCorrecto ? '#166534' : '#991b1b', + strokeWidth: 3, + }; + }; + + return ( +
+ {/* Header */} +
+
+

Analizador de la FPP

+

+ Identifica si cada punto es Eficiente, Ineficiente o Inalcanzable +

+
+
+ + 100 pts +
+
+ + {/* Leyenda */} + +
+ +

Arrastra el tipo a cada punto:

+
+
+ {TIPOS_OPCIONES.map((tipo) => { + const Icon = tipo.icon; + return ( + handleDragStart(e as unknown as DragEvent, tipo.id)} + onDragEnd={handleDragEnd} + whileHover={!mostrarResultados ? { scale: 1.02 } : {}} + whileTap={!mostrarResultados ? { scale: 0.98 } : {}} + className={`p-3 rounded-lg border-2 cursor-grab active:cursor-grabbing ${ + tipo.color === 'green' ? 'border-green-200 bg-green-50' : + tipo.color === 'orange' ? 'border-orange-200 bg-orange-50' : + 'border-red-200 bg-red-50' + } ${draggedTipo === tipo.id ? 'opacity-50' : ''}`} + > +
+ +
+ + {tipo.label} + +

{tipo.descripcion}

+
+
+ + ); + })} +
+ + + {/* SVG con FPP */} + +
+ + {/* Fondo con gradientes */} + + + + + + + + + + + + {/* Áreas */} + + + + {/* Ejes */} + + + + {/* Flechas de ejes */} + + + + {/* Etiquetas de ejes */} + + Bien de Consumo (Y) + + + Bien de Capital (X) + + + {/* Curva FPP */} + + + {/* Puntos interactivos */} + {PUNTOS_INICIALES.map((punto) => { + const estilo = getEstiloPunto(punto); + const asignacion = asignaciones[punto.label]; + + return ( + handleDrop(e as unknown as DragEvent, punto.label)} + className="cursor-pointer" + > + {/* Círculo del punto */} + + + {/* Label del punto */} + + {punto.label} + + + {/* Indicador de asignación */} + {asignacion && !mostrarResultados && ( + + {TIPOS_OPCIONES.find(t => t.id === asignacion)?.label} + + )} + + {/* Checkmark o X si hay resultado */} + {mostrarResultados && ( + + {asignacion === punto.tipo ? ( + + ) : ( + + )} + + )} + + ); + })} + + {/* Leyenda en el SVG */} + + + Leyenda: + + FPP + + Factible + + Inalcanzable + + +
+ + {/* Botones de asignación alternativos (para móvil) */} +
+ {PUNTOS_INICIALES.map((punto) => ( +
+
+
+ Punto {punto.label} +
+ {!mostrarResultados && ( + + )} + {mostrarResultados && ( +
+ {asignaciones[punto.label] === punto.tipo ? '✓ Correcto' : '✗ Incorrecto'} +
+ )} +
+ ))} +
+ + + {/* Resultados */} + + {mostrarResultados && ( + + +
+ + + + +

+ {correctas === PUNTOS_INICIALES.length + ? '¡Perfecto!' + : correctas >= PUNTOS_INICIALES.length * 0.7 + ? '¡Muy bien!' + : '¡Sigue practicando!'} +

+ +

+ {correctas} de {PUNTOS_INICIALES.length} puntos clasificados correctamente +

+ +
+
+ +

{correctas}

+

Correctos

+
+
+ +

{PUNTOS_INICIALES.length - correctas}

+

Incorrectos

+
+
+ +

+ {Math.round((correctas / PUNTOS_INICIALES.length) * 100)}% +

+

Precisión

+
+
+
+ + + )} + + + {/* Botones de acción */} +
+ + + {!mostrarResultados ? ( + + ) : ( + + )} +
+ + {/* Instrucciones */} + {!todasAsignadas && !mostrarResultados && ( +
+

+ Arrastra los tipos hacia los puntos en el gráfico o usa los selectores debajo. + Faltan + {PUNTOS_INICIALES.length - Object.values(asignaciones).filter(Boolean).length} + puntos por clasificar. +

+
+ )} +
+ ); +} + +export default FPPAnalizador; diff --git a/frontend/src/components/exercises/modulo1/FPPConstructor.tsx b/frontend/src/components/exercises/modulo1/FPPConstructor.tsx new file mode 100644 index 0000000..8832d07 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/FPPConstructor.tsx @@ -0,0 +1,554 @@ +import { useState, useRef, useCallback } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { + CheckCircle, + XCircle, + RefreshCcw, + Trophy, + Move, + Info, + Target, + TrendingUp, + Trash2 +} from 'lucide-react'; + +interface PuntoFPP { + id: string; + x: number; + y: number; +} + +interface FPPConstructorProps { + onComplete?: (score: number, total: number) => void; +} + +const ESCENARIOS = [ + { + id: 1, + titulo: 'Economía de Bienes', + descripcion: 'Un país produce solo dos bienes: Alimentos y Tecnología.', + objetivo: 'Construye una FPP convexa que muestre la creciente escasez de recursos.', + puntosRequeridos: 5, + tipo: 'convexa', + maxX: 100, + maxY: 100, + }, + { + id: 2, + titulo: 'Especialización Laboral', + descripcion: 'Dos trabajadores pueden producir manzanas o naranjas con costos de oportunidad constantes.', + objetivo: 'Construye una FPP lineal que refleje costos de oportunidad constantes.', + puntosRequeridos: 4, + tipo: 'lineal', + maxX: 100, + maxY: 100, + }, + { + id: 3, + titulo: 'Economía con Recursos Especializados', + descripcion: 'Algunos recursos son mejores para producir un bien que otro.', + objetivo: 'Construye una FPP cóncava que muestre ventajas de especialización.', + puntosRequeridos: 5, + tipo: 'concava', + maxX: 100, + maxY: 100, + }, +]; + +export function FPPConstructor({ onComplete }: FPPConstructorProps) { + const [escenarioActual, setEscenarioActual] = useState(0); + const [puntos, setPuntos] = useState([]); + const [puntoArrastrado, setPuntoArrastrado] = useState(null); + const [mostrarResultados, setMostrarResultados] = useState(false); + const svgRef = useRef(null); + + const escenario = ESCENARIOS[escenarioActual]; + + const handleSvgClick = (e: React.MouseEvent) => { + if (mostrarResultados || puntoArrastrado) return; + + const svg = svgRef.current; + if (!svg) return; + + const rect = svg.getBoundingClientRect(); + const x = ((e.clientX - rect.left) / rect.width) * 100; + const y = ((e.clientY - rect.top) / rect.height) * 100; + + // Limitar dentro del área del gráfico + const limitedX = Math.max(5, Math.min(95, x)); + const limitedY = Math.max(5, Math.min(95, y)); + + const nuevoPunto: PuntoFPP = { + id: `punto-${Date.now()}`, + x: limitedX, + y: limitedY, + }; + + setPuntos(prev => [...prev, nuevoPunto]); + }; + + const handleMouseDown = (e: React.MouseEvent, puntoId: string) => { + e.stopPropagation(); + if (mostrarResultados) return; + setPuntoArrastrado(puntoId); + }; + + const handleMouseMove = useCallback((e: React.MouseEvent) => { + if (!puntoArrastrado || !svgRef.current) return; + + const svg = svgRef.current; + const rect = svg.getBoundingClientRect(); + const x = ((e.clientX - rect.left) / rect.width) * 100; + const y = ((e.clientY - rect.top) / rect.height) * 100; + + const limitedX = Math.max(5, Math.min(95, x)); + const limitedY = Math.max(5, Math.min(95, y)); + + setPuntos(prev => + prev.map(p => + p.id === puntoArrastrado ? { ...p, x: limitedX, y: limitedY } : p + ) + ); + }, [puntoArrastrado]); + + const handleMouseUp = () => { + setPuntoArrastrado(null); + }; + + const handleEliminarPunto = (puntoId: string) => { + if (mostrarResultados) return; + setPuntos(prev => prev.filter(p => p.id !== puntoId)); + }; + + const handleReiniciar = () => { + setPuntos([]); + setMostrarResultados(false); + setPuntoArrastrado(null); + }; + + const handleVerificar = () => { + setMostrarResultados(true); + + // Calcular puntuación basada en el tipo de FPP + let correctas = 0; + const puntosOrdenados = [...puntos].sort((a, b) => a.x - b.x); + + if (escenario.tipo === 'lineal') { + // Para FPP lineal, verificar que los puntos formen aproximadamente una línea recta + if (puntosOrdenados.length >= 2) { + const pendiente = (puntosOrdenados[0].y - puntosOrdenados[puntosOrdenados.length - 1].y) / + (puntosOrdenados[puntosOrdenados.length - 1].x - puntosOrdenados[0].x); + + correctas = puntosOrdenados.every((p, i) => { + if (i === 0) return true; + const xExpected = puntosOrdenados[0].x + (i / (puntosOrdenados.length - 1)) * + (puntosOrdenados[puntosOrdenados.length - 1].x - puntosOrdenados[0].x); + const yExpected = puntosOrdenados[0].y - pendiente * (xExpected - puntosOrdenados[0].x); + return Math.abs(p.x - xExpected) < 15 && Math.abs(p.y - yExpected) < 15; + }) ? escenario.puntosRequeridos : Math.floor(escenario.puntosRequeridos * 0.6); + } + } else if (escenario.tipo === 'convexa') { + // Para FPP convexa (creciente escasez), verificar curvatura hacia arriba + if (puntosOrdenados.length >= 3) { + let esConvexa = true; + for (let i = 1; i < puntosOrdenados.length - 1; i++) { + const pendiente1 = (puntosOrdenados[i].y - puntosOrdenados[i-1].y) / + (puntosOrdenados[i].x - puntosOrdenados[i-1].x || 0.1); + const pendiente2 = (puntosOrdenados[i+1].y - puntosOrdenados[i].y) / + (puntosOrdenados[i+1].x - puntosOrdenados[i].x || 0.1); + if (pendiente2 < pendiente1 * 0.5) esConvexa = false; + } + correctas = esConvexa && puntosOrdenados.length >= escenario.puntosRequeridos + ? escenario.puntosRequeridos + : Math.max(0, puntosOrdenados.length - 1); + } + } else if (escenario.tipo === 'concava') { + // Para FPP cóncava, verificar curvatura hacia abajo + if (puntosOrdenados.length >= 3) { + let esConcava = true; + for (let i = 1; i < puntosOrdenados.length - 1; i++) { + const pendiente1 = (puntosOrdenados[i].y - puntosOrdenados[i-1].y) / + (puntosOrdenados[i].x - puntosOrdenados[i-1].x || 0.1); + const pendiente2 = (puntosOrdenados[i+1].y - puntosOrdenados[i].y) / + (puntosOrdenados[i+1].x - puntosOrdenados[i].x || 0.1); + if (pendiente2 > pendiente1 * 1.5) esConcava = false; + } + correctas = esConcava && puntosOrdenados.length >= escenario.puntosRequeridos + ? escenario.puntosRequeridos + : Math.max(0, puntosOrdenados.length - 1); + } + } + + const puntosFinales = Math.min(correctas, escenario.puntosRequeridos); + if (onComplete) { + onComplete(puntosFinales, escenario.puntosRequeridos); + } + }; + + const handleSiguienteEscenario = () => { + if (escenarioActual < ESCENARIOS.length - 1) { + setEscenarioActual(prev => prev + 1); + setPuntos([]); + setMostrarResultados(false); + } + }; + + const handleAnteriorEscenario = () => { + if (escenarioActual > 0) { + setEscenarioActual(prev => prev - 1); + setPuntos([]); + setMostrarResultados(false); + } + }; + + // Generar path para la línea FPP + const generateFPPPath = () => { + if (puntos.length < 2) return ''; + + const sorted = [...puntos].sort((a, b) => a.x - b.x); + + // Si es lineal, usar líneas rectas + if (escenario.tipo === 'lineal') { + return sorted.reduce((path, p, i) => + i === 0 ? `M ${p.x} ${p.y}` : `${path} L ${p.x} ${p.y}`, '' + ); + } + + // Para convexa/cóncava, usar curvas suaves + let path = `M ${sorted[0].x} ${sorted[0].y}`; + for (let i = 1; i < sorted.length; i++) { + const prev = sorted[i - 1]; + const curr = sorted[i]; + const cpX1 = prev.x + (curr.x - prev.x) * 0.3; + const cpX2 = prev.x + (curr.x - prev.x) * 0.7; + path += ` C ${cpX1} ${prev.y}, ${cpX2} ${curr.y}, ${curr.x} ${curr.y}`; + } + return path; + }; + + const esCompletado = puntos.length >= escenario.puntosRequeridos; + + return ( +
+ {/* Header */} +
+
+

Constructor de FPP

+

+ Escenario {escenarioActual + 1} de {ESCENARIOS.length}: {escenario.titulo} +

+
+
+ + + {escenario.puntosRequeridos} pts mín. + +
+
+ + {/* Descripción del escenario */} + +
+ +
+

{escenario.descripcion}

+

+ Objetivo: {escenario.objetivo} +

+
+
+ + + {/* Área de trabajo SVG */} + +
+
+ + + Haz clic para agregar puntos • Arrastra para mover • + {puntos.length} puntos + +
+ {puntos.length > 0 && ( + + )} +
+ +
+ + {/* Grid */} + + + + + + + + {/* Ejes */} + + + + {/* Flechas */} + + + + {/* Etiquetas */} + + Bien X + + + Bien Y + + + {/* Marcas de escala */} + {[0, 25, 50, 75, 100].map(val => ( + + + {val} + + {val} + + ))} + + {/* Línea FPP */} + {puntos.length >= 2 && ( + + )} + + {/* Puntos */} + {puntos.map((punto, index) => ( + + handleMouseDown(e, punto.id)} + /> + + P{index + 1} + + + {/* Botón eliminar */} + {!mostrarResultados && ( + { + e.stopPropagation(); + handleEliminarPunto(punto.id); + }} + > + + × + + )} + + ))} + + {/* Indicador de tipo de FPP */} + + + Tipo FPP: + + {escenario.tipo === 'lineal' ? 'Lineal (CCO constante)' : + escenario.tipo === 'convexa' ? 'Convexa (escasez creciente)' : + 'Cóncava (especialización)'} + + + +
+ + {/* Lista de puntos */} + {puntos.length > 0 && ( +
+

Coordenadas:

+
+ {[...puntos].sort((a, b) => a.x - b.x).map((punto, index) => ( +
+
P{index + 1}
+
X: {punto.x.toFixed(1)}
+
Y: {punto.y.toFixed(1)}
+
+ ))} +
+
+ )} + + + {/* Resultados */} + + {mostrarResultados && ( + + = escenario.puntosRequeridos + ? 'bg-gradient-to-br from-green-50 to-emerald-50 border-green-200' + : 'bg-gradient-to-br from-yellow-50 to-orange-50 border-yellow-200' + }`}> +
+ = escenario.puntosRequeridos + ? 'bg-gradient-to-br from-yellow-400 to-orange-500' + : 'bg-gradient-to-br from-yellow-400 to-orange-400' + }`} + > + {puntos.length >= escenario.puntosRequeridos ? ( + + ) : ( + + )} + + +

+ {puntos.length >= escenario.puntosRequeridos + ? '¡Excelente trabajo!' + : '¡Necesitas más puntos!'} +

+ +

+ {puntos.length >= escenario.puntosRequeridos + ? `Has construido una FPP ${escenario.tipo} correctamente con ${puntos.length} puntos.` + : `Agrega al menos ${escenario.puntosRequeridos - puntos.length} punto(s) más para completar el escenario.`} +

+ +
+
+

{puntos.length}

+

Puntos agregados

+
+
+

{escenario.puntosRequeridos}

+

Requeridos

+
+
+
+ + + )} + + + {/* Navegación y acciones */} +
+
+ + +
+ +
+ + + {!mostrarResultados ? ( + + ) : ( + + )} +
+
+ + {/* Instrucciones adicionales */} + {!esCompletado && !mostrarResultados && ( +
+

+ Faltan + {Math.max(0, escenario.puntosRequeridos - puntos.length)} + puntos para completar este escenario. +

+
+ )} + + {/* Guía de tipos de FPP */} + +

+ + Tipos de Frontera de Posibilidades +

+
+
+
Lineal
+

Costos de oportunidad constantes. Los recursos son perfectamente sustituibles entre bienes.

+
+
+
Convexa (hacia afuera)
+

Costos de oportunidad crecientes. Los recursos no son perfectamente adaptables.

+
+
+
Cóncava (hacia adentro)
+

Costos de oportunidad decrecientes. Especialización en bienes específicos.

+
+
+ +
+ ); +} + +export default FPPConstructor; diff --git a/frontend/src/components/exercises/modulo1/FactoresProduccionQuiz.tsx b/frontend/src/components/exercises/modulo1/FactoresProduccionQuiz.tsx new file mode 100644 index 0000000..ed140df --- /dev/null +++ b/frontend/src/components/exercises/modulo1/FactoresProduccionQuiz.tsx @@ -0,0 +1,414 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, Trophy, RotateCcw, ArrowRight, Mountain, Users, Factory, Lightbulb } from 'lucide-react'; + +interface FactoresProduccionQuizProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Pregunta { + id: number; + pregunta: string; + tipo: 'tierra' | 'trabajo' | 'capital' | 'emprendimiento'; + opciones: string[]; + respuestaCorrecta: number; + explicacion: string; +} + +const PREGUNTAS: Pregunta[] = [ + { + id: 1, + pregunta: '¿Cuál de los siguientes es un ejemplo de TIERRA como factor de producción?', + tipo: 'tierra', + opciones: [ + 'El trabajo de un obrero', + 'Un terreno agrícola', + 'Una máquina industrial', + 'La habilidad de un gerente' + ], + respuestaCorrecta: 1, + explicacion: 'La tierra incluye todos los recursos naturales: terrenos, minerales, agua, petróleo, etc. Es todo lo que nos proporciona la naturaleza sin transformar.' + }, + { + id: 2, + pregunta: 'El TRABAJO como factor de producción se refiere a:', + tipo: 'trabajo', + opciones: [ + 'Solo el esfuerzo físico', + 'Solo el esfuerzo mental', + 'El esfuerzo físico y mental que aportan las personas', + 'Las máquinas que reemplazan a los humanos' + ], + respuestaCorrecta: 2, + explicacion: 'El trabajo incluye tanto el esfuerzo físico (como el de un albañil) como el mental (como el de un ingeniero). Es el factor humano en la producción.' + }, + { + id: 3, + pregunta: '¿Qué se considera CAPITAL como factor de producción?', + tipo: 'capital', + opciones: [ + 'Dinero en una cuenta bancaria', + 'Acciones de una empresa', + 'Maquinaria, herramientas y equipos utilizados para producir', + 'Terrenos y edificios' + ], + respuestaCorrecta: 2, + explicacion: 'En economía, el capital físico (o capital real) son los bienes manufacturados utilizados para producir otros bienes: máquinas, herramientas, fábricas, etc. No es dinero.' + }, + { + id: 4, + pregunta: '¿Cuál es la recompensa que reciben los propietarios del factor TIERRA?', + tipo: 'tierra', + opciones: [ + 'Salarios', + 'Rentas o alquileres', + 'Intereses', + 'Beneficios' + ], + respuestaCorrecta: 1, + explicacion: 'Los propietarios de tierra reciben RENTAS (o alquileres) como pago por el uso de sus recursos naturales.' + }, + { + id: 5, + pregunta: 'Los trabajadores reciben _____ como recompensa por su factor de producción.', + tipo: 'trabajo', + opciones: [ + 'Intereses', + 'Rentas', + 'Salarios', + 'Dividendos' + ], + respuestaCorrecta: 2, + explicacion: 'El trabajo recibe SALARIOS (o sueldos) como compensación por el esfuerzo físico y mental aportado a la producción.' + }, + { + id: 6, + pregunta: '¿Qué reciben los propietarios de CAPITAL como recompensa?', + tipo: 'capital', + opciones: [ + 'Salarios', + 'Rentas', + 'Intereses', + 'Bonificaciones' + ], + respuestaCorrecta: 2, + explicacion: 'El capital recibe INTERESES como recompensa. Si prestas tu capital (maquinaria o dinero para comprarla), recibes intereses a cambio.' + }, + { + id: 7, + pregunta: 'El EMPRENDIMIENTO (o empresa) es el factor que:', + tipo: 'emprendimiento', + opciones: [ + 'Solo invierte dinero', + 'Combina los otros factores de producción asumiendo riesgos', + 'Trabaja en la fábrica', + 'Solo vende los productos' + ], + respuestaCorrecta: 1, + explicacion: 'El emprendimiento es el factor que organiza y combina tierra, trabajo y capital para producir bienes y servicios, asumiendo el riesgo del negocio.' + }, + { + id: 8, + pregunta: '¿Cuál es la recompensa del EMPRENDIMIENTO?', + tipo: 'emprendimiento', + opciones: [ + 'Salario fijo', + 'Intereses garantizados', + 'Beneficios (o pérdidas)', + 'Renta del terreno' + ], + respuestaCorrecta: 2, + explicacion: 'El emprendimiento recibe BENEFICIOS cuando la empresa tiene éxito, pero también puede sufrir PÉRDIDAS. Es el factor con mayor riesgo y potencial de ganancia.' + } +]; + +export function FactoresProduccionQuiz({ ejercicioId: _ejercicioId, onComplete }: FactoresProduccionQuizProps) { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [puntuacion, setPuntuacion] = useState(0); + const [completado, setCompletado] = useState(false); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + + const pregunta = PREGUNTAS[preguntaActual]; + + const getTipoIcon = (tipo: string) => { + switch (tipo) { + case 'tierra': + return ; + case 'trabajo': + return ; + case 'capital': + return ; + case 'emprendimiento': + return ; + default: + return null; + } + }; + + const getTipoLabel = (tipo: string) => { + switch (tipo) { + case 'tierra': + return 'Tierra'; + case 'trabajo': + return 'Trabajo'; + case 'capital': + return 'Capital'; + case 'emprendimiento': + return 'Emprendimiento'; + default: + return ''; + } + }; + + const getTipoColor = (tipo: string) => { + switch (tipo) { + case 'tierra': + return 'bg-green-100 text-green-700 border-green-200'; + case 'trabajo': + return 'bg-blue-100 text-blue-700 border-blue-200'; + case 'capital': + return 'bg-amber-100 text-amber-700 border-amber-200'; + case 'emprendimiento': + return 'bg-purple-100 text-purple-700 border-purple-200'; + default: + return 'bg-gray-100 text-gray-700 border-gray-200'; + } + }; + + const handleSeleccionar = (index: number) => { + if (mostrarResultado) return; + setRespuestaSeleccionada(index); + }; + + const handleVerificar = () => { + if (respuestaSeleccionada === null) return; + + const esCorrecta = respuestaSeleccionada === pregunta.respuestaCorrecta; + setMostrarResultado(true); + + if (esCorrecta) { + setPuntuacion(prev => prev + Math.round(100 / PREGUNTAS.length)); + setRespuestasCorrectas(prev => prev + 1); + } + + if (preguntaActual === PREGUNTAS.length - 1) { + setTimeout(() => { + setCompletado(true); + const puntuacionFinal = puntuacion + (esCorrecta ? Math.round(100 / PREGUNTAS.length) : 0); + if (onComplete) { + onComplete(puntuacionFinal); + } + }, 2000); + } + }; + + const handleSiguiente = () => { + setPreguntaActual(prev => prev + 1); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + }; + + const handleReiniciar = () => { + setPreguntaActual(0); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + setPuntuacion(0); + setCompletado(false); + setRespuestasCorrectas(0); + }; + + if (completado) { + return ( + +
+ + + + +

+ ¡Quiz Completado! +

+ +

+ Has respondido {respuestasCorrectas} de {PREGUNTAS.length} preguntas correctamente +

+ +
+
+ +

Tierra

+

Rentas

+
+
+ +

Trabajo

+

Salarios

+
+
+ +

Capital

+

Intereses

+
+
+ +

Emprendimiento

+

Beneficios

+
+
+ +
+

Puntuación Total

+

{puntuacion}

+

puntos

+
+ + +
+ + ); + } + + return ( + +
+
+
+

Factores de Producción

+

Pregunta {preguntaActual + 1} de {PREGUNTAS.length}

+
+
+

Puntos

+

{puntuacion}

+
+
+ +
+ +
+ +
+
+ {getTipoIcon(pregunta.tipo)} + {getTipoLabel(pregunta.tipo)} +
+

+ {pregunta.pregunta} +

+
+ +
+ {pregunta.opciones.map((opcion, index) => { + const estaSeleccionada = respuestaSeleccionada === index; + const esCorrecta = index === pregunta.respuestaCorrecta; + const mostrarCorrecta = mostrarResultado && esCorrecta; + const mostrarIncorrecta = mostrarResultado && estaSeleccionada && !esCorrecta; + + return ( + handleSeleccionar(index)} + disabled={mostrarResultado} + whileHover={!mostrarResultado ? { scale: 1.01 } : {}} + whileTap={!mostrarResultado ? { scale: 0.99 } : {}} + className={`w-full p-4 rounded-xl border-2 text-left transition-all ${ + mostrarCorrecta + ? 'border-green-500 bg-green-50' + : mostrarIncorrecta + ? 'border-red-500 bg-red-50' + : estaSeleccionada + ? 'border-blue-500 bg-blue-50' + : 'border-gray-200 bg-white hover:border-blue-300' + }`} + > +
+
+ {mostrarCorrecta && } + {mostrarIncorrecta && } + {!mostrarResultado && estaSeleccionada && ( +
+ )} +
+ + {opcion} + +
+ + ); + })} +
+ + + {mostrarResultado && ( + +

+ {respuestaSeleccionada === pregunta.respuestaCorrecta + ? '¡Correcto!' + : 'Incorrecto'} +

+

{pregunta.explicacion}

+ + )} + + +
+ {!mostrarResultado ? ( + + ) : preguntaActual < PREGUNTAS.length - 1 ? ( + + ) : null} +
+
+ + ); +} + +export default FactoresProduccionQuiz; diff --git a/frontend/src/components/exercises/modulo1/FlujoCircularBasico.tsx b/frontend/src/components/exercises/modulo1/FlujoCircularBasico.tsx new file mode 100644 index 0000000..e4111ed --- /dev/null +++ b/frontend/src/components/exercises/modulo1/FlujoCircularBasico.tsx @@ -0,0 +1,361 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, Trophy, RotateCcw, ArrowRight, Users, Building2 } from 'lucide-react'; + +interface FlujoCircularBasicoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Pregunta { + id: number; + pregunta: string; + tipo: 'mercado-bienes' | 'mercado-factores' | 'flujo-real' | 'flujo-monetario'; + opciones: string[]; + respuestaCorrecta: number; + explicacion: string; +} + +const PREGUNTAS: Pregunta[] = [ + { + id: 1, + pregunta: 'En el mercado de bienes y servicios, ¿quiénes son los demandantes?', + tipo: 'mercado-bienes', + opciones: [ + 'Las empresas', + 'Las familias', + 'El gobierno', + 'Los bancos' + ], + respuestaCorrecta: 1, + explicacion: 'En el mercado de bienes y servicios, las familias son los demandantes (compran productos) y las empresas son los oferentes (venden productos).' + }, + { + id: 2, + pregunta: 'En el mercado de factores de producción, ¿quiénes ofrecen el trabajo, la tierra y el capital?', + tipo: 'mercado-factores', + opciones: [ + 'Las familias', + 'Las empresas', + 'El Estado', + 'Los inversores extranjeros' + ], + respuestaCorrecta: 0, + explicacion: 'Las familias son propietarias de los factores de producción (trabajo, tierra, capital) y los ofrecen a las empresas a cambio de ingresos.' + }, + { + id: 3, + pregunta: '¿Qué representa el FLUJO REAL en el modelo de 2 sectores?', + tipo: 'flujo-real', + opciones: [ + 'El movimiento de dinero entre familias y empresas', + 'El movimiento de bienes, servicios y factores de producción', + 'Los impuestos pagados al gobierno', + 'Las transacciones bancarias' + ], + respuestaCorrecta: 1, + explicacion: 'El flujo real representa el movimiento físico de bienes y servicios (de empresas a familias) y factores de producción (de familias a empresas).' + }, + { + id: 4, + pregunta: '¿Qué reciben las familias a cambio de ofrecer sus factores de producción?', + tipo: 'flujo-monetario', + opciones: [ + 'Productos terminados', + 'Ingresos (salarios, rentas, intereses, beneficios)', + 'Servicios públicos', + 'Acciones de empresas' + ], + respuestaCorrecta: 1, + explicacion: 'Las familias reciben ingresos monetarios: salarios (por trabajo), rentas (por tierra), intereses (por capital) y beneficios (por empresa).' + }, + { + id: 5, + pregunta: 'En el FLUJO MONETARIO, el dinero fluye de las empresas a las familias como:', + tipo: 'flujo-monetario', + opciones: [ + 'Pagos por compra de bienes', + 'Pagos por factores de producción (costes)', + 'Impuestos', + 'Subvenciones' + ], + respuestaCorrecta: 1, + explicacion: 'Las empresas pagan a las familias por el uso de sus factores: salarios (trabajo), alquileres (tierra), intereses (capital) y beneficios (emprendimiento).' + }, + { + id: 6, + pregunta: '¿Por qué se llama "flujo circular"?', + tipo: 'flujo-real', + opciones: [ + 'Porque el dinero siempre aumenta', + 'Porque hay un flujo continuo en ambas direcciones entre familias y empresas', + 'Porque las empresas siempre ganan', + 'Porque el gobierno interviene' + ], + respuestaCorrecta: 1, + explicacion: 'Se llama flujo circular porque hay un movimiento continuo en ambas direcciones: factores de producción van de familias a empresas, y bienes/servicios van de empresas a familias.' + } +]; + +export function FlujoCircularBasico({ ejercicioId: _ejercicioId, onComplete }: FlujoCircularBasicoProps) { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [puntuacion, setPuntuacion] = useState(0); + const [completado, setCompletado] = useState(false); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + + const pregunta = PREGUNTAS[preguntaActual]; + + const getTipoLabel = (tipo: string) => { + switch (tipo) { + case 'mercado-bienes': + return 'Mercado de Bienes'; + case 'mercado-factores': + return 'Mercado de Factores'; + case 'flujo-real': + return 'Flujo Real'; + case 'flujo-monetario': + return 'Flujo Monetario'; + default: + return ''; + } + }; + + const getTipoColor = (tipo: string) => { + switch (tipo) { + case 'mercado-bienes': + return 'bg-blue-100 text-blue-700'; + case 'mercado-factores': + return 'bg-green-100 text-green-700'; + case 'flujo-real': + return 'bg-purple-100 text-purple-700'; + case 'flujo-monetario': + return 'bg-amber-100 text-amber-700'; + default: + return 'bg-gray-100 text-gray-700'; + } + }; + + const handleSeleccionar = (index: number) => { + if (mostrarResultado) return; + setRespuestaSeleccionada(index); + }; + + const handleVerificar = () => { + if (respuestaSeleccionada === null) return; + + const esCorrecta = respuestaSeleccionada === pregunta.respuestaCorrecta; + setMostrarResultado(true); + + if (esCorrecta) { + setPuntuacion(prev => prev + Math.round(100 / PREGUNTAS.length)); + setRespuestasCorrectas(prev => prev + 1); + } + + if (preguntaActual === PREGUNTAS.length - 1) { + setTimeout(() => { + setCompletado(true); + const puntuacionFinal = puntuacion + (esCorrecta ? Math.round(100 / PREGUNTAS.length) : 0); + if (onComplete) { + onComplete(puntuacionFinal); + } + }, 2000); + } + }; + + const handleSiguiente = () => { + setPreguntaActual(prev => prev + 1); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + }; + + const handleReiniciar = () => { + setPreguntaActual(0); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + setPuntuacion(0); + setCompletado(false); + setRespuestasCorrectas(0); + }; + + if (completado) { + return ( + +
+ + + + +

+ ¡Ejercicio Completado! +

+ +

+ Has respondido {respuestasCorrectas} de {PREGUNTAS.length} preguntas correctamente +

+ +
+
+ + Familias +
+
↔️
+
+ + Empresas +
+
+ +
+

Puntuación

+

{puntuacion}

+

puntos

+
+ + +
+ + ); + } + + return ( + +
+
+
+

Flujo Circular: 2 Sectores

+

Pregunta {preguntaActual + 1} de {PREGUNTAS.length}

+
+
+

Puntos

+

{puntuacion}

+
+
+ +
+ +
+ +
+
+ {getTipoLabel(pregunta.tipo)} +
+

+ {pregunta.pregunta} +

+
+ +
+ {pregunta.opciones.map((opcion, index) => { + const estaSeleccionada = respuestaSeleccionada === index; + const esCorrecta = index === pregunta.respuestaCorrecta; + const mostrarCorrecta = mostrarResultado && esCorrecta; + const mostrarIncorrecta = mostrarResultado && estaSeleccionada && !esCorrecta; + + return ( + handleSeleccionar(index)} + disabled={mostrarResultado} + whileHover={!mostrarResultado ? { scale: 1.01 } : {}} + whileTap={!mostrarResultado ? { scale: 0.99 } : {}} + className={`w-full p-4 rounded-xl border-2 text-left transition-all ${ + mostrarCorrecta + ? 'border-green-500 bg-green-50' + : mostrarIncorrecta + ? 'border-red-500 bg-red-50' + : estaSeleccionada + ? 'border-blue-500 bg-blue-50' + : 'border-gray-200 bg-white hover:border-blue-300' + }`} + > +
+
+ {mostrarCorrecta && } + {mostrarIncorrecta && } + {!mostrarResultado && estaSeleccionada && ( +
+ )} +
+ + {opcion} + +
+ + ); + })} +
+ + + {mostrarResultado && ( + +

+ {respuestaSeleccionada === pregunta.respuestaCorrecta + ? '¡Correcto!' + : 'Incorrecto'} +

+

{pregunta.explicacion}

+ + )} + + +
+ {!mostrarResultado ? ( + + ) : preguntaActual < PREGUNTAS.length - 1 ? ( + + ) : null} +
+
+ + ); +} + +export default FlujoCircularBasico; diff --git a/frontend/src/components/exercises/modulo1/ProblemaEconomicoFundamental.tsx b/frontend/src/components/exercises/modulo1/ProblemaEconomicoFundamental.tsx new file mode 100644 index 0000000..eac9e61 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/ProblemaEconomicoFundamental.tsx @@ -0,0 +1,258 @@ +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, ArrowRight } from 'lucide-react'; + +interface EjercicioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Pregunta { + id: number; + pregunta: string; + opciones: string[]; + correcta: number; + explicacion: string; + categoria: 'que' | 'como' | 'para_quien'; +} + +const PREGUNTAS: Pregunta[] = [ + { + id: 1, + pregunta: "¿Qué decisión responde a la pregunta 'QUÉ producir'?", + opciones: [ + "Elegir entre producir computadoras o smartphones", + "Decidir si usar mano de obra o maquinaria", + "Determinar si los productos van a ricos o pobres", + "Establecer el precio de venta de los productos" + ], + correcta: 0, + explicacion: "La pregunta 'QUÉ producir' se refiere a la elección de qué bienes y servicios se van a fabricar con los recursos disponibles.", + categoria: 'que' + }, + { + id: 2, + pregunta: "¿Qué decisión responde a la pregunta 'CÓMO producir'?", + opciones: [ + "Elegir entre producir autos o camiones", + "Decidir entre usar tecnología o mano de obra intensiva", + "Determinar quién consumirá los productos", + "Calcular cuánto invertir en publicidad" + ], + correcta: 1, + explicacion: "La pregunta 'CÓMO producir' se refiere a la elección de la técnica o método de producción a utilizar.", + categoria: 'como' + }, + { + id: 3, + pregunta: "¿Qué decisión responde a la pregunta 'PARA QUIÉN producir'?", + opciones: [ + "Seleccionar los materiales a utilizar", + "Elegir la ubicación de la fábrica", + "Distribuir los productos entre diferentes grupos de la sociedad", + "Determinar la cantidad a producir" + ], + correcta: 2, + explicacion: "La pregunta 'PARA QUIÉN producir' se refiere a la distribución de los bienes y servicios entre los miembros de la sociedad.", + categoria: 'para_quien' + }, + { + id: 4, + pregunta: "Un país debe decidir entre destinar sus recursos a hospitales o a escuelas. ¿Qué pregunta del problema económico resuelve?", + opciones: [ + "¿Qué producir?", + "¿Cómo producir?", + "¿Para quién producir?", + "¿Cuánto producir?" + ], + correcta: 0, + explicacion: "Elegir entre hospitales y escuelas es una decisión sobre QUÉ bienes y servicios públicos producir.", + categoria: 'que' + }, + { + id: 5, + pregunta: "Una empresa textil decide reemplazar trabajadores por máquinas automáticas. ¿Qué pregunta responde?", + opciones: [ + "¿Qué producir?", + "¿Cómo producir?", + "¿Para quién producir?", + "¿Dónde producir?" + ], + correcta: 1, + explicacion: "La decisión de usar máquinas vs. trabajadores es una decisión sobre CÓMO producir.", + categoria: 'como' + }, + { + id: 6, + pregunta: "El gobierno implementa subsidios para que los medicamentos sean accesibles a personas de bajos recursos. ¿Qué pregunta resuelve?", + opciones: [ + "¿Qué producir?", + "¿Cómo producir?", + "¿Para quién producir?", + "¿Cuándo producir?" + ], + correcta: 2, + explicacion: "Los subsidios para acceso equitativo responden a la pregunta PARA QUIÉN producir o distribuir.", + categoria: 'para_quien' + } +]; + +export function ProblemaEconomicoFundamental({ ejercicioId: _ejercicioId, onComplete }: EjercicioProps) { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestas, setRespuestas] = useState([]); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [completado, setCompletado] = useState(false); + + const pregunta = PREGUNTAS[preguntaActual]; + const esUltima = preguntaActual === PREGUNTAS.length - 1; + const progreso = ((preguntaActual) / PREGUNTAS.length) * 100; + + const handleRespuesta = (index: number) => { + const nuevasRespuestas = [...respuestas, index]; + setRespuestas(nuevasRespuestas); + + if (esUltima) { + const correctas = nuevasRespuestas.filter((r, i) => r === PREGUNTAS[i].correcta).length; + const puntuacion = Math.round((correctas / PREGUNTAS.length) * 100); + setCompletado(true); + onComplete?.(puntuacion); + } else { + setMostrarResultado(true); + } + }; + + const handleSiguiente = () => { + setPreguntaActual(prev => prev + 1); + setMostrarResultado(false); + }; + + const esCorrecta = respuestas[preguntaActual] === pregunta.correcta; + + const getCategoriaLabel = (cat: string) => { + switch (cat) { + case 'que': return '¿Qué producir?'; + case 'como': return '¿Cómo producir?'; + case 'para_quien': return '¿Para quién producir?'; + default: return ''; + } + }; + + const getCategoriaColor = (cat: string) => { + switch (cat) { + case 'que': return 'bg-blue-100 text-blue-800'; + case 'como': return 'bg-green-100 text-green-800'; + case 'para_quien': return 'bg-purple-100 text-purple-800'; + default: return 'bg-gray-100 text-gray-800'; + } + }; + + if (completado) { + const correctas = respuestas.filter((r, i) => r === PREGUNTAS[i].correcta).length; + const puntuacion = Math.round((correctas / PREGUNTAS.length) * 100); + + return ( + + +
+ +
+ + +

¡Ejercicio Completado!

+

+ Dominaste las tres preguntas fundamentales de la economía +

+ +
{puntuacion}
+

puntos

+ +
+

Resumen:

+

{correctas} de {PREGUNTAS.length} correctas

+
+ + ); + } + + return ( + +
+ {/* Header */} +
+ + {getCategoriaLabel(pregunta.categoria)} + + + {preguntaActual + 1} / {PREGUNTAS.length} + +
+ + {/* Progress */} +
+
+ +
+
+ + {/* Pregunta */} +

{pregunta.pregunta}

+ + {/* Opciones */} + {!mostrarResultado ? ( +
+ {pregunta.opciones.map((opcion, index) => ( + handleRespuesta(index)} + whileHover={{ scale: 1.01 }} + whileTap={{ scale: 0.99 }} + className="w-full p-4 text-left border-2 border-gray-200 rounded-xl hover:border-blue-400 hover:bg-blue-50 transition-all flex items-center gap-3" + > + + {String.fromCharCode(65 + index)} + + {opcion} + + ))} +
+ ) : ( + +
+ {esCorrecta ? ( + + ) : ( + + )} + + {esCorrecta ? '¡Correcto!' : 'Incorrecto'} + +
+

{pregunta.explicacion}

+ + + + )} +
+ + ); +} + +export default ProblemaEconomicoFundamental; diff --git a/frontend/src/components/exercises/modulo1/ProductividadCalculator.tsx b/frontend/src/components/exercises/modulo1/ProductividadCalculator.tsx new file mode 100644 index 0000000..17f5ab2 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/ProductividadCalculator.tsx @@ -0,0 +1,220 @@ +import { useState } from 'react'; + +interface ProductividadCalculatorProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + nombre: string; + trabajadores: number; + output: number; + productividadMarginal?: number; +} + +const escenariosIniciales: Escenario[] = [ + { id: 1, nombre: 'Fábrica A', trabajadores: 10, output: 500 }, + { id: 2, nombre: 'Fábrica B', trabajadores: 20, output: 900 }, + { id: 3, nombre: 'Fábrica C', trabajadores: 30, output: 1200 }, +]; + +export function ProductividadCalculator({ ejercicioId: _ejercicioId, onComplete }: ProductividadCalculatorProps) { + const [escenarios, setEscenarios] = useState(escenariosIniciales); + const [respuestas, setRespuestas] = useState<{[key: number]: {media: string; marginal: string}}>({}); + const [validados, setValidados] = useState<{[key: number]: boolean}>({}); + const [completado, setCompletado] = useState(false); + + const calcularProductividadMedia = (trabajadores: number, output: number): number => { + return Number((output / trabajadores).toFixed(2)); + }; + + const calcularRespuestasCorrectas = (): number => { + let correctas = 0; + escenarios.forEach((escenario, index) => { + if (index === 0) return; + + const prodMediaCorrecta = calcularProductividadMedia(escenario.trabajadores, escenario.output); + const prodMarginalCorrecta = (escenario.output - escenarios[index - 1].output) / + (escenario.trabajadores - escenarios[index - 1].trabajadores); + + const respuesta = respuestas[escenario.id]; + if (respuesta) { + if (Math.abs(Number(respuesta.media) - prodMediaCorrecta) < 0.5) correctas++; + if (Math.abs(Number(respuesta.marginal) - prodMarginalCorrecta) < 0.5) correctas++; + } + }); + return correctas; + }; + + const handleValidar = () => { + const nuevosValidados: {[key: number]: boolean} = {}; + let todasCorrectas = true; + + escenarios.forEach((escenario, index) => { + if (index === 0) { + nuevosValidados[escenario.id] = true; + return; + } + + const respuesta = respuestas[escenario.id]; + if (!respuesta || !respuesta.media || !respuesta.marginal) { + todasCorrectas = false; + nuevosValidados[escenario.id] = false; + return; + } + + const prodMediaCorrecta = calcularProductividadMedia(escenario.trabajadores, escenario.output); + const prodMarginalCorrecta = (escenario.output - escenarios[index - 1].output) / + (escenario.trabajadores - escenarios[index - 1].trabajadores); + + const mediaCorrecta = Math.abs(Number(respuesta.media) - prodMediaCorrecta) < 0.5; + const marginalCorrecta = Math.abs(Number(respuesta.marginal) - prodMarginalCorrecta) < 0.5; + + nuevosValidados[escenario.id] = mediaCorrecta && marginalCorrecta; + if (!mediaCorrecta || !marginalCorrecta) todasCorrectas = false; + }); + + setValidados(nuevosValidados); + + if (todasCorrectas && !completado) { + setCompletado(true); + if (onComplete) { + onComplete(100); + } + } + }; + + const handleReset = () => { + setRespuestas({}); + setValidados({}); + setCompletado(false); + }; + + return ( +
+
+

Calculadora de Productividad

+

+ Calcula la productividad media y marginal para cada escenario. +

+
+ +
+

Fórmulas:

+
    +
  • Productividad Media: Output ÷ Número de trabajadores
    • +
  • Productividad Marginal: ΔOutput ÷ ΔTrabajadores
    • +
+
+ +
+ + + + + + + + + + + + + {escenarios.map((escenario, index) => ( + + + + + + + + + ))} + +
EscenarioTrabajadoresOutput (unidades)Productividad MediaProductividad MarginalEstado
{escenario.nombre}{escenario.trabajadores}{escenario.output} + {index === 0 ? ( + + {calcularProductividadMedia(escenario.trabajadores, escenario.output)} + + ) : ( + setRespuestas(prev => ({ + ...prev, + [escenario.id]: { ...prev[escenario.id], media: e.target.value } + }))} + className={`w-24 px-2 py-1 text-center border rounded ${ + validados[escenario.id] === true + ? 'border-green-500 bg-green-50' + : validados[escenario.id] === false + ? 'border-red-500 bg-red-50' + : 'border-gray-300' + }`} + placeholder="?" + /> + )} + + {index === 0 ? ( + - + ) : ( + setRespuestas(prev => ({ + ...prev, + [escenario.id]: { ...prev[escenario.id], marginal: e.target.value } + }))} + className={`w-24 px-2 py-1 text-center border rounded ${ + validados[escenario.id] === true + ? 'border-green-500 bg-green-50' + : validados[escenario.id] === false + ? 'border-red-500 bg-red-50' + : 'border-gray-300' + }`} + placeholder="?" + /> + )} + + {validados[escenario.id] === true && ( + ✓ Correcto + )} + {validados[escenario.id] === false && ( + ✗ Revisar + )} +
+
+ +
+ + +
+ + {completado && ( +
+

¡Excelente trabajo!

+

100 puntos

+

+ Has calculado correctamente todas las productividades. +

+
+ )} +
+ ); +} + +export default ProductividadCalculator; diff --git a/frontend/src/components/exercises/modulo1/RazonamientoEconomico.tsx b/frontend/src/components/exercises/modulo1/RazonamientoEconomico.tsx new file mode 100644 index 0000000..1b7f97a --- /dev/null +++ b/frontend/src/components/exercises/modulo1/RazonamientoEconomico.tsx @@ -0,0 +1,356 @@ +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, Lightbulb, ArrowRight, TrendingUp, Users, DollarSign, Scale } from 'lucide-react'; + +interface EjercicioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + titulo: string; + descripcion: string; + pregunta: string; + opciones: { + texto: string; + correcta: boolean; + explicacion: string; + }[]; + icono: 'trending' | 'users' | 'dollar' | 'scale'; +} + +const ESCENARIOS: Escenario[] = [ + { + id: 1, + titulo: "Costo de Oportunidad", + descripcion: "María tiene $100 y está decidiendo entre comprar un libro de economía o ir al cine con amigos.", + pregunta: "¿Cuál es el costo de oportunidad de elegir el libro?", + opciones: [ + { + texto: "Los $100 que gasta en el libro", + correcta: false, + explicacion: "El dinero gastado es el costo explícito, no el costo de oportunidad." + }, + { + texto: "El disfrute y experiencia de ir al cine con amigos", + correcta: true, + explicacion: "¡Correcto! El costo de oportunidad es lo que sacrificas: la experiencia del cine que dejas de tener." + }, + { + texto: "El tiempo que le toma leer el libro", + correcta: false, + explicacion: "Aunque el tiempo es un recurso, el costo de oportunidad específico es la alternativa forgada (el cine)." + }, + { + texto: "El valor del libro mismo", + correcta: false, + explicacion: "El valor del libro es el beneficio de la elección, no el costo de la alternativa." + } + ], + icono: 'scale' + }, + { + id: 2, + titulo: "Incentivos", + descripcion: "Un gobierno aumenta los impuestos a los cigarrillos para reducir el consumo tabáquico.", + pregunta: "¿Qué principio económico se está aplicando?", + opciones: [ + { + texto: "Las personas enfrentan disyuntivas", + correcta: false, + explicacion: "Aunque las disyuntivas existen, no es el principio principal aquí." + }, + { + texto: "El costo de algo es lo que sacrificas", + correcta: false, + explicacion: "No es el principio más relevante en este caso." + }, + { + texto: "Los incentivos afectan el comportamiento", + correcta: true, + explicacion: "¡Correcto! Al aumentar el costo (precio), se crea un incentivo para fumar menos." + }, + { + texto: "El comercio puede mejorar el bienestar", + correcta: false, + explicacion: "Este principio no aplica directamente a esta situación." + } + ], + icono: 'trending' + }, + { + id: 3, + titulo: "Racionalidad Económica", + descripcion: "Una empresa decide invertir en maquinaria nueva que aumentará la producción en 50%.", + pregunta: "¿Qué supuesto sobre la racionalidad económica se está haciendo?", + opciones: [ + { + texto: "Que la empresa busca maximizar beneficios", + correcta: true, + explicacion: "¡Correcto! Se asume que la empresa actúa racionalmente para maximizar sus ganancias." + }, + { + texto: "Que la empresa quiere ayudar a la comunidad", + correcta: false, + explicacion: "Aunque podría ser cierto, la racionalidad económica supone maximización de beneficios." + }, + { + texto: "Que la empresa no tiene otras opciones", + correcta: false, + explicacion: "La racionalidad económica implica elegir la mejor opción entre alternativas." + }, + { + texto: "Que la empresa actúa por emociones", + correcta: false, + explicacion: "La racionalidad económica asume decisiones basadas en cálculo, no emociones." + } + ], + icono: 'dollar' + }, + { + id: 4, + titulo: "Marginalismo", + descripcion: "Un estudiante está estudiando para un examen. Ya lleva 6 horas estudiando.", + pregunta: "¿Qué análisis debería hacer para decidir si estudia una hora más?", + opciones: [ + { + texto: "Calcular el promedio de todas sus calificaciones", + correcta: false, + explicacion: "El análisis promedio no ayuda en decisiones de una hora adicional." + }, + { + texto: "Comparar el beneficio adicional vs el costo de una hora más", + correcta: true, + explicacion: "¡Correcto! El análisis marginal compara beneficios y costos adicionales." + }, + { + texto: "Preguntarle a sus compañeros cuánto estudiaron", + correcta: false, + explicacion: "Las decisiones de otros no determinan tu análisis marginal óptimo." + }, + { + texto: "Ver cuánto tiempo ha estudiado en total", + correcta: false, + explicacion: "El tiempo acumulado no es relevante para la decisión marginal." + } + ], + icono: 'users' + }, + { + id: 5, + titulo: "Eficiencia vs. Equidad", + descripcion: "Un país puede distribuir la riqueza de forma igualitaria (todos ganan lo mismo) o por productividad (los más productivos ganan más).", + pregunta: "¿Qué principio económico ilustra esta disyuntiva?", + opciones: [ + { + texto: "La especialización mejora la productividad", + correcta: false, + explicacion: "La especialización es otro principio diferente." + }, + { + texto: "Los mercados son generalmente eficientes", + correcta: false, + explicacion: "Aunque relacionado, no captura la tensión entre eficiencia y equidad." + }, + { + texto: "Existe una disyuntiva entre eficiencia y equidad", + correcta: true, + explicacion: "¡Correcto! La distribución igualitaria (equidad) puede reducir incentivos (eficiencia)." + }, + { + texto: "El comercio internacional beneficia a todos", + correcta: false, + explicacion: "Este principio no aplica a la distribución interna de riqueza." + } + ], + icono: 'scale' + } +]; + +export function RazonamientoEconomico({ ejercicioId: _ejercicioId, onComplete }: EjercicioProps) { + const [escenarioActual, setEscenarioActual] = useState(0); + const [respuestas, setRespuestas] = useState<{escenarioId: number, correcta: boolean}[]>([]); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [completado, setCompletado] = useState(false); + + const escenario = ESCENARIOS[escenarioActual]; + const esUltima = escenarioActual === ESCENARIOS.length - 1; + const progreso = (escenarioActual / ESCENARIOS.length) * 100; + + const getIcono = (tipo: string) => { + switch (tipo) { + case 'trending': return ; + case 'users': return ; + case 'dollar': return ; + case 'scale': return ; + default: return ; + } + }; + + const handleRespuesta = (index: number) => { + const esCorrecta = escenario.opciones[index].correcta; + const nuevasRespuestas = [...respuestas, { escenarioId: escenario.id, correcta: esCorrecta }]; + setRespuestas(nuevasRespuestas); + + if (esUltima) { + const correctas = nuevasRespuestas.filter(r => r.correcta).length; + const puntuacion = Math.round((correctas / ESCENARIOS.length) * 100); + setCompletado(true); + onComplete?.(puntuacion); + } else { + setMostrarResultado(true); + } + }; + + const handleSiguiente = () => { + setEscenarioActual(prev => prev + 1); + setMostrarResultado(false); + }; + + const respuestaActual = respuestas[respuestas.length - 1]; + + if (completado) { + const correctas = respuestas.filter(r => r.correcta).length; + const puntuacion = Math.round((correctas / ESCENARIOS.length) * 100); + + return ( + + +
+ +
+ + +

¡Razonamiento Completado!

+

+ Has aplicado principios clave del pensamiento económico +

+ +
{puntuacion}
+

puntos

+ +
+

Conceptos evaluados:

+
+ {ESCENARIOS.map((e, i) => ( + + {e.titulo} + + ))} +
+
+ + ); + } + + return ( + +
+ {/* Header */} +
+
+
+ {getIcono(escenario.icono)} +
+
+

{escenario.titulo}

+

Caso {escenarioActual + 1} de {ESCENARIOS.length}

+
+
+
+ + {/* Progress */} +
+
+ +
+
+ + {!mostrarResultado ? ( + + {/* Escenario */} +
+

{escenario.descripcion}

+
+ + {/* Pregunta */} +

{escenario.pregunta}

+ + {/* Opciones */} +
+ {escenario.opciones.map((opcion, index) => ( + handleRespuesta(index)} + whileHover={{ scale: 1.01 }} + whileTap={{ scale: 0.99 }} + className="w-full p-4 text-left border-2 border-gray-200 rounded-xl hover:border-blue-400 hover:bg-blue-50 transition-all" + > +
+ + {String.fromCharCode(65 + index)} + + {opcion.texto} +
+ + ))} +
+ + ) : ( + +
+ {respuestaActual?.correcta ? ( + + ) : ( + + )} + + {respuestaActual?.correcta ? '¡Excelente razonamiento!' : 'No es correcto'} + +
+ +
+

Respuesta correcta:

+

+ {escenario.opciones.find(o => o.correcta)?.texto} +

+
+ +

+ {escenario.opciones.find(o => o.correcta)?.explicacion} +

+ + + + )} +
+ + ); +} + +export default RazonamientoEconomico; diff --git a/frontend/src/components/exercises/modulo1/RolesAgentesMatching.tsx b/frontend/src/components/exercises/modulo1/RolesAgentesMatching.tsx new file mode 100644 index 0000000..d790301 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/RolesAgentesMatching.tsx @@ -0,0 +1,63 @@ +import { MatchingExercise } from '../common/MatchingExercise'; + +const ROLES_AGENTES = { + leftItems: [ + { id: 'consumidor', content: 'Consumidor' }, + { id: 'productor', content: 'Productor' }, + { id: 'propietario-factores', content: 'Propietario de factores' }, + { id: 'demandante-bienes', content: 'Demandante de bienes y servicios' }, + { id: 'ofertante-factores', content: 'Ofertante de factores de producción' }, + { id: 'generador-ingresos', content: 'Generador de rentas y salarios' }, + ], + rightItems: [ + { id: 'familia', content: 'Familias' }, + { id: 'empresa', content: 'Empresas' }, + { id: 'ambos', content: 'Ambos agentes' }, + ], + correctPairs: [ + { leftId: 'consumidor', rightId: 'familia' }, + { leftId: 'productor', rightId: 'empresa' }, + { leftId: 'propietario-factores', rightId: 'familia' }, + { leftId: 'demandante-bienes', rightId: 'familia' }, + { leftId: 'ofertante-factores', rightId: 'familia' }, + { leftId: 'generador-ingresos', rightId: 'ambos' }, + ], +}; + +interface RolesAgentesMatchingProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function RolesAgentesMatching({ + ejercicioId: _ejercicioId, + onComplete, +}: RolesAgentesMatchingProps) { + const handleComplete = (result: { + correct: number; + total: number; + attempts: number; + score: number; + maxScore: number; + isPerfect: boolean; + }) => { + if (onComplete) { + onComplete(result.score); + } + }; + + return ( + + ); +} + +export default RolesAgentesMatching; diff --git a/frontend/src/components/exercises/modulo1/SistemasEconomicosQuiz.tsx b/frontend/src/components/exercises/modulo1/SistemasEconomicosQuiz.tsx new file mode 100644 index 0000000..a97f1c2 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/SistemasEconomicosQuiz.tsx @@ -0,0 +1,229 @@ +import { useState } from 'react'; +import { motion } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle } from 'lucide-react'; + +interface EjercicioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +const PREGUNTAS = [ + { + id: 1, + pregunta: "¿En qué sistema económico el Estado controla los medios de producción y la distribución de bienes?", + opciones: [ + "Economía de mercado", + "Economía planificada o centralizada", + "Economía mixta", + "Economía tradicional" + ], + correcta: 1, + explicacion: "En la economía planificada o centralizada, el Estado o gobierno controla todos los medios de producción y decide qué producir, cómo producirlo y para quién." + }, + { + id: 2, + pregunta: "¿Cuál es la característica principal de una economía de mercado?", + opciones: [ + "El gobierno decide todos los precios", + "Las decisiones económicas se toman por la oferta y la demanda", + "No existe propiedad privada", + "La producción se basa en costumbres ancestrales" + ], + correcta: 1, + explicacion: "En la economía de mercado, las decisiones económicas se determinan por la libre interacción de oferta y demanda, sin intervención estatal directa." + }, + { + id: 3, + pregunta: "¿Qué sistema económico combina elementos del mercado con intervención estatal?", + opciones: [ + "Economía de mercado pura", + "Economía planificada", + "Economía mixta", + "Economía cerrada" + ], + correcta: 2, + explicacion: "La economía mixta combina el funcionamiento del mercado con intervención estatal en sectores clave para corregir fallos de mercado y garantizar el bienestar social." + }, + { + id: 4, + pregunta: "En una economía planificada, ¿quién decide qué bienes se producen?", + opciones: [ + "Los consumidores mediante sus compras", + "Las empresas privadas", + "El gobierno o planificadores centrales", + "Los sindicatos" + ], + correcta: 2, + explicacion: "En la economía planificada, son los planificadores gubernamentales quienes determinan qué producir, en qué cantidad y a qué precio." + }, + { + id: 5, + pregunta: "¿Qué ventaja principal tiene la economía de mercado sobre la planificada?", + opciones: [ + "Mayor equidad en la distribución", + "Mayor eficiencia y respuesta a las preferencias de los consumidores", + "Eliminación de la competencia", + "Control total de la inflación" + ], + correcta: 1, + explicacion: "La economía de mercado tiende a ser más eficiente asignando recursos y responde mejor a las preferencias de los consumidores a través del mecanismo de precios." + }, + { + id: 6, + pregunta: "¿Qué problema suele presentar la economía planificada?", + opciones: [ + "Exceso de bienes de lujo", + "Ineficiencia y escasez por falta de incentivos", + "Alta desigualdad entre ricos y pobres", + "Inestabilidad cambiaria" + ], + correcta: 1, + explicacion: "La economía planificada suele sufrir de ineficiencias porque carece de los incentivos del mercado y la información descentralizada que guía la economía de mercado." + }, + { + id: 7, + pregunta: "¿Cuál es el rol del Estado en una economía mixta?", + opciones: [ + "No interviene en absoluto", + "Controla toda la producción", + "Regula, corrige fallos de mercado y provee bienes públicos", + "Solo recauda impuestos" + ], + correcta: 2, + explicacion: "En la economía mixta, el Estado regula el mercado, corrige fallos de mercado, proporciona bienes públicos y protege a los consumidores." + }, + { + id: 8, + pregunta: "La propiedad privada de los medios de producción es característica de:", + opciones: [ + "Solo economía de mercado", + "Solo economía mixta", + "Economía de mercado y economía mixta", + "Economía planificada" + ], + correcta: 2, + explicacion: "Tanto la economía de mercado como la mixta permiten la propiedad privada, a diferencia de la economía planificada donde los medios de producción son estatales." + } +]; + +export function SistemasEconomicosQuiz({ ejercicioId: _ejercicioId, onComplete }: EjercicioProps) { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestas, setRespuestas] = useState([]); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [completado, setCompletado] = useState(false); + + const pregunta = PREGUNTAS[preguntaActual]; + const esUltima = preguntaActual === PREGUNTAS.length - 1; + + const handleRespuesta = (index: number) => { + const nuevasRespuestas = [...respuestas, index]; + setRespuestas(nuevasRespuestas); + + if (esUltima) { + const correctas = nuevasRespuestas.filter((r, i) => r === PREGUNTAS[i].correcta).length; + const puntuacion = Math.round((correctas / PREGUNTAS.length) * 100); + setCompletado(true); + onComplete?.(puntuacion); + } else { + setMostrarResultado(true); + } + }; + + const handleSiguiente = () => { + setPreguntaActual(prev => prev + 1); + setMostrarResultado(false); + }; + + const esCorrecta = respuestas[preguntaActual] === pregunta.correcta; + + if (completado) { + const correctas = respuestas.filter((r, i) => r === PREGUNTAS[i].correcta).length; + const puntuacion = Math.round((correctas / PREGUNTAS.length) * 100); + + return ( + + +
+ +
+ + +

¡Quiz Completado!

+

+ Respondiste {correctas} de {PREGUNTAS.length} preguntas correctamente +

+ +
{puntuacion}
+

puntos

+ + ); + } + + return ( + +
+
+
+ Pregunta {preguntaActual + 1} de {PREGUNTAS.length} + {Math.round(((preguntaActual) / PREGUNTAS.length) * 100)}% +
+
+ +
+
+ +

{pregunta.pregunta}

+ + {!mostrarResultado ? ( +
+ {pregunta.opciones.map((opcion, index) => ( + handleRespuesta(index)} + whileHover={{ scale: 1.01 }} + whileTap={{ scale: 0.99 }} + className="w-full p-4 text-left border-2 border-gray-200 rounded-xl hover:border-blue-400 hover:bg-blue-50 transition-all" + > + {String.fromCharCode(65 + index)}. {opcion} + + ))} +
+ ) : ( + +
+ {esCorrecta ? ( + + ) : ( + + )} + + {esCorrecta ? '¡Correcto!' : 'Incorrecto'} + +
+

{pregunta.explicacion}

+ + + + )} +
+ + ); +} + +export default SistemasEconomicosQuiz; diff --git a/frontend/src/components/exercises/modulo1/VentajaComparativaCalculator.tsx b/frontend/src/components/exercises/modulo1/VentajaComparativaCalculator.tsx new file mode 100644 index 0000000..b84ef83 --- /dev/null +++ b/frontend/src/components/exercises/modulo1/VentajaComparativaCalculator.tsx @@ -0,0 +1,359 @@ +import { useState } from 'react'; + +interface VentajaComparativaCalculatorProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Pais { + nombre: string; + vino: number; + queso: number; +} + +interface Respuestas { + ventajaAbsolutaVino: string; + ventajaAbsolutaQueso: string; + costoOportunidadPaisA: string; + costoOportunidadPaisB: string; + ventajaComparativaVino: string; + ventajaComparativaQueso: string; +} + +const paises: Pais[] = [ + { nombre: 'País A', vino: 100, queso: 200 }, + { nombre: 'País B', vino: 80, queso: 120 }, +]; + +const opcionesPais = ['País A', 'País B', 'Ninguno (igual producción)']; + +export function VentajaComparativaCalculator({ ejercicioId: _ejercicioId, onComplete }: VentajaComparativaCalculatorProps) { + const [respuestas, setRespuestas] = useState>({}); + const [validados, setValidados] = useState<{[key: string]: boolean | null}>({}); + const [completado, setCompletado] = useState(false); + + const calcularCostoOportunidad = (pais: Pais, bien: 'vino' | 'queso'): number => { + if (bien === 'vino') { + return pais.queso / pais.vino; + } + return pais.vino / pais.queso; + }; + + const handleRespuestaChange = (campo: keyof Respuestas, valor: string) => { + setRespuestas(prev => ({ ...prev, [campo]: valor })); + setValidados(prev => ({ ...prev, [campo]: null })); + }; + + const handleValidar = () => { + const nuevosValidados: {[key: string]: boolean | null} = {}; + + const correctas: {[key: string]: string} = { + ventajaAbsolutaVino: paises[0].vino > paises[1].vino ? 'País A' : 'País B', + ventajaAbsolutaQueso: paises[0].queso > paises[1].queso ? 'País A' : 'País B', + costoOportunidadPaisA: `${calcularCostoOportunidad(paises[0], 'vino').toFixed(2)}`, + costoOportunidadPaisB: `${calcularCostoOportunidad(paises[1], 'vino').toFixed(2)}`, + }; + + const costoA = calcularCostoOportunidad(paises[0], 'vino'); + const costoB = calcularCostoOportunidad(paises[1], 'vino'); + + correctas.ventajaComparativaVino = costoA < costoB ? 'País A' : 'País B'; + correctas.ventajaComparativaQueso = costoA < costoB ? 'País B' : 'País A'; + + let todasCorrectas = true; + Object.keys(correctas).forEach(key => { + const esCorrecta = respuestas[key as keyof Respuestas] === correctas[key]; + nuevosValidados[key] = esCorrecta; + if (!esCorrecta) todasCorrectas = false; + }); + + setValidados(nuevosValidados); + + if (todasCorrectas && !completado) { + setCompletado(true); + if (onComplete) { + onComplete(100); + } + } + }; + + const handleReset = () => { + setRespuestas({}); + setValidados({}); + setCompletado(false); + }; + + return ( +
+
+

Calculadora de Ventaja Comparativa

+

+ Analiza la producción de dos países para determinar ventajas absolutas y comparativas. +

+
+ +
+
+

Tabla de Producción

+ + + + + + + + + + {paises.map((pais, idx) => ( + + + + + + ))} + +
PaísVino (barriles)Queso (kg)
{pais.nombre}{pais.vino}{pais.queso}
+
+ +
+

Guía:

+
    +
  • + Ventaja Absoluta: Quien produce más de un bien con los mismos recursos. +
    • +
  • + Costo de Oportunidad: +
    • Vino: Queso sacrificado ÷ Vino producido +
    • Queso: Vino sacrificado ÷ Queso producido +
    • +
  • + Ventaja Comparativa: Quien tiene el menor costo de oportunidad. +
    • +
+
+
+ +
+
+

1. Ventaja Absoluta

+ +
+
+ +
+ {opcionesPais.map(opcion => { + const isSelected = respuestas.ventajaAbsolutaVino === opcion; + const estado = validados.ventajaAbsolutaVino; + + let className = 'px-4 py-2 rounded-lg text-sm border transition-all '; + if (estado === true) { + className += isSelected ? 'bg-green-100 border-green-500 text-green-800' : 'bg-gray-100 border-gray-200 text-gray-400'; + } else if (estado === false && isSelected) { + className += 'bg-red-100 border-red-500 text-red-800'; + } else { + className += isSelected ? 'bg-blue-100 border-blue-500 text-blue-800' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'; + } + + return ( + + ); + })} +
+
+ +
+ +
+ {opcionesPais.map(opcion => { + const isSelected = respuestas.ventajaAbsolutaQueso === opcion; + const estado = validados.ventajaAbsolutaQueso; + + let className = 'px-4 py-2 rounded-lg text-sm border transition-all '; + if (estado === true) { + className += isSelected ? 'bg-green-100 border-green-500 text-green-800' : 'bg-gray-100 border-gray-200 text-gray-400'; + } else if (estado === false && isSelected) { + className += 'bg-red-100 border-red-500 text-red-800'; + } else { + className += isSelected ? 'bg-blue-100 border-blue-500 text-blue-800' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'; + } + + return ( + + ); + })} +
+
+
+
+ +
+

2. Costo de Oportunidad del Vino

+ +
+
+ +
+ handleRespuestaChange('costoOportunidadPaisA', e.target.value)} + className={`w-24 px-3 py-2 border rounded-lg text-center ${ + validados.costoOportunidadPaisA === true + ? 'border-green-500 bg-green-50' + : validados.costoOportunidadPaisA === false + ? 'border-red-500 bg-red-50' + : 'border-gray-300' + }`} + placeholder="?" + /> + kg de queso +
+
+ +
+ +
+ handleRespuestaChange('costoOportunidadPaisB', e.target.value)} + className={`w-24 px-3 py-2 border rounded-lg text-center ${ + validados.costoOportunidadPaisB === true + ? 'border-green-500 bg-green-50' + : validados.costoOportunidadPaisB === false + ? 'border-red-500 bg-red-50' + : 'border-gray-300' + }`} + placeholder="?" + /> + kg de queso +
+
+
+
+ +
+

3. Ventaja Comparativa

+ +
+
+ +
+ {opcionesPais.map(opcion => { + const isSelected = respuestas.ventajaComparativaVino === opcion; + const estado = validados.ventajaComparativaVino; + + let className = 'px-4 py-2 rounded-lg text-sm border transition-all '; + if (estado === true) { + className += isSelected ? 'bg-green-100 border-green-500 text-green-800' : 'bg-gray-100 border-gray-200 text-gray-400'; + } else if (estado === false && isSelected) { + className += 'bg-red-100 border-red-500 text-red-800'; + } else { + className += isSelected ? 'bg-blue-100 border-blue-500 text-blue-800' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'; + } + + return ( + + ); + })} +
+
+ +
+ +
+ {opcionesPais.map(opcion => { + const isSelected = respuestas.ventajaComparativaQueso === opcion; + const estado = validados.ventajaComparativaQueso; + + let className = 'px-4 py-2 rounded-lg text-sm border transition-all '; + if (estado === true) { + className += isSelected ? 'bg-green-100 border-green-500 text-green-800' : 'bg-gray-100 border-gray-200 text-gray-400'; + } else if (estado === false && isSelected) { + className += 'bg-red-100 border-red-500 text-red-800'; + } else { + className += isSelected ? 'bg-blue-100 border-blue-500 text-blue-800' : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'; + } + + return ( + + ); + })} +
+
+
+
+
+ +
+ + +
+ + {completado && ( +
+

¡Excelente análisis económico!

+

100 puntos

+

+ Has identificado correctamente las ventajas absolutas y comparativas. +

+
+ )} +
+ ); +} + +export default VentajaComparativaCalculator; diff --git a/frontend/src/components/exercises/modulo1/VentajasDesventajasSistemas.tsx b/frontend/src/components/exercises/modulo1/VentajasDesventajasSistemas.tsx new file mode 100644 index 0000000..48b549a --- /dev/null +++ b/frontend/src/components/exercises/modulo1/VentajasDesventajasSistemas.tsx @@ -0,0 +1,546 @@ +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Card } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { + CheckCircle, + XCircle, + RefreshCcw, + Link2, + Trophy, + Scale, + Target, + Zap, + ArrowRight, + Building2, + Users, + Globe, + Landmark, + Coins +} from 'lucide-react'; + +interface MatchingItem { + id: string; + content: string; + icon?: React.ReactNode; +} + +interface MatchingPair { + leftId: string; + rightId: string; +} + +interface VentajasDesventajasSistemasProps { + onComplete?: (result: { + correct: number; + total: number; + score: number; + isPerfect: boolean; + }) => void; +} + +const SISTEMAS_ECONOMICOS: MatchingItem[] = [ + { + id: 'mercado', + content: 'Economía de Mercado', + icon: , + }, + { + id: 'planificada', + content: 'Economía Planificada', + icon: , + }, + { + id: 'mixta', + content: 'Economía Mixta', + icon: , + }, +]; + +const CARACTERISTICAS: MatchingItem[] = [ + { + id: 'eficiencia', + content: 'Alta eficiencia en la asignación de recursos', + icon: , + }, + { + id: 'desigualdad', + content: 'Puede generar grandes desigualdades de ingreso', + icon: , + }, + { + id: 'planificacion', + content: 'El gobierno controla la producción y distribución', + icon: , + }, + { + id: 'flexibilidad', + content: 'Respuesta rápida a cambios en la demanda', + icon: , + }, + { + id: 'equidad', + content: 'Mayor equidad en la distribución de bienes', + icon: , + }, + { + id: 'burocracia', + content: 'Alta burocracia y lentitud en decisiones', + icon: , + }, + { + id: 'equilibrio', + content: 'Combina eficiencia con justicia social', + icon: , + }, + { + id: 'intervencion', + content: 'El Estado regula y corrige fallas del mercado', + icon: , + }, +]; + +const PAREJAS_CORRECTAS: MatchingPair[] = [ + { leftId: 'mercado', rightId: 'eficiencia' }, + { leftId: 'mercado', rightId: 'desigualdad' }, + { leftId: 'mercado', rightId: 'flexibilidad' }, + { leftId: 'planificada', rightId: 'planificacion' }, + { leftId: 'planificada', rightId: 'equidad' }, + { leftId: 'planificada', rightId: 'burocracia' }, + { leftId: 'mixta', rightId: 'equilibrio' }, + { leftId: 'mixta', rightId: 'intervencion' }, +]; + +interface Match { + leftId: string; + rightId: string; + isCorrect?: boolean; +} + +export function VentajasDesventajasSistemas({ onComplete }: VentajasDesventajasSistemasProps) { + const [matches, setMatches] = useState([]); + const [selectedLeft, setSelectedLeft] = useState(null); + const [selectedRight, setSelectedRight] = useState(null); + const [showResults, setShowResults] = useState(false); + const [attempts, setAttempts] = useState(0); + + const handleLeftClick = (itemId: string) => { + if (showResults) return; + + if (selectedLeft === itemId) { + setSelectedLeft(null); + } else { + setSelectedLeft(itemId); + if (selectedRight) { + handleCreateMatch(itemId, selectedRight); + } + } + }; + + const handleRightClick = (itemId: string) => { + if (showResults) return; + + if (selectedRight === itemId) { + setSelectedRight(null); + } else { + setSelectedRight(itemId); + if (selectedLeft) { + handleCreateMatch(selectedLeft, itemId); + } + } + }; + + const handleCreateMatch = (leftId: string, rightId: string) => { + const isLeftMatched = matches.some(m => m.leftId === leftId); + const isRightMatched = matches.some(m => m.rightId === rightId); + + if (isLeftMatched || isRightMatched) return; + + setMatches(prev => [...prev, { leftId, rightId }]); + setSelectedLeft(null); + setSelectedRight(null); + setAttempts(prev => prev + 1); + }; + + const handleRemoveMatch = (leftId: string) => { + if (showResults) return; + setMatches(prev => prev.filter(m => m.leftId !== leftId)); + }; + + const handleValidate = () => { + const validatedMatches = matches.map(match => { + const isCorrect = PAREJAS_CORRECTAS.some( + p => p.leftId === match.leftId && p.rightId === match.rightId + ); + return { ...match, isCorrect }; + }); + + setMatches(validatedMatches); + setShowResults(true); + + const correctCount = validatedMatches.filter(m => m.isCorrect).length; + const score = Math.round((correctCount / PAREJAS_CORRECTAS.length) * 100); + + if (onComplete) { + onComplete({ + correct: correctCount, + total: PAREJAS_CORRECTAS.length, + score, + isPerfect: correctCount === PAREJAS_CORRECTAS.length, + }); + } + }; + + const handleReset = () => { + setMatches([]); + setSelectedLeft(null); + setSelectedRight(null); + setShowResults(false); + setAttempts(0); + }; + + const isLeftMatched = (id: string) => matches.some(m => m.leftId === id); + const isRightMatched = (id: string) => matches.some(m => m.rightId === id); + + const getMatchStatus = (leftId: string): 'correct' | 'incorrect' | null => { + const match = matches.find(m => m.leftId === leftId); + if (!match || !showResults) return null; + return match.isCorrect ? 'correct' : 'incorrect'; + }; + + const getMatchedRightItem = (leftId: string) => { + const match = matches.find(m => m.leftId === leftId); + if (!match) return null; + return CARACTERISTICAS.find(item => item.id === match.rightId); + }; + + const getMatchedLeftItem = (rightId: string) => { + const match = matches.find(m => m.rightId === rightId); + if (!match) return null; + return SISTEMAS_ECONOMICOS.find(item => item.id === match.leftId); + }; + + const correctCount = matches.filter(m => m.isCorrect).length; + const allMatched = matches.length === PAREJAS_CORRECTAS.length; + + return ( +
+ {/* Header */} +
+
+

Sistemas Económicos

+

+ Relaciona cada sistema económico con sus características correspondientes +

+
+
+
+ + 100 pts +
+
+ + {attempts} intentos +
+
+
+ + {/* Instrucciones */} + +
+
+ +
+
+

¿Cómo jugar?

+

+ Haz clic en un sistema económico y luego en sus características para emparejarlos. + Cada sistema debe emparejarse con sus ventajas y desventajas específicas. +

+
+
+ + + {/* Matching Area */} + +
+ {/* Sistemas Económicos */} +
+

+ Sistemas Económicos +

+
+ {SISTEMAS_ECONOMICOS.map(item => { + const matchedItem = getMatchedRightItem(item.id); + const status = getMatchStatus(item.id); + const isSelected = selectedLeft === item.id; + const isMatched = isLeftMatched(item.id); + + return ( + handleLeftClick(item.id)} + whileHover={!showResults && !isMatched ? { scale: 1.02 } : {}} + whileTap={!showResults && !isMatched ? { scale: 0.98 } : {}} + className={` + relative p-4 rounded-xl border-2 transition-all cursor-pointer + ${!showResults && !isMatched ? 'hover:border-blue-300 hover:shadow-md' : ''} + ${isSelected ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-200' : ''} + ${isMatched && !showResults ? 'border-indigo-300 bg-indigo-50' : ''} + ${status === 'correct' ? 'border-green-500 bg-green-50' : ''} + ${status === 'incorrect' ? 'border-red-500 bg-red-50' : ''} + ${!isMatched && !isSelected ? 'border-gray-200 bg-white' : ''} + `} + > +
+
+ {item.icon} +
+ {item.content} +
+ + {/* Match indicator */} + {matchedItem && ( +
+
+ + {matchedItem.content} +
+
+ )} + + {/* Status icons */} + {showResults && status && ( +
+ {status === 'correct' ? ( + + ) : ( + + )} +
+ )} + + {/* Remove button */} + {isMatched && !showResults && ( + + )} + + {/* Counter badge */} + {!showResults && ( +
+ + {matches.filter(m => m.leftId === item.id).length} + +
+ )} + + ); + })} +
+
+ + {/* Características */} +
+

+ Características +

+
+ {CARACTERISTICAS.map(item => { + const matchedItem = getMatchedLeftItem(item.id); + const isSelected = selectedRight === item.id; + const isMatched = isRightMatched(item.id); + + return ( + handleRightClick(item.id)} + whileHover={!showResults && !isMatched ? { scale: 1.02 } : {}} + whileTap={!showResults && !isMatched ? { scale: 0.98 } : {}} + className={` + relative p-3 rounded-xl border-2 transition-all cursor-pointer + ${!showResults && !isMatched ? 'hover:border-blue-300 hover:shadow-md' : ''} + ${isSelected ? 'border-blue-500 bg-blue-50 ring-2 ring-blue-200' : ''} + ${isMatched ? 'border-gray-300 bg-gray-100 opacity-60' : ''} + ${!isMatched && !isSelected ? 'border-gray-200 bg-white' : ''} + `} + > +
+
+ {item.icon} +
+ + {item.content} + +
+ + {/* Match indicator */} + {matchedItem && ( +
+
+ + Emparejado con: {matchedItem.content} +
+
+ )} + + ); + })} +
+
+
+ + + {/* Results Section */} + + {showResults && ( + + +
+ + + + +

+ {correctCount === PAREJAS_CORRECTAS.length + ? '¡Excelente!' + : correctCount >= PAREJAS_CORRECTAS.length * 0.7 + ? '¡Muy bien!' + : '¡Sigue practicando!'} +

+ +

+ {correctCount} de {PAREJAS_CORRECTAS.length} emparejamientos correctos +

+ + {/* Score Display */} +
+
+ +

+ {Math.round((correctCount / PAREJAS_CORRECTAS.length) * 100)} +

+

Puntuación

+
+ +
+ +

{correctCount}

+

Correctos

+
+ +
+ +

{attempts}

+

Intentos

+
+
+ + {/* Explicación de respuestas */} + {correctCount < PAREJAS_CORRECTAS.length && ( +
+

Respuestas correctas:

+
+ {SISTEMAS_ECONOMICOS.map(sistema => { + const caracteristicas = PAREJAS_CORRECTAS + .filter(p => p.leftId === sistema.id) + .map(p => CARACTERISTICAS.find(c => c.id === p.rightId)?.content); + + return ( +
+ + {sistema.content}: + + + {caracteristicas.join(', ')} + +
+ ); + })} +
+
+ )} +
+ + + )} + + + {/* Action Buttons */} +
+ + + {!showResults ? ( + + ) : ( + + )} +
+ + {/* Progress indicator */} +
+

+ Progreso: {matches.length} de{' '} + {PAREJAS_CORRECTAS.length} emparejamientos +

+
+ +
+
+
+ ); +} + +export default VentajasDesventajasSistemas; diff --git a/frontend/src/components/exercises/modulo1/index.ts b/frontend/src/components/exercises/modulo1/index.ts index e5334ca..9418098 100644 --- a/frontend/src/components/exercises/modulo1/index.ts +++ b/frontend/src/components/exercises/modulo1/index.ts @@ -1,3 +1,23 @@ export { SimuladorDisyuntivas } from './SimuladorDisyuntivas'; export { QuizBienes } from './QuizBienes'; export { FlujoCircular } from './FlujoCircular'; +export { DefinicionEconomiaQuiz } from './DefinicionEconomiaQuiz'; +export { EscasezSimulator } from './EscasezSimulator'; +export { ProblemaEconomicoFundamental } from './ProblemaEconomicoFundamental'; +export { EconomiaPositivaVsNormativa } from './EconomiaPositivaVsNormativa'; +export { RazonamientoEconomico } from './RazonamientoEconomico'; +export { SistemasEconomicosQuiz } from './SistemasEconomicosQuiz'; +export { ComparativaSistemas } from './ComparativaSistemas'; +export { CasosPaises } from './CasosPaises'; +export { VentajasDesventajasSistemas } from './VentajasDesventajasSistemas'; +export { FPPConstructor } from './FPPConstructor'; +export { FPPAnalizador } from './FPPAnalizador'; +export { CostoOportunidadCalculator } from './CostoOportunidadCalculator'; +export { CrecimientoEconomicoFPP } from './CrecimientoEconomicoFPP'; +export { AgentesEconomicosQuiz } from './AgentesEconomicosQuiz'; +export { RolesAgentesMatching } from './RolesAgentesMatching'; +export { FlujoCircularBasico } from './FlujoCircularBasico'; +export { FactoresProduccionQuiz } from './FactoresProduccionQuiz'; +export { ProductividadCalculator } from './ProductividadCalculator'; +export { CostoOportunidadCotidiano } from './CostoOportunidadCotidiano'; +export { VentajaComparativaCalculator } from './VentajaComparativaCalculator'; \ No newline at end of file diff --git a/frontend/src/components/exercises/modulo2/AjusteEquilibrio.tsx b/frontend/src/components/exercises/modulo2/AjusteEquilibrio.tsx new file mode 100644 index 0000000..c48bc35 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/AjusteEquilibrio.tsx @@ -0,0 +1,473 @@ +import React, { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { RefreshCw, Play, Pause, ArrowRight, CheckCircle2, Trophy, RotateCcw, Info } from 'lucide-react'; + +interface AjusteEquilibrioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +type EscenarioTipo = 'exceso_demanda' | 'exceso_oferta'; + +interface Escenario { + id: number; + tipo: EscenarioTipo; + titulo: string; + descripcion: string; + precioInicial: number; + precioEquilibrio: number; + cantidadEquilibrio: number; + mensajeAjuste: string; +} + +const escenarios: Escenario[] = [ + { + id: 1, + tipo: 'exceso_demanda', + titulo: 'Escasez de Vivienda', + descripcion: 'El precio actual de $600 está por debajo del equilibrio. Hay más personas buscando vivienda que apartamentos disponibles.', + precioInicial: 600, + precioEquilibrio: 900, + cantidadEquilibrio: 300, + mensajeAjuste: 'La escasez presiona al alza: los compradores compiten ofreciendo más, los vendedores suben precios.' + }, + { + id: 2, + tipo: 'exceso_oferta', + titulo: 'Superávit de Manzanas', + descripcion: 'La cosecha fue abundante y el precio actual de $80 está por encima del equilibrio. Hay más manzanas de las que la gente quiere comprar.', + precioInicial: 80, + precioEquilibrio: 50, + cantidadEquilibrio: 100, + mensajeAjuste: 'El superávit presiona a la baja: los vendedores compiten bajando precios para liquidar inventario.' + } +]; + +export const AjusteEquilibrio: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [precioActual, setPrecioActual] = useState(escenarios[0].precioInicial); + const [estaAnimando, setEstaAnimando] = useState(false); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [faseAjuste, setFaseAjuste] = useState<'inicio' | 'ajustando' | 'completado'>('inicio'); + const [score, setScore] = useState(0); + const [completado, setCompletado] = useState(false); + const [_startTime] = useState(Date.now()); + + const escenario = escenarios[escenarioActual]; + + useEffect(() => { + let interval: ReturnType; + + if (estaAnimando) { + setFaseAjuste('ajustando'); + interval = setInterval(() => { + setPrecioActual(prev => { + const diferencia = escenario.precioEquilibrio - prev; + const cambio = diferencia * 0.05; + + if (Math.abs(diferencia) < 2) { + setEstaAnimando(false); + setFaseAjuste('completado'); + setMostrarResultado(true); + return escenario.precioEquilibrio; + } + + return prev + cambio; + }); + }, 100); + } + + return () => clearInterval(interval); + }, [estaAnimando, escenario]); + + const handleIniciar = () => { + setEstaAnimando(true); + }; + + const handlePausar = () => { + setEstaAnimando(false); + }; + + const handleSiguiente = () => { + if (escenarioActual < escenarios.length - 1) { + const nextEscenario = escenarios[escenarioActual + 1]; + setEscenarioActual(prev => prev + 1); + setPrecioActual(nextEscenario.precioInicial); + setEstaAnimando(false); + setMostrarResultado(false); + setFaseAjuste('inicio'); + setScore(prev => prev + 50); + } else { + setCompletado(true); + if (onComplete) { + onComplete(100); + } + } + }; + + const handleReiniciar = () => { + setEscenarioActual(0); + setPrecioActual(escenarios[0].precioInicial); + setEstaAnimando(false); + setMostrarResultado(false); + setFaseAjuste('inicio'); + setScore(0); + setCompletado(false); + }; + + const generarCurvas = () => { + const demanda = []; + const oferta = []; + + for (let Q = 0; Q <= 400; Q += 20) { + const Pd = 1200 - 1 * Q; + const Po = 0 + 3 * Q; + if (Pd >= 0) demanda.push({ Q, P: Pd }); + if (Po >= 0) oferta.push({ Q, P: Po }); + } + + return { demanda, oferta }; + }; + + const { demanda, oferta } = generarCurvas(); + + const scaleX = (Q: number) => 60 + (Q / 400) * 320; + const scaleY = (P: number) => 280 - (P / 1200) * 240; + + const demandaPath = demanda.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.Q)} ${scaleY(p.P)}` + ).join(' '); + + const ofertaPath = oferta.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.Q)} ${scaleY(p.P)}` + ).join(' '); + + const calcularCantidades = (precio: number) => { + const Qd = Math.max(0, 1200 - precio); + const Qo = Math.max(0, precio / 3); + return { Qd, Qo }; + }; + + const cantidades = calcularCantidades(precioActual); + const esExcesoDemanda = cantidades.Qd > cantidades.Qo; + const diferencia = Math.abs(cantidades.Qd - cantidades.Qo); + + if (completado) { + return ( + + +

¡Ejercicio Completado!

+

Has observado el ajuste hacia el equilibrio

+ +
+
100%
+

+ Has completado todos los escenarios +

+
+ + + + ); + } + + return ( +
+
+
+
+ +

Ajuste al Equilibrio

+
+
+ + {escenarioActual + 1} de {escenarios.length} + + +
+
+

+ Observa cómo el mercado se autocorrige hacia el equilibrio. +

+
+ +
+
+

{escenario.titulo}

+ + + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Labels */} + Cantidad (Q) + Precio (P) + + {/* Curva de Demanda */} + + D + + {/* Curva de Oferta */} + + S + + {/* Punto de equilibrio (E) */} + + + E + + + {/* Línea de precio actual */} + + + P=${Math.round(precioActual)} + + + {/* Cantidad demandada */} + + + Qd + + + {/* Cantidad ofrecida */} + + + Qo + + + {/* Flecha de dirección del ajuste */} + {faseAjuste === 'ajustando' && ( + + + + + + + + + + + + )} + + +
+
+ Precio + ${Math.round(precioActual)} +
+
+ Q Demanda + {Math.round(cantidades.Qd)} +
+
+ Q Oferta + {Math.round(cantidades.Qo)} +
+
+
+ +
+
+
+ +
+

Situación Actual

+

{escenario.descripcion}

+
+
+
+ + + {faseAjuste === 'inicio' && ( + +

¿Qué está pasando?

+
+
+

+ {esExcesoDemanda ? '🔥 Exceso de Demanda (Escasez)' : '📦 Exceso de Oferta (Superávit)'} +

+

+ Diferencia: {Math.round(diferencia)} unidades +

+
+
+ + + + )} + + {faseAjuste === 'ajustando' && ( + +

+ + Ajustando... +

+

{escenario.mensajeAjuste}

+ +
+
+ +
+ +
+ + )} + + {faseAjuste === 'completado' && ( + +
+ +

¡Equilibrio Alcanzado!

+
+ +
+

Precio de equilibrio: ${escenario.precioEquilibrio}

+

Cantidad de equilibrio: {escenario.cantidadEquilibrio} unidades

+

+ En equilibrio, la cantidad demandada es igual a la cantidad ofrecida. + No hay presión para que el precio cambie. +

+
+ + + + )} + + +
+

Principio del Ajuste:

+
    +
  • + • + Escasez (P < Pe): Los compradores ofrecen más → sube el precio +
    • +
  • + • + Superávit (P > Pe): Los vendedores bajan precios → baja el precio +
    • +
+
+
+
+
+ ); +}; + +export default AjusteEquilibrio; diff --git a/frontend/src/components/exercises/modulo2/CalculoElasticidadPrecio.tsx b/frontend/src/components/exercises/modulo2/CalculoElasticidadPrecio.tsx new file mode 100644 index 0000000..9995d3c --- /dev/null +++ b/frontend/src/components/exercises/modulo2/CalculoElasticidadPrecio.tsx @@ -0,0 +1,310 @@ +import React, { useState, useEffect } from 'react'; + +interface DatosPrecioCantidad { + precioInicial: number; + cantidadInicial: number; + precioFinal: number; + cantidadFinal: number; +} + +const generarDatosAleatorios = (): DatosPrecioCantidad => { + const precioInicial = Math.round((Math.random() * 50 + 10) * 100) / 100; + const cantidadInicial = Math.round(Math.random() * 800 + 200); + + const cambioPrecio = (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 20 + 5); + const elasticidad = Math.random() * 2 + 0.3; + + const precioFinal = Math.round((precioInicial + cambioPrecio) * 100) / 100; + const cambioCantidad = -elasticidad * (cambioPrecio / ((precioInicial + precioFinal) / 2)) * cantidadInicial; + const cantidadFinal = Math.round(cantidadInicial + cambioCantidad); + + return { + precioInicial: Math.max(1, precioInicial), + cantidadInicial: Math.max(10, cantidadInicial), + precioFinal: Math.max(1, precioFinal), + cantidadFinal: Math.max(10, cantidadFinal) + }; +}; + +export const CalculoElasticidadPrecio: React.FC = () => { + const [datos, setDatos] = useState(generarDatosAleatorios()); + const [respuestaUsuario, setRespuestaUsuario] = useState(''); + const [resultado, setResultado] = useState<{ + correcto: boolean; + mensaje: string; + valorReal: number; + } | null>(null); + const [mostrarFormula, setMostrarFormula] = useState(true); + + const calcularElasticidadPuntoMedio = (d: DatosPrecioCantidad): number => { + const cambioCantidad = d.cantidadFinal - d.cantidadInicial; + const cambioPrecio = d.precioFinal - d.precioInicial; + const cantidadPromedio = (d.cantidadInicial + d.cantidadFinal) / 2; + const precioPromedio = (d.precioInicial + d.precioFinal) / 2; + + if (cantidadPromedio === 0 || precioPromedio === 0) return 0; + + const elasticidad = (cambioCantidad / cantidadPromedio) / (cambioPrecio / precioPromedio); + return Math.abs(elasticidad); + }; + + const verificarRespuesta = () => { + const elasticidadReal = calcularElasticidadPuntoMedio(datos); + const respuestaNum = parseFloat(respuestaUsuario); + + if (isNaN(respuestaNum) || respuestaNum < 0) { + setResultado({ + correcto: false, + mensaje: 'Por favor ingresa un número válido mayor o igual a 0', + valorReal: elasticidadReal + }); + return; + } + + const margenError = 0.15; + const correcto = Math.abs(respuestaNum - elasticidadReal) <= margenError; + + setResultado({ + correcto, + mensaje: correcto + ? '¡Correcto! Has calculado la elasticidad correctamente.' + : `Incorrecto. El valor correcto es ${elasticidadReal.toFixed(2)}`, + valorReal: elasticidadReal + }); + }; + + const generarNuevoEjercicio = () => { + setDatos(generarDatosAleatorios()); + setRespuestaUsuario(''); + setResultado(null); + }; + + const precioPromedio = (datos.precioInicial + datos.precioFinal) / 2; + const cantidadPromedio = (datos.cantidadInicial + datos.cantidadFinal) / 2; + const cambioPrecio = datos.precioFinal - datos.precioInicial; + const cambioCantidad = datos.cantidadFinal - datos.cantidadInicial; + + return ( +
+

Cálculo de Elasticidad Precio de la Demanda

+

Utiliza la fórmula del punto medio para calcular la elasticidad.

+ +
+
+

+ 1 + Datos Iniciales +

+
+
+ Precio inicial (P₁): + ${datos.precioInicial.toFixed(2)} +
+
+ Cantidad inicial (Q₁): + {datos.cantidadInicial.toLocaleString()} unidades +
+
+
+ +
+

+ 2 + Datos Finales +

+
+
+ Precio final (P₂): + ${datos.precioFinal.toFixed(2)} +
+
+ Cantidad final (Q₂): + {datos.cantidadFinal.toLocaleString()} unidades +
+
+
+
+ + {mostrarFormula && ( +
+

+ + + + Fórmula del Punto Medio (Arco) +

+
+

+ Ed = |(Q₂ - Q₁) / ((Q₂ + Q₁) / 2)| + ÷ + (P₂ - P₁) / ((P₂ + P₁) / 2) +

+
+

+ Donde: Q = Cantidad, P = Precio, y usamos valores absolutos para obtener la elasticidad como número positivo. +

+
+ )} + +
+

Paso a paso (valores calculados):

+
+
+

Cambio en cantidad:

+

({datos.cantidadFinal} - {datos.cantidadInicial}) = {cambioCantidad}

+
+
+

Cantidad promedio:

+

({datos.cantidadFinal} + {datos.cantidadInicial}) / 2 = {cantidadPromedio}

+
+
+

Cambio en precio:

+

(${datos.precioFinal} - ${datos.precioInicial}) = ${cambioPrecio.toFixed(2)}

+
+
+

Precio promedio:

+

(${datos.precioFinal} + ${datos.precioInicial}) / 2 = ${precioPromedio.toFixed(2)}

+
+
+
+ +
+

Tu Respuesta

+
+
+ + setRespuestaUsuario(e.target.value)} + className="border-2 border-indigo-200 p-3 rounded-lg w-full sm:w-40 text-center text-lg font-mono focus:border-indigo-500 focus:outline-none" + placeholder="Ej: 1.25" + /> +
+ +
+ + +
+
+ + +
+ + {resultado && ( +
+
+
+ {resultado.correcto ? ( + + + + ) : ( + + + + )} +
+
+

+ {resultado.correcto ? '¡Respuesta Correcta!' : 'Respuesta Incorrecta'} +

+

+ {resultado.mensaje} +

+ + {!resultado.correcto && ( +
+

Desglose del cálculo:

+
+

% Cambio en Q = {cambioCantidad} / {cantidadPromedio} = {((cambioCantidad / cantidadPromedio) * 100).toFixed(2)}%

+

% Cambio en P = {cambioPrecio.toFixed(2)} / {precioPromedio.toFixed(2)} = {((cambioPrecio / precioPromedio) * 100).toFixed(2)}%

+

+ Ed = |{((cambioCantidad / cantidadPromedio) / (cambioPrecio / precioPromedio)).toFixed(3)}| = {resultado.valorReal.toFixed(2)} +

+
+
+ )} + + {resultado.correcto && resultado.valorReal > 0 && ( +
+

+ Clasificación: {' '} + {resultado.valorReal > 1 ? ( + Elástica (Ed > 1) + ) : resultado.valorReal < 1 ? ( + Inelástica (Ed < 1) + ) : ( + Unitaria (Ed = 1) + )} +

+

+ {resultado.valorReal > 1 + ? 'La demanda responde proporcionalmente más que el cambio en precio.' + : resultado.valorReal < 1 + ? 'La demanda responde proporcionalmente menos que el cambio en precio.' + : 'La demanda responde exactamente en la misma proporción que el precio.'} +

+
+ )} +
+
+
+ )} + +
+

+ + + + Interpretación de Resultados +

+
+
+

Ed > 1

+

Elástica

+

%ΔQ > %ΔP

+
+
+

Ed = 1

+

Unitaria

+

%ΔQ = %ΔP

+
+
+

Ed < 1

+

Inelástica

+

%ΔQ < %ΔP

+
+
+
+
+ ); +}; + +export default CalculoElasticidadPrecio; diff --git a/frontend/src/components/exercises/modulo2/CambiosEquilibrio.tsx b/frontend/src/components/exercises/modulo2/CambiosEquilibrio.tsx new file mode 100644 index 0000000..0a22ac5 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/CambiosEquilibrio.tsx @@ -0,0 +1,577 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { GitBranch, ArrowRight, ArrowLeft, CheckCircle2, XCircle, Trophy, RotateCcw, BookOpen, TrendingUp, TrendingDown } from 'lucide-react'; + +interface CambiosEquilibrioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +type DireccionShock = 'oferta-aumenta' | 'oferta-disminuye' | 'demanda-aumenta' | 'demanda-disminuye'; + +interface Escenario { + id: number; + descripcion: string; + shock: DireccionShock; + curva: 'oferta' | 'demanda'; + direccion: 'aumenta' | 'disminuye'; + cambioPrecio: 'sube' | 'baja'; + cambioCantidad: 'sube' | 'baja'; + explicacion: string; + dificultad: 'facil' | 'medio' | 'dificil'; +} + +const escenarios: Escenario[] = [ + { + id: 1, + descripcion: 'Una nueva tecnología reduce los costos de producción de teléfonos inteligentes.', + shock: 'oferta-aumenta', + curva: 'oferta', + direccion: 'aumenta', + cambioPrecio: 'baja', + cambioCantidad: 'sube', + explicacion: 'La tecnología mejora la productividad, aumentando la oferta. La curva se desplaza a la derecha: el precio baja y la cantidad sube.', + dificultad: 'facil' + }, + { + id: 2, + descripcion: 'Un informe de salud afirma que el café aumenta la longevidad.', + shock: 'demanda-aumenta', + curva: 'demanda', + direccion: 'aumenta', + cambioPrecio: 'sube', + cambioCantidad: 'sube', + explicacion: 'Las preferencias positivas aumentan la demanda. La curva se desplaza a la derecha: el precio y la cantidad suben.', + dificultad: 'facil' + }, + { + id: 3, + descripcion: 'Una plaga de langostas destruye el 30% de la cosecha de granos.', + shock: 'oferta-disminuye', + curva: 'oferta', + direccion: 'disminuye', + cambioPrecio: 'sube', + cambioCantidad: 'baja', + explicacion: 'La plaga reduce la cantidad disponible, disminuyendo la oferta. La curva se desplaza a la izquierda: el precio sube y la cantidad baja.', + dificultad: 'facil' + }, + { + id: 4, + descripcion: 'La economía entra en recesión y el ingreso promedio cae 20% (bien normal).', + shock: 'demanda-disminuye', + curva: 'demanda', + direccion: 'disminuye', + cambioPrecio: 'baja', + cambioCantidad: 'baja', + explicacion: 'Para bienes normales, al bajar el ingreso, disminuye la demanda. La curva se desplaza a la izquierda: el precio y la cantidad bajan.', + dificultad: 'medio' + }, + { + id: 5, + descripcion: 'El gobierno subsidia la compra de autos eléctricos con $10,000.', + shock: 'demanda-aumenta', + curva: 'demanda', + direccion: 'aumenta', + cambioPrecio: 'sube', + cambioCantidad: 'sube', + explicacion: 'El subsidio reduce el precio efectivo para consumidores, aumentando la demanda. El equilibrio se mueve hacia mayor precio y cantidad.', + dificultad: 'medio' + }, + { + id: 6, + descripcion: 'El precio del petróleo (insumo importante) sube un 50%.', + shock: 'oferta-disminuye', + curva: 'oferta', + direccion: 'disminuye', + cambioPrecio: 'sube', + cambioCantidad: 'baja', + explicacion: 'Al subir los costos de insumos, producir es más caro, disminuyendo la oferta. El equilibrio resulta en mayor precio y menor cantidad.', + dificultad: 'dificil' + } +]; + +interface OpcionShock { + value: DireccionShock; + label: string; + descripcion: string; + icon: React.ReactNode; +} + +const opcionesShock: OpcionShock[] = [ + { value: 'oferta-aumenta', label: 'Oferta ↑', descripcion: 'Aumenta', icon: }, + { value: 'oferta-disminuye', label: 'Oferta ↓', descripcion: 'Disminuye', icon: }, + { value: 'demanda-aumenta', label: 'Demanda ↑', descripcion: 'Aumenta', icon: }, + { value: 'demanda-disminuye', label: 'Demanda ↓', descripcion: 'Disminuye', icon: }, +]; + +interface OpcionCambio { + value: 'sube' | 'baja'; + label: string; + icon: React.ReactNode; +} + +const opcionesCambio: OpcionCambio[] = [ + { value: 'sube', label: 'Sube', icon: }, + { value: 'baja', label: 'Baja', icon: }, +]; + +export const CambiosEquilibrio: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [shockSeleccionado, setShockSeleccionado] = useState(null); + const [cambioPrecio, setCambioPrecio] = useState<'sube' | 'baja' | null>(null); + const [cambioCantidad, setCambioCantidad] = useState<'sube' | 'baja' | null>(null); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [esCorrecto, setEsCorrecto] = useState(false); + const [score, setScore] = useState(0); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [completado, setCompletado] = useState(false); + const [_startTime] = useState(Date.now()); + + const escenario = escenarios[escenarioActual]; + + const handleVerificar = () => { + if (!shockSeleccionado || !cambioPrecio || !cambioCantidad) return; + + const shockCorrecto = shockSeleccionado === escenario.shock; + const precioCorrecto = cambioPrecio === escenario.cambioPrecio; + const cantidadCorrecta = cambioCantidad === escenario.cambioCantidad; + + const todoCorrecto = shockCorrecto && precioCorrecto && cantidadCorrecta; + + setEsCorrecto(todoCorrecto); + setMostrarResultado(true); + + if (todoCorrecto) { + setScore(prev => prev + Math.round(100 / escenarios.length)); + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (escenarioActual < escenarios.length - 1) { + setEscenarioActual(prev => prev + 1); + setShockSeleccionado(null); + setCambioPrecio(null); + setCambioCantidad(null); + setMostrarResultado(false); + } else { + setCompletado(true); + if (onComplete) { + onComplete(score); + } + } + }; + + const handleReiniciar = () => { + setEscenarioActual(0); + setShockSeleccionado(null); + setCambioPrecio(null); + setCambioCantidad(null); + setMostrarResultado(false); + setScore(0); + setRespuestasCorrectas(0); + setCompletado(false); + }; + + const getDificultadColor = (dificultad: string) => { + switch (dificultad) { + case 'facil': return 'bg-green-100 text-green-700'; + case 'medio': return 'bg-yellow-100 text-yellow-700'; + case 'dificil': return 'bg-red-100 text-red-700'; + default: return 'bg-gray-100 text-gray-700'; + } + }; + + const getShockColor = (value: DireccionShock) => { + if (value.includes('oferta')) return value.includes('aumenta') ? 'green' : 'red'; + return value.includes('aumenta') ? 'blue' : 'orange'; + }; + + const renderGrafico = () => { + const isOferta = escenario.curva === 'oferta'; + const isAumenta = escenario.direccion === 'aumenta'; + + return ( + + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Labels */} + Q + P + + {/* Curva original */} + {isOferta ? ( + + ) : ( + + )} + + {isOferta ? 'S₁' : 'D₁'} + + + {/* Curva desplazada */} + {mostrarResultado && ( + + {isOferta ? ( + + ) : ( + + )} + + {isOferta ? 'S₂' : 'D₂'} + + + )} + + {/* Punto de equilibrio original */} + + E₁ + + {/* Nuevo equilibrio (si se muestra resultado) */} + {mostrarResultado && ( + + + + E₂ + + + )} + + ); + }; + + if (completado) { + const porcentaje = Math.round((respuestasCorrectas / escenarios.length) * 100); + + return ( + + +

¡Ejercicio Completado!

+

Has analizado cambios en el equilibrio

+ +
+
{porcentaje}%
+

+ {respuestasCorrectas} de {escenarios.length} respuestas correctas +

+
+ + + + ); + } + + return ( +
+
+
+
+ +

Cambios en el Equilibrio

+
+
+ + {escenario.dificultad.toUpperCase()} + + + {escenarioActual + 1} de {escenarios.length} + +
+ +
+
+
+

+ Analiza cómo los shocks del mercado afectan el precio y cantidad de equilibrio. +

+
+ +
+
+
+
+ +
+

Escenario {escenario.id}

+

{escenario.descripcion}

+
+
+
+ +
+

1. ¿Qué curva se desplaza y en qué dirección?

+ +
+ {opcionesShock.map((opcion) => { + const isSelected = shockSeleccionado === opcion.value; + const isCorrect = mostrarResultado && opcion.value === escenario.shock; + const color = getShockColor(opcion.value); + + return ( + !mostrarResultado && setShockSeleccionado(opcion.value)} + disabled={mostrarResultado} + whileHover={!mostrarResultado ? { scale: 1.02 } : {}} + whileTap={!mostrarResultado ? { scale: 0.98 } : {}} + className={`p-4 rounded-lg border-2 transition-all flex flex-col items-center gap-2 ${ + isCorrect + ? 'border-green-500 bg-green-50' + : isSelected && mostrarResultado && opcion.value !== escenario.shock + ? 'border-red-500 bg-red-50' + : isSelected + ? `border-${color}-500 bg-${color}-50` + : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50' + }`} + > + {opcion.icon} + + {opcion.label} + + + ); + })} +
+
+ +
+

2. ¿Cómo cambian el precio y la cantidad de equilibrio?

+ +
+
+ +
+ {opcionesCambio.map((opcion) => { + const isSelected = cambioPrecio === opcion.value; + const isCorrect = mostrarResultado && opcion.value === escenario.cambioPrecio; + + return ( + + ); + })} +
+
+ +
+ +
+ {opcionesCambio.map((opcion) => { + const isSelected = cambioCantidad === opcion.value; + const isCorrect = mostrarResultado && opcion.value === escenario.cambioCantidad; + + return ( + + ); + })} +
+
+
+
+ + + {mostrarResultado && ( + +
+ {esCorrecto ? ( + + ) : ( + + )} +
+

+ {esCorrecto ? '¡Correcto!' : 'Algunas respuestas son incorrectas'} +

+

{escenario.explicacion}

+
+
+ + )} + + +
+ {!mostrarResultado ? ( + + ) : ( + + )} +
+
+ +
+

Visualización del Cambio

+ {renderGrafico()} + +
+

Resumen de efectos:

+
+
+ Curva de {escenario.curva}: + + Se {escenario.direccion === 'aumenta' ? 'desplaza a la derecha' : 'desplaza a la izquierda'} + +
+
+ Precio de equilibrio: + + {escenario.cambioPrecio === 'sube' ? '↑ Sube' : '↓ Baja'} + +
+
+ Cantidad de equilibrio: + + {escenario.cambioCantidad === 'sube' ? '↑ Sube' : '↓ Baja'} + +
+
+
+ +
+

+ Recordatorio: +

+
    +
  • • Oferta ↑ → P↓, Q↑
    • +
  • • Oferta ↓ → P↑, Q↓
    • +
  • • Demanda ↑ → P↑, Q↑
    • +
  • • Demanda ↓ → P↓, Q↓
    • +
+
+
+
+ +
+ + +
+ {escenarios.map((_, index) => ( +
+ ))} +
+ + +
+
+ ); +}; + +export default CambiosEquilibrio; diff --git a/frontend/src/components/exercises/modulo2/ControlesVidaReal.tsx b/frontend/src/components/exercises/modulo2/ControlesVidaReal.tsx new file mode 100644 index 0000000..6a07f75 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/ControlesVidaReal.tsx @@ -0,0 +1,509 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Building2, Wallet, AlertCircle, CheckCircle2, BookOpen, TrendingUp, Users, MapPin } from 'lucide-react'; + +interface ControlesVidaRealProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface CasoEstudio { + id: string; + titulo: string; + categoria: 'vivienda' | 'laboral' | 'agricola'; + ubicacion: string; + anio: string; + contexto: string; + intervencion: string; + resultados: string[]; + lecciones: string[]; + datos: { + antes: { precio: number; cantidad: number }; + despues: { precio: number; cantidad: number }; + }; + icono: React.ReactNode; + color: string; +} + +const casosEstudio: CasoEstudio[] = [ + { + id: 'nyc-rent', + titulo: "Rent Control en Nueva York", + categoria: 'vivienda', + ubicacion: "Nueva York, USA", + anio: "1947-presente", + contexto: "Nueva York implementó controles de alquiler después de la Segunda Guerra Mundial para proteger a los inquilinos. Actualmente afecta a aproximadamente 1 millón de apartamentos.", + intervencion: "Los alquileres de apartamentos antiguos están regulados y no pueden aumentar más allá de ciertos límites establecidos por la Junta de Alquileres.", + resultados: [ + "Reducción de la oferta de vivienda a largo plazo", + "Deterioro de la calidad de edificios regulados", + "Mercado paralelo de 'pagos clave'", + "Beneficios para inquilinos antiguos, no para nuevos" + ], + lecciones: [ + "Los controles benefician a quienes ya tienen vivienda", + "Desincentivan la construcción de nueva vivienda", + "Crean ineficiencias en la asignación de recursos", + "Difícil de eliminar una vez implementado" + ], + datos: { + antes: { precio: 1000, cantidad: 100 }, + despues: { precio: 800, cantidad: 85 } + }, + icono: , + color: "blue" + }, + { + id: 'venezuela-gasolina', + titulo: "Gasolina Subsidiada en Venezuela", + categoria: 'agricola', + ubicacion: "Venezuela", + anio: "1976-2019", + contexto: "Venezuela mantuvo durante décadas el precio de la gasolina casi gratis (menos de $0.01 por litro) debido a subsidios gubernamentales masivos.", + intervencion: "Precio máximo artificial mantenido por subsidios estatales, sin relación con costos reales de producción.", + resultados: [ + "Contrabando masivo a países vecinos", + "Colapso de la infraestructura de refinación", + "Desabastecimiento crónico en 2019", + "Pérdida fiscal insostenible para el Estado" + ], + lecciones: [ + "Los precios deben reflejar costos reales", + "Subsidios masivos son fiscalmente insostenibles", + "Crearán mercados negros inevitablemente", + "La transición es extremadamente difícil" + ], + datos: { + antes: { precio: 0.50, cantidad: 100 }, + despues: { precio: 0.01, cantidad: 60 } + }, + icono: , + color: "red" + }, + { + id: 'seattle-wage', + titulo: "Salario Mínimo en Seattle", + categoria: 'laboral', + ubicacion: "Seattle, USA", + anio: "2014-2019", + contexto: "Seattle aumentó gradualmente el salario mínimo de $9.47 a $15/hora entre 2014 y 2017, siendo pionera en Estados Unidos.", + intervencion: "Incremento progresivo del salario mínimo municipal hasta $15/hora, con ritmo diferenciado por tamaño de empresa.", + resultados: [ + "Reducción en horas trabajadas por empleados de bajos ingresos", + "Pérdida neta de ingresos para algunos trabajadores", + "Beneficio para trabajadores que mantuvieron empleo", + "Aumento de precios en restaurantes" + ], + lecciones: [ + "Efectos no son uniformes en todos los trabajadores", + "El ajuste puede ocurrir por horas, no solo empleos", + "La elasticidad de la demanda laboral importa", + "Estudios rigurosos muestran efectos mixtos" + ], + datos: { + antes: { precio: 9.47, cantidad: 100 }, + despues: { precio: 15.00, cantidad: 92 } + }, + icono: , + color: "amber" + }, + { + id: 'eu-agricultura', + titulo: "Política Agrícola de la UE", + categoria: 'agricola', + ubicacion: "Unión Europea", + anio: "1962-presente", + contexto: "La Política Agrícola Común (PAC) estableció precios de intervención para garantizar ingresos a los agricultores europeos.", + intervencion: "Precios mínimos garantizados para productos agrícolas clave, con compras gubernamentales del excedente.", + resultados: [ + "Superávits masivos de productos lácteos y cereales", + "Montañas de mantequilla y lagos de vino", + "Gasto fiscal considerable", + "Reformas parciales desde los 90" + ], + lecciones: [ + "Los precios de soporte generan excedentes", + "El gobierno termina comprando producción no deseada", + "Crean distorsiones en el comercio internacional", + "Las reformas son políticamente difíciles" + ], + datos: { + antes: { precio: 100, cantidad: 80 }, + despues: { precio: 130, cantidad: 110 } + }, + icono: , + color: "green" + } +]; + +export const ControlesVidaReal: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [casoActivo, setCasoActivo] = useState(null); + const [respuestas, setRespuestas] = useState>({}); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [casosCompletados, setCasosCompletados] = useState>(new Set()); + const [puntuacion, setPuntuacion] = useState(0); + + const seleccionarCaso = (caso: CasoEstudio) => { + setCasoActivo(caso); + setMostrarResultado(false); + }; + + const responderPregunta = (respuesta: string) => { + if (!casoActivo) return; + + setRespuestas(prev => ({ ...prev, [casoActivo.id]: respuesta })); + setMostrarResultado(true); + + if (!casosCompletados.has(casoActivo.id)) { + setCasosCompletados(prev => new Set([...prev, casoActivo.id])); + setPuntuacion(prev => prev + 25); + + if (casosCompletados.size + 1 >= 4) { + setTimeout(() => { + onComplete?.(100); + }, 2000); + } + } + }; + + const getColorClass = (color: string) => { + const colors: Record = { + blue: { bg: 'bg-blue-600', border: 'border-blue-400', text: 'text-blue-800', light: 'bg-blue-50' }, + red: { bg: 'bg-red-600', border: 'border-red-400', text: 'text-red-800', light: 'bg-red-50' }, + amber: { bg: 'bg-amber-600', border: 'border-amber-400', text: 'text-amber-800', light: 'bg-amber-50' }, + green: { bg: 'bg-green-600', border: 'border-green-400', text: 'text-green-800', light: 'bg-green-50' } + }; + return colors[color] || colors.blue; + }; + + return ( +
+ {/* Header */} +
+
+
+
+ +
+
+

Controles de Precio en la Vida Real

+

Estudia casos históricos y sus consecuencias reales

+
+
+
+ Progreso: {casosCompletados.size}/4 +
+ +
+
+
+
+ + {!casoActivo ? ( + /* Grid de casos de estudio */ +
+ {casosEstudio.map((caso) => { + const colors = getColorClass(caso.color); + const completado = casosCompletados.has(caso.id); + + return ( + seleccionarCaso(caso)} + className={`p-5 text-left rounded-xl border-2 transition-all ${ + completado + ? `${colors.light} ${colors.border}` + : 'bg-white border-gray-200 hover:border-indigo-300' + }`} + > +
+
+ {caso.icono} +
+ {completado && ( + + )} +
+ +

{caso.titulo}

+ +
+ + + {caso.ubicacion} + + + + {caso.anio} + +
+ +

{caso.contexto}

+ +
+ + {caso.categoria === 'vivienda' && '🏠 Vivienda'} + {caso.categoria === 'laboral' && '💼 Laboral'} + {caso.categoria === 'agricola' && '🌾 Agrícola'} + +
+ + ); + })} +
+ ) : ( + /* Vista detallada del caso */ +
+ {/* Navegación */} + + + {(() => { + const colors = getColorClass(casoActivo.color); + + return ( + <> + {/* Header del caso */} +
+
+
+ {casoActivo.icono} +
+
+

{casoActivo.titulo}

+
+ + + {casoActivo.ubicacion} + + + + {casoActivo.anio} + +
+
+
+ +

{casoActivo.contexto}

+
+ +
+ {/* Columna izquierda: Información */} +
+ {/* Intervención */} +
+

+ + Intervención +

+

{casoActivo.intervencion}

+
+ + {/* Resultados */} +
+

+ + Resultados Observados +

+
    + {casoActivo.resultados.map((resultado, idx) => ( + + → + {resultado} + + ))} +
+
+ + {/* Lecciones */} +
+

+ + Lecciones Aprendidas +

+
    + {casoActivo.lecciones.map((leccion, idx) => ( + + 💡 + {leccion} + + ))} +
+
+
+ + {/* Columna derecha: Visualización y pregunta */} +
+ {/* Visualización simple */} +
+

Evolución del Mercado

+ +
+
+ Antes +
+
${casoActivo.datos.antes.precio}
+
{casoActivo.datos.antes.cantidad} unidades
+
+
+ +
+
↓
+
+ +
+ Después +
+
${casoActivo.datos.despues.precio}
+
{casoActivo.datos.despues.cantidad} unidades
+
+
+
+
+ + {/* Pregunta de comprensión */} + + {!mostrarResultado ? ( + +

+ ¿Cuál es la principal consecuencia económica observada? +

+ +
+ + + + + +
+ + ) : ( + +
+ {respuestas[casoActivo.id] === 'desajuste' ? ( + + ) : ( + + )} +

+ {respuestas[casoActivo.id] === 'desajuste' ? '¡Correcto!' : 'Revisa la respuesta'} +

+
+ +

+ {respuestas[casoActivo.id] === 'desajuste' + ? 'Los controles de precio siempre crean desajustes: precios máximos generan escasez, precios mínimos generan superávits.' + : 'Recuerda: los controles de precio fijados fuera del equilibrio siempre crean desajustes entre oferta y demanda, generando ineficiencias.' + } +

+ + + + )} + +
+
+ + ); + })()} +
+ )} + + {/* Barra de progreso */} +
+
+ Tu progreso + {casosCompletados.size} de 4 casos completados +
+
+ +
+ + {casosCompletados.size >= 4 && ( + +
+ + ¡Felicidades! Has completado todos los casos +
+

+ Ahora comprendes mejor las consecuencias reales de los controles de precio en diferentes contextos. +

+ + )} +
+
+ ); +}; + +export default ControlesVidaReal; diff --git a/frontend/src/components/exercises/modulo2/CurvaDemandaConstructor.tsx b/frontend/src/components/exercises/modulo2/CurvaDemandaConstructor.tsx new file mode 100644 index 0000000..c8056ec --- /dev/null +++ b/frontend/src/components/exercises/modulo2/CurvaDemandaConstructor.tsx @@ -0,0 +1,368 @@ +import React, { useState, useRef, useCallback } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { LineChart, Check, X, RotateCcw, Trophy, HelpCircle } from 'lucide-react'; + +interface Punto { + x: number; + y: number; + id: string; +} + +interface CurvaDemandaConstructorProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +const GRID_SIZE = 350; +const PADDING = 50; +const MAX_PRECIO = 100; +const MAX_CANTIDAD = 100; + +export const CurvaDemandaConstructor: React.FC = ({ + ejercicioId: _ejercicioId, + onComplete +}) => { + const [puntos, setPuntos] = useState([]); + const [mensaje, setMensaje] = useState(''); + const [showSuccess, setShowSuccess] = useState(false); + const [score, setScore] = useState(0); + const [intentos, setIntentos] = useState(0); + const svgRef = useRef(null); + + const cartesianToSvg = useCallback((x: number, y: number) => { + const svgX = PADDING + (x / MAX_CANTIDAD) * GRID_SIZE; + const svgY = PADDING + GRID_SIZE - (y / MAX_PRECIO) * GRID_SIZE; + return { x: svgX, y: svgY }; + }, []); + + const svgToCartesian = useCallback((svgX: number, svgY: number) => { + const x = ((svgX - PADDING) / GRID_SIZE) * MAX_CANTIDAD; + const y = ((PADDING + GRID_SIZE - svgY) / GRID_SIZE) * MAX_PRECIO; + return { + x: Math.max(0, Math.min(MAX_CANTIDAD, Math.round(x))), + y: Math.max(0, Math.min(MAX_PRECIO, Math.round(y))) + }; + }, []); + + const handleSvgClick = (e: React.MouseEvent) => { + if (showSuccess) return; + + const rect = svgRef.current?.getBoundingClientRect(); + if (!rect) return; + + const svgX = e.clientX - rect.left; + const svgY = e.clientY - rect.top; + const cartesian = svgToCartesian(svgX, svgY); + + if (puntos.length >= 5) { + setMensaje('Máximo 5 puntos permitidos'); + return; + } + + const newPoint: Punto = { + x: cartesian.x, + y: cartesian.y, + id: `point-${Date.now()}-${Math.random()}` + }; + + setPuntos(prev => [...prev, newPoint]); + setMensaje(''); + }; + + const calcularPendiente = (puntos: Punto[]): number | null => { + if (puntos.length < 2) return null; + const sorted = [...puntos].sort((a, b) => a.x - b.x); + const first = sorted[0]; + const last = sorted[sorted.length - 1]; + if (last.x === first.x) return 0; + return (last.y - first.y) / (last.x - first.x); + }; + + const validarCurva = () => { + setIntentos(prev => prev + 1); + + if (puntos.length < 2) { + setMensaje('Necesitas al menos 2 puntos para trazar una curva de demanda'); + return; + } + + const pendiente = calcularPendiente(puntos); + if (pendiente === null) return; + + if (pendiente >= 0) { + setMensaje('¡Incorrecto! La curva de demanda debe tener pendiente NEGATIVA (bajar de izquierda a derecha)'); + return; + } + + // Calcular puntuación basada en intentos + let puntuacion = 100; + if (intentos >= 1) puntuacion -= 20; + if (intentos >= 2) puntuacion -= 20; + puntuacion = Math.max(puntuacion, 40); + + setScore(puntuacion); + setMensaje(''); + setShowSuccess(true); + + setTimeout(() => { + if (onComplete) { + onComplete(puntuacion); + } + }, 2000); + }; + + const reiniciar = () => { + setPuntos([]); + setMensaje(''); + setShowSuccess(false); + setScore(0); + setIntentos(0); + }; + + const eliminarPunto = (id: string) => { + setPuntos(prev => prev.filter(p => p.id !== id)); + }; + + const renderLineaCurva = () => { + if (puntos.length < 2) return null; + const sorted = [...puntos].sort((a, b) => a.x - b.x); + const points = sorted.map(p => { + const svg = cartesianToSvg(p.x, p.y); + return `${svg.x},${svg.y}`; + }).join(' '); + + return ( + + ); + }; + + return ( +
+
+
+
+ +

Constructor de Curva de Demanda

+
+ +
+

+ Haz clic en el gráfico para colocar puntos que formen una curva de demanda con pendiente negativa. + La demanda debe descender de izquierda a derecha. +

+
+ +
+ + + Instrucción: Coloca al menos 2 puntos formando una línea descendente. + Haz clic en un punto para eliminarlo. + +
+ +
+
+ + {/* Grid */} + {Array.from({ length: 11 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Labels ejes */} + + Cantidad (Q) + + + Precio (P) + + + {/* Marcas de ejes */} + {Array.from({ length: 6 }).map((_, i) => ( + + + {i * 20} + + + {i * 20} + + + ))} + + {/* Curva */} + {renderLineaCurva()} + + {/* Puntos */} + {puntos.map(punto => { + const svg = cartesianToSvg(punto.x, punto.y); + return ( + + { + e.stopPropagation(); + eliminarPunto(punto.id); + }} + /> + + ({punto.x}, {punto.y}) + + + ); + })} + + {/* Flecha indicando pendiente descendente */} + {puntos.length >= 2 && ( + + + + + + + + Pendiente - + + + )} + +
+ +
+
+

Progreso

+
+
+ Puntos colocados: + {puntos.length} +
+
+ Intentos: + {intentos} +
+ {showSuccess && ( +
+ Puntuación: + {score}/100 +
+ )} +
+
+ + {mensaje && ( + + {mensaje.includes('Correcto') || mensaje.includes('Excelente') ? ( + + ) : ( + + )} +

{mensaje}

+ + )} + + {!showSuccess && ( + + )} + + + {showSuccess && ( + + +

¡Excelente!

+

+ Has trazado correctamente una curva de demanda con pendiente negativa. +

+
+ {score}/100 +
+ + )} + +
+
+
+ ); +}; + +export default CurvaDemandaConstructor; diff --git a/frontend/src/components/exercises/modulo2/CurvaOfertaConstructor.tsx b/frontend/src/components/exercises/modulo2/CurvaOfertaConstructor.tsx new file mode 100644 index 0000000..8658266 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/CurvaOfertaConstructor.tsx @@ -0,0 +1,451 @@ +import React, { useState, useRef, useCallback } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { TrendingUp, Check, X, RotateCcw, Trophy, HelpCircle } from 'lucide-react'; + +interface Punto { + x: number; + y: number; + id: string; +} + +interface CurvaOfertaConstructorProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +const GRID_SIZE = 350; +const PADDING = 50; +const MAX_PRECIO = 100; +const MAX_CANTIDAD = 100; + +export const CurvaOfertaConstructor: React.FC = ({ + onComplete, + ejercicioId: _ejercicioId +}) => { + const [puntos, setPuntos] = useState([]); + const [mensaje, setMensaje] = useState(''); + const [showSuccess, setShowSuccess] = useState(false); + const [score, setScore] = useState(0); + const [intentos, setIntentos] = useState(0); + const [completado, setCompletado] = useState(false); + + const svgRef = useRef(null); + const [draggedPoint, setDraggedPoint] = useState(null); + + const cartesianToSvg = useCallback((x: number, y: number) => { + const svgX = PADDING + (x / MAX_CANTIDAD) * GRID_SIZE; + const svgY = PADDING + GRID_SIZE - (y / MAX_PRECIO) * GRID_SIZE; + return { x: svgX, y: svgY }; + }, []); + + const svgToCartesian = useCallback((svgX: number, svgY: number) => { + const x = ((svgX - PADDING) / GRID_SIZE) * MAX_CANTIDAD; + const y = ((PADDING + GRID_SIZE - svgY) / GRID_SIZE) * MAX_PRECIO; + return { + x: Math.max(0, Math.min(MAX_CANTIDAD, Math.round(x))), + y: Math.max(0, Math.min(MAX_PRECIO, Math.round(y))) + }; + }, []); + + const handleSvgClick = (e: React.MouseEvent) => { + if (draggedPoint || completado) return; + + const rect = svgRef.current?.getBoundingClientRect(); + if (!rect) return; + + const svgX = e.clientX - rect.left; + const svgY = e.clientY - rect.top; + const cartesian = svgToCartesian(svgX, svgY); + + if (puntos.length >= 5) { + setMensaje('Máximo 5 puntos permitidos'); + return; + } + + const newPoint: Punto = { + x: cartesian.x, + y: cartesian.y, + id: `point-${Date.now()}-${Math.random()}` + }; + + setPuntos(prev => [...prev, newPoint]); + setMensaje(''); + }; + + const handlePointDrag = (pointId: string) => { + setDraggedPoint(pointId); + }; + + const handlePointMove = (e: React.MouseEvent) => { + if (!draggedPoint) return; + + const rect = svgRef.current?.getBoundingClientRect(); + if (!rect) return; + + const svgX = e.clientX - rect.left; + const svgY = e.clientY - rect.top; + const cartesian = svgToCartesian(svgX, svgY); + + setPuntos(prev => + prev.map(p => p.id === draggedPoint ? { ...p, x: cartesian.x, y: cartesian.y } : p) + ); + }; + + const handlePointUp = () => { + setDraggedPoint(null); + }; + + const calcularPendiente = (): number | null => { + if (puntos.length < 2) return null; + const sorted = [...puntos].sort((a, b) => a.x - b.x); + const first = sorted[0]; + const last = sorted[sorted.length - 1]; + if (last.x === first.x) return 0; + return (last.y - first.y) / (last.x - first.x); + }; + + const validarCurva = () => { + if (puntos.length < 2) { + setMensaje('Necesitas al menos 2 puntos para trazar la curva de oferta'); + return; + } + + const pendiente = calcularPendiente(); + if (pendiente === null) return; + + setIntentos(prev => prev + 1); + + if (pendiente <= 0) { + setMensaje('¡Incorrecto! La curva de oferta debe tener pendiente POSITIVA (subir de izquierda a derecha)'); + + // Penalización por intentos + if (intentos >= 2) { + setScore(Math.max(0, 60 - (intentos - 2) * 10)); + } + return; + } + + // Curva correcta + const puntosBonus = puntos.length >= 3 ? 10 : 0; + const intentosBonus = intentos === 0 ? 30 : intentos === 1 ? 20 : 10; + const puntajeFinal = Math.min(100, 60 + puntosBonus + intentosBonus); + + setScore(puntajeFinal); + setMensaje(''); + setShowSuccess(true); + setCompletado(true); + + setTimeout(() => { + if (onComplete) { + onComplete(puntajeFinal); + } + }, 2000); + }; + + const reiniciar = () => { + setPuntos([]); + setMensaje(''); + setShowSuccess(false); + setScore(0); + setIntentos(0); + setCompletado(false); + }; + + const eliminarPunto = (id: string) => { + setPuntos(prev => prev.filter(p => p.id !== id)); + }; + + const renderLineaCurva = () => { + if (puntos.length < 2) return null; + const sorted = [...puntos].sort((a, b) => a.x - b.x); + const points = sorted.map(p => { + const svg = cartesianToSvg(p.x, p.y); + return `${svg.x},${svg.y}`; + }).join(' '); + + return ( + + ); + }; + + // Puntos guía esperados para la curva de oferta + const puntosGuia = [ + { x: 20, y: 20 }, + { x: 50, y: 40 }, + { x: 80, y: 70 } + ]; + + return ( +
+
+
+
+ +

Constructor de Curva de Oferta

+
+
+ {completado && ( + {score} pts + )} + +
+
+

+ Coloca puntos en el gráfico para trazar una curva de oferta con pendiente POSITIVA. + Recuerda: a mayor precio, mayor cantidad ofrecida. +

+
+ +
+ + + Instrucciones: Haz clic en el gráfico para colocar puntos. + La curva debe subir de izquierda a derecha (pendiente positiva). + Arrastra los puntos para ajustar su posición. Haz clic en un punto para eliminarlo. + +
+ +
+
+ + {/* Grid */} + {Array.from({ length: 11 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Labels ejes */} + + Cantidad (Q) + + + Precio (P) + + + {/* Valores en ejes */} + {[0, 25, 50, 75, 100].map((val) => ( + + + {val} + + + {val} + + + ))} + + {/* Línea de tendencia esperada (dotted, muy sutil) */} + {!completado && ( + + )} + + {/* Curva */} + {renderLineaCurva()} + + {/* Puntos */} + {puntos.map((punto, index) => { + const svg = cartesianToSvg(punto.x, punto.y); + return ( + + handlePointDrag(punto.id)} + onClick={(e) => { + e.stopPropagation(); + eliminarPunto(punto.id); + }} + /> + + P{index + 1}({punto.x}, {punto.y}) + + + ); + })} + + {/* Etiqueta S */} + {puntos.length >= 2 && ( + + S + + )} + +
+ +
+
+

Progreso

+
+
+ Puntos colocados: + {puntos.length}/5 +
+
+ +
+ {intentos > 0 && ( +
+ Intentos: {intentos} +
+ )} +
+
+ +
+

Recuerda:

+
    +
  • + • + La oferta tiene pendiente POSITIVA +
    • +
  • + • + Subir de izquierda a derecha ↗️ +
    • +
  • + • + Precio ↑ → Cantidad ↑ +
    • +
+
+ + {mensaje && ( + + +

{mensaje}

+ + )} + + + + + {showSuccess && ( + + +

¡Excelente!

+

+ Has trazado correctamente la curva de oferta +

+

{score} puntos

+ + )} + + + {completado && ( +
+ Puntuación: +
    +
  • • Base: 60 puntos
    • +
  • • +3 puntos: 10 pts
    • +
  • • Primer intento: 30 pts
    • +
+
+ )} +
+
+
+ ); +}; + +export default CurvaOfertaConstructor; diff --git a/frontend/src/components/exercises/modulo2/DemandaIndividualVsMercado.tsx b/frontend/src/components/exercises/modulo2/DemandaIndividualVsMercado.tsx new file mode 100644 index 0000000..fbc5e83 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/DemandaIndividualVsMercado.tsx @@ -0,0 +1,260 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Users, Plus, Check, X, Trophy, RotateCcw, ArrowRight } from 'lucide-react'; + +interface DemandaIndividualVsMercadoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Consumidor { + id: string; + nombre: string; + cantidad: number; +} + +const consumidores: Consumidor[] = [ + { id: 'ana', nombre: 'Ana', cantidad: 5 }, + { id: 'beto', nombre: 'Beto', cantidad: 3 }, + { id: 'carlos', nombre: 'Carlos', cantidad: 7 }, + { id: 'diana', nombre: 'Diana', cantidad: 4 }, +]; + +export const DemandaIndividualVsMercado: React.FC = ({ + ejercicioId: _ejercicioId, + onComplete +}) => { + const [respuestaUsuario, setRespuestaUsuario] = useState(''); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [score, setScore] = useState(0); + const [intentos, setIntentos] = useState(0); + const [completado, setCompletado] = useState(false); + const [mostrarExplicacion, setMostrarExplicacion] = useState(false); + + const demandaTotal = consumidores.reduce((sum, c) => sum + c.cantidad, 0); + + const validarRespuesta = () => { + if (respuestaUsuario === '') { + alert('Por favor ingresa tu respuesta'); + return; + } + + setIntentos(prev => prev + 1); + setMostrarResultado(true); + + const respuestaNum = parseInt(respuestaUsuario); + const esCorrecta = respuestaNum === demandaTotal; + + let puntuacion = esCorrecta ? 100 : 0; + // Si está cerca (±2), dar puntuación parcial + if (!esCorrecta && Math.abs(respuestaNum - demandaTotal) <= 2) { + puntuacion = 50; + } + // Penalización por intentos + if (intentos >= 1) puntuacion -= 10; + if (intentos >= 2) puntuacion -= 10; + puntuacion = Math.max(puntuacion, 10); + + setScore(puntuacion); + + if (esCorrecta) { + setCompletado(true); + } + }; + + const handleFinalizar = () => { + if (onComplete) { + onComplete(score); + } + }; + + const reiniciar = () => { + setRespuestaUsuario(''); + setMostrarResultado(false); + setMostrarExplicacion(false); + setScore(0); + setCompletado(false); + }; + + const handleSiguienteIntento = () => { + setRespuestaUsuario(''); + setMostrarResultado(false); + }; + + return ( +
+
+
+
+ +

Demanda Individual vs. Mercado

+
+ +
+

+ La demanda de mercado es la suma horizontal de todas las demandas individuales. + Calcula la cantidad total demandada sumando las cantidades de todos los consumidores. +

+
+ +
+ {/* Tarjetas de consumidores */} +
+

Demandas Individuales

+ {consumidores.map((consumidor, index) => ( + +
+
+ {consumidor.nombre[0]} +
+ {consumidor.nombre} +
+
+ Demanda: + {consumidor.cantidad} unidades +
+ + ))} +
+ + {/* Visualización de la suma */} +
+

Suma de Demandas

+
+ {consumidores.map((consumidor, index) => ( + + + {consumidor.cantidad} + + {index < consumidores.length - 1 && ( + + )} + + ))} +
+ +
+ +
+ setRespuestaUsuario(e.target.value)} + disabled={mostrarResultado} + placeholder="¿Cuánto suma?" + className={`flex-1 px-4 py-3 border-2 rounded-lg text-center text-lg font-bold focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all ${ + mostrarResultado + ? parseInt(respuestaUsuario) === demandaTotal + ? 'border-green-500 bg-green-50 text-green-700' + : 'border-red-500 bg-red-50 text-red-700' + : 'border-gray-300 focus:border-blue-500' + }`} + /> + unidades +
+
+
+
+ + + {mostrarResultado && ( + +
+
+ {parseInt(respuestaUsuario) === demandaTotal ? ( + + ) : ( + + )} +
+

+ {parseInt(respuestaUsuario) === demandaTotal + ? '¡Correcto! Has calculado correctamente la demanda de mercado' + : 'Respuesta incorrecta'} +

+

+ {parseInt(respuestaUsuario) === demandaTotal + ? `La demanda total es ${demandaTotal} unidades (${consumidores.map(c => c.cantidad).join(' + ')}).` + : `La respuesta correcta es ${demandaTotal} unidades. Sumaste ${respuestaUsuario}.`} +

+
+
+
+ + Puntuación: {score}/100 +
+
+ + )} + + +
+ {!mostrarResultado ? ( + + ) : ( + <> + {!completado && ( + + )} + + + )} +
+ + {intentos > 0 && ( +
+ Intentos realizados: {intentos} +
+ )} +
+ ); +}; + +export default DemandaIndividualVsMercado; diff --git a/frontend/src/components/exercises/modulo2/DesplazamientoVsMovimiento.tsx b/frontend/src/components/exercises/modulo2/DesplazamientoVsMovimiento.tsx new file mode 100644 index 0000000..6d162c8 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/DesplazamientoVsMovimiento.tsx @@ -0,0 +1,336 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { ArrowRightLeft, MoveHorizontal, DollarSign, Check, X, Trophy, RotateCcw } from 'lucide-react'; + +interface DesplazamientoVsMovimientoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + situacion: string; + tipo: 'movimiento' | 'desplazamiento'; + explicacion: string; + pista: string; +} + +const escenarios: Escenario[] = [ + { + id: 1, + situacion: "El precio de las manzanas sube de $2 a $4 por kilo. ¿Qué ocurre con la cantidad demandada de manzanas?", + tipo: 'movimiento', + explicacion: "Cambio en el precio del propio bien = MOVIMIENTO a lo largo de la curva. La cantidad demandada disminuye.", + pista: "¿Cambió el precio del propio bien o un factor externo?" + }, + { + id: 2, + situacion: "Los ingresos de los consumidores aumentan. ¿Qué ocurre con la demanda de restaurantes?", + tipo: 'desplazamiento', + explicacion: "Cambio en ingresos = DESPLAZAMIENTO de la curva. La demanda aumenta (la curva se mueve a la derecha).", + pista: "El ingreso es un factor externo que desplaza toda la curva." + }, + { + id: 3, + situacion: "Una heladería baja sus precios en verano. ¿Qué ocurre con la cantidad demandada de helados?", + tipo: 'movimiento', + explicacion: "Cambio en el precio del bien = MOVIMIENTO a lo largo de la curva. La cantidad demandada aumenta.", + pista: "La heladería cambió sus precios, no un factor externo." + }, + { + id: 4, + situacion: "Se espera que el precio de los autos suba el próximo mes. ¿Qué ocurre con la demanda de autos hoy?", + tipo: 'desplazamiento', + explicacion: "Expectativas futuras = DESPLAZAMIENTO de la curva. La gente compra antes, aumentando la demanda actual.", + pista: "Las expectativas son un factor que desplaza la curva, no el precio actual." + }, + { + id: 5, + situacion: "Una campaña publicitaria exitosa promueve el consumo de aguacates. ¿Qué ocurre con la demanda?", + tipo: 'desplazamiento', + explicacion: "Cambio en gustos/preferencias = DESPLAZAMIENTO de la curva. La demanda aumenta.", + pista: "La publicidad afecta los gustos, desplazando la curva." + }, + { + id: 6, + situacion: "El precio de las entradas al cine baja un 50%. ¿Qué ocurre con la cantidad demandada de entradas?", + tipo: 'movimiento', + explicacion: "Cambio en el precio del propio bien = MOVIMIENTO a lo largo de la curva. Más personas van al cine.", + pista: "¿El precio del bien mismo cambió? Entonces es un movimiento." + } +]; + +export const DesplazamientoVsMovimiento: React.FC = ({ + ejercicioId: _ejercicioId, + onComplete +}) => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState<'movimiento' | 'desplazamiento' | null>(null); + const [mostrarFeedback, setMostrarFeedback] = useState(false); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [completado, setCompletado] = useState(false); + const [mostrarPista, setMostrarPista] = useState(false); + const [usoPistas, setUsoPistas] = useState(0); + + const escenario = escenarios[escenarioActual]; + const esCorrecta = respuestaSeleccionada === escenario.tipo; + + const handleSeleccionar = (tipo: 'movimiento' | 'desplazamiento') => { + if (mostrarFeedback) return; + setRespuestaSeleccionada(tipo); + }; + + const handleValidar = () => { + if (respuestaSeleccionada === null) return; + + setMostrarFeedback(true); + if (esCorrecta) { + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (escenarioActual < escenarios.length - 1) { + setEscenarioActual(prev => prev + 1); + setRespuestaSeleccionada(null); + setMostrarFeedback(false); + setMostrarPista(false); + } else { + setCompletado(true); + // Calcular puntuación + let puntuacion = Math.round((respuestasCorrectas + (esCorrecta ? 1 : 0)) / escenarios.length * 100); + // Penalización por uso de pistas + puntuacion -= usoPistas * 10; + puntuacion = Math.max(puntuacion, 0); + + setTimeout(() => { + if (onComplete) { + onComplete(puntuacion); + } + }, 2000); + } + }; + + const handleMostrarPista = () => { + setMostrarPista(true); + setUsoPistas(prev => prev + 1); + }; + + const reiniciar = () => { + setEscenarioActual(0); + setRespuestaSeleccionada(null); + setMostrarFeedback(false); + setRespuestasCorrectas(0); + setCompletado(false); + setMostrarPista(false); + setUsoPistas(0); + }; + + if (completado) { + const puntuacionFinal = Math.max(0, Math.round((respuestasCorrectas / escenarios.length) * 100) - usoPistas * 10); + return ( +
+ + + +

¡Ejercicio Completado!

+

+ Has identificado correctamente {respuestasCorrectas} de {escenarios.length} situaciones +

+ {usoPistas > 0 && ( +

Pistas utilizadas: {usoPistas} (-{usoPistas * 10} pts)

+ )} +
{puntuacionFinal}/100
+

Puntuación final

+ +
+ ); + } + + return ( +
+
+
+

Desplazamiento vs. Movimiento

+ Situación {escenarioActual + 1} de {escenarios.length} +
+
+ +
+
+ +
+ {/* Panel izquierdo: Situación */} +
+

+ + Situación +

+

{escenario.situacion}

+ + {!mostrarPista && !mostrarFeedback && ( + + )} + + {mostrarPista && ( + +

+ Pista: {escenario.pista} +

+ + )} +
+ + {/* Panel derecho: Opciones */} +
+

¿Qué tipo de cambio ocurre?

+ + handleSeleccionar('movimiento')} + disabled={mostrarFeedback} + whileHover={!mostrarFeedback ? { scale: 1.02 } : {}} + whileTap={!mostrarFeedback ? { scale: 0.98 } : {}} + className={`w-full p-4 rounded-xl border-2 text-left transition-all ${ + respuestaSeleccionada === 'movimiento' + ? mostrarFeedback + ? escenario.tipo === 'movimiento' + ? 'border-green-500 bg-green-50' + : 'border-red-500 bg-red-50' + : 'border-blue-500 bg-blue-50' + : mostrarFeedback && escenario.tipo === 'movimiento' + ? 'border-green-500 bg-green-50' + : 'border-gray-200 hover:border-blue-300 bg-white' + }`} + > +
+
+ +
+
+

Movimiento a lo largo de la curva

+

+ Cambio en la cantidad demandada debido a un cambio en el precio del propio bien +

+
+
+ + + handleSeleccionar('desplazamiento')} + disabled={mostrarFeedback} + whileHover={!mostrarFeedback ? { scale: 1.02 } : {}} + whileTap={!mostrarFeedback ? { scale: 0.98 } : {}} + className={`w-full p-4 rounded-xl border-2 text-left transition-all ${ + respuestaSeleccionada === 'desplazamiento' + ? mostrarFeedback + ? escenario.tipo === 'desplazamiento' + ? 'border-green-500 bg-green-50' + : 'border-red-500 bg-red-50' + : 'border-blue-500 bg-blue-50' + : mostrarFeedback && escenario.tipo === 'desplazamiento' + ? 'border-green-500 bg-green-50' + : 'border-gray-200 hover:border-blue-300 bg-white' + }`} + > +
+
+ +
+
+

Desplazamiento de la curva

+

+ Cambio en la demanda debido a factores externos (ingresos, gustos, expectativas, etc.) +

+
+
+ +
+
+ + + {mostrarFeedback && ( + +
+
+ {esCorrecta ? ( + + ) : ( + + )} +
+

+ {esCorrecta ? '¡Correcto!' : 'Incorrecto'} +

+

{escenario.explicacion}

+
+
+
+ + )} + + +
+ {!mostrarFeedback ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default DesplazamientoVsMovimiento; diff --git a/frontend/src/components/exercises/modulo2/ElasticidadElasticaInelastica.tsx b/frontend/src/components/exercises/modulo2/ElasticidadElasticaInelastica.tsx new file mode 100644 index 0000000..f640883 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/ElasticidadElasticaInelastica.tsx @@ -0,0 +1,385 @@ +import React, { useState } from 'react'; + +interface EscenarioElasticidad { + id: number; + producto: string; + descripcion: string; + precioInicial: number; + precioFinal: number; + cantidadInicial: number; + cantidadFinal: number; + categoriaCorrecta: 'elastica' | 'inelastica' | 'unitaria'; + explicacion: string; +} + +const escenarios: EscenarioElasticidad[] = [ + { + id: 1, + producto: 'Medicamentos esenciales', + descripcion: 'El precio de antibióticos aumenta un 20% debido a escasez.', + precioInicial: 100, + precioFinal: 120, + cantidadInicial: 10000, + cantidadFinal: 9500, + categoriaCorrecta: 'inelastica', + explicacion: 'Los medicamentos esenciales tienen demanda inelástica porque son necesarios para la salud y no tienen sustitutos cercanos. La cantidad demandada disminuye muy poco (5%) a pesar del gran aumento de precio (20%).' + }, + { + id: 2, + producto: 'Boletos de cine de lujo', + descripcion: 'Los cines VIP aumentan sus precios un 15%.', + precioInicial: 200, + precioFinal: 230, + cantidadInicial: 5000, + cantidadFinal: 3000, + categoriaCorrecta: 'elastica', + explicacion: 'El entretenimiento de lujo es elástico porque es un bien discrecional con muchos sustitutos (streaming, cines regulares, otras actividades). La cantidad demandada cae drásticamente (40%) ante un aumento moderado de precio.' + }, + { + id: 3, + producto: 'Gasolina', + descripcion: 'El precio de la gasolina sube un 10% por impuestos.', + precioInicial: 50, + precioFinal: 55, + cantidadInicial: 100000, + cantidadFinal: 95000, + categoriaCorrecta: 'inelastica', + explicacion: 'La gasolina tiene demanda inelástica a corto plazo porque es necesaria para el transporte y muchos no pueden cambiar sus hábitos inmediatamente. La cantidad solo baja 5% pese al aumento de 10%.' + }, + { + id: 4, + producto: 'Marca específica de cereal', + descripcion: 'Una marca de cereal aumenta su precio un 8% mientras las competidoras mantienen precios.', + precioInicial: 50, + precioFinal: 54, + cantidadInicial: 8000, + cantidadFinal: 4000, + categoriaCorrecta: 'elastica', + explicacion: 'Una marca específica de cereal tiene demanda muy elástica porque hay muchos sustitutos perfectos (otras marcas). Los consumidores cambian fácilmente de marca cuando sube el precio.' + }, + { + id: 5, + producto: 'Sal marina gourmet', + descripcion: 'El precio de sal marina artesanal baja un 25% en promoción.', + precioInicial: 40, + precioFinal: 30, + cantidadInicial: 2000, + cantidadFinal: 2100, + categoriaCorrecta: 'inelastica', + explicacion: 'La sal es un bien básico con demanda muy inelástica. Aunque baje el precio, la cantidad demandada no aumenta mucho porque la gente solo consume la cantidad que necesita.' + } +]; + +export const ElasticidadElasticaInelastica: React.FC = () => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [resultado, setResultado] = useState<{ + correcto: boolean; + mensaje: string; + mostrarExplicacion: boolean; + } | null>(null); + const [puntuacion, setPuntuacion] = useState(0); + const [ejerciciosCompletados, setEjerciciosCompletados] = useState(0); + + const escenario = escenarios[escenarioActual]; + + const calcularElasticidad = (e: EscenarioElasticidad): number => { + const cambioCantidad = e.cantidadFinal - e.cantidadInicial; + const cambioPrecio = e.precioFinal - e.precioInicial; + const cantidadPromedio = (e.cantidadInicial + e.cantidadFinal) / 2; + const precioPromedio = (e.precioInicial + e.precioFinal) / 2; + + if (cantidadPromedio === 0 || precioPromedio === 0) return 0; + + return Math.abs((cambioCantidad / cantidadPromedio) / (cambioPrecio / precioPromedio)); + }; + + const verificarRespuesta = (categoria: string) => { + if (resultado) return; + + setRespuestaSeleccionada(categoria); + const correcto = categoria === escenario.categoriaCorrecta; + + if (correcto) { + setPuntuacion(prev => prev + 1); + } + + setResultado({ + correcto, + mensaje: correcto + ? '¡Correcto! Has identificado la elasticidad correctamente.' + : 'Incorrecto. Revisa el valor calculado de la elasticidad.', + mostrarExplicacion: true + }); + + setEjerciciosCompletados(prev => prev + 1); + }; + + const siguienteEjercicio = () => { + const siguiente = (escenarioActual + 1) % escenarios.length; + setEscenarioActual(siguiente); + setRespuestaSeleccionada(null); + setResultado(null); + }; + + const reiniciarEjercicios = () => { + setEscenarioActual(0); + setRespuestaSeleccionada(null); + setResultado(null); + setPuntuacion(0); + setEjerciciosCompletados(0); + }; + + const elasticidadCalculada = calcularElasticidad(escenario); + const cambioPrecioPorcentaje = ((escenario.precioFinal - escenario.precioInicial) / ((escenario.precioInicial + escenario.precioFinal) / 2) * 100); + const cambioCantidadPorcentaje = ((escenario.cantidadFinal - escenario.cantidadInicial) / ((escenario.cantidadInicial + escenario.cantidadFinal) / 2) * 100); + + const getCategoriaColor = (cat: string) => { + switch (cat) { + case 'elastica': return 'bg-green-100 border-green-300 text-green-800'; + case 'inelastica': return 'bg-amber-100 border-amber-300 text-amber-800'; + case 'unitaria': return 'bg-blue-100 border-blue-300 text-blue-800'; + default: return 'bg-gray-100 border-gray-300'; + } + }; + + return ( +
+
+
+

Clasificación de Elasticidad

+

Analiza cada escenario y clasifica la elasticidad de la demanda.

+
+
+
+

Puntuación

+

{puntuacion}/{ejerciciosCompletados}

+
+
+
+ +
+
+
+ {escenario.id} +
+
+

{escenario.producto}

+

{escenario.descripcion}

+ +
+
+

Precio Inicial

+

${escenario.precioInicial}

+
+
+

Precio Final

+

${escenario.precioFinal}

+

+ Cambio: {cambioPrecioPorcentaje > 0 ? '+' : ''}{cambioPrecioPorcentaje.toFixed(1)}% +

+
+
+

Cantidad Inicial

+

{escenario.cantidadInicial.toLocaleString()}

+
+
+

Cantidad Final

+

{escenario.cantidadFinal.toLocaleString()}

+

+ Cambio: {cambioCantidadPorcentaje > 0 ? '+' : ''}{cambioCantidadPorcentaje.toFixed(1)}% +

+
+
+ +
+

Datos calculados para ti:

+
+
+ Elasticidad calculada: + {elasticidadCalculada.toFixed(2)} +
+
+ Ratio %Q / %P: + + {Math.abs(cambioCantidadPorcentaje / cambioPrecioPorcentaje).toFixed(2)} + +
+
+
+
+
+
+ +
+

¿Cómo clasificarías la elasticidad de la demanda?

+ +
+ + + + + +
+
+ + {resultado && ( +
+
+
+ {resultado.correcto ? ( + + + + ) : ( + + + + )} +
+
+

+ {resultado.correcto ? '¡Respuesta Correcta!' : 'Respuesta Incorrecta'} +

+

+ {resultado.mensaje} +

+ +
+

+ Respuesta correcta: {escenario.categoriaCorrecta === 'elastica' ? 'Elástica' : escenario.categoriaCorrecta === 'inelastica' ? 'Inelástica' : 'Unitaria'} (Ed = {elasticidadCalculada.toFixed(2)}) +

+

{escenario.explicacion}

+
+
+
+
+ )} + + {resultado && ( +
+ + +
+ )} + +
+

+ + + + Guía de Clasificación +

+
+
+

Elástica (Ed > 1)

+
    +
  • • Lujos y bienes discrecionales
    • +
  • • Muchos sustitutos disponibles
    • +
  • • Consumo puede posponerse
    • +
  • • Representa % grande del ingreso
    • +
+
+
+

Unitaria (Ed = 1)

+
    +
  • • Cambio proporcional exacto
    • +
  • • Caso teórico ideal
    • +
  • • Ingreso total constante
    • +
+
+
+

Inelástica (Ed < 1)

+
    +
  • • Necesidades básicas
    • +
  • • Pocos o ningún sustituto
    • +
  • • Consumo indispensable
    • +
  • • Representa % pequeño del ingreso
    • +
+
+
+
+
+ ); +}; + +export default ElasticidadElasticaInelastica; diff --git a/frontend/src/components/exercises/modulo2/ElasticidadIngresoTotal.tsx b/frontend/src/components/exercises/modulo2/ElasticidadIngresoTotal.tsx new file mode 100644 index 0000000..9f5fb2e --- /dev/null +++ b/frontend/src/components/exercises/modulo2/ElasticidadIngresoTotal.tsx @@ -0,0 +1,437 @@ +import React, { useState } from 'react'; + +interface ProductoEscenario { + id: number; + nombre: string; + elasticidad: number; + precioInicial: number; + cantidadInicial: number; + precioActual: number; + cantidadActual: number; + descripcion: string; +} + +const generarEscenario = (): ProductoEscenario => { + const elasticidades = [0.3, 0.5, 0.8, 1.0, 1.2, 1.5, 2.0, 3.0]; + const elasticidad = elasticidades[Math.floor(Math.random() * elasticidades.length)]; + + const nombresProductos = [ + 'Medicamentos esenciales', + 'Gasolina', + 'Pan de caja', + 'Leche', + 'Cereal de marca', + 'Entradas de cine', + 'Restaurantes de lujo', + 'Viajes internacionales', + 'Yates', + 'Diamantes' + ]; + + const nombre = nombresProductos[Math.floor(Math.random() * nombresProductos.length)]; + const precioInicial = Math.round((Math.random() * 200 + 20) * 100) / 100; + const cantidadInicial = Math.round(Math.random() * 5000 + 500); + + const cambioPrecioPorcentaje = (Math.random() > 0.5 ? 1 : -1) * (Math.random() * 30 + 10); + const cambioCantidadPorcentaje = -elasticidad * cambioPrecioPorcentaje; + + const precioActual = Math.round(precioInicial * (1 + cambioPrecioPorcentaje / 100) * 100) / 100; + const cantidadActual = Math.round(cantidadInicial * (1 + cambioCantidadPorcentaje / 100)); + + const descripciones: Record = { + 'Medicamentos esenciales': 'Bien de necesidad sin sustitutos. La demanda es extremadamente inelástica.', + 'Gasolina': 'Necesidad a corto plazo con pocos sustitutos inmediatos.', + 'Pan de caja': 'Bien básico con algunos sustitutos (pan artesanal, tortillas).', + 'Leche': 'Necesidad básica aunque existen sustitutos (leche de almendra, soya).', + 'Cereal de marca': 'Bien con muchos sustitutos de otras marcas.', + 'Entradas de cine': 'Entretenimiento discrecional con alternativas (streaming).', + 'Restaurantes de lujo': 'Bien de lujo altamente discrecional.', + 'Viajes internacionales': 'Lujo con muchas alternativas de entretenimiento.', + 'Yates': 'Bien de super lujo, demanda muy elástica.', + 'Diamantes': 'Bien de lujo con demanda altamente sensible al precio.' + }; + + return { + id: Date.now(), + nombre, + elasticidad, + precioInicial: Math.max(1, precioInicial), + cantidadInicial: Math.max(10, cantidadInicial), + precioActual: Math.max(1, precioActual), + cantidadActual: Math.max(10, cantidadActual), + descripcion: descripciones[nombre] || 'Producto con características estándar.' + }; +}; + +export const ElasticidadIngresoTotal: React.FC = () => { + const [escenario, setEscenario] = useState(generarEscenario()); + const [decision, setDecision] = useState<'subir' | 'bajar' | null>(null); + const [resultado, setResultado] = useState<{ + correcto: boolean; + mensaje: string; + ingresoInicial: number; + ingresoNuevo: number; + mostrarAnalisis: boolean; + } | null>(null); + const [puntuacion, setPuntuacion] = useState(0); + const [intentos, setIntentos] = useState(0); + + const ingresoInicial = escenario.precioInicial * escenario.cantidadInicial; + const ingresoActual = escenario.precioActual * escenario.cantidadActual; + const cambioPrecio = ((escenario.precioActual - escenario.precioInicial) / escenario.precioInicial) * 100; + const elasticidadCalculada = Math.abs( + ((escenario.cantidadActual - escenario.cantidadInicial) / ((escenario.cantidadInicial + escenario.cantidadActual) / 2)) / + ((escenario.precioActual - escenario.precioInicial) / ((escenario.precioInicial + escenario.precioActual) / 2)) + ); + + const verificarDecision = (dec: 'subir' | 'bajar') => { + if (resultado) return; + + setDecision(dec); + setIntentos(prev => prev + 1); + + const demandaElastica = elasticidadCalculada > 1; + const precioSubio = cambioPrecio > 0; + + let correcto = false; + let mensaje = ''; + + if (demandaElastica) { + // Demanda elástica: subir precio reduce ingreso, bajar precio aumenta ingreso + if (dec === 'subir') { + correcto = false; + mensaje = 'Incorrecto. Con demanda elástica, subir el precio reduce el ingreso total porque la cantidad cae proporcionalmente más.'; + } else { + correcto = true; + mensaje = '¡Correcto! Con demanda elástica, bajar el precio aumenta el ingreso total porque la cantidad vendida aumenta proporcionalmente más.'; + setPuntuacion(prev => prev + 1); + } + } else if (elasticidadCalculada < 1) { + // Demanda inelástica: subir precio aumenta ingreso, bajar precio reduce ingreso + if (dec === 'subir') { + correcto = true; + mensaje = '¡Correcto! Con demanda inelástica, subir el precio aumenta el ingreso total porque la cantidad cae proporcionalmente menos.'; + setPuntuacion(prev => prev + 1); + } else { + correcto = false; + mensaje = 'Incorrecto. Con demanda inelástica, bajar el precio reduce el ingreso total porque la cantidad no aumenta lo suficiente para compensar.'; + } + } else { + // Demanda unitaria + correcto = true; + mensaje = 'La demanda es unitaria, por lo que cualquier cambio de precio mantendrá el ingreso constante. Ambas opciones son igualmente válidas.'; + setPuntuacion(prev => prev + 1); + } + + setResultado({ + correcto, + mensaje, + ingresoInicial, + ingresoNuevo: ingresoActual, + mostrarAnalisis: true + }); + }; + + const generarNuevoEscenario = () => { + setEscenario(generarEscenario()); + setDecision(null); + setResultado(null); + }; + + const formatearDinero = (cantidad: number) => { + return new Intl.NumberFormat('es-MX', { + style: 'currency', + currency: 'MXN', + minimumFractionDigits: 2 + }).format(cantidad); + }; + + return ( +
+
+
+

Elasticidad e Ingreso Total

+

Maximiza el ingreso total tomando la decisión correcta sobre precios.

+
+
+
+

Puntuación

+

{puntuacion}/{intentos}

+
+
+
+ +
+
+
+ + + +
+
+

{escenario.nombre}

+

{escenario.descripcion}

+ +
+
+

Precio Inicial

+

{formatearDinero(escenario.precioInicial)}

+
+
+

Cantidad Inicial

+

{escenario.cantidadInicial.toLocaleString()}

+
+
+

Precio Actual

+

0 ? 'text-red-600' : 'text-green-600'}`}> + {formatearDinero(escenario.precioActual)} +

+

0 ? 'text-red-500' : 'text-green-500'}`}> + {cambioPrecio > 0 ? '+' : ''}{cambioPrecio.toFixed(1)}% +

+
+
+

Cantidad Actual

+

escenario.cantidadInicial ? 'text-green-600' : 'text-red-600'}`}> + {escenario.cantidadActual.toLocaleString()} +

+

escenario.cantidadInicial ? 'text-green-500' : 'text-red-500'}`}> + {((escenario.cantidadActual - escenario.cantidadInicial) / escenario.cantidadInicial * 100) > 0 ? '+' : ''} + {((escenario.cantidadActual - escenario.cantidadInicial) / escenario.cantidadInicial * 100).toFixed(1)}% +

+
+
+
+
+
+ +
+
+

+ + + + Ingreso Inicial +

+

{formatearDinero(ingresoInicial)}

+

+ {escenario.precioInicial} × {escenario.cantidadInicial.toLocaleString()} +

+
+ +
+

+ + + + Ingreso Actual +

+

{formatearDinero(ingresoActual)}

+

+ {escenario.precioActual} × {escenario.cantidadActual.toLocaleString()} +

+
+ +
ingresoInicial + ? 'from-green-50 to-emerald-50 border-green-200' + : 'from-red-50 to-pink-50 border-red-200' + }`}> +

ingresoInicial ? 'text-green-800' : 'text-red-800' + }`}> + + + + Cambio en Ingreso +

+

ingresoInicial ? 'text-green-700' : 'text-red-700'}`}> + {ingresoActual > ingresoInicial ? '+' : ''} + {formatearDinero(ingresoActual - ingresoInicial)} +

+

ingresoInicial ? 'text-green-600' : 'text-red-600'}`}> + {((ingresoActual - ingresoInicial) / ingresoInicial * 100) > 0 ? '+' : ''} + {((ingresoActual - ingresoInicial) / ingresoInicial * 100).toFixed(1)}% +

+
+
+ +
+

+ + + + Tu Decisión +

+

+ Basándote en los datos anteriores, ¿qué decisión de precio maximizaría el ingreso total? +

+ +
+ + + +
+
+ + {resultado && ( +
+
+
+ {resultado.correcto ? ( + + + + ) : ( + + + + )} +
+
+

+ {resultado.correcto ? '¡Decisión Correcta!' : 'Decisión Incorrecta'} +

+

+ {resultado.mensaje} +

+ +
+
+
+ Elasticidad calculada: + {elasticidadCalculada.toFixed(2)} +
+
+ Clasificación: + 1 ? 'text-green-600' : + elasticidadCalculada < 1 ? 'text-amber-600' : 'text-blue-600' + }`}> + {elasticidadCalculada > 1 ? 'Elástica' : elasticidadCalculada < 1 ? 'Inelástica' : 'Unitaria'} + +
+
+ +
+

Análisis del Ingreso Total:

+
    +
  • • Ingreso inicial: {formatearDinero(resultado.ingresoInicial)}
    • +
  • • Ingreso después del cambio: {formatearDinero(resultado.ingresoNuevo)}
    • +
  • • Diferencia: {formatearDinero(resultado.ingresoNuevo - resultado.ingresoInicial)}
    • +
+
+
+
+
+
+ )} + + {resultado && ( +
+ +
+ )} + +
+

+ + + + Regla para Maximizar Ingreso Total +

+
+
+
+ Ed > 1 + Demanda Elástica +
+

Para maximizar ingreso:

+

+ + + + BAJAR el precio +

+

+ La cantidad aumenta más que proporcionalmente al precio. +

+
+ +
+
+ Ed < 1 + Demanda Inelástica +
+

Para maximizar ingreso:

+

+ + + + SUBIR el precio +

+

+ La cantidad cae menos que proporcionalmente al precio. +

+
+
+ +
+

+ Ed = 1 (Unitaria): El ingreso total ya está maximizado. Cualquier cambio de precio mantendrá el ingreso constante. +

+
+
+
+ ); +}; + +export default ElasticidadIngresoTotal; diff --git a/frontend/src/components/exercises/modulo2/EquilibrioFinder.tsx b/frontend/src/components/exercises/modulo2/EquilibrioFinder.tsx new file mode 100644 index 0000000..f583866 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/EquilibrioFinder.tsx @@ -0,0 +1,426 @@ +import React, { useState, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Calculator, Check, X, Trophy, RotateCcw, ArrowRight, Lightbulb, Target } from 'lucide-react'; + +interface EquilibrioFinderProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Problema { + id: number; + demanda: { a: number; b: number }; + oferta: { c: number; d: number }; + producto: string; + dificultad: 'facil' | 'medio' | 'dificil'; +} + +const problemas: Problema[] = [ + { + id: 1, + demanda: { a: 100, b: -2 }, + oferta: { c: 10, d: 3 }, + producto: 'Manzanas', + dificultad: 'facil' + }, + { + id: 2, + demanda: { a: 80, b: -1.5 }, + oferta: { c: 20, d: 2 }, + producto: 'Camisetas', + dificultad: 'facil' + }, + { + id: 3, + demanda: { a: 120, b: -0.8 }, + oferta: { c: 30, d: 1.2 }, + producto: 'Entradas de cine', + dificultad: 'medio' + }, + { + id: 4, + demanda: { a: 200, b: -4 }, + oferta: { c: 50, d: 2.5 }, + producto: 'Bicicletas', + dificultad: 'medio' + }, + { + id: 5, + demanda: { a: 150, b: -1.2 }, + oferta: { c: 25, d: 0.8 }, + producto: 'Consultas médicas', + dificultad: 'dificil' + } +]; + +export const EquilibrioFinder: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [problemaActual, setProblemaActual] = useState(0); + const [respuestaPrecio, setRespuestaPrecio] = useState(''); + const [respuestaCantidad, setRespuestaCantidad] = useState(''); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [esCorrecto, setEsCorrecto] = useState(false); + const [score, setScore] = useState(0); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [mostrarAyuda, setMostrarAyuda] = useState(false); + const [completado, setCompletado] = useState(false); + const [_startTime] = useState(Date.now()); + + const problema = problemas[problemaActual]; + + const calcularEquilibrio = (problema: Problema) => { + const { a, b } = problema.demanda; + const { c, d } = problema.oferta; + const Q = (c - a) / (b - d); + const P = a + b * Q; + return { Q: Math.round(Q * 10) / 10, P: Math.round(P * 10) / 10 }; + }; + + const equilibrio = calcularEquilibrio(problema); + + const handleVerificar = () => { + const precioIngresado = parseFloat(respuestaPrecio); + const cantidadIngresada = parseFloat(respuestaCantidad); + + if (isNaN(precioIngresado) || isNaN(cantidadIngresada)) { + return; + } + + const margenError = 0.5; + const precioCorrecto = Math.abs(precioIngresado - equilibrio.P) <= margenError; + const cantidadCorrecta = Math.abs(cantidadIngresada - equilibrio.Q) <= margenError; + + const correcto = precioCorrecto && cantidadCorrecta; + setEsCorrecto(correcto); + setMostrarResultado(true); + + if (correcto) { + setScore(prev => prev + Math.round(100 / problemas.length)); + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (problemaActual < problemas.length - 1) { + setProblemaActual(prev => prev + 1); + setRespuestaPrecio(''); + setRespuestaCantidad(''); + setMostrarResultado(false); + setMostrarAyuda(false); + } else { + setCompletado(true); + if (onComplete) { + onComplete(score); + } + } + }; + + const handleReiniciar = () => { + setProblemaActual(0); + setRespuestaPrecio(''); + setRespuestaCantidad(''); + setMostrarResultado(false); + setScore(0); + setRespuestasCorrectas(0); + setMostrarAyuda(false); + setCompletado(false); + }; + + const getDificultadColor = (dificultad: string) => { + switch (dificultad) { + case 'facil': return 'bg-green-100 text-green-700'; + case 'medio': return 'bg-yellow-100 text-yellow-700'; + case 'dificil': return 'bg-red-100 text-red-700'; + default: return 'bg-gray-100 text-gray-700'; + } + }; + + const generarPuntosCurva = (tipo: 'demanda' | 'oferta') => { + const puntos = []; + for (let Q = 0; Q <= 50; Q += 5) { + if (tipo === 'demanda') { + const P = problema.demanda.a + problema.demanda.b * Q; + if (P >= 0) puntos.push({ Q, P }); + } else { + const P = problema.oferta.c + problema.oferta.d * Q; + if (P >= 0) puntos.push({ Q, P }); + } + } + return puntos; + }; + + const scaleX = (Q: number) => 50 + (Q / 50) * 300; + const scaleY = (P: number) => 250 - (P / 150) * 200; + + const puntosDemanda = generarPuntosCurva('demanda'); + const puntosOferta = generarPuntosCurva('oferta'); + + const demandaPath = puntosDemanda.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.Q)} ${scaleY(p.P)}` + ).join(' '); + + const ofertaPath = puntosOferta.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.Q)} ${scaleY(p.P)}` + ).join(' '); + + if (completado) { + const porcentaje = Math.round((respuestasCorrectas / problemas.length) * 100); + + return ( + + +

¡Ejercicio Completado!

+

Has encontrado los puntos de equilibrio

+ +
+
{porcentaje}%
+

+ {respuestasCorrectas} de {problemas.length} problemas resueltos correctamente +

+
+ + + + ); + } + + return ( +
+
+
+
+ +

Buscador de Equilibrio

+
+
+ + {problema.dificultad.toUpperCase()} + + + {problemaActual + 1} de {problemas.length} + +
+ +
+
+
+

+ Calcula el precio y cantidad de equilibrio donde Qd = Qo. +

+
+ +
+
+

Gráfico de Mercado: {problema.producto}

+ + + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Labels */} + Cantidad (Q) + Precio (P) + + {/* Curva de Demanda */} + {demandaPath && ( + + + D + + )} + + {/* Curva de Oferta */} + {ofertaPath && ( + + + S + + )} + + {/* Punto de equilibrio (mostrar si ya respondió correctamente) */} + {mostrarResultado && esCorrecto && ( + + + + E + + + + + )} + + +
+

Ecuaciones:

+
+
+ Qd = + {problema.demanda.a} {problema.demanda.b > 0 ? '+' : ''}{problema.demanda.b}P +
+
+ Qo = + {problema.oferta.c > 0 ? '' : '-'}{problema.oferta.c} {problema.oferta.d > 0 ? '+' : ''}{problema.oferta.d}P +
+
+
+
+ +
+
+

+ + Encuentra el Equilibrio +

+ +
+
+ + setRespuestaPrecio(e.target.value)} + disabled={mostrarResultado} + placeholder="Ej: 45.5" + className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none disabled:bg-gray-100" + step="0.1" + /> +
+ +
+ + setRespuestaCantidad(e.target.value)} + disabled={mostrarResultado} + placeholder="Ej: 25.3" + className="w-full px-4 py-3 border-2 border-gray-200 rounded-lg focus:border-purple-500 focus:outline-none disabled:bg-gray-100" + step="0.1" + /> +
+
+ + + + + {mostrarAyuda && ( + +

+ Tip: En equilibrio, Qd = Qo. Iguala las dos ecuaciones y despeja P. + Luego sustituye P en cualquier ecuación para encontrar Q. +

+ + )} + +
+ + + {mostrarResultado && ( + +
+ {esCorrecto ? ( + + ) : ( + + )} +
+

+ {esCorrecto ? '¡Correcto!' : 'Incorrecto'} +

+ {!esCorrecto && ( +
+

La respuesta correcta es:

+

P* = ${equilibrio.P}

+

Q* = {equilibrio.Q} unidades

+
+ )} +
+
+ + )} + + +
+ {!mostrarResultado ? ( + + ) : ( + + )} +
+
+
+
+ ); +}; + +export default EquilibrioFinder; diff --git a/frontend/src/components/exercises/modulo2/EquilibrioGrafico.tsx b/frontend/src/components/exercises/modulo2/EquilibrioGrafico.tsx new file mode 100644 index 0000000..a7f5988 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/EquilibrioGrafico.tsx @@ -0,0 +1,543 @@ +import React, { useState, useRef, useCallback, useEffect } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { LineChart, Check, X, RotateCcw, Trophy, Info, MousePointer2 } from 'lucide-react'; + +interface EquilibrioGraficoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Punto { + x: number; + y: number; +} + +const GRID_SIZE = 350; +const PADDING = 50; +const MAX_PRECIO = 100; +const MAX_CANTIDAD = 100; + +export const EquilibrioGrafico: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [demandaPoints, setDemandaPoints] = useState([]); + const [ofertaPoints, setOfertaPoints] = useState([]); + const [modoActivo, setModoActivo] = useState<'demanda' | 'oferta'>('demanda'); + const [equilibrioEncontrado, setEquilibrioEncontrado] = useState(false); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [score, setScore] = useState(0); + const [mensaje, setMensaje] = useState(''); + const [showTutorial, setShowTutorial] = useState(true); + const [_startTime] = useState(Date.now()); + + const svgRef = useRef(null); + + const cartesianToSvg = useCallback((x: number, y: number) => { + const svgX = PADDING + (x / MAX_CANTIDAD) * GRID_SIZE; + const svgY = PADDING + GRID_SIZE - (y / MAX_PRECIO) * GRID_SIZE; + return { x: svgX, y: svgY }; + }, []); + + const svgToCartesian = useCallback((svgX: number, svgY: number) => { + const x = ((svgX - PADDING) / GRID_SIZE) * MAX_CANTIDAD; + const y = ((PADDING + GRID_SIZE - svgY) / GRID_SIZE) * MAX_PRECIO; + return { + x: Math.max(0, Math.min(MAX_CANTIDAD, Math.round(x))), + y: Math.max(0, Math.min(MAX_PRECIO, Math.round(y))) + }; + }, []); + + const handleSvgClick = (e: React.MouseEvent) => { + if (equilibrioEncontrado) return; + + const rect = svgRef.current?.getBoundingClientRect(); + if (!rect) return; + + const svgX = e.clientX - rect.left; + const svgY = e.clientY - rect.top; + const cartesian = svgToCartesian(svgX, svgY); + + const newPoint: Punto = { x: cartesian.x, y: cartesian.y }; + + if (modoActivo === 'demanda') { + if (demandaPoints.length >= 2) { + setDemandaPoints([newPoint]); + } else { + setDemandaPoints(prev => [...prev, newPoint]); + } + } else { + if (ofertaPoints.length >= 2) { + setOfertaPoints([newPoint]); + } else { + setOfertaPoints(prev => [...prev, newPoint]); + } + } + setMensaje(''); + }; + + const calcularInterseccion = () => { + if (demandaPoints.length < 2 || ofertaPoints.length < 2) return null; + + const d1 = demandaPoints[0]; + const d2 = demandaPoints[1]; + const s1 = ofertaPoints[0]; + const s2 = ofertaPoints[1]; + + const m1 = (d2.y - d1.y) / (d2.x - d1.x); + const m2 = (s2.y - s1.y) / (s2.x - s1.x); + + if (Math.abs(m1 - m2) < 0.01) return null; + + const b1 = d1.y - m1 * d1.x; + const b2 = s1.y - m2 * s1.x; + + const x = (b2 - b1) / (m1 - m2); + const y = m1 * x + b1; + + return { x: Math.round(x), y: Math.round(y) }; + }; + + const validarEquilibrio = () => { + if (demandaPoints.length < 2) { + setMensaje('Necesitas 2 puntos para trazar la curva de demanda'); + return; + } + if (ofertaPoints.length < 2) { + setMensaje('Necesitas 2 puntos para trazar la curva de oferta'); + return; + } + + const d1 = demandaPoints[0]; + const d2 = demandaPoints[1]; + const s1 = ofertaPoints[0]; + const s2 = ofertaPoints[1]; + + const pendienteDemanda = (d2.y - d1.y) / (d2.x - d1.x); + const pendienteOferta = (s2.y - s1.y) / (s2.x - s1.x); + + if (pendienteDemanda >= 0) { + setMensaje('La demanda debe tener pendiente negativa (bajar de izquierda a derecha)'); + return; + } + + if (pendienteOferta <= 0) { + setMensaje('La oferta debe tener pendiente positiva (subir de izquierda a derecha)'); + return; + } + + const interseccion = calcularInterseccion(); + if (!interseccion) { + setMensaje('Las curvas no se intersectan dentro del rango válido'); + return; + } + + setEquilibrioEncontrado(true); + setMostrarResultado(true); + setScore(100); + setMensaje(''); + + setTimeout(() => { + if (onComplete) { + onComplete(100); + } + }, 3000); + }; + + const reiniciar = () => { + setDemandaPoints([]); + setOfertaPoints([]); + setModoActivo('demanda'); + setEquilibrioEncontrado(false); + setMostrarResultado(false); + setScore(0); + setMensaje(''); + setShowTutorial(true); + }; + + const renderLineaCurva = (puntos: Punto[], color: string, esPunteada: boolean = false) => { + if (puntos.length < 2) return null; + + const sorted = [...puntos].sort((a, b) => a.x - b.x); + const start = sorted[0]; + const end = sorted[sorted.length - 1]; + + const startSvg = cartesianToSvg(start.x, start.y); + const endSvg = cartesianToSvg(end.x, end.y); + + const m = (end.y - start.y) / (end.x - start.x); + const b = start.y - m * start.x; + + const yAtX0 = b; + const yAtXMax = m * MAX_CANTIDAD + b; + + const p0 = cartesianToSvg(0, Math.max(0, Math.min(MAX_PRECIO, yAtX0))); + const pMax = cartesianToSvg(MAX_CANTIDAD, Math.max(0, Math.min(MAX_PRECIO, yAtXMax))); + + return ( + + ); + }; + + const interseccion = calcularInterseccion(); + + return ( +
+
+
+
+ +

Gráfico de Equilibrio

+
+
+ Encuentra la intersección + +
+
+

+ Traza las curvas de demanda y oferta para encontrar el punto de equilibrio donde se cruzan. +

+
+ + {showTutorial && ( + + +
+

Cómo jugar:

+
    +
  • • Selecciona el modo (Demanda u Oferta) con los botones
    • +
  • • Haz clic en el gráfico para colocar 2 puntos de cada curva
    • +
  • • La demanda debe tener pendiente negativa (baja)
    • +
  • • La oferta debe tener pendiente positiva (sube)
    • +
  • • Presiona "Validar Equilibrio" cuando estén ambas curvas
    • +
+
+ + + )} + +
+
+
+ + {/* Grid */} + {Array.from({ length: 11 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Labels ejes */} + + Cantidad (Q) + + + Precio (P) + + + {/* Curvas */} + {renderLineaCurva(demandaPoints, '#3b82f6')} + {renderLineaCurva(ofertaPoints, '#22c55e')} + + {/* Labels de curvas */} + {demandaPoints.length >= 2 && ( + D + )} + {ofertaPoints.length >= 2 && ( + S + )} + + {/* Puntos Demanda */} + {demandaPoints.map((punto, index) => { + const svg = cartesianToSvg(punto.x, punto.y); + return ( + + + + D{index + 1} + + + ); + })} + + {/* Puntos Oferta */} + {ofertaPoints.map((punto, index) => { + const svg = cartesianToSvg(punto.x, punto.y); + return ( + + + + S{index + 1} + + + ); + })} + + {/* Punto de Equilibrio */} + {equilibrioEncontrado && interseccion && ( + + + + E ({interseccion.x}, {interseccion.y}) + + + {/* Líneas guía */} + + + + )} + +
+
+ +
+
+ + +
+ +
+

+ + Estado +

+
+
+ Puntos Demanda: + = 2 ? 'text-blue-600' : 'text-gray-400'}`}> + {demandaPoints.length}/2 + +
+
+ +
+ +
+ Puntos Oferta: + = 2 ? 'text-green-600' : 'text-gray-400'}`}> + {ofertaPoints.length}/2 + +
+
+ +
+
+
+ + {interseccion && !equilibrioEncontrado && ( + +

+ Intersección detectada: +

+

+ Q* = {interseccion.x}, P* = {interseccion.y} +

+ + )} + + {mensaje && ( + + +

{mensaje}

+ + )} + + + + + {mostrarResultado && ( + + +

¡Equilibrio Encontrado!

+ {interseccion && ( +
+

Precio de equilibrio: ${interseccion.y}

+

Cantidad de equilibrio: {interseccion.x} unidades

+
+ )} + + )} + + +
+

+ Recuerda: +

+
    +
  • • Demanda: pendiente negativa ↘️
    • +
  • • Oferta: pendiente positiva ↗️
    • +
  • • El equilibrio es donde se cruzan
    • +
+
+
+
+
+ ); +}; + +export default EquilibrioGrafico; diff --git a/frontend/src/components/exercises/modulo2/ExcesoDemandaEscasez.tsx b/frontend/src/components/exercises/modulo2/ExcesoDemandaEscasez.tsx new file mode 100644 index 0000000..349f0c9 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/ExcesoDemandaEscasez.tsx @@ -0,0 +1,454 @@ +import React, { useState, useMemo } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { AlertTriangle, TrendingDown, ArrowRight, CheckCircle2, XCircle, Trophy, RotateCcw, BookOpen } from 'lucide-react'; + +interface ExcesoDemandaEscasezProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + producto: string; + precioEquilibrio: number; + cantidadEquilibrio: number; + precioControl: number; + demanda: { a: number; b: number }; + oferta: { c: number; d: number }; + contexto: string; + dificultad: 'facil' | 'medio' | 'dificil'; +} + +const escenarios: Escenario[] = [ + { + id: 1, + producto: 'Pan', + precioEquilibrio: 50, + cantidadEquilibrio: 100, + precioControl: 30, + demanda: { a: 150, b: -1 }, + oferta: { c: 0, d: 2 }, + contexto: 'El gobierno fija un precio máximo de $30 para el pan para proteger a los consumidores.', + dificultad: 'facil' + }, + { + id: 2, + producto: 'Gasolina', + precioEquilibrio: 80, + cantidadEquilibrio: 60, + precioControl: 50, + demanda: { a: 140, b: -1 }, + oferta: { c: 20, d: 0.75 }, + contexto: 'Se impone un precio máximo de $50 por galón ante el alza de precios internacionales.', + dificultad: 'medio' + }, + { + id: 3, + producto: 'Vivienda', + precioEquilibrio: 1200, + cantidadEquilibrio: 500, + precioControl: 800, + demanda: { a: 2200, b: -2 }, + oferta: { c: 200, d: 2 }, + contexto: 'Control de rentas fija el precio máximo en $800 para hacer la vivienda accesible.', + dificultad: 'dificil' + } +]; + +export const ExcesoDemandaEscasez: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [respuestaExceso, setRespuestaExceso] = useState(''); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [esCorrecto, setEsCorrecto] = useState(false); + const [score, setScore] = useState(0); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [completado, setCompletado] = useState(false); + const [_startTime] = useState(Date.now()); + + const escenario = escenarios[escenarioActual]; + + const calcularCantidades = (precio: number, escenario: Escenario) => { + const Qd = escenario.demanda.a + escenario.demanda.b * precio; + const Qo = escenario.oferta.c + escenario.oferta.d * precio; + return { Qd: Math.max(0, Qd), Qo: Math.max(0, Qo) }; + }; + + const equilibrio = calcularCantidades(escenario.precioEquilibrio, escenario); + const conControl = calcularCantidades(escenario.precioControl, escenario); + const excesoDemandaReal = conControl.Qd - conControl.Qo; + + const handleVerificar = () => { + const respuesta = parseFloat(respuestaExceso); + if (isNaN(respuesta)) return; + + const margenError = escenario.precioEquilibrio * 0.1; + const correcto = Math.abs(respuesta - excesoDemandaReal) <= margenError; + + setEsCorrecto(correcto); + setMostrarResultado(true); + + if (correcto) { + setScore(prev => prev + Math.round(100 / escenarios.length)); + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (escenarioActual < escenarios.length - 1) { + setEscenarioActual(prev => prev + 1); + setRespuestaExceso(''); + setMostrarResultado(false); + } else { + setCompletado(true); + if (onComplete) { + onComplete(score); + } + } + }; + + const handleReiniciar = () => { + setEscenarioActual(0); + setRespuestaExceso(''); + setMostrarResultado(false); + setScore(0); + setRespuestasCorrectas(0); + setCompletado(false); + }; + + const getDificultadColor = (dificultad: string) => { + switch (dificultad) { + case 'facil': return 'bg-green-100 text-green-700'; + case 'medio': return 'bg-yellow-100 text-yellow-700'; + case 'dificil': return 'bg-red-100 text-red-700'; + default: return 'bg-gray-100 text-gray-700'; + } + }; + + const generarPuntosCurva = (tipo: 'demanda' | 'oferta', escenario: Escenario) => { + const puntos = []; + const maxP = Math.max(escenario.precioEquilibrio * 1.5, escenario.precioControl * 1.2); + for (let P = 0; P <= maxP; P += maxP / 20) { + if (tipo === 'demanda') { + const Q = escenario.demanda.a + escenario.demanda.b * P; + if (Q >= 0) puntos.push({ Q, P }); + } else { + const Q = escenario.oferta.c + escenario.oferta.d * P; + if (Q >= 0) puntos.push({ Q, P }); + } + } + return puntos; + }; + + const maxQ = Math.max(equilibrio.Qd, conControl.Qd) * 1.3; + const maxP = escenario.precioEquilibrio * 1.5; + + const scaleX = (Q: number) => 50 + (Q / maxQ) * 350; + const scaleY = (P: number) => 300 - (P / maxP) * 250; + + const puntosDemanda = generarPuntosCurva('demanda', escenario); + const puntosOferta = generarPuntosCurva('oferta', escenario); + + const demandaPath = puntosDemanda.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.Q)} ${scaleY(p.P)}` + ).join(' '); + + const ofertaPath = puntosOferta.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.Q)} ${scaleY(p.P)}` + ).join(' '); + + if (completado) { + const porcentaje = Math.round((respuestasCorrectas / escenarios.length) * 100); + + return ( + + +

¡Ejercicio Completado!

+

Has analizado escenarios de escasez

+ +
+
{porcentaje}%
+

+ {respuestasCorrectas} de {escenarios.length} respuestas correctas +

+
+ + + + ); + } + + return ( +
+
+
+
+ +

Exceso de Demanda (Escasez)

+
+
+ + {escenario.dificultad.toUpperCase()} + + + {escenarioActual + 1} de {escenarios.length} + +
+ +
+
+
+

+ Analiza qué sucede cuando el precio está por debajo del equilibrio. +

+
+ +
+
+

Mercado de {escenario.producto}

+ + + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Labels */} + Cantidad (Q) + Precio (P) + + {/* Curva de Demanda */} + + D + + {/* Curva de Oferta */} + + S + + {/* Punto de equilibrio */} + + + E + + + {/* Línea de precio de control */} + + + Pmax=${escenario.precioControl} + + + {/* Zona de exceso de demanda */} + + + + Escasez + + + + {/* Puntos de cantidad */} + + + Qd + + + + + Qo + + + +
+
+ Equilibrio: +

P=${escenario.precioEquilibrio}, Q={Math.round(equilibrio.Qd)}

+
+
+ Con Pmax: +

Qd={Math.round(conControl.Qd)}, Qo={Math.round(conControl.Qo)}

+
+
+
+ +
+
+
+ +
+

Escenario

+

{escenario.contexto}

+
+
+
+ +
+

+ + Calcula el Exceso de Demanda +

+ +
+
+ + setRespuestaExceso(e.target.value)} + disabled={mostrarResultado} + placeholder="Ingresa el valor numérico" + className="w-full px-4 py-3 border-2 border-red-200 rounded-lg focus:border-red-500 focus:outline-none disabled:bg-gray-100" + /> +

+ Fórmula: Exceso de Demanda = Qd - Qo (al precio de control) +

+
+
+
+ + + {mostrarResultado && ( + +
+ {esCorrecto ? ( + + ) : ( + + )} +
+

+ {esCorrecto ? '¡Correcto!' : 'Incorrecto'} +

+
+

Al precio de ${escenario.precioControl}:

+
    +
  • • Cantidad demandada: {Math.round(conControl.Qd)} unidades
    • +
  • • Cantidad ofrecida: {Math.round(conControl.Qo)} unidades
    • +
  • • Exceso de demanda: {Math.round(excesoDemandaReal)} unidades
    • +
+ {!esCorrecto && ( +

+ La respuesta correcta es: {Math.round(excesoDemandaReal)} unidades +

+ )} +
+
+
+ + )} + + +
+ {!mostrarResultado ? ( + + ) : ( + + )} +
+ +
+

+ Consecuencias del exceso de demanda: +

+
    +
  • • Largas filas y esperas
    • +
  • • Racionamiento del producto
    • +
  • • Mercados negros
    • +
  • • Pérdida de peso muerto
    • +
+
+
+
+
+ ); +}; + +export default ExcesoDemandaEscasez; diff --git a/frontend/src/components/exercises/modulo2/ExcesoOfertaSuperavit.tsx b/frontend/src/components/exercises/modulo2/ExcesoOfertaSuperavit.tsx new file mode 100644 index 0000000..82cd710 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/ExcesoOfertaSuperavit.tsx @@ -0,0 +1,454 @@ +import React, { useState, useMemo } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Package, TrendingUp, ArrowRight, CheckCircle2, XCircle, Trophy, RotateCcw, BookOpen } from 'lucide-react'; + +interface ExcesoOfertaSuperavitProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + producto: string; + precioEquilibrio: number; + cantidadEquilibrio: number; + precioMinimo: number; + demanda: { a: number; b: number }; + oferta: { c: number; d: number }; + contexto: string; + dificultad: 'facil' | 'medio' | 'dificil'; +} + +const escenarios: Escenario[] = [ + { + id: 1, + producto: 'Leche', + precioEquilibrio: 40, + cantidadEquilibrio: 80, + precioMinimo: 60, + demanda: { a: 120, b: -1 }, + oferta: { c: 0, d: 2 }, + contexto: 'El gobierno establece un precio mínimo de $60 para proteger a los productores lecheros.', + dificultad: 'facil' + }, + { + id: 2, + producto: 'Trigo', + precioEquilibrio: 100, + cantidadEquilibrio: 200, + precioMinimo: 140, + demanda: { a: 300, b: -1 }, + oferta: { c: -100, d: 2 }, + contexto: 'Se fija un precio de sustento de $140 para garantizar ingresos a los agricultores.', + dificultad: 'medio' + }, + { + id: 3, + producto: 'Trabajo no calificado', + precioEquilibrio: 50, + cantidadEquilibrio: 1000, + precioMinimo: 80, + demanda: { a: 150, b: -0.1 }, + oferta: { c: 0, d: 20 }, + contexto: 'El salario mínimo se fija en $80, por encima del salario de equilibrio del mercado.', + dificultad: 'dificil' + } +]; + +export const ExcesoOfertaSuperavit: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [respuestaExceso, setRespuestaExceso] = useState(''); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [esCorrecto, setEsCorrecto] = useState(false); + const [score, setScore] = useState(0); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [completado, setCompletado] = useState(false); + const [_startTime] = useState(Date.now()); + + const escenario = escenarios[escenarioActual]; + + const calcularCantidades = (precio: number, escenario: Escenario) => { + const Qd = escenario.demanda.a + escenario.demanda.b * precio; + const Qo = escenario.oferta.c + escenario.oferta.d * precio; + return { Qd: Math.max(0, Qd), Qo: Math.max(0, Qo) }; + }; + + const equilibrio = calcularCantidades(escenario.precioEquilibrio, escenario); + const conMinimo = calcularCantidades(escenario.precioMinimo, escenario); + const excesoOfertaReal = conMinimo.Qo - conMinimo.Qd; + + const handleVerificar = () => { + const respuesta = parseFloat(respuestaExceso); + if (isNaN(respuesta)) return; + + const margenError = escenario.precioEquilibrio * 0.15; + const correcto = Math.abs(respuesta - excesoOfertaReal) <= margenError; + + setEsCorrecto(correcto); + setMostrarResultado(true); + + if (correcto) { + setScore(prev => prev + Math.round(100 / escenarios.length)); + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (escenarioActual < escenarios.length - 1) { + setEscenarioActual(prev => prev + 1); + setRespuestaExceso(''); + setMostrarResultado(false); + } else { + setCompletado(true); + if (onComplete) { + onComplete(score); + } + } + }; + + const handleReiniciar = () => { + setEscenarioActual(0); + setRespuestaExceso(''); + setMostrarResultado(false); + setScore(0); + setRespuestasCorrectas(0); + setCompletado(false); + }; + + const getDificultadColor = (dificultad: string) => { + switch (dificultad) { + case 'facil': return 'bg-green-100 text-green-700'; + case 'medio': return 'bg-yellow-100 text-yellow-700'; + case 'dificil': return 'bg-red-100 text-red-700'; + default: return 'bg-gray-100 text-gray-700'; + } + }; + + const generarPuntosCurva = (tipo: 'demanda' | 'oferta', escenario: Escenario) => { + const puntos = []; + const maxP = Math.max(escenario.precioMinimo * 1.2, escenario.precioEquilibrio * 1.5); + for (let P = 0; P <= maxP; P += maxP / 20) { + if (tipo === 'demanda') { + const Q = escenario.demanda.a + escenario.demanda.b * P; + if (Q >= 0) puntos.push({ Q, P }); + } else { + const Q = escenario.oferta.c + escenario.oferta.d * P; + if (Q >= 0) puntos.push({ Q, P }); + } + } + return puntos; + }; + + const maxQ = Math.max(conMinimo.Qo, equilibrio.Qd) * 1.3; + const maxP = Math.max(escenario.precioMinimo, escenario.precioEquilibrio) * 1.3; + + const scaleX = (Q: number) => 50 + (Q / maxQ) * 350; + const scaleY = (P: number) => 300 - (P / maxP) * 250; + + const puntosDemanda = generarPuntosCurva('demanda', escenario); + const puntosOferta = generarPuntosCurva('oferta', escenario); + + const demandaPath = puntosDemanda.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.Q)} ${scaleY(p.P)}` + ).join(' '); + + const ofertaPath = puntosOferta.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.Q)} ${scaleY(p.P)}` + ).join(' '); + + if (completado) { + const porcentaje = Math.round((respuestasCorrectas / escenarios.length) * 100); + + return ( + + +

¡Ejercicio Completado!

+

Has analizado escenarios de superávit

+ +
+
{porcentaje}%
+

+ {respuestasCorrectas} de {escenarios.length} respuestas correctas +

+
+ + + + ); + } + + return ( +
+
+
+
+ +

Exceso de Oferta (Superávit)

+
+
+ + {escenario.dificultad.toUpperCase()} + + + {escenarioActual + 1} de {escenarios.length} + +
+ +
+
+
+

+ Analiza qué sucede cuando el precio está por encima del equilibrio. +

+
+ +
+
+

Mercado de {escenario.producto}

+ + + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Labels */} + Cantidad (Q) + Precio (P) + + {/* Curva de Demanda */} + + D + + {/* Curva de Oferta */} + + S + + {/* Punto de equilibrio */} + + + E + + + {/* Línea de precio mínimo */} + + + Pmin=${escenario.precioMinimo} + + + {/* Zona de exceso de oferta */} + + + + Superávit + + + + {/* Puntos de cantidad */} + + + Qd + + + + + Qo + + + +
+
+ Equilibrio: +

P=${escenario.precioEquilibrio}, Q={Math.round(equilibrio.Qd)}

+
+
+ Con Pmin: +

Qd={Math.round(conMinimo.Qd)}, Qo={Math.round(conMinimo.Qo)}

+
+
+
+ +
+
+
+ +
+

Escenario

+

{escenario.contexto}

+
+
+
+ +
+

+ + Calcula el Exceso de Oferta +

+ +
+
+ + setRespuestaExceso(e.target.value)} + disabled={mostrarResultado} + placeholder="Ingresa el valor numérico" + className="w-full px-4 py-3 border-2 border-amber-200 rounded-lg focus:border-amber-500 focus:outline-none disabled:bg-gray-100" + /> +

+ Fórmula: Exceso de Oferta = Qo - Qd (al precio mínimo) +

+
+
+
+ + + {mostrarResultado && ( + +
+ {esCorrecto ? ( + + ) : ( + + )} +
+

+ {esCorrecto ? '¡Correcto!' : 'Incorrecto'} +

+
+

Al precio de ${escenario.precioMinimo}:

+
    +
  • • Cantidad ofrecida: {Math.round(conMinimo.Qo)} unidades
    • +
  • • Cantidad demandada: {Math.round(conMinimo.Qd)} unidades
    • +
  • • Exceso de oferta: {Math.round(excesoOfertaReal)} unidades
    • +
+ {!esCorrecto && ( +

+ La respuesta correcta es: {Math.round(excesoOfertaReal)} unidades +

+ )} +
+
+
+ + )} + + +
+ {!mostrarResultado ? ( + + ) : ( + + )} +
+ +
+

+ Consecuencias del exceso de oferta: +

+
    +
  • • Acumulación de inventarios
    • +
  • • Presión para bajar precios
    • +
  • • Necesidad de compras gubernamentales
    • +
  • • Desperdicio de recursos
    • +
+
+
+
+
+ ); +}; + +export default ExcesoOfertaSuperavit; diff --git a/frontend/src/components/exercises/modulo2/FactoresDesplazanDemanda.tsx b/frontend/src/components/exercises/modulo2/FactoresDesplazanDemanda.tsx new file mode 100644 index 0000000..fbe77b3 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/FactoresDesplazanDemanda.tsx @@ -0,0 +1,339 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { TrendingUp, TrendingDown, Users, DollarSign, Heart, Briefcase, Check, X, Trophy, RotateCcw } from 'lucide-react'; + +interface FactoresDesplazanDemandaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Factor { + id: string; + nombre: string; + icono: React.ReactNode; + descripcion: string; + efecto: 'aumenta' | 'disminuye'; + explicacion: string; + ejemplo: string; +} + +const factores: Factor[] = [ + { + id: 'ingreso', + nombre: 'Ingreso de los consumidores', + icono: , + descripcion: 'Cuando los ingresos cambian, la demanda de bienes normales se desplaza', + efecto: 'aumenta', + explicacion: 'Si los ingresos suben, los consumidores pueden comprar más de casi todo (bienes normales).', + ejemplo: 'Un aumento de sueldo permite comprar más ropa, comer fuera más seguido, etc.' + }, + { + id: 'precios_relacionados', + nombre: 'Precios de bienes relacionados', + icono: , + descripcion: 'El precio de sustitutos y complementos afecta la demanda', + efecto: 'aumenta', + explicacion: 'Si el precio del café sube, la demanda de té (sustituto) aumenta.', + ejemplo: 'Si la gasolina sube, más personas quieren autos eléctricos (sustitutos del consumo de gasolina).' + }, + { + id: 'gustos', + nombre: 'Gustos y preferencias', + icono: , + descripcion: 'Las modas, publicidad y cambios culturales desplazan la demanda', + efecto: 'aumenta', + explicacion: 'Si un producto se vuelve popular, más personas lo quieren independientemente del precio.', + ejemplo: 'La moda de los celulares inteligentes desplazó la demanda de cámaras fotográficas tradicionales.' + }, + { + id: 'expectativas', + nombre: 'Expectativas de precios futuros', + icono: , + descripcion: 'Lo que esperamos que pase con los precios afecta la demanda actual', + efecto: 'aumenta', + explicacion: 'Si esperamos que suban los precios, compramos más ahora (demanda aumenta).', + ejemplo: 'Antes de un aumento de impuestos a autos, la gente compra vehículos anticipadamente.' + }, + { + id: 'poblacion', + nombre: 'Número de compradores', + icono: , + descripcion: 'Más consumidores en el mercado aumentan la demanda total', + efecto: 'aumenta', + explicacion: 'El crecimiento poblacional o la apertura de nuevos mercados aumenta la demanda.', + ejemplo: 'Una nueva colonia residencial aumenta la demanda de supermercados cercanos.' + }, + { + id: 'demografia', + nombre: 'Cambios demográficos', + icono: , + descripcion: 'La edad, género, ocupación y educación de la población afectan la demanda', + efecto: 'aumenta', + explicacion: 'Diferentes grupos demográficos tienen diferentes necesidades y preferencias.', + ejemplo: 'El envejecimiento poblacional aumenta la demanda de servicios de salud y centros de jubilados.' + } +]; + +interface PreguntaFactor { + factorId: string; + pregunta: string; + respuestaCorrecta: boolean; + escenario: string; +} + +const preguntas: PreguntaFactor[] = [ + { + factorId: 'ingreso', + pregunta: '¿Qué sucede con la demanda de bienes normales si los ingresos de los consumidores aumentan?', + respuestaCorrecta: true, + escenario: 'La economía está creciendo y los salarios suben un 10%' + }, + { + factorId: 'precios_relacionados', + pregunta: 'Si el precio de la mantequilla sube mucho, ¿qué pasa con la demanda de margarina?', + respuestaCorrecta: true, + escenario: 'La mantequilla cuesta $10 y la margarina $5' + }, + { + factorId: 'gustos', + pregunta: 'Un influencer popular recomienda un nuevo celular. ¿Qué sucede con su demanda?', + respuestaCorrecta: true, + escenario: 'El video del influencer tiene 10 millones de views' + }, + { + factorId: 'expectativas', + pregunta: 'Se anuncia que el precio de la gasolina subirá mañana. ¿Qué pasa hoy con la demanda?', + respuestaCorrecta: true, + escenario: 'Todos los noticieros anuncian el aumento de precios' + }, + { + factorId: 'poblacion', + pregunta: 'Una nueva fábrica trae 5,000 trabajadores a una ciudad pequeña. ¿Qué pasa con la demanda de vivienda?', + respuestaCorrecta: true, + escenario: 'La población de la ciudad se duplica en un año' + }, + { + factorId: 'demografia', + pregunta: 'En un país, el 30% de la población tiene más de 60 años. ¿Qué servicios verán aumentada demanda?', + respuestaCorrecta: true, + escenario: 'La población está envejeciendo rápidamente' + } +]; + +export const FactoresDesplazanDemanda: React.FC = ({ + ejercicioId: _ejercicioId, + onComplete +}) => { + const [modo, setModo] = useState<'aprender' | 'practicar'>('aprender'); + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestas, setRespuestas] = useState([]); + const [mostrarFeedback, setMostrarFeedback] = useState(false); + const [score, setScore] = useState(0); + const [completado, setCompletado] = useState(false); + + const handleRespuesta = (respuesta: boolean) => { + const esCorrecta = respuesta === preguntas[preguntaActual].respuestaCorrecta; + setRespuestas(prev => [...prev, esCorrecta]); + setMostrarFeedback(true); + }; + + const handleSiguiente = () => { + if (preguntaActual < preguntas.length - 1) { + setPreguntaActual(prev => prev + 1); + setMostrarFeedback(false); + } else { + const correctas = respuestas.filter(r => r).length + (mostrarFeedback && respuestas.length === preguntaActual ? 1 : 0); + const puntuacion = Math.round((correctas / preguntas.length) * 100); + setScore(puntuacion); + setCompletado(true); + setTimeout(() => { + if (onComplete) { + onComplete(puntuacion); + } + }, 3000); + } + }; + + const reiniciar = () => { + setModo('aprender'); + setPreguntaActual(0); + setRespuestas([]); + setMostrarFeedback(false); + setScore(0); + setCompletado(false); + }; + + const pregunta = preguntas[preguntaActual]; + const factorActual = factores.find(f => f.id === pregunta.factorId); + const ultimaRespuestaCorrecta = respuestas[respuestas.length - 1]; + + if (completado) { + return ( +
+ + + +

¡Ejercicio Completado!

+

Has identificado correctamente {respuestas.filter(r => r).length} de {preguntas.length} factores

+
{score}/100
+

Puntuación final

+
+ ); + } + + if (modo === 'aprender') { + return ( +
+
+

Factores que Desplazan la Curva de Demanda

+

+ Estos 6 factores hacen que la curva de demanda se desplace (aumente o disminuya), + a diferencia de un movimiento a lo largo de la curva que solo el precio puede causar. +

+
+ +
+ {factores.map((factor, index) => ( + +
+
+ {factor.icono} +
+
+

{factor.nombre}

+

{factor.descripcion}

+
+ Ejemplo: {factor.ejemplo} +
+
+
+ + ))} +
+ +
+ +
+
+ ); + } + + return ( +
+
+
+

Identifica el Factor

+ Pregunta {preguntaActual + 1} de {preguntas.length} +
+
+ +
+
+ + {factorActual && ( +
+
+ {factorActual.icono} +
+ Factor: {factorActual.nombre} +
+ )} + +
+
+ Escenario: +

{pregunta.escenario}

+
+

{pregunta.pregunta}

+
+ + + {mostrarFeedback && ( + +
+
+ {ultimaRespuestaCorrecta ? ( + + ) : ( + + )} +
+

+ {ultimaRespuestaCorrecta ? '¡Correcto!' : 'Incorrecto'} +

+ {factorActual && ( +

+ {factorActual.explicacion} +

+ )} +
+
+
+ + )} + + +
+ {!mostrarFeedback ? ( + <> + + + + ) : ( + + )} +
+ + +
+ ); +}; + +export default FactoresDesplazanDemanda; diff --git a/frontend/src/components/exercises/modulo2/FactoresDesplazanOferta.tsx b/frontend/src/components/exercises/modulo2/FactoresDesplazanOferta.tsx new file mode 100644 index 0000000..0247a5e --- /dev/null +++ b/frontend/src/components/exercises/modulo2/FactoresDesplazanOferta.tsx @@ -0,0 +1,440 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { ArrowRightLeft, CheckCircle2, XCircle, Trophy, RotateCcw, Factory, DollarSign, Users, Zap, Truck, AlertTriangle } from 'lucide-react'; + +interface FactoresDesplazanOfertaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +type Direccion = 'izquierda' | 'derecha' | 'ninguna'; +type Categoria = 'tecnologia' | 'insumos' | 'competidores' | 'expectativas' | 'impuestos'; + +interface Factor { + id: number; + nombre: string; + icono: React.ReactNode; + descripcion: string; + efecto: Direccion; + explicacion: string; + categoria: Categoria; + color: string; +} + +const factores: Factor[] = [ + { + id: 1, + nombre: 'Tecnología', + icono: , + descripcion: 'Nueva maquinaria reduce el tiempo de producción a la mitad', + efecto: 'derecha', + explicacion: 'La tecnología mejora la productividad, permitiendo producir más al mismo costo. La oferta aumenta (se desplaza a la derecha).', + categoria: 'tecnologia', + color: 'blue' + }, + { + id: 2, + nombre: 'Costo de Insumos', + icono: , + descripcion: 'El precio del petróleo (materia prima) sube un 50%', + efecto: 'izquierda', + explicacion: 'Al subir los costos de producción, es menos rentable fabricar. La oferta disminuye (se desplaza a la izquierda).', + categoria: 'insumos', + color: 'red' + }, + { + id: 3, + nombre: 'Número de Vendedores', + icono: , + descripcion: 'Muchas nuevas empresas entran al mercado', + efecto: 'derecha', + explicacion: 'Más vendedores en el mercado significa más producción total. La oferta aumenta (se desplaza a la derecha).', + categoria: 'competidores', + color: 'blue' + }, + { + id: 4, + nombre: 'Expectativas', + icono: , + descripcion: 'Los productores esperan que el precio suba el próximo mes', + efecto: 'izquierda', + explicacion: 'Si esperan precios más altos mañana, retienen producción hoy. La oferta actual disminuye (se desplaza a la izquierda).', + categoria: 'expectativas', + color: 'orange' + }, + { + id: 5, + nombre: 'Impuestos', + icono: , + descripcion: 'El gobierno elimina un impuesto a la producción', + efecto: 'derecha', + explicacion: 'Sin el impuesto, los costos de producción bajan. La oferta aumenta (se desplaza a la derecha).', + categoria: 'impuestos', + color: 'blue' + }, + { + id: 6, + nombre: 'Subsidios', + icono: , + descripcion: 'El gobierno cancela un subsidio a los agricultores', + efecto: 'izquierda', + explicacion: 'Sin el subsidio, los costos de producción suben. La oferta disminuye (se desplaza a la izquierda).', + categoria: 'impuestos', + color: 'red' + } +]; + +export const FactoresDesplazanOferta: React.FC = ({ + onComplete, + ejercicioId: _ejercicioId +}) => { + const [factorActual, setFactorActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [score, setScore] = useState(0); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [completado, setCompletado] = useState(false); + + const factor = factores[factorActual]; + + const handleSeleccionar = (direccion: Direccion) => { + if (mostrarResultado) return; + setRespuestaSeleccionada(direccion); + }; + + const handleVerificar = () => { + if (!respuestaSeleccionada) return; + + const esCorrecta = respuestaSeleccionada === factor.efecto; + setMostrarResultado(true); + + if (esCorrecta) { + setScore(prev => prev + Math.round(100 / factores.length)); + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (factorActual < factores.length - 1) { + setFactorActual(prev => prev + 1); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + } else { + setCompletado(true); + if (onComplete) { + onComplete(score); + } + } + }; + + const handleReiniciar = () => { + setFactorActual(0); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + setScore(0); + setRespuestasCorrectas(0); + setCompletado(false); + }; + + const renderGrafico = () => { + const isRight = factor.efecto === 'derecha'; + + return ( + + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Curva original S1 */} + + S₁ + + {/* Curva desplazada S2 */} + + + S₂ + + + {/* Flecha de dirección */} + {mostrarResultado && ( + + )} + + {/* Defs para flecha */} + + + + + + + {/* Labels */} + Cantidad + Precio + + ); + }; + + if (completado) { + const porcentaje = Math.round((respuestasCorrectas / factores.length) * 100); + + return ( + + +

¡Ejercicio Completado!

+

Has identificado los factores que desplazan la oferta

+ +
+
{porcentaje}%
+

+ {respuestasCorrectas} de {factores.length} respuestas correctas +

+
+ +
+
+

+ {factores.filter(f => f.efecto === 'derecha').length} +

+

Aumentan oferta →

+
+
+

+ {factores.filter(f => f.efecto === 'izquierda').length} +

+

Disminuyen oferta ←

+
+
+ + + + ); + } + + return ( +
+
+
+
+ +

Factores que Desplazan la Oferta

+
+
+ + {factorActual + 1} de {factores.length} + +
+ +
+
+
+

+ Identifica en qué dirección se desplaza la curva de oferta ante cada situación. +

+
+ +
+
+ +
+
+ {factor.icono} +
+

{factor.nombre}

+
+

{factor.descripcion}

+ + +
+

¿Qué ocurre con la oferta?

+ + {(['izquierda', 'derecha'] as Direccion[]).map((direccion) => { + const isSelected = respuestaSeleccionada === direccion; + const isCorrect = mostrarResultado && direccion === factor.efecto; + const isWrong = mostrarResultado && isSelected && direccion !== factor.efecto; + + let buttonClass = 'w-full p-4 rounded-lg border-2 transition-all flex items-center gap-3 '; + + if (isCorrect) { + buttonClass += 'border-green-500 bg-green-50'; + } else if (isWrong) { + buttonClass += 'border-red-500 bg-red-50'; + } else if (isSelected) { + buttonClass += 'border-green-500 bg-green-50'; + } else { + buttonClass += 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'; + } + + return ( + handleSeleccionar(direccion)} + disabled={mostrarResultado} + whileHover={!mostrarResultado ? { scale: 1.02 } : {}} + whileTap={!mostrarResultado ? { scale: 0.98 } : {}} + className={buttonClass} + > + + → + + + {direccion === 'derecha' ? 'Aumenta (derecha)' : 'Disminuye (izquierda)'} + + {isCorrect && } + {isWrong && } + + ); + })} +
+ + + {mostrarResultado && ( + +
+ {respuestaSeleccionada === factor.efecto ? ( + + ) : ( + + )} +
+

+ {respuestaSeleccionada === factor.efecto ? '¡Correcto!' : 'Incorrecto'} +

+

{factor.explicacion}

+
+
+ + )} + + +
+ {!mostrarResultado ? ( + + ) : ( + + )} +
+
+ +
+

Visualización del Desplazamiento

+ {renderGrafico()} + +
+
+
+ S₁: Oferta original +
+
+
+ S₂: Nueva oferta +
+
+ +
+

+ Recuerda: +

+
    +
  • • → Derecha: Oferta aumenta
    • +
  • • ← Izquierda: Oferta disminuye
    • +
  • • El precio del bien NO desplaza la curva
    • +
+
+
+
+ + {/* Indicadores de progreso */} +
+ {factores.map((_, index) => ( +
+ ))} +
+
+ ); +}; + +export default FactoresDesplazanOferta; diff --git a/frontend/src/components/exercises/modulo2/FactoresElasticidad.tsx b/frontend/src/components/exercises/modulo2/FactoresElasticidad.tsx new file mode 100644 index 0000000..84bb743 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/FactoresElasticidad.tsx @@ -0,0 +1,448 @@ +import React, { useState } from 'react'; + +interface PreguntaFactor { + id: number; + pregunta: string; + opciones: string[]; + respuestaCorrecta: number; + explicacion: string; + categoria: 'sustitutos' | 'necesidad' | 'porcion' | 'tiempo' | 'definicion'; +} + +const preguntas: PreguntaFactor[] = [ + { + id: 1, + pregunta: "¿Qué sucede con la elasticidad de la demanda cuando aumenta la disponibilidad de bienes sustitutos?", + opciones: [ + "La elasticidad disminuye (se vuelve más inelástica)", + "La elasticidad aumenta (se vuelve más elástica)", + "La elasticidad no se ve afectada", + "La elasticidad se vuelve unitaria" + ], + respuestaCorrecta: 1, + explicacion: "Cuanto más sustitutos disponibles tenga un bien, más elástica será su demanda. Los consumidores pueden cambiar fácilmente a alternativas cuando el precio sube, haciendo que la cantidad demandada responda más al cambio de precio.", + categoria: 'sustitutos' + }, + { + id: 2, + pregunta: "¿Cuál de los siguientes bienes probablemente tenga la demanda más inelástica?", + opciones: [ + "Un yate de lujo", + "Agua embotellada en un día normal", + "Entradas para un concierto de una banda específica", + "Una marca particular de cereal" + ], + respuestaCorrecta: 1, + explicacion: "El agua es una necesidad básica sin sustitutos cercanos en la mayoría de situaciones. La demanda de necesidades es inelástica porque los consumidores la necesitan independientemente del precio, dentro de rangos razonables.", + categoria: 'necesidad' + }, + { + id: 3, + pregunta: "Si el precio de la sal aumenta un 50%, ¿por qué la cantidad demandada probablemente no cambie significativamente?", + opciones: [ + "Porque la sal es un lujo que todos quieren", + "Porque representa una pequeña porción del presupuesto y es una necesidad", + "Porque hay muchos sustitutos para la sal", + "Porque la ley prohíbe cambiar el consumo de sal" + ], + respuestaCorrecta: 1, + explicacion: "La sal representa una porción muy pequeña del ingreso de los consumidores y es una necesidad básica. Incluso si el precio sube mucho, el impacto económico es mínimo y no hay sustitutos directos para su función en la alimentación.", + categoria: 'porcion' + }, + { + id: 4, + pregunta: "¿Por qué la demanda de gasolina es más elástica a largo plazo que a corto plazo?", + opciones: [ + "Porque la gasolina es más barata a largo plazo", + "Porque los consumidores pueden ajustar su comportamiento (comprar autos eficientes, mudarse, etc.)", + "Porque hay más estaciones de gasolina a largo plazo", + "Porque el gobierno regula los precios a largo plazo" + ], + respuestaCorrecta: 1, + explicacion: "A corto plazo, los consumidores están 'atrapados' con sus vehículos y rutas actuales. A largo plazo, pueden hacer cambios significativos como comprar autos más eficientes, usar transporte público, mudarse más cerca del trabajo, etc., haciendo la demanda más sensible al precio.", + categoria: 'tiempo' + }, + { + id: 5, + pregunta: "¿Qué relación existe entre el lujo/necesidad y la elasticidad de la demanda?", + opciones: [ + "Los lujos tienen demanda inelástica; las necesidades tienen demanda elástica", + "Los lujos tienen demanda elástica; las necesidades tienen demanda inelástica", + "Ambos tienen la misma elasticidad", + "La elasticidad depende únicamente del precio, no del tipo de bien" + ], + respuestaCorrecta: 1, + explicacion: "Los bienes de lujo tienen demanda elástica porque son discrecionales - los consumidores pueden reducir su consumo o eliminarlo si el precio sube. Las necesidades tienen demanda inelástica porque se requieren independientemente del precio.", + categoria: 'definicion' + }, + { + id: 6, + pregunta: "Un bien representa el 30% del presupuesto mensual de una familia. ¿Qué podemos esperar sobre su elasticidad?", + opciones: [ + "Será inelástica porque representa una porción grande del presupuesto", + "Será elástica porque los cambios de precio tendrán impacto significativo", + "La elasticidad solo depende de si es necesidad o lujo", + "No se puede determinar sin más información" + ], + respuestaCorrecta: 1, + explicacion: "Cuando un bien representa una porción significativa del presupuesto, los consumidores son más sensibles a los cambios de precio. Un aumento de precio significaría un impacto sustancial en sus finanzas, por lo que buscarán alternativas o reducirán consumo, haciendo la demanda más elástica.", + categoria: 'porcion' + }, + { + id: 7, + pregunta: "¿Cuál factor NO es determinante de la elasticidad precio de la demanda?", + opciones: [ + "Disponibilidad de sustitutos", + "Naturaleza del bien (necesidad vs lujo)", + "Porción del ingreso que representa", + "El color del empaque del producto" + ], + respuestaCorrecta: 3, + explicacion: "El color del empaque puede afectar las preferencias pero no determina la elasticidad precio de la demanda. Los factores clave son: disponibilidad de sustitutos, naturaleza del bien (necesidad/lujo), porción del ingreso, y horizonte temporal (corto vs largo plazo).", + categoria: 'definicion' + }, + { + id: 8, + pregunta: "¿Por qué la demanda de medicamentos específicos para enfermedades crónicas es extremadamente inelástica?", + opciones: [ + "Porque son muy baratos", + "Porque no tienen sustitutos y son necesarios para la salud", + "Porque hay muchas marcas competidoras", + "Porque representan una pequeña porción del ingreso" + ], + respuestaCorrecta: 1, + explicacion: "Los medicamentos para enfermedades crónicas combinan dos factores de inelasticidad: son necesidades absolutas (sin ellos la salud se deteriora) y frecuentemente no tienen sustitutos terapéuticos equivalentes. Los pacientes deben comprarlos independientemente del precio.", + categoria: 'sustitutos' + } +]; + +export const FactoresElasticidad: React.FC = () => { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [resultado, setResultado] = useState<{ + correcto: boolean; + mostrarResultado: boolean; + } | null>(null); + const [puntuacion, setPuntuacion] = useState(0); + const [respondidas, setRespondidas] = useState(0); + const [mostrarResumen, setMostrarResumen] = useState(false); + + const pregunta = preguntas[preguntaActual]; + + const verificarRespuesta = (indice: number) => { + if (resultado?.mostrarResultado) return; + + setRespuestaSeleccionada(indice); + const correcto = indice === pregunta.respuestaCorrecta; + + if (correcto) { + setPuntuacion(prev => prev + 1); + } + + setResultado({ + correcto, + mostrarResultado: true + }); + + setRespondidas(prev => prev + 1); + }; + + const siguientePregunta = () => { + if (preguntaActual < preguntas.length - 1) { + setPreguntaActual(prev => prev + 1); + setRespuestaSeleccionada(null); + setResultado(null); + } else { + setMostrarResumen(true); + } + }; + + const reiniciarQuiz = () => { + setPreguntaActual(0); + setRespuestaSeleccionada(null); + setResultado(null); + setPuntuacion(0); + setRespondidas(0); + setMostrarResumen(false); + }; + + const getCategoriaIcon = (categoria: string) => { + switch (categoria) { + case 'sustitutos': + return ( + + + + ); + case 'necesidad': + return ( + + + + ); + case 'porcion': + return ( + + + + ); + case 'tiempo': + return ( + + + + ); + default: + return ( + + + + ); + } + }; + + const getCategoriaNombre = (categoria: string) => { + switch (categoria) { + case 'sustitutos': return 'Sustitutos'; + case 'necesidad': return 'Lujo vs Necesidad'; + case 'porcion': return 'Porción del Ingreso'; + case 'tiempo': return 'Horizonte Temporal'; + default: return 'Definiciones'; + } + }; + + const getCategoriaColor = (categoria: string) => { + switch (categoria) { + case 'sustitutos': return 'bg-purple-100 text-purple-700 border-purple-200'; + case 'necesidad': return 'bg-pink-100 text-pink-700 border-pink-200'; + case 'porcion': return 'bg-green-100 text-green-700 border-green-200'; + case 'tiempo': return 'bg-blue-100 text-blue-700 border-blue-200'; + default: return 'bg-gray-100 text-gray-700 border-gray-200'; + } + }; + + if (mostrarResumen) { + const porcentaje = Math.round((puntuacion / preguntas.length) * 100); + + return ( +
+
+
+ {porcentaje}% +
+ +

¡Quiz Completado!

+

+ Has respondido {puntuacion} de {preguntas.length} preguntas correctamente +

+ +
+
+ Respuestas correctas: + {puntuacion} +
+
+ Respuestas incorrectas: + {preguntas.length - puntuacion} +
+
+
+
+
+ + +
+
+ ); + } + + return ( +
+
+
+

Factores de la Elasticidad

+

Identifica cómo diferentes factores afectan la elasticidad de la demanda.

+
+
+
+

Pregunta {preguntaActual + 1} de {preguntas.length}

+

{puntuacion}/{respondidas}

+
+
+
+ +
+
+
+
+
+ +
+
+
+ {getCategoriaIcon(pregunta.categoria)} +
+
+ + {getCategoriaNombre(pregunta.categoria)} + +

{pregunta.pregunta}

+
+
+
+ +
+ {pregunta.opciones.map((opcion, indice) => ( + + ))} +
+ + {resultado?.mostrarResultado && ( +
+
+
+ {resultado.correcto ? ( + + + + ) : ( + + + + )} +
+
+

+ {resultado.correcto ? '¡Respuesta Correcta!' : 'Respuesta Incorrecta'} +

+ +
+

Explicación:

+

{pregunta.explicacion}

+
+ + {!resultado.correcto && ( +

+ La respuesta correcta es: {pregunta.opciones[pregunta.respuestaCorrecta]} +

+ )} +
+
+
+ )} + + {resultado?.mostrarResultado && ( + + )} + +
+

+ + + + Factores Clave de la Elasticidad +

+
+
+
+ + + +
+

Sustitutos

+

Más sustitutos = más elástica

+
+
+
+ + + +
+

Necesidad

+

Necesidades = inelástica

+
+
+
+ + + +
+

Porción

+

% mayor del ingreso = más elástica

+
+
+
+ + + +
+

Tiempo

+

Largo plazo = más elástica

+
+
+
+
+ ); +}; + +export default FactoresElasticidad; diff --git a/frontend/src/components/exercises/modulo2/LeyDemandaQuiz.tsx b/frontend/src/components/exercises/modulo2/LeyDemandaQuiz.tsx new file mode 100644 index 0000000..221a5f1 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/LeyDemandaQuiz.tsx @@ -0,0 +1,244 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { HelpCircle, Check, X, ArrowRight, Trophy } from 'lucide-react'; + +interface LeyDemandaQuizProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Pregunta { + id: number; + pregunta: string; + opciones: string[]; + correcta: number; + explicacion: string; +} + +const preguntas: Pregunta[] = [ + { + id: 1, + pregunta: "¿Qué sucede con la cantidad demandada cuando el precio de un bien aumenta?", + opciones: [ + "Aumenta proporcionalmente", + "Disminuye (ley de la demanda)", + "Se mantiene constante", + "Depende del tipo de bien" + ], + correcta: 1, + explicacion: "Según la Ley de la Demanda, existe una relación inversa entre precio y cantidad demandada: cuando el precio sube, la cantidad demandada baja." + }, + { + id: 2, + pregunta: "¿Cuál es la forma típica de la curva de demanda?", + opciones: [ + "Línea horizontal", + "Línea vertical", + "Pendiente descendente (de izquierda a derecha)", + "Pendiente ascendente" + ], + correcta: 2, + explicacion: "La curva de demanda tiene pendiente descendente porque a precios más bajos, los consumidores están dispuestos a comprar más cantidad." + }, + { + id: 3, + pregunta: "Si el precio del helado baja de $5 a $3, ¿qué esperamos que ocurra?", + opciones: [ + "La gente comprará menos helado", + "No cambiará la cantidad demandada", + "La gente comprará más helado", + "Solo los ricos comprarán helado" + ], + correcta: 2, + explicacion: "Una disminución en el precio genera un aumento en la cantidad demandada (movimiento a lo largo de la curva)." + }, + { + id: 4, + pregunta: "¿Qué representa el eje vertical (Y) en un gráfico de demanda?", + opciones: [ + "Cantidad demandada", + "Precio del bien", + "Ingreso de los consumidores", + "Tiempo" + ], + correcta: 1, + explicacion: "En un gráfico de demanda estándar, el eje Y representa el Precio y el eje X representa la Cantidad." + }, + { + id: 5, + pregunta: "Complete: 'A mayor precio, ______ cantidad demandada'", + opciones: [ + "Mayor", + "Menor", + "Igual", + "No hay relación" + ], + correcta: 1, + explicacion: "La ley de la demanda establece que a mayor precio, menor cantidad demandada (relación inversa)." + } +]; + +export const LeyDemandaQuiz: React.FC = ({ ejercicioId: _ejercicioId, onComplete }) => { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [mostrarFeedback, setMostrarFeedback] = useState(false); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [completado, setCompletado] = useState(false); + + const pregunta = preguntas[preguntaActual]; + const esCorrecta = respuestaSeleccionada === pregunta.correcta; + + const handleSeleccionar = (index: number) => { + if (mostrarFeedback) return; + setRespuestaSeleccionada(index); + }; + + const handleValidar = () => { + if (respuestaSeleccionada === null) return; + + setMostrarFeedback(true); + if (esCorrecta) { + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (preguntaActual < preguntas.length - 1) { + setPreguntaActual(prev => prev + 1); + setRespuestaSeleccionada(null); + setMostrarFeedback(false); + } else { + const puntuacion = Math.round((respuestasCorrectas + (esCorrecta ? 1 : 0)) / preguntas.length * 100); + setCompletado(true); + if (onComplete) { + onComplete(puntuacion); + } + } + }; + + const calcularProgreso = () => ((preguntaActual + 1) / preguntas.length) * 100; + + if (completado) { + const puntuacionFinal = Math.round(respuestasCorrectas / preguntas.length * 100); + return ( +
+ + + +

¡Quiz Completado!

+

Has respondido {respuestasCorrectas} de {preguntas.length} preguntas correctamente

+
{puntuacionFinal}/100
+

Puntuación final

+
+ ); + } + + return ( +
+
+
+

Quiz: Ley de la Demanda

+ Pregunta {preguntaActual + 1} de {preguntas.length} +
+
+ +
+
+ +
+

{pregunta.pregunta}

+
+ {pregunta.opciones.map((opcion, index) => ( + handleSeleccionar(index)} + disabled={mostrarFeedback} + whileHover={!mostrarFeedback ? { scale: 1.02 } : {}} + whileTap={!mostrarFeedback ? { scale: 0.98 } : {}} + className={`w-full p-4 rounded-lg border-2 text-left transition-all ${ + respuestaSeleccionada === index + ? mostrarFeedback + ? index === pregunta.correcta + ? 'border-green-500 bg-green-50' + : 'border-red-500 bg-red-50' + : 'border-blue-500 bg-blue-50' + : mostrarFeedback && index === pregunta.correcta + ? 'border-green-500 bg-green-50' + : 'border-gray-200 hover:border-blue-300' + }`} + > +
+ {opcion} + {mostrarFeedback && index === pregunta.correcta && ( + + )} + {mostrarFeedback && respuestaSeleccionada === index && index !== pregunta.correcta && ( + + )} +
+ + ))} +
+
+ + + {mostrarFeedback && ( + +
+
+ {esCorrecta ? ( + + ) : ( + + )} +
+

+ {esCorrecta ? '¡Correcto!' : 'Incorrecto'} +

+

+ {pregunta.explicacion} +

+
+
+
+ + )} + + +
+ {!mostrarFeedback ? ( + + ) : ( + + )} +
+
+ ); +}; + +export default LeyDemandaQuiz; diff --git a/frontend/src/components/exercises/modulo2/LeyOfertaQuiz.tsx b/frontend/src/components/exercises/modulo2/LeyOfertaQuiz.tsx new file mode 100644 index 0000000..ba897b1 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/LeyOfertaQuiz.tsx @@ -0,0 +1,340 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { TrendingUp, CheckCircle2, XCircle, Trophy, RotateCcw, BookOpen, ArrowRight, ArrowLeft } from 'lucide-react'; + +interface LeyOfertaQuizProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Pregunta { + id: number; + pregunta: string; + opciones: string[]; + respuestaCorrecta: number; + explicacion: string; +} + +const preguntas: Pregunta[] = [ + { + id: 1, + pregunta: 'Según la Ley de la Oferta, ¿qué ocurre cuando el precio de un bien aumenta?', + opciones: [ + 'Los productores ofrecen menos cantidad', + 'Los productores ofrecen más cantidad', + 'La cantidad ofrecida no cambia', + 'La demanda aumenta' + ], + respuestaCorrecta: 1, + explicacion: 'La Ley de la Oferta establece que existe una relación directa entre precio y cantidad ofrecida: cuando sube el precio, los productores quieren vender más.' + }, + { + id: 2, + pregunta: '¿Por qué la curva de oferta tiene pendiente positiva?', + opciones: [ + 'Porque a mayor precio, mayor es el costo de producción', + 'Porque los consumidores compran más cuando bajan los precios', + 'Porque a mayor precio, más rentable es producir y vender', + 'Porque el gobierno lo establece así' + ], + respuestaCorrecta: 2, + explicacion: 'La pendiente positiva refleja que a precios más altos, la producción es más rentable, incentivando a los productores a ofrecer más cantidad.' + }, + { + id: 3, + pregunta: 'Un agricultor vende manzanas. Si el precio pasa de $2 a $4 por kg, ¿qué esperamos?', + opciones: [ + 'Venderá la misma cantidad de siempre', + 'Querrá vender menos porque es más caro', + 'Querrá vender más manzanas al mercado', + 'Dejará de vender manzanas' + ], + respuestaCorrecta: 2, + explicacion: 'Al duplicar el precio, el agricultor tiene más incentivo para llevar más manzanas al mercado, aumentando su oferta.' + }, + { + id: 4, + pregunta: '¿Cuál de los siguientes es un movimiento A LO LARGO de la curva de oferta?', + opciones: [ + 'Mejora tecnológica que reduce costos', + 'Aumento del precio del petróleo (insumo)', + 'Subida del precio del bien, aumentando cantidad ofrecida', + 'Entrada de nuevos competidores al mercado' + ], + respuestaCorrecta: 2, + explicacion: 'El movimiento a lo largo de la curva ocurre solo cuando cambia el precio del propio bien. Los otros factores desplazan toda la curva.' + }, + { + id: 5, + pregunta: 'La relación precio-cantidad ofrecida es:', + opciones: [ + 'Inversa (negativa)', + 'Directa (positiva)', + 'No existe relación', + 'Depende del tipo de bien' + ], + respuestaCorrecta: 1, + explicacion: 'La relación es directa o positiva: a mayor precio, mayor cantidad ofrecida. Esto es lo opuesto a la demanda, que tiene relación inversa.' + } +]; + +export const LeyOfertaQuiz: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [preguntaActual, setPreguntaActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [score, setScore] = useState(0); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [completado, setCompletado] = useState(false); + + const pregunta = preguntas[preguntaActual]; + + const handleSeleccionar = (index: number) => { + if (mostrarResultado) return; + setRespuestaSeleccionada(index); + }; + + const handleVerificar = () => { + if (respuestaSeleccionada === null) return; + + const esCorrecta = respuestaSeleccionada === pregunta.respuestaCorrecta; + setMostrarResultado(true); + + if (esCorrecta) { + setScore(prev => prev + Math.round(100 / preguntas.length)); + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (preguntaActual < preguntas.length - 1) { + setPreguntaActual(prev => prev + 1); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + } else { + setCompletado(true); + if (onComplete) { + onComplete(score); + } + } + }; + + const handleReiniciar = () => { + setPreguntaActual(0); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + setScore(0); + setRespuestasCorrectas(0); + setCompletado(false); + }; + + if (completado) { + const porcentaje = Math.round((respuestasCorrectas / preguntas.length) * 100); + + return ( + + +

¡Quiz Completado!

+

Has demostrado tu comprensión de la Ley de la Oferta

+ +
+
{porcentaje}%
+

+ {respuestasCorrectas} de {preguntas.length} respuestas correctas +

+
+ + + + ); + } + + return ( +
+
+
+
+ +

Ley de la Oferta

+
+
+ + {preguntaActual + 1} de {preguntas.length} + +
+ +
+
+
+

+ Responde las preguntas sobre la relación entre precio y cantidad ofrecida. +

+
+ +
+
+ +
+

Pregunta {pregunta.id}

+

{pregunta.pregunta}

+
+
+
+ +
+ {pregunta.opciones.map((opcion, index) => { + const isSelected = respuestaSeleccionada === index; + const isCorrect = mostrarResultado && index === pregunta.respuestaCorrecta; + const isWrong = mostrarResultado && isSelected && index !== pregunta.respuestaCorrecta; + + let buttonClass = 'w-full p-4 rounded-lg border-2 text-left transition-all flex items-center gap-3 '; + + if (isCorrect) { + buttonClass += 'border-green-500 bg-green-50'; + } else if (isWrong) { + buttonClass += 'border-red-500 bg-red-50'; + } else if (isSelected) { + buttonClass += 'border-green-500 bg-green-50'; + } else { + buttonClass += 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'; + } + + return ( + handleSeleccionar(index)} + disabled={mostrarResultado} + whileHover={!mostrarResultado ? { scale: 1.01 } : {}} + whileTap={!mostrarResultado ? { scale: 0.99 } : {}} + className={buttonClass} + > + + {String.fromCharCode(65 + index)} + + + {opcion} + + {isCorrect && } + {isWrong && } + + ); + })} +
+ + + {mostrarResultado && ( + +
+ {respuestaSeleccionada === pregunta.respuestaCorrecta ? ( + + ) : ( + + )} +
+

+ {respuestaSeleccionada === pregunta.respuestaCorrecta ? '¡Correcto!' : 'Incorrecto'} +

+

{pregunta.explicacion}

+
+
+ + )} + + +
+ {!mostrarResultado ? ( + + ) : ( + + )} +
+ +
+ + +
+ {preguntas.map((_, index) => ( +
+ ))} +
+ + +
+
+ ); +}; + +export default LeyOfertaQuiz; diff --git a/frontend/src/components/exercises/modulo2/OfertaCortoLargoPlazo.tsx b/frontend/src/components/exercises/modulo2/OfertaCortoLargoPlazo.tsx new file mode 100644 index 0000000..0954d55 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/OfertaCortoLargoPlazo.tsx @@ -0,0 +1,443 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Clock, CheckCircle2, XCircle, Trophy, RotateCcw, TrendingUp, AlertCircle, BookOpen } from 'lucide-react'; + +interface OfertaCortoLargoPlazoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + tipo: 'corto' | 'largo'; + descripcion: string; + tiempo: string; + opciones: string[]; + respuestaCorrecta: number; + explicacion: string; +} + +const escenarios: Escenario[] = [ + { + id: 1, + tipo: 'corto', + descripcion: 'El precio del café sube de $5 a $10 por libra. Los agricultores tienen 1 mes para reaccionar.', + tiempo: 'Plazo: 1 mes', + opciones: [ + 'Pueden plantar más árboles de café y aumentar significativamente la producción', + 'Solo pueden cosechar más del cultivo existente, aumento limitado de oferta', + 'La oferta no cambia en absoluto', + 'Pueden contratar más trabajadores inmediatamente y duplicar la producción' + ], + respuestaCorrecta: 1, + explicacion: 'En el corto plazo, los agricultores no pueden plantar nuevos árboles (toman 3-4 años en producir). Solo pueden cosechar más del cultivo existente, por lo que el aumento de oferta es limitado.' + }, + { + id: 2, + tipo: 'largo', + descripcion: 'El precio del café se mantiene alto a $10 por libra durante 5 años. Los agricultores pueden planificar a futuro.', + tiempo: 'Plazo: 5 años', + opciones: [ + 'La oferta permanece igual que al inicio', + 'Solo pueden vender lo que ya tenían almacenado', + 'Pueden plantar nuevos árboles, expandir fincas y aumentar significativamente la oferta', + 'El gobierno controla cuánto pueden producir' + ], + respuestaCorrecta: 2, + explicacion: 'En el largo plazo, los agricultores pueden hacer todo: plantar nuevos árboles, comprar más tierra, invertir en tecnología. La oferta es mucho más elástica.' + }, + { + id: 3, + tipo: 'corto', + descripcion: 'Una fábrica de autos recibe un pedido urgente. Necesita aumentar la producción esta semana.', + tiempo: 'Plazo: 1 semana', + opciones: [ + 'Puede construir una nueva planta de producción rápidamente', + 'Solo puede aumentar turnos existentes y usar inventarios, aumento limitado', + 'Puede contratar y entrenar a 500 nuevos trabajadores en 2 días', + 'La producción se duplica automáticamente' + ], + respuestaCorrecta: 1, + explicacion: 'En el corto plazo, la fábrica no puede construir nuevas instalaciones. Solo puede aumentar turnos, usar inventarios o pedir horas extras. La capacidad de aumentar oferta es limitada.' + }, + { + id: 4, + tipo: 'largo', + descripcion: 'La demanda de software crece constantemente durante 3 años. Las empresas tecnológicas responden.', + tiempo: 'Plazo: 3 años', + opciones: [ + 'No pueden hacer nada, la oferta de programadores es fija', + 'Pueden contratar algunos freelancers temporalmente', + 'Pueden contratar y formar programadores, expandir oficinas, adaptar toda su capacidad', + 'El precio sube pero la cantidad ofrecida no cambia' + ], + respuestaCorrecta: 2, + explicacion: 'En el largo plazo, las empresas pueden formar nuevos programadores (universidades, bootcamps), abrir oficinas en nuevas ciudades, adaptar completamente su capacidad productiva.' + }, + { + id: 5, + tipo: 'corto', + descripcion: 'Un huracán destruye refinerías de petróleo. El precio sube. ¿Qué pueden hacer otras refinerías?', + tiempo: 'Plazo: Inmediato', + opciones: [ + 'Construir nuevas refinerías en un mes', + 'Operar al máximo de su capacidad existente, aumento muy limitado', + 'Descubrir petróleo nuevo en semanas', + 'La oferta de petróleo es infinitamente elástica' + ], + respuestaCorrecta: 1, + explicacion: 'Las refinerías existentes ya operan cerca de su capacidad máxima. En el corto plazo no pueden construir nuevas instalaciones (toma años). Solo pueden intentar operar al máximo.' + } +]; + +export const OfertaCortoLargoPlazo: React.FC = ({ + onComplete, + ejercicioId: _ejercicioId +}) => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [respuestaSeleccionada, setRespuestaSeleccionada] = useState(null); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [score, setScore] = useState(0); + const [respuestasCorrectas, setRespuestasCorrectas] = useState(0); + const [completado, setCompletado] = useState(false); + + const escenario = escenarios[escenarioActual]; + + const handleSeleccionar = (index: number) => { + if (mostrarResultado) return; + setRespuestaSeleccionada(index); + }; + + const handleVerificar = () => { + if (respuestaSeleccionada === null) return; + + const esCorrecta = respuestaSeleccionada === escenario.respuestaCorrecta; + setMostrarResultado(true); + + if (esCorrecta) { + setScore(prev => prev + Math.round(100 / escenarios.length)); + setRespuestasCorrectas(prev => prev + 1); + } + }; + + const handleSiguiente = () => { + if (escenarioActual < escenarios.length - 1) { + setEscenarioActual(prev => prev + 1); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + } else { + setCompletado(true); + if (onComplete) { + onComplete(score); + } + } + }; + + const handleReiniciar = () => { + setEscenarioActual(0); + setRespuestaSeleccionada(null); + setMostrarResultado(false); + setScore(0); + setRespuestasCorrectas(0); + setCompletado(false); + }; + + if (completado) { + const porcentaje = Math.round((respuestasCorrectas / escenarios.length) * 100); + + return ( + + +

¡Ejercicio Completado!

+

Has comprendido la elasticidad temporal de la oferta

+ +
+
{porcentaje}%
+

+ {respuestasCorrectas} de {escenarios.length} respuestas correctas +

+
+ +
+
+ +

Corto Plazo

+

Oferta inelástica

+
+
+ +

Largo Plazo

+

Oferta más elástica

+
+
+ + + + ); + } + + return ( +
+
+
+
+ +

Oferta: Corto vs Largo Plazo

+
+
+ + {escenario.tipo === 'corto' ? 'CORTO PLAZO' : 'LARGO PLAZO'} + + + {escenarioActual + 1} de {escenarios.length} + +
+ +
+
+
+

+ Determina si el escenario describe el corto plazo (oferta inelástica) o largo plazo (oferta elástica). +

+
+ +
+
+ +
+ +
+

+ Escenario {escenario.id} +

+

+ {escenario.tiempo} +

+

{escenario.descripcion}

+
+
+ + +
+ {escenario.opciones.map((opcion, index) => { + const isSelected = respuestaSeleccionada === index; + const isCorrect = mostrarResultado && index === escenario.respuestaCorrecta; + const isWrong = mostrarResultado && isSelected && index !== escenario.respuestaCorrecta; + + let buttonClass = 'w-full p-4 rounded-lg border-2 text-left transition-all '; + + if (isCorrect) { + buttonClass += 'border-green-500 bg-green-50'; + } else if (isWrong) { + buttonClass += 'border-red-500 bg-red-50'; + } else if (isSelected) { + buttonClass += 'border-green-500 bg-green-50'; + } else { + buttonClass += 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'; + } + + return ( + handleSeleccionar(index)} + disabled={mostrarResultado} + whileHover={!mostrarResultado ? { scale: 1.01 } : {}} + whileTap={!mostrarResultado ? { scale: 0.99 } : {}} + className={buttonClass} + > +
+ + {String.fromCharCode(65 + index)} + + + {opcion} + + {isCorrect && } + {isWrong && } +
+ + ); + })} +
+ + + {mostrarResultado && ( + +
+ {respuestaSeleccionada === escenario.respuestaCorrecta ? ( + + ) : ( + + )} +
+

+ {respuestaSeleccionada === escenario.respuestaCorrecta ? '¡Correcto!' : 'Incorrecto'} +

+

{escenario.explicacion}

+
+
+ + )} + + +
+ {!mostrarResultado ? ( + + ) : ( + + )} +
+
+ +
+ {/* Gráfico de elasticidad */} +
+

Elasticidad de la Oferta

+ + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Curva corto plazo (más vertical) */} + + CP + + {/* Curva largo plazo (más horizontal) */} + + LP + + {/* Labels */} + Cantidad + Precio + + +
+
+
+ Corto plazo: inelástica +
+
+
+ Largo plazo: elástica +
+
+
+ + {/* Info boxes */} +
+
+ +

Corto Plazo

+
+
    +
  • • Algunos factores son fijos
    • +
  • • Difícil cambiar capacidad
    • +
  • • Oferta poco sensible a precios
    • +
+
+ +
+
+ +

Largo Plazo

+
+
    +
  • • Todos los factores son variables
    • +
  • • Pueden expandir capacidad
    • +
  • • Oferta muy sensible a precios
    • +
+
+
+
+ + {/* Indicadores de progreso */} +
+ {escenarios.map((_, index) => ( +
+ ))} +
+
+ ); +}; + +export default OfertaCortoLargoPlazo; diff --git a/frontend/src/components/exercises/modulo2/PrecioMaximoTecho.tsx b/frontend/src/components/exercises/modulo2/PrecioMaximoTecho.tsx new file mode 100644 index 0000000..cd893c8 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/PrecioMaximoTecho.tsx @@ -0,0 +1,412 @@ +import React, { useState, useMemo } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { ArrowDown, AlertTriangle, Home, Scale, Info, CheckCircle2, XCircle } from 'lucide-react'; + +interface PrecioMaximoTechoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + nombre: string; + descripcion: string; + pe: number; + qe: number; + pmax: number; + contexto: string; + consecuencias: string[]; + icono: React.ReactNode; +} + +const escenarios: Escenario[] = [ + { + id: 1, + nombre: "Control de Alquileres", + descripcion: "El gobierno establece un precio máximo de $600 para apartamentos cuando el equilibrio está en $800.", + pe: 800, + qe: 50, + pmax: 600, + contexto: "Mercado de vivienda en alquiler", + consecuencias: [ + "Escasez de apartamentos disponibles", + "Listas de espera cada vez más largas", + "Deterioro de la calidad de las viviendas", + "Mercado negro de alquileres" + ], + icono: + }, + { + id: 2, + nombre: "Gasolina Subsidiada", + descripcion: "El precio de la gasolina se congela en $3/galón cuando el precio de mercado es $5/galón.", + pe: 5, + qe: 100, + pmax: 3, + contexto: "Mercado de combustibles", + consecuencias: [ + "Largas filas en gasolineras", + "Desabastecimiento periódico", + "Contrabando de combustible", + "Inversión insuficiente en refinación" + ], + icono: + }, + { + id: 3, + nombre: "Medicamentos Esenciales", + descripcion: "Precio máximo en medicamentos básicos: $20 cuando cuestan $35 producirlos.", + pe: 35, + qe: 80, + pmax: 20, + contexto: "Mercado farmacéutico", + consecuencias: [ + "Desaparición de medicamentos del mercado", + "Reducción de la investigación", + "Mercado negro de medicinas", + "Importación irregular" + ], + icono: + } +]; + +export const PrecioMaximoTecho: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [respuestas, setRespuestas] = useState>({}); + const [mostrarExplicacion, setMostrarExplicacion] = useState(false); + const [score, setScore] = useState(0); + + const escenario = escenarios[escenarioActual]; + + // Cálculos para el gráfico + const calcularInterseccion = (precio: number) => { + const qd = Math.max(0, escenario.qe + (escenario.pe - precio) * 2); + const qo = Math.max(0, escenario.qe - (escenario.pe - precio) * 1.5); + return { qd, qo }; + }; + + const datosGrafico = useMemo(() => { + const { qd, qo } = calcularInterseccion(escenario.pmax); + const excesoDemanda = Math.max(0, qd - qo); + return { + qd, + qo, + excesoDemanda, + cantidadTransada: Math.min(qd, qo) + }; + }, [escenario]); + + const verificarRespuesta = (hayEscasez: boolean) => { + const correcto = hayEscasez === true; + setRespuestas(prev => ({ ...prev, [escenario.id]: correcto })); + setMostrarExplicacion(true); + + if (correcto) { + setScore(prev => prev + 33); + } + + if (escenarioActual === escenarios.length - 1 && correcto) { + setTimeout(() => { + onComplete?.(Math.min(100, score + 33)); + }, 2000); + } + }; + + const siguienteEscenario = () => { + if (escenarioActual < escenarios.length - 1) { + setEscenarioActual(prev => prev + 1); + setMostrarExplicacion(false); + } + }; + + // Configuración del gráfico SVG + const width = 400; + const height = 300; + const padding = 50; + const graphWidth = width - 2 * padding; + const graphHeight = height - 2 * padding; + + const maxP = Math.max(escenario.pe, escenario.pmax) * 1.2; + const maxQ = escenario.qe * 1.5; + + const scaleX = (q: number) => padding + (q / maxQ) * graphWidth; + const scaleY = (p: number) => padding + graphHeight - (p / maxP) * graphHeight; + + // Generar puntos de curvas + const puntosDemanda = []; + const puntosOferta = []; + + for (let q = 0; q <= maxQ; q += 2) { + const pd = escenario.pe + (escenario.pe / escenario.qe) * (escenario.qe - q); + const po = escenario.pe * 0.3 + (escenario.pe / escenario.qe) * 0.7 * q; + if (pd > 0 && pd <= maxP) puntosDemanda.push({ q, p: pd }); + if (po > 0 && po <= maxP) puntosOferta.push({ q, p: po }); + } + + const pathDemanda = puntosDemanda.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.q)} ${scaleY(p.p)}` + ).join(' '); + + const pathOferta = puntosOferta.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.q)} ${scaleY(p.p)}` + ).join(' '); + + return ( +
+ {/* Header */} +
+
+
+
+ +
+
+

Precio Máximo (Techo)

+

Analiza los efectos de los controles de precios máximos

+
+
+
+ Ejercicio {escenarioActual + 1} de {escenarios.length} +
+ +
+
+
+
+ + {/* Contenido principal */} +
+ {/* Panel izquierdo: Escenario y gráfico */} +
+ {/* Tarjeta del escenario */} + +
+
+ {escenario.icono} +
+
+

{escenario.nombre}

+ {escenario.contexto} +
+
+

{escenario.descripcion}

+ + + {/* Gráfico interactivo */} +
+

+ + Análisis Gráfico +

+ + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Etiquetas */} + Cantidad + Precio + + {/* Curva de demanda */} + + D + + {/* Curva de oferta */} + + S + + {/* Punto de equilibrio */} + + E + + {/* Línea de precio máximo */} + + Pmax + + {/* Puntos de intersección con Pmax */} + + + + {/* Zona de escasez */} + {datosGrafico.excesoDemanda > 0 && ( + + + + Escasez: {datosGrafico.excesoDemanda.toFixed(1)} + + + )} + +
+
+ + {/* Panel derecho: Pregunta y consecuencias */} +
+ {/* Pregunta */} + + {!mostrarExplicacion ? ( + +

+ ¿Qué ocurrirá en este mercado con el precio máximo establecido? +

+
+ + +
+ + ) : ( + +
+ {respuestas[escenario.id] ? ( + + ) : ( + + )} +

+ {respuestas[escenario.id] ? '¡Correcto!' : 'Incorrecto'} +

+
+

+ Al fijar un precio máximo por debajo del precio de equilibrio (${escenario.pe}), + se crea una escasez porque: +

+
    +
  • + ↓ + Los productores reducen la cantidad ofrecida a {datosGrafico.qo.toFixed(1)} unidades +
    • +
  • + ↑ + Los consumidores aumentan la cantidad demandada a {datosGrafico.qd.toFixed(1)} unidades +
    • +
  • + ! + Resultado: Exceso de demanda de {datosGrafico.excesoDemanda.toFixed(1)} unidades +
    • +
+ + {escenarioActual < escenarios.length - 1 ? ( + + ) : ( +
+

¡Ejercicio completado!

+

Has analizado todos los escenarios

+
+ )} + + )} + + + {/* Consecuencias */} +
+

+ + Consecuencias Típicas +

+
    + {escenario.consecuencias.map((consecuencia, idx) => ( + + • + {consecuencia} + + ))} +
+
+
+
+
+ ); +}; + +export default PrecioMaximoTecho; diff --git a/frontend/src/components/exercises/modulo2/PrecioMinimoPiso.tsx b/frontend/src/components/exercises/modulo2/PrecioMinimoPiso.tsx new file mode 100644 index 0000000..b7d90ff --- /dev/null +++ b/frontend/src/components/exercises/modulo2/PrecioMinimoPiso.tsx @@ -0,0 +1,432 @@ +import React, { useState, useMemo } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { ArrowUp, AlertTriangle, Briefcase, Wheat, Info, CheckCircle2, XCircle } from 'lucide-react'; + +interface PrecioMinimoPisoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + nombre: string; + descripcion: string; + pe: number; + qe: number; + pmin: number; + contexto: string; + consecuencias: string[]; + icono: React.ReactNode; +} + +const escenarios: Escenario[] = [ + { + id: 1, + nombre: "Salario Mínimo", + descripcion: "El salario mínimo se fija en $15/hora cuando el equilibrio del mercado laboral está en $10/hora.", + pe: 10, + qe: 1000, + pmin: 15, + contexto: "Mercado laboral", + consecuencias: [ + "Reducción de la demanda de trabajadores", + "Aumento del desempleo", + "Beneficio para trabajadores que conservan empleo", + "Posible mercado laboral informal" + ], + icono: + }, + { + id: 2, + nombre: "Precio de Soporte Agrícola", + descripcion: "El gobierno garantiza $5/bushel de trigo cuando el precio de mercado es $3/bushel.", + pe: 3, + qe: 500, + pmin: 5, + contexto: "Mercado agrícola", + consecuencias: [ + "Superávit de producción agrícola", + "El gobierno debe comprar el exceso", + "Costos fiscales significativos", + "Posible despilfarro de recursos" + ], + icono: + }, + { + id: 3, + nombre: "Tarifa Mínima de Taxis", + descripcion: "La tarifa mínima se establece en $25 cuando el precio de equilibrio es $15 por viaje.", + pe: 15, + qe: 200, + pmin: 25, + contexto: "Mercado de transporte", + consecuencias: [ + "Menor demanda de servicios de taxi", + "Exceso de oferta (taxis vacíos)", + "Aparición de competencia informal", + "Beneficio para conductores con clientes" + ], + icono: + } +]; + +export const PrecioMinimoPiso: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [escenarioActual, setEscenarioActual] = useState(0); + const [respuestas, setRespuestas] = useState>({}); + const [mostrarExplicacion, setMostrarExplicacion] = useState(false); + const [score, setScore] = useState(0); + + const escenario = escenarios[escenarioActual]; + + // Cálculos para el gráfico + const calcularInterseccion = (precio: number) => { + const qd = Math.max(0, escenario.qe - (precio - escenario.pe) * 1.5); + const qo = Math.max(0, escenario.qe + (precio - escenario.pe) * 2); + return { qd, qo }; + }; + + const datosGrafico = useMemo(() => { + const { qd, qo } = calcularInterseccion(escenario.pmin); + const excesoOferta = Math.max(0, qo - qd); + return { + qd, + qo, + excesoOferta, + cantidadTransada: Math.min(qd, qo) + }; + }, [escenario]); + + const verificarRespuesta = (haySuperavit: boolean) => { + const correcto = haySuperavit === true; + setRespuestas(prev => ({ ...prev, [escenario.id]: correcto })); + setMostrarExplicacion(true); + + if (correcto) { + setScore(prev => prev + 33); + } + + if (escenarioActual === escenarios.length - 1 && correcto) { + setTimeout(() => { + onComplete?.(Math.min(100, score + 33)); + }, 2000); + } + }; + + const siguienteEscenario = () => { + if (escenarioActual < escenarios.length - 1) { + setEscenarioActual(prev => prev + 1); + setMostrarExplicacion(false); + } + }; + + // Configuración del gráfico SVG + const width = 400; + const height = 300; + const padding = 50; + const graphWidth = width - 2 * padding; + const graphHeight = height - 2 * padding; + + const maxP = escenario.pmin * 1.2; + const maxQ = Math.max(datosGrafico.qo, escenario.qe) * 1.3; + + const scaleX = (q: number) => padding + (q / maxQ) * graphWidth; + const scaleY = (p: number) => padding + graphHeight - (p / maxP) * graphHeight; + + // Generar puntos de curvas + const puntosDemanda = []; + const puntosOferta = []; + + for (let q = 0; q <= maxQ; q += 5) { + const pd = escenario.pe + (escenario.pe / escenario.qe) * (escenario.qe - q); + const po = escenario.pe * 0.5 + (escenario.pe / escenario.qe) * q; + if (pd > 0 && pd <= maxP) puntosDemanda.push({ q, p: pd }); + if (po > 0 && po <= maxP) puntosOferta.push({ q, p: po }); + } + + const pathDemanda = puntosDemanda.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.q)} ${scaleY(p.p)}` + ).join(' '); + + const pathOferta = puntosOferta.map((p, i) => + `${i === 0 ? 'M' : 'L'} ${scaleX(p.q)} ${scaleY(p.p)}` + ).join(' '); + + return ( +
+ {/* Header */} +
+
+
+
+ +
+
+

Precio Mínimo (Piso)

+

Analiza los efectos de los precios mínimos o precios de soporte

+
+
+
+ Ejercicio {escenarioActual + 1} de {escenarios.length} +
+ +
+
+
+
+ + {/* Contenido principal */} +
+ {/* Panel izquierdo: Escenario y gráfico */} +
+ {/* Tarjeta del escenario */} + +
+
+ {escenario.icono} +
+
+

{escenario.nombre}

+ {escenario.contexto} +
+
+

{escenario.descripcion}

+ + + {/* Gráfico interactivo */} +
+

+ + Análisis Gráfico +

+ + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Etiquetas */} + Cantidad + Precio + + {/* Curva de demanda */} + + D + + {/* Curva de oferta */} + + S + + {/* Punto de equilibrio */} + + E + + {/* Línea de precio mínimo */} + + Pmin + + {/* Puntos de intersección con Pmin */} + + + + {/* Zona de superávit */} + {datosGrafico.excesoOferta > 0 && ( + + + + Superávit: {datosGrafico.excesoOferta.toFixed(0)} + + + )} + + {/* Flechas indicadoras */} + {datosGrafico.excesoOferta > 0 && ( + + + + + + + + + )} + +
+
+ + {/* Panel derecho: Pregunta y consecuencias */} +
+ {/* Pregunta */} + + {!mostrarExplicacion ? ( + +

+ ¿Qué ocurrirá en este mercado con el precio mínimo establecido? +

+
+ + +
+ + ) : ( + +
+ {respuestas[escenario.id] ? ( + + ) : ( + + )} +

+ {respuestas[escenario.id] ? '¡Correcto!' : 'Incorrecto'} +

+
+

+ Al fijar un precio mínimo por encima del precio de equilibrio (${escenario.pe}), + se crea un superávit porque: +

+
    +
  • + ↑ + Los productores aumentan la cantidad ofrecida a {datosGrafico.qo.toFixed(0)} unidades +
    • +
  • + ↓ + Los consumidores reducen la cantidad demandada a {datosGrafico.qd.toFixed(0)} unidades +
    • +
  • + ! + Resultado: Exceso de oferta de {datosGrafico.excesoOferta.toFixed(0)} unidades +
    • +
+ + {escenarioActual < escenarios.length - 1 ? ( + + ) : ( +
+

¡Ejercicio completado!

+

Has analizado todos los escenarios

+
+ )} + + )} + + + {/* Consecuencias */} +
+

+ + Consecuencias Típicas +

+
    + {escenario.consecuencias.map((consecuencia, idx) => ( + + • + {consecuencia} + + ))} +
+
+
+
+
+ ); +}; + +export default PrecioMinimoPiso; diff --git a/frontend/src/components/exercises/modulo2/SimuladorControles.tsx b/frontend/src/components/exercises/modulo2/SimuladorControles.tsx new file mode 100644 index 0000000..ace44a2 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/SimuladorControles.tsx @@ -0,0 +1,600 @@ +import React, { useState, useMemo } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Play, RotateCcw, TrendingDown, TrendingUp, Scale, AlertTriangle, Calculator, BarChart3 } from 'lucide-react'; + +interface SimuladorControlesProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface ResultadoSimulacion { + tipo: 'equilibrio' | 'precio-maximo' | 'precio-minimo'; + precio: number; + cantidad: number; + excesoDemanda: number; + excesoOferta: number; + pesoMuerto: number; + mensaje: string; +} + +interface EscenarioPredefinido { + id: string; + nombre: string; + descripcion: string; + tipo: 'maximo' | 'minimo' | 'libre'; + precio: number; + pe: number; + qe: number; +} + +const escenariosPredefinidos: EscenarioPredefinido[] = [ + { + id: 'libre', + nombre: "Mercado Libre", + descripcion: "Sin intervención gubernamental", + tipo: 'libre', + precio: 0, + pe: 50, + qe: 100 + }, + { + id: 'rent-control', + nombre: "Control de Alquileres", + descripcion: "Precio máximo de $35 (equilibrio: $50)", + tipo: 'maximo', + precio: 35, + pe: 50, + qe: 100 + }, + { + id: 'salario-minimo', + nombre: "Salario Mínimo", + descripcion: "Precio mínimo de $65 (equilibrio: $50)", + tipo: 'minimo', + precio: 65, + pe: 50, + qe: 100 + } +]; + +export const SimuladorControles: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [escenarioActivo, setEscenarioActivo] = useState(null); + const [precioControl, setPrecioControl] = useState(50); + const [tipoControl, setTipoControl] = useState<'maximo' | 'minimo' | null>(null); + const [historial, setHistorial] = useState([]); + const [score, setScore] = useState(0); + + const pe = 50; // Precio de equilibrio + const qe = 100; // Cantidad de equilibrio + + // Funciones de demanda y oferta lineales + const calcularCantidades = (p: number) => { + // Demanda: Qd = 150 - 1*P (pendiente negativa) + const qd = Math.max(0, 150 - p); + // Oferta: Qo = 0 + 2*P (pendiente positiva) + const qo = Math.max(0, 2 * p); + return { qd, qo }; + }; + + const resultado = useMemo((): ResultadoSimulacion => { + if (!tipoControl) { + return { + tipo: 'equilibrio', + precio: pe, + cantidad: qe, + excesoDemanda: 0, + excesoOferta: 0, + pesoMuerto: 0, + mensaje: 'Mercado en equilibrio libre' + }; + } + + const { qd, qo } = calcularCantidades(precioControl); + const cantidadTransada = Math.min(qd, qo); + const excesoDemanda = Math.max(0, qd - qo); + const excesoOferta = Math.max(0, qo - qd); + + // Calcular pérdida de peso muerto (triángulo) + const base = qe - cantidadTransada; + const altura = tipoControl === 'maximo' + ? pe - precioControl + : precioControl - pe; + const pesoMuerto = 0.5 * base * altura; + + if (tipoControl === 'maximo' && precioControl < pe) { + return { + tipo: 'precio-maximo', + precio: precioControl, + cantidad: cantidadTransada, + excesoDemanda, + excesoOferta: 0, + pesoMuerto: Math.max(0, pesoMuerto), + mensaje: `Precio máximo crea escasez de ${excesoDemanda.toFixed(1)} unidades` + }; + } + + if (tipoControl === 'minimo' && precioControl > pe) { + return { + tipo: 'precio-minimo', + precio: precioControl, + cantidad: cantidadTransada, + excesoDemanda: 0, + excesoOferta, + pesoMuerto: Math.max(0, pesoMuerto), + mensaje: `Precio mínimo crea superávit de ${excesoOferta.toFixed(1)} unidades` + }; + } + + return { + tipo: 'equilibrio', + precio: precioControl, + cantidad: Math.min(qd, qo), + excesoDemanda: 0, + excesoOferta: 0, + pesoMuerto: 0, + mensaje: tipoControl === 'maximo' + ? 'El precio máximo no es restrictivo (está por encima del equilibrio)' + : 'El precio mínimo no es restrictivo (está por debajo del equilibrio)' + }; + }, [precioControl, tipoControl]); + + const aplicarEscenario = (escenario: EscenarioPredefinido) => { + setEscenarioActivo(escenario.id); + + if (escenario.tipo === 'libre') { + setTipoControl(null); + setPrecioControl(escenario.pe); + } else { + setTipoControl(escenario.tipo); + setPrecioControl(escenario.precio); + } + + // Agregar al historial + const nuevoResultado: ResultadoSimulacion = { + tipo: escenario.tipo === 'libre' ? 'equilibrio' : escenario.tipo === 'maximo' ? 'precio-maximo' : 'precio-minimo', + precio: escenario.tipo === 'libre' ? escenario.pe : escenario.precio, + cantidad: escenario.qe, + excesoDemanda: escenario.tipo === 'maximo' ? 30 : 0, + excesoOferta: escenario.tipo === 'minimo' ? 30 : 0, + pesoMuerto: escenario.tipo === 'libre' ? 0 : 225, + mensaje: escenario.nombre + }; + + setHistorial(prev => [...prev.slice(-2), nuevoResultado]); + + if (score < 100) { + setScore(prev => Math.min(100, prev + 25)); + } + + if (historial.length >= 2) { + setTimeout(() => { + onComplete?.(100); + }, 2000); + } + }; + + const reset = () => { + setEscenarioActivo(null); + setTipoControl(null); + setPrecioControl(50); + setHistorial([]); + setScore(0); + }; + + // Configuración del gráfico SVG + const width = 450; + const height = 350; + const padding = 50; + const graphWidth = width - 2 * padding; + const graphHeight = height - 2 * padding; + + const maxP = 80; + const maxQ = 150; + + const scaleX = (q: number) => padding + (q / maxQ) * graphWidth; + const scaleY = (p: number) => padding + graphHeight - (p / maxP) * graphHeight; + + // Puntos para curvas + const puntosDemanda = []; + const puntosOferta = []; + + for (let p = 0; p <= maxP; p += 2) { + const { qd, qo } = calcularCantidades(p); + puntosDemanda.push({ p, q: qd }); + puntosOferta.push({ p, q: qo }); + } + + const pathDemanda = puntosDemanda + .filter(p => p.q >= 0 && p.q <= maxQ) + .map((p, i) => `${i === 0 ? 'M' : 'L'} ${scaleX(p.q)} ${scaleY(p.p)}`) + .join(' '); + + const pathOferta = puntosOferta + .filter(p => p.q >= 0 && p.q <= maxQ) + .map((p, i) => `${i === 0 ? 'M' : 'L'} ${scaleX(p.q)} ${scaleY(p.p)}`) + .join(' '); + + return ( +
+ {/* Header */} +
+
+
+ +
+
+

Simulador de Controles

+

Experimenta con diferentes controles de precio y observa las consecuencias

+
+
+
+
+ +
+ +
+
+ +
+ {/* Panel izquierdo: Escenarios */} +
+

+ + Escenarios Predefinidos +

+ + {escenariosPredefinidos.map((escenario) => ( + + ))} + + {/* Control manual */} +
+

Control Manual

+ +
+
+ + + +
+ + {tipoControl && ( +
+ + setPrecioControl(Number(e.target.value))} + className={`w-full ${ + tipoControl === 'maximo' ? 'accent-red-500' : 'accent-amber-500' + }`} + /> +
+ $10 + Equilibrio: $50 + $75 +
+
+ )} +
+
+
+ + {/* Panel central: Gráfico */} +
+

+ + Gráfico de Mercado +

+ + + {/* Grid */} + {Array.from({ length: 6 }).map((_, i) => ( + + + + + ))} + + {/* Ejes */} + + + + {/* Etiquetas */} + Cantidad + Precio ($) + + {/* Curvas */} + + D + + + S + + {/* Punto de equilibrio */} + + E ($50) + + {/* Línea de control */} + + {tipoControl && ( + + + + {tipoControl === 'maximo' ? 'Pmax' : 'Pmin'}: ${precioControl} + + + )} + + + {/* Indicadores de desequilibrio */} + + {resultado.excesoDemanda > 0 && ( + + + + Escasez + + + )} + + + + {resultado.excesoOferta > 0 && ( + + + + Superávit + + + )} + + +
+ + {/* Panel derecho: Resultados */} +
+ {/* Resultado actual */} + + +
+ {resultado.tipo === 'equilibrio' ? ( + + ) : resultado.tipo === 'precio-maximo' ? ( + + ) : ( + + )} + + {resultado.mensaje} + +
+ +
+
+ Precio: +

${resultado.precio.toFixed(0)}

+
+
+ Cantidad: +

{resultado.cantidad.toFixed(0)} un

+
+ + {resultado.excesoDemanda > 0 && ( +
+ Exceso de demanda: +

{resultado.excesoDemanda.toFixed(1)} unidades

+
+ )} + + {resultado.excesoOferta > 0 && ( +
+ Exceso de oferta: +

{resultado.excesoOferta.toFixed(1)} unidades

+
+ )} + + {resultado.pesoMuerto > 0 && ( +
+ + + Pérdida de peso muerto: + +

${resultado.pesoMuerto.toFixed(0)}

+
+ )} +
+ + + + {/* Historial */} +
+

Historial

+
+ {historial.length === 0 ? ( +

Selecciona un escenario para comenzar

+ ) : ( + historial.map((h, idx) => ( + +
{h.mensaje}
+
+ P: ${h.precio} | Q: {h.cantidad} + {h.excesoDemanda > 0 && ` | Esc: ${h.excesoDemanda.toFixed(0)}`} + {h.excesoOferta > 0 && ` | Sup: ${h.excesoOferta.toFixed(0)}`} +
+ + )) + )} +
+
+ + {/* Instrucciones */} +
+

💡 Consejos

+
    +
  • • Prueba los 3 escenarios predefinidos
    • +
  • • Observa cómo cambian las cantidades
    • +
  • • Identifica escasez vs superávit
    • +
  • • La pérdida de peso muerto es ineficiencia
    • +
+
+
+
+
+ ); +}; + +export default SimuladorControles; diff --git a/frontend/src/components/exercises/modulo2/TablaDemanda.tsx b/frontend/src/components/exercises/modulo2/TablaDemanda.tsx new file mode 100644 index 0000000..1209b88 --- /dev/null +++ b/frontend/src/components/exercises/modulo2/TablaDemanda.tsx @@ -0,0 +1,262 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Table, Check, X, Trophy, RotateCcw, Calculator } from 'lucide-react'; + +interface TablaDemandaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface FilaDemanda { + precio: number; + cantidadCorrecta: number; + cantidadUsuario: string; +} + +const datosDemanda: FilaDemanda[] = [ + { precio: 10, cantidadCorrecta: 100, cantidadUsuario: '' }, + { precio: 20, cantidadCorrecta: 80, cantidadUsuario: '' }, + { precio: 30, cantidadCorrecta: 60, cantidadUsuario: '' }, + { precio: 40, cantidadCorrecta: 40, cantidadUsuario: '' }, + { precio: 50, cantidadCorrecta: 20, cantidadUsuario: '' }, +]; + +export const TablaDemanda: React.FC = ({ + ejercicioId: _ejercicioId, + onComplete +}) => { + const [filas, setFilas] = useState(datosDemanda); + const [mostrarResultados, setMostrarResultados] = useState(false); + const [score, setScore] = useState(0); + const [intentos, setIntentos] = useState(0); + const [completado, setCompletado] = useState(false); + + const handleCantidadChange = (index: number, valor: string) => { + if (mostrarResultados) return; + const nuevasFilas = [...filas]; + nuevasFilas[index].cantidadUsuario = valor; + setFilas(nuevasFilas); + }; + + const validarRespuestas = () => { + setIntentos(prev => prev + 1); + + // Verificar que todos los campos estén llenos + const camposVacios = filas.some(fila => fila.cantidadUsuario === ''); + if (camposVacios) { + alert('Por favor completa todas las cantidades antes de validar'); + return; + } + + setMostrarResultados(true); + + // Calcular puntuación + let correctas = 0; + filas.forEach(fila => { + if (parseInt(fila.cantidadUsuario) === fila.cantidadCorrecta) { + correctas++; + } + }); + + let puntuacion = Math.round((correctas / filas.length) * 100); + // Penalización por intentos + if (intentos >= 1) puntuacion -= 10; + if (intentos >= 2) puntuacion -= 10; + puntuacion = Math.max(puntuacion, 20); + + setScore(puntuacion); + + if (correctas === filas.length) { + setCompletado(true); + setTimeout(() => { + if (onComplete) { + onComplete(puntuacion); + } + }, 2000); + } + }; + + const reiniciar = () => { + setFilas(datosDemanda.map(f => ({ ...f, cantidadUsuario: '' }))); + setMostrarResultados(false); + setScore(0); + setCompletado(false); + }; + + const handleFinalizar = () => { + if (onComplete) { + onComplete(score); + } + }; + + const tablaCompletada = filas.every(fila => fila.cantidadUsuario !== ''); + + return ( +
+
+
+
+ +

Tabla de Demanda

+ + + +

+ Completa la tabla de demanda siguiendo la ley de la demanda: a mayor precio, menor cantidad demandada. +
+ + Pista: Por cada $10 que sube el precio, la cantidad baja 20 unidades. + +

+ + +
+
+ + + + + {mostrarResultados && ( + + )} + + + + {filas.map((fila, index) => ( + + + + {mostrarResultados && ( + + )} + + ))} + +
+ Precio ($) + + Cantidad Demandada + + Resultado +
+ ${fila.precio} + + handleCantidadChange(index, e.target.value)} + disabled={mostrarResultados} + placeholder="¿Cuántas unidades?" + className={`w-full max-w-xs px-4 py-2 border-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all ${ + mostrarResultados + ? parseInt(fila.cantidadUsuario) === fila.cantidadCorrecta + ? 'border-green-500 bg-green-50' + : 'border-red-500 bg-red-50' + : 'border-gray-300 focus:border-blue-500' + }`} + /> + + {parseInt(fila.cantidadUsuario) === fila.cantidadCorrecta ? ( + + ) : ( +
+ + + {fila.cantidadCorrecta} + +
+ )} +
+
+ + + {mostrarResultados && ( + +
parseInt(f.cantidadUsuario) === f.cantidadCorrecta) + ? 'bg-green-50 border-green-200' + : 'bg-yellow-50 border-yellow-200' + }`}> +
+ {filas.every(f => parseInt(f.cantidadUsuario) === f.cantidadCorrecta) ? ( + + ) : ( + + )} + parseInt(f.cantidadUsuario) === f.cantidadCorrecta) + ? 'text-green-800' + : 'text-yellow-800' + }`}> + {filas.every(f => parseInt(f.cantidadUsuario) === f.cantidadCorrecta) + ? '¡Perfecto! Todas las respuestas son correctas' + : 'Algunas respuestas necesitan revisión'} + +
+

+ Puntuación: {score}/100 +

+ {!filas.every(f => parseInt(f.cantidadUsuario) === f.cantidadCorrecta) && ( +

+ Las cantidades correctas se muestran en verde debajo de las respuestas incorrectas. + Observa el patrón: la cantidad disminuye 20 unidades por cada aumento de $10 en el precio. +

+ )} +
+ + )} + + +
+ {!mostrarResultados ? ( + + ) : ( + <> + {!completado && ( + + )} + + + )} +
+ + {intentos > 0 && ( +
+ Intentos realizados: {intentos} +
+ )} +
+ ); +}; + +export default TablaDemanda; diff --git a/frontend/src/components/exercises/modulo2/TablaOferta.tsx b/frontend/src/components/exercises/modulo2/TablaOferta.tsx new file mode 100644 index 0000000..e88f52b --- /dev/null +++ b/frontend/src/components/exercises/modulo2/TablaOferta.tsx @@ -0,0 +1,289 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Table, Check, X, RotateCcw, Trophy, Calculator, HelpCircle } from 'lucide-react'; + +interface TablaOfertaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface FilaTabla { + precio: number; + cantidad: number | null; + respuestaCorrecta: number; +} + +const datosIniciales: FilaTabla[] = [ + { precio: 10, cantidad: null, respuestaCorrecta: 20 }, + { precio: 20, cantidad: null, respuestaCorrecta: 40 }, + { precio: 30, cantidad: null, respuestaCorrecta: 60 }, + { precio: 40, cantidad: null, respuestaCorrecta: 80 }, + { precio: 50, cantidad: null, respuestaCorrecta: 100 }, +]; + +export const TablaOferta: React.FC = ({ onComplete, ejercicioId: _ejercicioId }) => { + const [filas, setFilas] = useState(datosIniciales); + const [respuestasUsuario, setRespuestasUsuario] = useState<{[key: number]: string}>({}); + const [mostrarResultados, setMostrarResultados] = useState(false); + const [score, setScore] = useState(0); + const [intentos, setIntentos] = useState(0); + const [completado, setCompletado] = useState(false); + + const handleInputChange = (precio: number, valor: string) => { + if (mostrarResultados) return; + setRespuestasUsuario(prev => ({ + ...prev, + [precio]: valor + })); + }; + + const verificarRespuestas = () => { + let correctas = 0; + const nuevasFilas = filas.map(fila => { + const respuestaUsuario = parseInt(respuestasUsuario[fila.precio] || '0'); + const esCorrecta = respuestaUsuario === fila.respuestaCorrecta; + if (esCorrecta) correctas++; + return { + ...fila, + cantidad: respuestaUsuario + }; + }); + + setFilas(nuevasFilas); + setMostrarResultados(true); + setIntentos(prev => prev + 1); + + // Calcular puntuación + const porcentajeCorrectas = correctas / filas.length; + const bonusIntentos = intentos === 0 ? 20 : intentos === 1 ? 10 : 0; + const puntajeFinal = Math.round((porcentajeCorrectas * 80) + bonusIntentos); + + setScore(puntajeFinal); + + if (correctas === filas.length) { + setCompletado(true); + setTimeout(() => { + if (onComplete) { + onComplete(puntajeFinal); + } + }, 1500); + } + }; + + const reiniciar = () => { + setFilas(datosIniciales); + setRespuestasUsuario({}); + setMostrarResultados(false); + setScore(0); + setIntentos(0); + setCompletado(false); + }; + + const todasRespondidas = filas.every(fila => respuestasUsuario[fila.precio] !== undefined && respuestasUsuario[fila.precio] !== ''); + + return ( +
+
+
+
+ +

Completar Tabla de Oferta

+ +
+ {completado && ( + {score} pts + )} + +
+ +

+ Completa la tabla de oferta siguiendo la relación directa entre precio y cantidad. + Cuando el precio se duplica, la cantidad ofrecida también se duplica. +

+ + +
+
+ +
+

Datos del problema:

+

+ Un productor de camisetas está dispuesto a vender 20 unidades a $10 cada una. + La función de oferta es lineal: Q = 2 × P +

+
+
+
+ +
+
+ + + + + + + + + {filas.map((fila, index) => { + const respuestaUsuario = respuestasUsuario[fila.precio] || ''; + const esCorrecta = mostrarResultados && parseInt(respuestaUsuario) === fila.respuestaCorrecta; + const esIncorrecta = mostrarResultados && parseInt(respuestaUsuario) !== fila.respuestaCorrecta; + + return ( + + + + + + ); + })} + +
+
+ Precio ($) +
+ 		+
+ Cantidad Ofrecida (unidades) + +
+ 		+ Estado +
+ + ${fila.precio} + + +
+ handleInputChange(fila.precio, e.target.value)} + disabled={mostrarResultados} + placeholder="¿Cuántas unidades?" + className={` + w-full max-w-xs px-4 py-2 border-2 rounded-lg text-lg font-medium + focus:outline-none focus:ring-2 focus:ring-green-500 + ${esCorrecta ? 'border-green-500 bg-green-50 text-green-700' : ''} + ${esIncorrecta ? 'border-red-500 bg-red-50 text-red-700' : ''} + ${!mostrarResultados ? 'border-gray-300 hover:border-green-400' : ''} + `} + /> + {mostrarResultados && esIncorrecta && ( + + Correcto: {fila.respuestaCorrecta} + + )} +
+ 		+ + {mostrarResultados && ( + + {esCorrecta ? ( + + ) : ( + + )} + + )} + +
+
+ + {/* Visualización de la relación */} +
+

Patrón a seguir:

+
+
+ P = $10 + → + Q = 20 +
+ | +
+ P = $20 + → + Q = 40 +
+ | +
+ P = $30 + → + Q = 60 +
+ | + ¿Sigues el patrón? +
+
+ +
+
+ {mostrarResultados && ( + + Correctas: + {filas.filter(f => f.cantidad === f.respuestaCorrecta).length} + de {filas.length} + + )} +
+ + {!completado ? ( + + ) : ( + + +
+

¡Completado!

+

Puntuación: {score}/100

+
+ + )} +
+ + {mostrarResultados && !completado && ( + +

+ Consejo: La cantidad ofrecida siempre es el doble del precio. + Por ejemplo: si P = $40, entonces Q = 2 × 40 = 80 unidades. +

+ + )} +
+ ); +}; + +export default TablaOferta; diff --git a/frontend/src/components/exercises/modulo2/index.ts b/frontend/src/components/exercises/modulo2/index.ts index 76cf17d..867b688 100644 --- a/frontend/src/components/exercises/modulo2/index.ts +++ b/frontend/src/components/exercises/modulo2/index.ts @@ -1,3 +1,28 @@ +export { LeyDemandaQuiz } from './LeyDemandaQuiz'; +export { LeyOfertaQuiz } from './LeyOfertaQuiz'; +export { TablaDemanda } from './TablaDemanda'; +export { TablaOferta } from './TablaOferta'; +export { CurvaDemandaConstructor } from './CurvaDemandaConstructor'; +export { CurvaOfertaConstructor } from './CurvaOfertaConstructor'; +export { EquilibrioFinder } from './EquilibrioFinder'; +export { EquilibrioGrafico } from './EquilibrioGrafico'; +export { FactoresDesplazanDemanda } from './FactoresDesplazanDemanda'; +export { FactoresDesplazanOferta } from './FactoresDesplazanOferta'; +export { DesplazamientoVsMovimiento } from './DesplazamientoVsMovimiento'; +export { ExcesoDemandaEscasez } from './ExcesoDemandaEscasez'; +export { ExcesoOfertaSuperavit } from './ExcesoOfertaSuperavit'; +export { DemandaIndividualVsMercado } from './DemandaIndividualVsMercado'; +export { OfertaCortoLargoPlazo } from './OfertaCortoLargoPlazo'; +export { AjusteEquilibrio } from './AjusteEquilibrio'; +export { CambiosEquilibrio } from './CambiosEquilibrio'; +export { CalculoElasticidadPrecio } from './CalculoElasticidadPrecio'; +export { ElasticidadElasticaInelastica } from './ElasticidadElasticaInelastica'; +export { FactoresElasticidad } from './FactoresElasticidad'; +export { ElasticidadIngresoTotal } from './ElasticidadIngresoTotal'; +export { PrecioMaximoTecho } from './PrecioMaximoTecho'; +export { PrecioMinimoPiso } from './PrecioMinimoPiso'; +export { SimuladorControles } from './SimuladorControles'; +export { ControlesVidaReal } from './ControlesVidaReal'; export { ConstructorCurvas } from './ConstructorCurvas'; export { SimuladorPrecios } from './SimuladorPrecios'; export { IdentificarShocks } from './IdentificarShocks'; diff --git a/frontend/src/components/exercises/modulo3/BienesLujoNecesarios.tsx b/frontend/src/components/exercises/modulo3/BienesLujoNecesarios.tsx new file mode 100644 index 0000000..4b2e597 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/BienesLujoNecesarios.tsx @@ -0,0 +1,286 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Card, CardHeader } from '../../ui/Card'; + +interface Ejercicio { + id: number; + bien: string; + descripcion: string; + escenario: string; + elasticidad: number; + respuestaCorrecta: 'lujo' | 'necesario'; + explicacion: string; +} + +const ejercicios: Ejercicio[] = [ + { + id: 1, + bien: "Caviar", + descripcion: "Alimento de lujo", + escenario: "Cuando el ingreso aumenta 10%, el consumo de caviar aumenta 35%", + elasticidad: 3.5, + respuestaCorrecta: 'lujo', + explicacion: "Ei = 3.5 > 1, por lo que es un bien de lujo. El consumo aumenta más que proporcionalmente al ingreso." + }, + { + id: 2, + bien: "Pan", + descripcion: "Alimento básico", + escenario: "Cuando el ingreso aumenta 20%, el consumo de pan aumenta solo 6%", + elasticidad: 0.3, + respuestaCorrecta: 'necesario', + explicacion: "Ei = 0.3 (entre 0 y 1), por lo que es un bien necesario. El consumo aumenta menos que proporcionalmente al ingreso." + }, + { + id: 3, + bien: "Yates privados", + descripcion: "Embarcaciones recreativas", + escenario: "Un aumento del 15% en ingreso produce un aumento del 60% en la demanda de yates", + elasticidad: 4.0, + respuestaCorrecta: 'lujo', + explicacion: "Ei = 4.0 > 1, claramente un bien de lujo. Los bienes de lujo tienen elasticidad ingreso mayor a 1." + }, + { + id: 4, + bien: "Sal", + descripcion: "Condimento esencial", + escenario: "Aunque el ingreso aumente 50%, el consumo de sal apenas varía un 2%", + elasticidad: 0.04, + respuestaCorrecta: 'necesario', + explicacion: "Ei = 0.04 ≈ 0, típico de bienes necesarios básicos. El consumo es relativamente independiente del ingreso." + }, + { + id: 5, + bien: "Viajes en primera clase", + descripcion: "Transporte aéreo de lujo", + escenario: "El ingreso aumenta 25% y los viajes en primera clase aumentan 70%", + elasticidad: 2.8, + respuestaCorrecta: 'lujo', + explicacion: "Ei = 2.8 > 1, por lo que es un bien de lujo. Solo personas con alto ingreso pueden acceder a él." + }, + { + id: 6, + bien: "Medicinas genéricas", + descripcion: "Productos farmacéuticos básicos", + escenario: "El ingreso sube 30% pero el consumo solo aumenta 6%", + elasticidad: 0.2, + respuestaCorrecta: 'necesario', + explicacion: "Ei = 0.2 (entre 0 y 1), por lo que es un bien necesario. La salud es prioritaria independiente del ingreso." + } +]; + +interface Respuesta { + tipo: 'lujo' | 'necesario' | null; + esCorrecta: boolean | null; +} + +interface BienesLujoNecesariosProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function BienesLujoNecesarios({ ejercicioId: _ejercicioId, onComplete }: BienesLujoNecesariosProps) { + const [respuestas, setRespuestas] = useState>({}); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const seleccionarRespuesta = (ejercicioId: number, tipo: 'lujo' | 'necesario') => { + if (mostrarResultados) return; + + setRespuestas(prev => ({ + ...prev, + [ejercicioId]: { tipo, esCorrecta: null } + })); + }; + + const verificarTodo = () => { + const nuevasRespuestas: Record = {}; + + ejercicios.forEach(ej => { + const respuesta = respuestas[ej.id]; + if (respuesta?.tipo) { + nuevasRespuestas[ej.id] = { + tipo: respuesta.tipo, + esCorrecta: respuesta.tipo === ej.respuestaCorrecta + }; + } + }); + + setRespuestas(nuevasRespuestas); + setMostrarResultados(true); + + const correctas = Object.values(nuevasRespuestas).filter(r => r.esCorrecta).length; + if (onComplete) { + onComplete(Math.round((correctas / ejercicios.length) * 100)); + } + }; + + const reiniciar = () => { + setRespuestas({}); + setMostrarResultados(false); + }; + + const getCardStyle = (ejercicioId: number) => { + const respuesta = respuestas[ejercicioId]; + if (!mostrarResultados || !respuesta?.tipo) { + return 'bg-white border-gray-200'; + } + return respuesta.esCorrecta + ? 'bg-green-50 border-green-400' + : 'bg-red-50 border-red-400'; + }; + + const correctas = Object.values(respuestas).filter(r => r.esCorrecta).length; + const totalRespondidas = Object.keys(respuestas).length; + + return ( + + + +
+
+
+

Bien de Lujo

+

Ei > 1

+

+ El gasto aumenta más que proporcionalmente al ingreso. Son bienes que se consumen más a medida que las personas tienen más dinero disponible. +

+

+ Ejemplos: joyería, yates, viajes de lujo, arte +

+
+
+

Bien Necesario

+

0 < Ei < 1

+

+ El gasto aumenta menos que proporcionalmente al ingreso. Son bienes esenciales cuyo consumo no varía mucho con el ingreso. +

+

+ Ejemplos: alimentos básicos, medicinas, servicios públicos +

+
+
+ +
+ {ejercicios.map((ejercicio) => { + const respuesta = respuestas[ejercicio.id]; + + return ( +
+
+
+
+

{ejercicio.bien}

+ + {ejercicio.descripcion} + +
+ +

{ejercicio.escenario}

+ + {mostrarResultados && ( +
+

+ Ei = {ejercicio.elasticidad} +

+

+ + {ejercicio.respuestaCorrecta === 'lujo' + ? 'Bien de Lujo' + : 'Bien Necesario'} + +

+

{ejercicio.explicacion}

+
+ )} +
+ +
+ + +
+
+
+ ); + })} +
+ +
+
+ Progreso: {totalRespondidas} / {ejercicios.length} +
+ + {!mostrarResultados ? ( + + ) : ( +
+
+

Puntuación

+

+ {correctas} / {ejercicios.length} +

+
+ +
+ )} +
+ + {mostrarResultados && ( +
= ejercicios.length / 2 + ? 'bg-yellow-100 border border-yellow-300' + : 'bg-red-100 border border-red-300' + }`}> +

+ {correctas === ejercicios.length + ? '¡Excelente! Has clasificado todos los bienes correctamente.' + : correctas >= ejercicios.length / 2 + ? '¡Buen trabajo! Algunos bienes necesitan más atención.' + : 'Necesitas repasar la diferencia entre bienes de lujo y necesarios.'} +

+
+ )} +
+ + ); +} + +export default BienesLujoNecesarios; diff --git a/frontend/src/components/exercises/modulo3/BienesNormalesInferiores.tsx b/frontend/src/components/exercises/modulo3/BienesNormalesInferiores.tsx new file mode 100644 index 0000000..8a2efee --- /dev/null +++ b/frontend/src/components/exercises/modulo3/BienesNormalesInferiores.tsx @@ -0,0 +1,292 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Card, CardHeader } from '../../ui/Card'; + +interface Caso { + id: number; + bien: string; + descripcion: string; + i1: number; + i2: number; + q1: number; + q2: number; + respuestaCorrecta: 'normal' | 'inferior'; +} + +const casos: Caso[] = [ + { + id: 1, + bien: "Arroz", + descripcion: "Alimento básico de consumo diario", + i1: 1000, + i2: 1500, + q1: 20, + q2: 22, + respuestaCorrecta: 'normal' + }, + { + id: 2, + bien: "Autobuses urbanos", + descripcion: "Transporte público económico", + i1: 2000, + i2: 3000, + q1: 50, + q2: 30, + respuestaCorrecta: 'inferior' + }, + { + id: 3, + bien: "Pan blanco común", + descripcion: "Pan básico de bajo costo", + i1: 1500, + i2: 2500, + q1: 30, + q2: 15, + respuestaCorrecta: 'inferior' + }, + { + id: 4, + bien: "Leche", + descripcion: "Producto lácteo básico", + i1: 2000, + i2: 3500, + q1: 12, + q2: 18, + respuestaCorrecta: 'normal' + }, + { + id: 5, + bien: "Frijoles enlatados", + descripcion: "Versión económica vs. frescos", + i1: 3000, + i2: 5000, + q1: 20, + q2: 8, + respuestaCorrecta: 'inferior' + } +]; + +interface Respuesta { + tipo: 'normal' | 'inferior' | null; + esCorrecta: boolean | null; +} + +interface BienesNormalesInferioresProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function BienesNormalesInferiores({ ejercicioId: _ejercicioId, onComplete }: BienesNormalesInferioresProps) { + const [respuestas, setRespuestas] = useState>({}); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const calcularElasticidad = (caso: Caso) => { + const deltaQ = caso.q2 - caso.q1; + const deltaI = caso.i2 - caso.i1; + const qPromedio = (caso.q1 + caso.q2) / 2; + const iPromedio = (caso.i1 + caso.i2) / 2; + const porcentajeQ = (deltaQ / qPromedio) * 100; + const porcentajeI = (deltaI / iPromedio) * 100; + return porcentajeQ / porcentajeI; + }; + + const seleccionarRespuesta = (casoId: number, tipo: 'normal' | 'inferior') => { + if (mostrarResultados) return; + + setRespuestas(prev => ({ + ...prev, + [casoId]: { tipo, esCorrecta: null } + })); + }; + + const verificarTodo = () => { + const nuevasRespuestas: Record = {}; + + casos.forEach(caso => { + const respuesta = respuestas[caso.id]; + if (respuesta?.tipo) { + nuevasRespuestas[caso.id] = { + tipo: respuesta.tipo, + esCorrecta: respuesta.tipo === caso.respuestaCorrecta + }; + } + }); + + setRespuestas(nuevasRespuestas); + setMostrarResultados(true); + + const correctas = Object.values(nuevasRespuestas).filter(r => r.esCorrecta).length; + if (onComplete) { + onComplete(Math.round((correctas / casos.length) * 100)); + } + }; + + const reiniciar = () => { + setRespuestas({}); + setMostrarResultados(false); + }; + + const getCardStyle = (caso: Caso) => { + const respuesta = respuestas[caso.id]; + if (!mostrarResultados || !respuesta?.tipo) { + return 'bg-white border-gray-200'; + } + return respuesta.esCorrecta + ? 'bg-green-50 border-green-400' + : 'bg-red-50 border-red-400'; + }; + + const correctas = Object.values(respuestas).filter(r => r.esCorrecta).length; + const totalRespondidas = Object.keys(respuestas).length; + + return ( + + + +
+
+
+

Bien Normal

+

Ei > 0

+

+ La demanda aumenta cuando sube el ingreso +

+
+
+

Bien Inferior

+

Ei < 0

+

+ La demanda disminuye cuando sube el ingreso +

+
+
+ +
+ {casos.map((caso) => { + const elasticidad = calcularElasticidad(caso); + const respuesta = respuestas[caso.id]; + + return ( +
+
+
+

{caso.bien}

+

{caso.descripcion}

+ +
+
+ I₁ +

${caso.i1}

+
+
+ I₂ +

${caso.i2}

+
+
+ Q₁ +

{caso.q1}

+
+
+ Q₂ +

{caso.q2}

+
+
+ + {mostrarResultados && respuesta?.tipo && ( +
+

+ Ei = {elasticidad.toFixed(2)} → {' '} + 0 ? 'text-blue-600' : 'text-red-600'}> + {elasticidad > 0 ? 'Bien Normal' : 'Bien Inferior'} + +

+
+ )} +
+ +
+ + +
+
+
+ ); + })} +
+ +
+
+ Progreso: {totalRespondidas} / {casos.length} +
+ + {!mostrarResultados ? ( + + ) : ( +
+
+

Puntuación

+

+ {correctas} / {casos.length} +

+
+ +
+ )} +
+ + {mostrarResultados && ( +
= casos.length / 2 + ? 'bg-yellow-100 border border-yellow-300' + : 'bg-red-100 border border-red-300' + }`}> +

+ {correctas === casos.length + ? '¡Excelente! Has identificado todos los bienes correctamente.' + : correctas >= casos.length / 2 + ? '¡Buen trabajo! Algunos bienes necesitan más atención.' + : 'Necesitas repasar la diferencia entre bienes normales e inferiores.'} +

+
+ )} +
+ + ); +} + +export default BienesNormalesInferiores; diff --git a/frontend/src/components/exercises/modulo3/CanastaOptima.tsx b/frontend/src/components/exercises/modulo3/CanastaOptima.tsx new file mode 100644 index 0000000..eb48687 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/CanastaOptima.tsx @@ -0,0 +1,334 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Card, CardHeader } from '../../ui/Card'; + +interface CanastaOptimaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Canasta { + id: string; + nombre: string; + descripcion: string; + items: { nombre: string; cantidad: number; precio: number }[]; + utTotal: number; + esOptima: boolean; + razonamiento: string; +} + +const canastas: Canasta[] = [ + { + id: 'a', + nombre: 'Canasta A', + descripcion: 'Mayor cantidad de bienes baratos', + items: [ + { nombre: 'Manzanas 🍎', cantidad: 8, precio: 2 }, + { nombre: 'Naranjas 🍊', cantidad: 3, precio: 3 }, + ], + utTotal: 68, + esOptima: false, + razonamiento: 'Aunque tiene muchas manzanas, la UMg/P de las naranjas es mayor al inicio. No maximiza la utilidad.' + }, + { + id: 'b', + nombre: 'Canasta B', + descripcion: 'Combinación balanceada', + items: [ + { nombre: 'Manzanas 🍎', cantidad: 5, precio: 2 }, + { nombre: 'Naranjas 🍊', cantidad: 5, precio: 3 }, + ], + utTotal: 85, + esOptima: true, + razonamiento: '¡Óptima! En esta combinación, UMg/P de manzanas ≈ UMg/P de naranjas. Maximiza la utilidad dado el presupuesto de $25.' + }, + { + id: 'c', + nombre: 'Canasta C', + descripcion: 'Muchas naranjas', + items: [ + { nombre: 'Manzanas 🍎', cantidad: 2, precio: 2 }, + { nombre: 'Naranjas 🍊', cantidad: 7, precio: 3 }, + ], + utTotal: 78, + esOptima: false, + razonamiento: 'Demasiadas naranjas. La UMg de las últimas unidades es muy baja comparada con las manzanas que podría haber comprado.' + }, + { + id: 'd', + nombre: 'Canasta D', + descripcion: 'Excede el presupuesto', + items: [ + { nombre: 'Manzanas 🍎', cantidad: 6, precio: 2 }, + { nombre: 'Naranjas 🍊', cantidad: 6, precio: 3 }, + ], + utTotal: 90, + esOptima: false, + razonamiento: 'Costo total: $30. ¡Excede el presupuesto de $25! No es factible.' + } +]; + +const datosUtilidad = { + manzanas: { + um: [12, 10, 8, 6, 4, 2, 0, -2], + precio: 2 + }, + naranjas: { + um: [15, 12, 9, 6, 3, 0, -3], + precio: 3 + } +}; + +export function CanastaOptima({ ejercicioId: _ejercicioId, onComplete }: CanastaOptimaProps) { + const [canastaSeleccionada, setCanastaSeleccionada] = useState(null); + const [mostrarResultado, setMostrarResultado] = useState(false); + const [etapa, setEtapa] = useState(0); + + const presupuesto = 25; + + const handleSeleccion = (id: string) => { + setCanastaSeleccionada(id); + setMostrarResultado(false); + }; + + const verificar = () => { + setMostrarResultado(true); + const canasta = canastas.find(c => c.id === canastaSeleccionada); + if (canasta?.esOptima && onComplete) { + onComplete(100); + } + }; + + const calcularCosto = (canasta: Canasta) => { + return canasta.items.reduce((total, item) => total + item.cantidad * item.precio, 0); + }; + + return ( + + + +
+
+

Problema

+

+ Tienes un presupuesto de ${presupuesto} para gastar en manzanas y naranjas. +

+
+
+

🍎 Manzanas: $2 cada una

+

UMg: 12, 10, 8, 6, 4, 2, 0, -2

+
+
+

🍊 Naranjas: $3 cada una

+

UMg: 15, 12, 9, 6, 3, 0, -3

+
+
+
+ +
+ {canastas.map((canasta) => { + const costo = calcularCosto(canasta); + const dentroPresupuesto = costo <= presupuesto; + + return ( +
handleSeleccion(canasta.id)} + className={`p-4 rounded-lg border-2 cursor-pointer transition-all ${ + canastaSeleccionada === canasta.id + ? 'border-primary bg-blue-50' + : 'border-gray-200 hover:border-gray-300' + } ${mostrarResultado && canasta.esOptima ? 'ring-2 ring-green-500' : ''}`} + > +
+

{canasta.nombre}

+ {mostrarResultado && canasta.esOptima && ( + ÓPTIMA ✓ + )} +
+ +

{canasta.descripcion}

+ +
+ {canasta.items.map((item) => ( +
+ {item.nombre} + {item.cantidad} × ${item.precio} = ${item.cantidad * item.precio} +
+ ))} +
+ +
+
+ Costo Total: + + ${costo} {dentroPresupuesto ? '✓' : '✗'} + +
+
+ Utilidad Total: + {canasta.utTotal} +
+
+ + {mostrarResultado && ( +
+ {canasta.razonamiento} +
+ )} +
+ ); + })} +
+ +
+
+ {canastaSeleccionada && ( + <>Seleccionado: {canastas.find(c => c.id === canastaSeleccionada)?.nombre} + )} +
+ +
+ + {mostrarResultado && ( +
c.id === canastaSeleccionada)?.esOptima + ? 'bg-green-100 border border-green-300' + : 'bg-red-100 border border-red-300' + }`}> +

+ {canastas.find(c => c.id === canastaSeleccionada)?.esOptima + ? '¡Correcto! Has identificado la canasta óptima.' + : 'Incorrecto. Revisa el razonamiento de cada canasta y encuentra la que maximiza la utilidad sin exceder el presupuesto.' + } +

+
+ )} + +
+
+ {['Datos', 'Proceso', 'Análisis'].map((etapaNombre, idx) => ( + + ))} +
+ + {etapa === 0 && ( +
+

Tabla de Utilidad Marginal por Precio (UMg/P)

+
+ + + + + + + + + + + + {[1, 2, 3, 4, 5, 6, 7].map((i) => ( + + + + + + + + ))} + +
UnidadUMg ManzanaUMg/P ManzanaUMg NaranjaUMg/P Naranja
{i}{datosUtilidad.manzanas.um[i-1] || '-'} + {datosUtilidad.manzanas.um[i-1] ? (datosUtilidad.manzanas.um[i-1] / 2).toFixed(1) : '-'} + {datosUtilidad.naranjas.um[i-1] || '-'} + {datosUtilidad.naranjas.um[i-1] ? (datosUtilidad.naranjas.um[i-1] / 3).toFixed(1) : '-'} +
+
+
+ )} + + {etapa === 1 && ( +
+

Proceso de Optimización

+
+

Paso 1: Ordenar todas las unidades por UMg/P (de mayor a menor):

+
+ 1. Naranja 1: 15/3 = 5.0
+ 2. Manzana 1: 12/2 = 6.0 ✓
+ 3. Naranja 2: 12/3 = 4.0
+ 4. Manzana 2: 10/2 = 5.0
+ 5. Naranja 3: 9/3 = 3.0
+ 6. Manzana 3: 8/2 = 4.0
+ 7. Naranja 4: 6/3 = 2.0
+ 8. Manzana 4: 6/2 = 3.0
+ 9. Manzana 5: 4/2 = 2.0
+ 10. Naranja 5: 3/3 = 1.0
+ ... +
+

Paso 2: Seleccionar unidades hasta agotar el presupuesto de $25:

+
+ • Manzana 1: $2 (Total: $2)
+ • Naranja 1: $3 (Total: $5)
+ • Manzana 2: $2 (Total: $7)
+ • Naranja 2: $3 (Total: $10)
+ • Manzana 3: $2 (Total: $12)
+ • Naranja 3: $3 (Total: $15)
+ • Manzana 4: $2 (Total: $17)
+ • Naranja 4: $3 (Total: $20)
+ • Manzana 5: $2 (Total: $22)
+ • Naranja 5: $3 (Total: $25) ✓
+ Resultado: 5 manzanas + 5 naranjas = $25 +
+
+
+ )} + + {etapa === 2 && ( +
+

Análisis de la Canasta Óptima

+
+

La canasta óptima debe cumplir dos condiciones:

+
    +
  1. Agotar el presupuesto: Gastar exactamente $25
    2. +
  2. Igualar UMg/P: La utilidad marginal por peso debe ser similar para ambos bienes
    3. +
+ +
+

En la Canasta B (Óptima):

+
    +
  • 5 manzanas × $2 = $10
    • +
  • 5 naranjas × $3 = $15
    • +
  • Total: $25 ✓
    • +
  • UMg/P de última manzana: 4/2 = 2.0
    • +
  • UMg/P de última naranja: 3/3 = 1.0
    • +
+

+ Nota: En el óptimo, las UMg/P son aproximadamente iguales (diferencias pequeñas se deben a que no podemos comprar fracciones de unidades). +

+
+
+
+ )} +
+
+ + ); +} + +export default CanastaOptima; diff --git a/frontend/src/components/exercises/modulo3/ClasificacionElasticidad.tsx b/frontend/src/components/exercises/modulo3/ClasificacionElasticidad.tsx new file mode 100644 index 0000000..2bb3194 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/ClasificacionElasticidad.tsx @@ -0,0 +1,236 @@ +import { useState, useCallback } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, RotateCcw, HelpCircle, AlertCircle } from 'lucide-react'; + +interface ClasificacionElasticidadProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +type TipoElasticidad = 'elastica' | 'unitaria' | 'inelastica'; + +interface EjercicioData { + ep: number; + descripcion: string; + explicacion: string; +} + +const ejercicios: EjercicioData[] = [ + { + ep: -2.5, + descripcion: 'Un producto tiene una elasticidad precio de -2.5. ¿Cómo se clasifica?', + explicacion: '|Ep| = 2.5 > 1 → Demanda ELÁSTICA. El % de cambio en cantidad es mayor que el % de cambio en precio.', + }, + { + ep: -0.3, + descripcion: 'La elasticidad precio de un bien es -0.3. ¿Qué tipo de demanda tiene?', + explicacion: '|Ep| = 0.3 < 1 → Demanda INELÁSTICA. El % de cambio en cantidad es menor que el % de cambio en precio.', + }, + { + ep: -1.0, + descripcion: 'Un artículo tiene elasticidad precio igual a -1. ¿Cómo se clasifica?', + explicacion: '|Ep| = 1 → Demanda UNITARIA. El % de cambio en cantidad es igual al % de cambio en precio.', + }, + { + ep: -0.8, + descripcion: 'La elasticidad de un medicamento es de -0.8. ¿Qué tipo de elasticidad tiene?', + explicacion: '|Ep| = 0.8 < 1 → Demanda INELÁSTICA. Los medicamentos suelen ser inelásticos porque son necesidades básicas.', + }, + { + ep: -4.2, + descripcion: 'Un restaurante de lujo tiene elasticidad de -4.2. ¿Cómo se clasifica?', + explicacion: '|Ep| = 4.2 > 1 → Demanda ELÁSTICA. Los lujos suelen tener demanda muy elástica porque son opcionales.', + }, +]; + +export function ClasificacionElasticidad({ ejercicioId: _ejercicioId, onComplete }: ClasificacionElasticidadProps) { + const [ejercicioIndex, setEjercicioIndex] = useState(0); + const [respuesta, setRespuesta] = useState(null); + const [validado, setValidado] = useState(false); + const [aciertos, setAciertos] = useState(0); + const [completado, setCompletado] = useState(false); + + const ejercicio = ejercicios[ejercicioIndex]; + + const obtenerRespuestaCorrecta = useCallback((ep: number): TipoElasticidad => { + const valorAbs = Math.abs(ep); + if (valorAbs > 1) return 'elastica'; + if (valorAbs < 1) return 'inelastica'; + return 'unitaria'; + }, []); + + const validarRespuesta = () => { + if (!respuesta) return; + + const correcta = obtenerRespuestaCorrecta(ejercicio.ep); + const esCorrecto = respuesta === correcta; + + setValidado(true); + + if (esCorrecto) { + setAciertos((prev) => prev + 1); + } + + if (ejercicioIndex === ejercicios.length - 1) { + setCompletado(true); + if (onComplete) { + const puntuacion = Math.round((aciertos + (esCorrecto ? 1 : 0)) / ejercicios.length * 100); + onComplete(puntuacion); + } + } + }; + + const siguienteEjercicio = () => { + if (ejercicioIndex < ejercicios.length - 1) { + setEjercicioIndex((prev) => prev + 1); + setRespuesta(null); + setValidado(false); + } + }; + + const reiniciar = () => { + setEjercicioIndex(0); + setRespuesta(null); + setValidado(false); + setAciertos(0); + setCompletado(false); + }; + + const respuestaCorrecta = obtenerRespuestaCorrecta(ejercicio.ep); + + const opciones: { value: TipoElasticidad; label: string; color: string }[] = [ + { value: 'elastica', label: 'Elástica (|Ep| > 1)', color: 'bg-green-100 border-green-300 text-green-800' }, + { value: 'unitaria', label: 'Unitaria (|Ep| = 1)', color: 'bg-yellow-100 border-yellow-300 text-yellow-800' }, + { value: 'inelastica', label: 'Inelástica (|Ep| < 1)', color: 'bg-blue-100 border-blue-300 text-blue-800' }, + ]; + + return ( +
+ + + +
+
+

ELÁSTICA

+

|Ep| > 1

+

%ΔQ > %ΔP

+
+
+

UNITARIA

+

|Ep| = 1

+

%ΔQ = %ΔP

+
+
+

INELÁSTICA

+

|Ep| < 1

+

%ΔQ < %ΔP

+
+
+ +
+
+ + {ejercicioIndex + 1}/{ejercicios.length} + +

Pregunta:

+
+
+

{ejercicio.descripcion}

+

+ Ep = {ejercicio.ep} +

+
+
+ +
+ {opciones.map((opcion) => ( + + ))} +
+ + {validado && ( +
+

+ + Explicación: +

+

{ejercicio.explicacion}

+
+ )} + +
+ {!validado ? ( + + ) : ejercicioIndex < ejercicios.length - 1 ? ( + + ) : ( + + )} +
+ + {completado && ( +
+

+ ¡Completado! Has acertado {aciertos + (respuesta === respuestaCorrecta ? 1 : 0)} de{' '} + {ejercicios.length} ejercicios +

+
+ )} + + + +

Interpretación Económica:

+
    +
  • + Elástica (|Ep| > 1): Los consumidores son muy sensibles al precio. + Un cambio de precio genera un cambio proporcionalmente mayor en cantidad demandada. +
    • +
  • + Unitaria (|Ep| = 1): Sensibilidad proporcional. + El gasto total de los consumidores se mantiene constante ante cambios de precio. +
    • +
  • + Inelástica (|Ep| < 1): Los consumidores son poco sensibles al precio. + La cantidad demandada cambia menos que proporcionalmente al precio. +
    • +
+ +
+ ); +} + +export default ClasificacionElasticidad; diff --git a/frontend/src/components/exercises/modulo3/CurvaEngel.tsx b/frontend/src/components/exercises/modulo3/CurvaEngel.tsx new file mode 100644 index 0000000..78c67b1 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/CurvaEngel.tsx @@ -0,0 +1,326 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { Card, CardHeader } from '../../ui/Card'; + +interface PuntoCurva { + ingreso: number; + cantidad: number; +} + +interface Ejercicio { + id: number; + titulo: string; + descripcion: string; + bien: string; + puntos: PuntoCurva[]; + tipoBien: 'lujo' | 'necesario' | 'inferior'; +} + +const ejercicios: Ejercicio[] = [ + { + id: 1, + titulo: "Curva de Engel - Bien de Lujo", + descripcion: "La siguiente tabla muestra cómo varía el consumo de restaurantes de lujo ante diferentes niveles de ingreso mensual.", + bien: "Restaurantes de lujo", + puntos: [ + { ingreso: 1000, cantidad: 0 }, + { ingreso: 2000, cantidad: 2 }, + { ingreso: 3000, cantidad: 6 }, + { ingreso: 4000, cantidad: 12 }, + { ingreso: 5000, cantidad: 20 } + ], + tipoBien: 'lujo' + }, + { + id: 2, + titulo: "Curva de Engel - Bien Necesario", + descripcion: "La siguiente tabla muestra cómo varía el consumo de leche ante diferentes niveles de ingreso mensual.", + bien: "Leche (litros)", + puntos: [ + { ingreso: 1000, cantidad: 8 }, + { ingreso: 2000, cantidad: 10 }, + { ingreso: 3000, cantidad: 11 }, + { ingreso: 4000, cantidad: 12 }, + { ingreso: 5000, cantidad: 12.5 } + ], + tipoBien: 'necesario' + }, + { + id: 3, + titulo: "Curva de Engel - Bien Inferior", + descripcion: "La siguiente tabla muestra cómo varía el consumo de pan de bagazo ante diferentes niveles de ingreso mensual.", + bien: "Pan de bagazo (kg)", + puntos: [ + { ingreso: 1000, cantidad: 15 }, + { ingreso: 2000, cantidad: 12 }, + { ingreso: 3000, cantidad: 8 }, + { ingreso: 4000, cantidad: 4 }, + { ingreso: 5000, cantidad: 1 } + ], + tipoBien: 'inferior' + } +]; + +interface Respuesta { + tipo: string | null; + esCorrecta: boolean | null; +} + +interface CurvaEngelProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function CurvaEngel({ ejercicioId: _ejercicioId, onComplete }: CurvaEngelProps) { + const [ejercicioActual, setEjercicioActual] = useState(0); + const [respuestas, setRespuestas] = useState>({}); + const [mostrarResultados, setMostrarResultados] = useState(false); + const [calculosElasticidad, setCalculosElasticidad] = useState>({}); + + const ejercicio = ejercicios[ejercicioActual]; + + const calcularElasticidadIntervalo = (p1: PuntoCurva, p2: PuntoCurva) => { + const deltaQ = p2.cantidad - p1.cantidad; + const deltaI = p2.ingreso - p1.ingreso; + const qPromedio = (p1.cantidad + p2.cantidad) / 2; + const iPromedio = (p1.ingreso + p2.ingreso) / 2; + + if (qPromedio === 0 || iPromedio === 0) return 0; + + const porcentajeQ = (deltaQ / qPromedio) * 100; + const porcentajeI = (deltaI / iPromedio) * 100; + return porcentajeQ / porcentajeI; + }; + + const handleCalculoChange = (intervalo: number, valor: string) => { + setCalculosElasticidad(prev => ({ + ...prev, + [`${ejercicio.id}_${intervalo}`]: valor + })); + }; + + const seleccionarTipo = (tipo: string) => { + if (mostrarResultados) return; + + setRespuestas(prev => ({ + ...prev, + [ejercicio.id]: { tipo, esCorrecta: null } + })); + }; + + const verificar = () => { + const respuesta = respuestas[ejercicio.id]; + if (!respuesta?.tipo) return; + + const esCorrecta = respuesta.tipo === ejercicio.tipoBien; + + setRespuestas(prev => ({ + ...prev, + [ejercicio.id]: { ...respuesta, esCorrecta } + })); + setMostrarResultados(true); + + if (esCorrecta && ejercicioActual === ejercicios.length - 1 && onComplete) { + const totalCorrectas = Object.values(respuestas).filter(r => r.esCorrecta).length + 1; + onComplete(Math.round((totalCorrectas / ejercicios.length) * 100)); + } + }; + + const siguienteEjercicio = () => { + if (ejercicioActual < ejercicios.length - 1) { + setEjercicioActual(prev => prev + 1); + setMostrarResultados(false); + } + }; + + const reiniciar = () => { + setEjercicioActual(0); + setRespuestas({}); + setMostrarResultados(false); + setCalculosElasticidad({}); + }; + + const respuestaActual = respuestas[ejercicio.id]; + + const getTipoColor = (tipo: string) => { + switch (tipo) { + case 'lujo': return 'bg-purple-100 border-purple-300 text-purple-800'; + case 'necesario': return 'bg-yellow-100 border-yellow-300 text-yellow-800'; + case 'inferior': return 'bg-red-100 border-red-300 text-red-800'; + default: return 'bg-gray-100 border-gray-300 text-gray-800'; + } + }; + + return ( + + + +
+
+
+
+
+ +
+
+

{ejercicio.titulo}

+

{ejercicio.descripcion}

+

+ Bien analizado: {ejercicio.bien} +

+
+ +
+ + + + + + + + + + {ejercicio.puntos.map((punto, index) => ( + + + + + + ))} + +
Ingreso Mensual ($)Cantidad ConsumidaElasticidad del Intervalo
${punto.ingreso.toLocaleString()}{punto.cantidad} + {index < ejercicio.puntos.length - 1 ? ( +
+ handleCalculoChange(index, e.target.value)} + /> + {mostrarResultados && ( + + = {calcularElasticidadIntervalo(punto, ejercicio.puntos[index + 1]).toFixed(2)} + + )} +
+ ) : ( + - + )} +
+
+ +
+

+ Según el comportamiento de la curva, ¿qué tipo de bien es "{ejercicio.bien}"? +

+ +
+ {['lujo', 'necesario', 'inferior'].map((tipo) => ( + + ))} +
+ + {!mostrarResultados ? ( + + ) : ( +
+

+ {respuestaActual?.esCorrecta + ? '¡Correcto!' + : 'Incorrecto. El tipo de bien es: '} +

+ {!respuestaActual?.esCorrecta && ( +

+ Bien {ejercicio.tipoBien === 'lujo' ? 'de Lujo' : ejercicio.tipoBien} +

+ )} + +
+

Análisis:

+
    + {ejercicio.puntos.slice(0, -1).map((punto, idx) => { + const ei = calcularElasticidadIntervalo(punto, ejercicio.puntos[idx + 1]); + return ( +
  • + Intervalo ${punto.ingreso}-${ejercicio.puntos[idx + 1].ingreso}: + Ei = {ei.toFixed(2)} +
    • + ); + })} +
+
+
+ )} +
+ +
+ {ejercicioActual > 0 && ( + + )} + +
+ + {ejercicioActual < ejercicios.length - 1 ? ( + + ) : ( + + )} +
+
+ + ); +} + +export default CurvaEngel; diff --git a/frontend/src/components/exercises/modulo3/CurvasIndiferencia.tsx b/frontend/src/components/exercises/modulo3/CurvasIndiferencia.tsx new file mode 100644 index 0000000..608a5bc --- /dev/null +++ b/frontend/src/components/exercises/modulo3/CurvasIndiferencia.tsx @@ -0,0 +1,336 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Card, CardHeader } from '../../ui/Card'; + +interface CurvasIndiferenciaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Punto { + x: number; + y: number; + utilidad: number; +} + +const curvas: Punto[][] = [ + // Curva U=10: 2x + 3y = 10 + [ + { x: 0, y: 3.33, utilidad: 10 }, + { x: 2, y: 2, utilidad: 10 }, + { x: 5, y: 0, utilidad: 10 }, + ], + // Curva U=20: 2x + 3y = 20 + [ + { x: 1, y: 6, utilidad: 20 }, + { x: 4, y: 4, utilidad: 20 }, + { x: 7, y: 2, utilidad: 20 }, + { x: 10, y: 0, utilidad: 20 }, + ], + // Curva U=30: 2x + 3y = 30 + [ + { x: 0, y: 10, utilidad: 30 }, + { x: 3, y: 8, utilidad: 30 }, + { x: 6, y: 6, utilidad: 30 }, + { x: 9, y: 4, utilidad: 30 }, + { x: 12, y: 2, utilidad: 30 }, + { x: 15, y: 0, utilidad: 30 }, + ], +]; + +const puntosEjemplo = [ + { x: 2, y: 2, label: 'A', utilidad: 10 }, + { x: 4, y: 4, label: 'B', utilidad: 20 }, + { x: 6, y: 6, label: 'C', utilidad: 30 }, + { x: 3, y: 5, label: 'D', utilidad: 21 }, + { x: 8, y: 2, label: 'E', utilidad: 22 }, +]; + +export function CurvasIndiferencia({ ejercicioId: _ejercicioId, onComplete }: CurvasIndiferenciaProps) { + const [puntoSeleccionado, setPuntoSeleccionado] = useState(null); + const [mostrarPropiedades, setMostrarPropiedades] = useState(true); + const [preguntaRespuesta, setPreguntaRespuesta] = useState>({}); + const [verificado, setVerificado] = useState(false); + + const handleSeleccionPunto = (label: string) => { + setPuntoSeleccionado(label); + setVerificado(false); + }; + + const verificarRespuesta = (pregunta: string, respuestaCorrecta: string) => { + const esCorrecta = preguntaRespuesta[pregunta] === respuestaCorrecta; + setVerificado(true); + + if (esCorrecta && onComplete) { + onComplete(100); + } + + return esCorrecta; + }; + + return ( + + + +
+
+

Definición

+

+ Una curva de indiferencia muestra todas las combinaciones de dos bienes + que proporcionan al consumidor el mismo nivel de utilidad o satisfacción. + El consumidor es "indiferente" entre cualquiera de estas combinaciones. +

+
+ +
+

Mapa de Curvas de Indiferencia

+
+
+ + + + + Bien X (Unidades) + Bien Y (Unidades) + + {[0, 3, 6, 9, 12, 15].map((val) => ( + + + {val} + + ))} + + {[0, 2, 4, 6, 8, 10].map((val) => ( + + + {val} + + ))} + + {curvas.map((curva, idx) => ( + + `${50 + p.x * 26},${280 - p.y * 24}`).join(' ')} + fill="none" + stroke={['#3b82f6', '#10b981', '#f59e0b'][idx]} + strokeWidth="2" + /> + + U={curva[0].utilidad} + + + ))} + + {puntosEjemplo.map((punto) => ( + + handleSeleccionPunto(punto.label)} + /> + + {punto.label} + + + ))} + +
+ +

+ Haz clic en los puntos (A, B, C, D, E) para ver sus características. + Observa cómo las curvas más alejadas del origen representan mayor utilidad. +

+
+ + {puntoSeleccionado && ( +
+
+ Punto {puntoSeleccionado} +
+ {(() => { + const punto = puntosEjemplo.find(p => p.label === puntoSeleccionado); + if (!punto) return null; + return ( +
+

Bien X: {punto.x} unidades

+

Bien Y: {punto.y} unidades

+

Utilidad: {punto.utilidad} utils

+

+ Este punto se encuentra en la curva de indiferencia U={punto.utilidad}. + Cualquier otro punto en esta misma curva proporciona exactamente la misma satisfacción. +

+
+ ); + })()} +
+ )} +
+ +
+

Propiedades de las Curvas de Indiferencia

+
+
+
1
+
+

No se cortan

+

Dos curvas de indiferencia nunca pueden intersectarse. Si lo hicieran, implicaría que una misma combinación tiene dos niveles de utilidad diferentes.

+
+
+ +
+
2
+
+

Tienen pendiente negativa

+

Para mantener el mismo nivel de utilidad, si consumes más de un bien debes consumir menos del otro (sustitución).

+
+
+ +
+
3
+
+

Son convexas al origen

+

La TMS (Tasa Marginal de Sustitución) disminuye a medida que te mueves hacia abajo a lo largo de la curva.

+
+
+ +
+
4
+
+

Curvas más alejadas = Mayor utilidad

+

Las curvas más alejadas del origen representan niveles de utilidad más altos (U=30 {'>'} U=20 {'>'} U=10).

+
+
+
+
+ +
+

Tasa Marginal de Sustitución (TMS)

+

+ La TMS mide cuántas unidades de Y estás dispuesto a sacrificar por una unidad adicional de X, + manteniendo constante la utilidad. +

+
+ TMS = -ΔY/ΔX = UMgX / UMgY +
+
+

Ejemplo en el punto A (2,2):

+
+

• Para aumentar X de 2 a 4 (ΔX = +2), debes reducir Y de 2 a... ¿cuánto?

+

• En U=10: Si X=4, entonces 2(4) + 3Y = 10 → Y ≈ 0.67

+

• TMS = -(0.67 - 2)/(4 - 2) = -(-1.33)/2 = 0.67

+

+ Estás dispuesto a dar up aproximadamente 0.67 unidades de Y por cada unidad adicional de X. +

+ +
+

Ejercicios de Comprensión

+
+
+

1. ¿Qué significa que dos puntos estén en la misma curva de indiferencia?

+
+ {[ + { id: '1a', texto: 'Tienen los mismos precios', correcta: false }, + { id: '1b', texto: 'Proporcionan la misma utilidad', correcta: true }, + { id: '1c', texto: 'Son igualmente caros', correcta: false }, + { id: '1d', texto: 'Son bienes sustitutos perfectos', correcta: false }, + ].map((opcion) => ( + + ))} +
+ +
+

2. Según el mapa de curvas, ¿qué punto tiene mayor utilidad?

+
+ {[ + { id: '2a', texto: 'Punto A (2,2)', correcta: false }, + { id: '2b', texto: 'Punto B (4,4)', correcta: false }, + { id: '2c', texto: 'Punto C (6,6)', correcta: true }, + { id: '2d', texto: 'Punto D (3,5)', correcta: false }, + ].map((opcion) => ( + + ))} +
+ +
+

3. ¿Por qué las curvas de indiferencia tienen pendiente negativa?

+
+ {[ + { id: '3a', texto: 'Porque los bienes son complementarios', correcta: false }, + { id: '3b', texto: 'Para mantener la utilidad constante, más de X implica menos de Y', correcta: true }, + { id: '3c', texto: 'Porque los precios son inversos', correcta: false }, + { id: '3d', texto: 'Porque la utilidad marginal es negativa', correcta: false }, + ].map((opcion) => ( + + ))} +
+
+ +
+
+ + {verificado && ( +
+

+ ¡Respuestas verificadas! Revisa cuáles fueron correctas. +

+ )} +
+
+ + ); +} + +export default CurvasIndiferencia; diff --git a/frontend/src/components/exercises/modulo3/DecisionesPrecios.tsx b/frontend/src/components/exercises/modulo3/DecisionesPrecios.tsx new file mode 100644 index 0000000..95b6d86 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/DecisionesPrecios.tsx @@ -0,0 +1,358 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { DollarSign, TrendingUp, TrendingDown, CheckCircle, RotateCcw } from 'lucide-react'; + +interface DecisionesPreciosProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: number; + producto: string; + ep: number; + situacion: string; + pregunta: string; + opciones: { + respuesta: 'subir' | 'bajar' | 'mantener'; + label: string; + explicacionCorrecta: string; + explicacionIncorrecta: string; + }[]; +} + +const escenarios: Escenario[] = [ + { + id: 1, + producto: 'Medicamentos esenciales', + ep: -0.3, + situacion: 'Tu farmacia vende medicamentos esenciales con elasticidad de -0.3. Las ventas han disminuido y necesitas aumentar tus ingresos.', + pregunta: '¿Qué decisión de precios deberías tomar?', + opciones: [ + { + respuesta: 'subir', + label: 'Subir el precio', + explicacionCorrecta: 'Correcto. Con Ep = -0.3 (inelástico), al subir el precio la cantidad cae menos que proporcionalmente, aumentando los ingresos totales.', + explicacionIncorrecta: '', + }, + { + respuesta: 'bajar', + label: 'Bajar el precio', + explicacionCorrecta: '', + explicacionIncorrecta: 'Incorrecto. Con demanda inelástica, bajar el precio aumenta la cantidad menos que proporcionalmente, reduciendo los ingresos.', + }, + { + respuesta: 'mantener', + label: 'Mantener el precio', + explicacionCorrecta: '', + explicacionIncorrecta: 'Incorrecto. Con demanda inelástica, subir precios aumentaría los ingresos totales.', + }, + ], + }, + { + id: 2, + producto: 'Restaurante de lujo', + ep: -3.5, + situacion: 'Tu restaurante de alta cocina tiene una elasticidad de -3.5. La competencia está fuerte y necesitas atraer más clientes.', + pregunta: '¿Qué estrategia de precios recomiendas?', + opciones: [ + { + respuesta: 'subir', + label: 'Subir el precio', + explicacionCorrecta: '', + explicacionIncorrecta: 'Incorrecto. Con Ep = -3.5 (muy elástico), subir precios haría que muchos clientes dejen de venir, reduciendo ingresos drásticamente.', + }, + { + respuesta: 'bajar', + label: 'Bajar el precio', + explicacionCorrecta: 'Correcto. Con Ep = -3.5 (elástico), bajar el precio aumenta la cantidad más que proporcionalmente, incrementando los ingresos totales.', + explicacionIncorrecta: '', + }, + { + respuesta: 'mantener', + label: 'Mantener el precio', + explicacionCorrecta: '', + explicacionIncorrecta: 'Incorrecto. Con demanda elástica y competencia fuerte, bajar precios atraería más clientes y aumentaría ingresos.', + }, + ], + }, + { + id: 3, + producto: 'Gasolina', + ep: -0.8, + situacion: 'Tu gasolinera tiene una elasticidad de -0.8. Los costos han subido y necesitas cubrirlos.', + pregunta: '¿Deberías subir los precios de la gasolina?', + opciones: [ + { + respuesta: 'subir', + label: 'Sí, subir el precio', + explicacionCorrecta: 'Correcto. Con Ep = -0.8 (inelástico), subir el precio aumenta los ingresos totales porque la cantidad demandada cae menos que proporcionalmente.', + explicacionIncorrecta: '', + }, + { + respuesta: 'bajar', + label: 'No, bajar el precio', + explicacionCorrecta: '', + explicacionIncorrecta: 'Incorrecto. Bajar precios con demanda inelástica reduciría los ingresos totales, no ayudando a cubrir los costos mayores.', + }, + { + respuesta: 'mantener', + label: 'Mantener igual', + explicacionCorrecta: '', + explicacionIncorrecta: 'Incorrecto. Manteniendo precios no cubrirías los mayores costos. Subir precios aumentaría ingresos con demanda inelástica.', + }, + ], + }, + { + id: 4, + producto: 'Cine (entradas)', + ep: -1.8, + situacion: 'Tu cine tiene una elasticidad de -1.8. Es temporada baja y quieres llenar las salas.', + pregunta: '¿Qué decisión de precios tomarías?', + opciones: [ + { + respuesta: 'subir', + label: 'Subir el precio', + explicacionCorrecta: '', + explicacionIncorrecta: 'Incorrecto. Con Ep = -1.8 (elástico), subir precios reduciría significativamente la asistencia y los ingresos.', + }, + { + respuesta: 'bajar', + label: 'Bajar el precio', + explicacionCorrecta: 'Correcto. Con Ep = -1.8 (elástico), bajar precios aumentaría la asistencia más que proporcionalmente, llenando las salas y aumentando ingresos.', + explicacionIncorrecta: '', + }, + { + respuesta: 'mantener', + label: 'Mantener el precio', + explicacionCorrecta: '', + explicacionIncorrecta: 'Incorrecto. Mantener precios no ayudaría a llenar las salas en temporada baja. Bajar precios sería más efectivo.', + }, + ], + }, +]; + +export function DecisionesPrecios({ ejercicioId: _ejercicioId, onComplete }: DecisionesPreciosProps) { + const [escenarioIndex, setEscenarioIndex] = useState(0); + const [respuesta, setRespuesta] = useState<'subir' | 'bajar' | 'mantener' | null>(null); + const [validado, setValidado] = useState(false); + const [aciertos, setAciertos] = useState(0); + const [completado, setCompletado] = useState(false); + + const escenario = escenarios[escenarioIndex]; + const respuestaCorrecta = escenario.opciones.find((o) => o.explicacionCorrecta)?.respuesta; + + const validarRespuesta = () => { + if (!respuesta) return; + + const esCorrecto = respuesta === respuestaCorrecta; + setValidado(true); + + if (esCorrecto) { + setAciertos((prev) => prev + 1); + } + }; + + const siguienteEscenario = () => { + if (escenarioIndex < escenarios.length - 1) { + setEscenarioIndex((prev) => prev + 1); + setRespuesta(null); + setValidado(false); + } else { + setCompletado(true); + if (onComplete) { + onComplete(Math.round((aciertos + (respuesta === respuestaCorrecta ? 1 : 0)) / escenarios.length * 100)); + } + } + }; + + const reiniciar = () => { + setEscenarioIndex(0); + setRespuesta(null); + setValidado(false); + setAciertos(0); + setCompletado(false); + }; + + const obtenerClasificacion = (ep: number): string => { + const valorAbs = Math.abs(ep); + if (valorAbs > 1) return 'Elástica'; + if (valorAbs < 1) return 'Inelástica'; + return 'Unitaria'; + }; + + return ( +
+ + + +
+
+

+ + Demanda ELÁSTICA (|Ep| > 1) +

+
    +
  • • Bajar precio → Aumentan ingresos
    • +
  • • Subir precio → Disminuyen ingresos
    • +
  • • Los consumidores son muy sensibles
    • +
+
+
+

+ + Demanda INELÁSTICA (|Ep| < 1) +

+
    +
  • • Subir precio → Aumentan ingresos
    • +
  • • Bajar precio → Disminuyen ingresos
    • +
  • • Los consumidores son poco sensibles
    • +
+
+
+ +
+
+

+ + Caso {escenarioIndex + 1} de {escenarios.length}: {escenario.producto} +

+ + Ep = {escenario.ep} + +
+ +
+

+ Situación: {escenario.situacion} +

+

{escenario.pregunta}

+
+ +
+

+ Análisis: Este producto tiene demanda{' '} + {obtenerClasificacion(escenario.ep).toUpperCase()}{' '} + (|Ep| = {Math.abs(escenario.ep).toFixed(1)}) +

+
+ +
+ {escenario.opciones.map((opcion) => ( + + ))} +
+
+ + {validado && ( +
+ {escenario.opciones.map( + (opcion) => + (respuesta === opcion.respuesta || opcion.respuesta === respuestaCorrecta) && ( +
+

+ {opcion.explicacionCorrecta || opcion.explicacionIncorrecta} +

+
+ ) + )} +
+ )} + +
+ {!validado ? ( + + ) : !completado ? ( + + ) : ( + + )} +
+ + {completado && ( +
+

+ ¡Ejercicio completado! Has acertado {aciertos + (respuesta === respuestaCorrecta ? 1 : 0)} de{' '} + {escenarios.length} casos +

+
+ )} + + + +

Regla de Oro para Decisiones de Precios:

+
+

+ Ingreso Total (IT) = Precio × Cantidad +

+
    +
  • + • Si |Ep| > 1 (Elástica):{' '} + IT y P se mueven en direcciones opuestas +
    • +
  • + • Si |Ep| < 1 (Inelástica):{' '} + IT y P se mueven en la misma dirección +
    • +
  • + • Si |Ep| = 1 (Unitaria):{' '} + IT es máximo, cambios en P no afectan IT +
    • +
+
+ +
+ ); +} + +export default DecisionesPrecios; diff --git a/frontend/src/components/exercises/modulo3/ElasticidadCurva.tsx b/frontend/src/components/exercises/modulo3/ElasticidadCurva.tsx new file mode 100644 index 0000000..40f55ee --- /dev/null +++ b/frontend/src/components/exercises/modulo3/ElasticidadCurva.tsx @@ -0,0 +1,369 @@ +import { useState, useCallback, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { MousePointer, RotateCcw, Info } from 'lucide-react'; + +interface ElasticidadCurvaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Punto { + q: number; + p: number; + ep: number; +} + +export function ElasticidadCurva({ ejercicioId: _ejercicioId, onComplete }: ElasticidadCurvaProps) { + const [puntoSeleccionado, setPuntoSeleccionado] = useState(50); + const [validado, setValidado] = useState(false); + const [completado, setCompletado] = useState(false); + + // Curva de demanda lineal: P = 20 - 0.2Q + const generarPuntos = useCallback((): Punto[] => { + const puntos: Punto[] = []; + for (let q = 0; q <= 100; q += 5) { + const p = 20 - 0.2 * q; + // Elasticidad en curva lineal: Ep = -b * (P/Q) donde b es la pendiente + const ep = -0.2 * (p / q); + puntos.push({ q, p: Math.max(0, p), ep: q > 0 ? ep : 0 }); + } + return puntos; + }, []); + + const puntos = useMemo(() => generarPuntos(), [generarPuntos]); + + const puntoActual = useMemo(() => { + const q = puntoSeleccionado; + const p = 20 - 0.2 * q; + const ep = q > 0 ? -0.2 * (p / q) : 0; + return { q, p: Math.max(0, p), ep }; + }, [puntoSeleccionado]); + + const obtenerClasificacion = useCallback((ep: number): string => { + const valorAbs = Math.abs(ep); + if (valorAbs > 1) return 'Elástica'; + if (valorAbs < 1) return 'Inelástica'; + return 'Unitaria'; + }, []); + + const validar = () => { + setValidado(true); + setCompletado(true); + if (onComplete) { + onComplete(100); + } + }; + + const reiniciar = () => { + setPuntoSeleccionado(50); + setValidado(false); + setCompletado(false); + }; + + // SVG config + const svgWidth = 400; + const svgHeight = 300; + const margin = { top: 20, right: 30, bottom: 50, left: 60 }; + const chartWidth = svgWidth - margin.left - margin.right; + const chartHeight = svgHeight - margin.top - margin.bottom; + + const scaleX = (q: number) => margin.left + (q / 100) * chartWidth; + const scaleY = (p: number) => margin.top + chartHeight - (p / 20) * chartHeight; + + // Puntos para la curva + const pathData = puntos + .filter((p) => p.p >= 0) + .map((p, i) => `${i === 0 ? 'M' : 'L'} ${scaleX(p.q)},${scaleY(p.p)}`) + .join(' '); + + // Punto unitario (donde Ep = -1) + const qUnitaria = 50; + const pUnitaria = 10; + + return ( +
+ + + +
+

+ + Concepto Clave: +

+

+ En una curva de demanda lineal, la elasticidad NO es constante. + Va desde elástica (parte alta) a inelástica (parte baja), pasando por unitaria en el punto medio. +

+
+ +
+ + { + setPuntoSeleccionado(Number(e.target.value)); + setValidado(false); + }} + className="w-full h-2 bg-gray-200 rounded-lg cursor-pointer" + style={{ accentColor: '#2563eb' }} + /> +
+ Q = 5 + Q = 50 + Q = 95 +
+
+ +
+

Valores en el punto seleccionado:

+
+
+

Cantidad (Q)

+

{puntoActual.q.toFixed(0)}

+
+
+

Precio (P)

+

${puntoActual.p.toFixed(1)}

+
+
+

Elasticidad (Ep)

+

{puntoActual.ep.toFixed(2)}

+
+
+
+ +
+

Gráfico de Demanda

+ + {/* Grid */} + + + + + + + + {/* Ejes */} + + + + {/* Flechas */} + + + + {/* Etiquetas */} + + Cantidad (Q) + + + Precio (P) + + + {/* Marcas X */} + {[0, 25, 50, 75, 100].map((val, i) => ( + + + + {val} + + + ))} + + {/* Marcas Y */} + {[0, 5, 10, 15, 20].map((val, i) => ( + + + + ${val} + + + ))} + + {/* Curva de demanda */} + + + {/* Punto unitario marcado */} + + + Unitario + + + {/* Punto seleccionado */} + 1 ? '#10b981' : Math.abs(puntoActual.ep) < 1 ? '#3b82f6' : '#fbbf24'} + stroke="white" + strokeWidth="3" + /> + + {/* Líneas punteadas al punto */} + + + + {/* Leyenda */} + + + + + Elástica (|Ep|>1) + + + + Unitaria (|Ep|=1) + + + + Inelástica (|Ep|<1) + + + +
+ +
+

Clasificación del punto actual:

+

+ En Q = {puntoActual.q.toFixed(0)}, P = ${puntoActual.p.toFixed(1)}: +

+

+ Demanda{' '} + 1 + ? 'text-green-600' + : Math.abs(puntoActual.ep) < 1 + ? 'text-blue-600' + : 'text-yellow-600' + } + > + {obtenerClasificacion(puntoActual.ep).toUpperCase()} + +

+

+ (|Ep| = {Math.abs(puntoActual.ep).toFixed(2)}) +

+
+ +
+ + +
+ + {completado && ( +
+

+ ¡Excelente! Has explorado cómo la elasticidad varía a lo largo de la curva. +

+
+ )} + + + +

Fórmula para curva lineal:

+

+ Para una curva de demanda lineal P = a - bQ, la elasticidad en cualquier punto es: +

+

+ Ep = -b × (P/Q) +

+

+ En este ejemplo: P = 20 - 0.2Q, por lo que b = 0.2 +

+

+ Punto unitario: Ocurre donde P/Q = 1/b = 5, es decir, en Q = 50, P = 10 +

+ +
+ ); +} + +export default ElasticidadCurva; diff --git a/frontend/src/components/exercises/modulo3/ElasticidadRectas.tsx b/frontend/src/components/exercises/modulo3/ElasticidadRectas.tsx new file mode 100644 index 0000000..674271a --- /dev/null +++ b/frontend/src/components/exercises/modulo3/ElasticidadRectas.tsx @@ -0,0 +1,426 @@ +import { useState, useCallback } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { RotateCcw, LineChart, AlertTriangle } from 'lucide-react'; + +interface ElasticidadRectasProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface CurvaData { + id: number; + pendiente: number; + intercepto: number; + color: string; + nombre: string; + descripcion: string; +} + +const curvas: CurvaData[] = [ + { + id: 1, + pendiente: 0.1, + intercepto: 15, + color: '#10b981', + nombre: 'Curva A (Plana)', + descripcion: 'Pendiente pequena → Mayor elasticidad', + }, + { + id: 2, + pendiente: 0.2, + intercepto: 20, + color: '#3b82f6', + nombre: 'Curva B (Media)', + descripcion: 'Pendiente media → Elasticidad media', + }, + { + id: 3, + pendiente: 0.4, + intercepto: 30, + color: '#ef4444', + nombre: 'Curva C (Empinada)', + descripcion: 'Pendiente grande → Menor elasticidad', + }, +]; + +export function ElasticidadRectas({ ejercicioId: _ejercicioId, onComplete }: ElasticidadRectasProps) { + const [puntoQ, setPuntoQ] = useState(40); + const [curvaSeleccionada, setCurvaSeleccionada] = useState(2); + const [respuestaEp, setRespuestaEp] = useState(''); + const [validado, setValidado] = useState(false); + const [completado, setCompletado] = useState(false); + + const curvaActual = curvas.find((c) => c.id === curvaSeleccionada) || curvas[1]; + + const calcularElasticidad = useCallback( + (q: number, curva: CurvaData): number => { + const p = curva.intercepto - curva.pendiente * q; + if (q <= 0 || p <= 0) return 0; + return -curva.pendiente * (p / q); + }, + [] + ); + + const epCorrecto = calcularElasticidad(puntoQ, curvaActual); + const precioActual = curvaActual.intercepto - curvaActual.pendiente * puntoQ; + + const validarRespuesta = () => { + const respuestaNum = parseFloat(respuestaEp); + const tolerancia = 0.2; + + setValidado(true); + + if (Math.abs(respuestaNum - epCorrecto) <= tolerancia) { + setCompletado(true); + if (onComplete) { + onComplete(100); + } + } + }; + + const reiniciar = () => { + setPuntoQ(40); + setCurvaSeleccionada(2); + setRespuestaEp(''); + setValidado(false); + setCompletado(false); + }; + + const svgWidth = 450; + const svgHeight = 350; + const margin = { top: 20, right: 40, bottom: 50, left: 60 }; + const chartWidth = svgWidth - margin.left - margin.right; + const chartHeight = svgHeight - margin.top - margin.bottom; + + const maxQ = 150; + const maxP = 35; + + const scaleX = (q: number) => margin.left + (q / maxQ) * chartWidth; + const scaleY = (p: number) => margin.top + chartHeight - (p / maxP) * chartHeight; + + const generarPath = (curva: CurvaData): string => { + const qMax = Math.min(maxQ, curva.intercepto / curva.pendiente); + const puntos: string[] = []; + for (let q = 0; q <= qMax; q += 5) { + const p = curva.intercepto - curva.pendiente * q; + if (p >= 0) { + puntos.push(`${scaleX(q)},${scaleY(p)}`); + } + } + return puntos.length > 0 ? `M ${puntos.join(' L ')}` : ''; + }; + + return ( +
+ + + +
+

+ + Concepto Importante: +

+

+ NO confundir pendiente con elasticidad. Aunque estan relacionadas, + son conceptos distintos. Una curva mas plana (menor pendiente) tiende a ser mas elastica, + pero la elasticidad tambien depende del punto (P/Q). +

+
+ +
+ {curvas.map((curva) => ( + + ))} +
+ +
+

+ + Comparacion de Curvas +

+ + + + + + + + + + + + + Cantidad (Q) + + + Precio (P) + + + {[0, 50, 100, 150].map((val) => ( + + + + {val} + + + ))} + + {[0, 10, 20, 30].map((val) => ( + + + + ${val} + + + ))} + + {curvas.map((curva) => ( + + ))} + + + + + + + {curvas.map((curva) => { + const qLabel = 20; + const pLabel = curva.intercepto - curva.pendiente * qLabel; + return ( + + {curva.nombre} + + ); + })} + +
+ +
+
+ + { + setPuntoQ(Number(e.target.value)); + setValidado(false); + }} + className="w-full h-2 bg-gray-200 rounded-lg cursor-pointer" + style={{ accentColor: curvaActual.color }} + /> +
+ Q = 10 + Q = {puntoQ} + Q = 100 +
+
+ +
+

Datos en el punto seleccionado:

+
+
+

Cantidad (Q)

+

{puntoQ}

+
+
+

Precio (P)

+

${precioActual.toFixed(2)}

+
+
+

Pendiente (b)

+

{curvaActual.pendiente}

+
+
+
+ +
+ +

+ Usa la formula: Ep = -b x (P/Q) +

+ { + setRespuestaEp(e.target.value); + setValidado(false); + }} + placeholder="Ej: -0.75" + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" + /> +
+
+ +
+ + +
+ + {validado && ( +
+

+ {completado + ? `Correcto! La elasticidad es ${epCorrecto.toFixed(2)}` + : `Incorrecto. La respuesta correcta es ${epCorrecto.toFixed(2)}`} +

+ {!completado && ( +

+ Recuerda: Ep = -{curvaActual.pendiente} x ({precioActual.toFixed(2)} / {puntoQ}) = {epCorrecto.toFixed(2)} +

+ )} +
+ )} + + + +

Relacion Pendiente vs Elasticidad:

+
    +
  • + Pendiente (b): Indica cuanto cambia P por cada unidad de Q. + Es la inclinacion geometrica de la recta. +
    • +
  • + Elasticidad (Ep): Indica cuanto cambia Q (%) por cada cambio de P (%). + Depende de la pendiente Y de la relacion P/Q en ese punto. +
    • +
  • + Conclusion: Una curva mas plana (menor b) NO siempre es mas elastica, + porque tambien depende de donde estes en la curva (el valor P/Q). +
    • +
+ +
+ ); +} + +export default ElasticidadRectas; diff --git a/frontend/src/components/exercises/modulo3/FormulaElasticidad.tsx b/frontend/src/components/exercises/modulo3/FormulaElasticidad.tsx new file mode 100644 index 0000000..a92ac59 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/FormulaElasticidad.tsx @@ -0,0 +1,236 @@ +import { useState, useCallback } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Calculator, RotateCcw, TrendingUp, TrendingDown } from 'lucide-react'; + +interface FormulaElasticidadProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function FormulaElasticidad({ ejercicioId: _ejercicioId, onComplete }: FormulaElasticidadProps) { + const [qInicial, setQInicial] = useState(100); + const [qFinal, setQFinal] = useState(80); + const [pInicial, setPInicial] = useState(10); + const [pFinal, setPFinal] = useState(12); + const [respuesta, setRespuesta] = useState(''); + const [validado, setValidado] = useState(false); + const [completado, setCompletado] = useState(false); + + const porcentajeCambioQ = useCallback(() => { + return ((qFinal - qInicial) / qInicial) * 100; + }, [qInicial, qFinal]); + + const porcentajeCambioP = useCallback(() => { + return ((pFinal - pInicial) / pInicial) * 100; + }, [pInicial, pFinal]); + + const elasticidadCorrecta = useCallback(() => { + return porcentajeCambioQ() / porcentajeCambioP(); + }, [porcentajeCambioQ, porcentajeCambioP]); + + const validarRespuesta = () => { + const respuestaNum = parseFloat(respuesta); + const correcta = elasticidadCorrecta(); + const tolerancia = 0.05; + + setValidado(true); + + if (Math.abs(respuestaNum - correcta) <= tolerancia) { + setCompletado(true); + if (onComplete) { + onComplete(100); + } + } + }; + + const reiniciar = () => { + setQInicial(100); + setQFinal(80); + setPInicial(10); + setPFinal(12); + setRespuesta(''); + setValidado(false); + setCompletado(false); + }; + + const pctQ = porcentajeCambioQ(); + const pctP = porcentajeCambioP(); + const correcta = elasticidadCorrecta(); + + return ( +
+ + + +
+

Fórmula:

+

+ Ep = %ΔQ / %ΔP +

+

+ Donde: %ΔQ = (Qf - Qi) / Qi × 100 +

+

+ %ΔP = (Pf - Pi) / Pi × 100 +

+
+ +
+
+

+ + Datos Iniciales +

+
+ + { + setQInicial(Number(e.target.value)); + setValidado(false); + }} + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" + /> +
+
+ + { + setPInicial(Number(e.target.value)); + setValidado(false); + }} + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" + /> +
+
+ +
+

+ + Datos Finales +

+
+ + { + setQFinal(Number(e.target.value)); + setValidado(false); + }} + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" + /> +
+
+ + { + setPFinal(Number(e.target.value)); + setValidado(false); + }} + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" + /> +
+
+
+ +
+

Cálculo Paso a Paso:

+
+

+ %ΔQ = ({qFinal} - {qInicial}) / {qInicial} × 100 = {pctQ.toFixed(2)}% +

+

+ %ΔP = ({pFinal} - {pInicial}) / {pInicial} × 100 = {pctP.toFixed(2)}% +

+

+ Ep = {pctQ.toFixed(2)} / {pctP.toFixed(2)} = {correcta.toFixed(2)} +

+
+
+ +
+
+ + { + setRespuesta(e.target.value); + setValidado(false); + }} + placeholder="Ej: -1.25" + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" + /> +
+ +
+ + +
+
+ + {validado && ( +
+

+ {completado + ? '¡Correcto! La elasticidad es ' + correcta.toFixed(2) + : 'Incorrecto. La respuesta correcta es ' + correcta.toFixed(2)} +

+
+ )} + + + +

Importante:

+
    +
  • • La elasticidad precio suele ser negativa (ley de demanda)
    • +
  • + • Usamos valor absoluto para clasificar: |Ep| > 1 = Elástica +
    • +
  • + • |Ep| = 1 = Unitaria, |Ep| < 1 = Inelástica +
    • +
+ +
+ ); +} + +export default FormulaElasticidad; diff --git a/frontend/src/components/exercises/modulo3/FormulaElasticidadCruzada.tsx b/frontend/src/components/exercises/modulo3/FormulaElasticidadCruzada.tsx new file mode 100644 index 0000000..c8f55e9 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/FormulaElasticidadCruzada.tsx @@ -0,0 +1,286 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { Card, CardHeader } from '../../ui/Card'; + +interface Ejercicio { + id: number; + titulo: string; + descripcion: string; + bienX: string; + bienY: string; + pY1: number; + pY2: number; + qX1: number; + qX2: number; + unidadP: string; + unidadQ: string; +} + +const ejercicios: Ejercicio[] = [ + { + id: 1, + titulo: "Elasticidad Cruzada - Sustitutos", + descripcion: "Cuando el precio del café (bien Y) aumenta, observamos cambios en la demanda de té (bien X).", + bienX: "Té", + bienY: "Café", + pY1: 5, + pY2: 7, + qX1: 100, + qX2: 140, + unidadP: "$/libra", + unidadQ: "libras mensuales" + }, + { + id: 2, + titulo: "Elasticidad Cruzada - Complementarios", + descripcion: "Cuando el precio de las impresoras (bien Y) aumenta, observamos cambios en la demanda de tinta (bien X).", + bienX: "Cartuchos de tinta", + bienY: "Impresoras", + pY1: 80, + pY2: 120, + qX1: 500, + qX2: 350, + unidadP: "$", + unidadQ: "unidades mensuales" + }, + { + id: 3, + titulo: "Elasticidad Cruzada - Bienes Independientes", + descripcion: "Analiza la relación entre helado (bien X) y gasolina (bien Y).", + bienX: "Helado", + bienY: "Gasolina", + pY1: 3, + pY2: 4.5, + qX1: 200, + qX2: 205, + unidadP: "$/galón", + unidadQ: "litros mensuales" + } +]; + +interface Respuesta { + valor: string; + esCorrecta: boolean | null; +} + +interface FormulaElasticidadCruzadaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function FormulaElasticidadCruzada({ ejercicioId: _ejercicioId, onComplete }: FormulaElasticidadCruzadaProps) { + const [ejercicioActual, setEjercicioActual] = useState(0); + const [respuestas, setRespuestas] = useState>({}); + const [mostrarSolucion, setMostrarSolucion] = useState>({}); + const [mostrarFormula, setMostrarFormula] = useState(false); + + const ejercicio = ejercicios[ejercicioActual]; + + const calcularElasticidad = (ej: Ejercicio) => { + const deltaQX = ej.qX2 - ej.qX1; + const deltaPY = ej.pY2 - ej.pY1; + const qXPromedio = (ej.qX1 + ej.qX2) / 2; + const pYPromedio = (ej.pY1 + ej.pY2) / 2; + const porcentajeQX = (deltaQX / qXPromedio) * 100; + const porcentajePY = (deltaPY / pYPromedio) * 100; + return porcentajeQX / porcentajePY; + }; + + const verificarRespuesta = () => { + const respuesta = respuestas[ejercicio.id]; + if (!respuesta) return; + + const valorCorrecto = calcularElasticidad(ejercicio); + const valorIngresado = parseFloat(respuesta.valor); + const esCorrecta = Math.abs(valorIngresado - valorCorrecto) <= 0.05; + + setRespuestas(prev => ({ + ...prev, + [ejercicio.id]: { ...respuesta, esCorrecta } + })); + + if (esCorrecta && ejercicioActual === ejercicios.length - 1 && onComplete) { + onComplete(100); + } + }; + + const handleRespuesta = (valor: string) => { + setRespuestas(prev => ({ + ...prev, + [ejercicio.id]: { valor, esCorrecta: null } + })); + }; + + const toggleSolucion = () => { + setMostrarSolucion(prev => ({ + ...prev, + [ejercicio.id]: !prev[ejercicio.id] + })); + }; + + const siguienteEjercicio = () => { + if (ejercicioActual < ejercicios.length - 1) { + setEjercicioActual(prev => prev + 1); + } + }; + + const resultado = calcularElasticidad(ejercicio); + const respuestaActual = respuestas[ejercicio.id]; + + return ( + + + +
+
+
+
+
+ +
+
+

{ejercicio.titulo}

+

{ejercicio.descripcion}

+ +
+
+

Bien X: {ejercicio.bienX}

+
+
+ QX1 +

{ejercicio.qX1}

+
+
+ QX2 +

{ejercicio.qX2}

+
+
+

{ejercicio.unidadQ}

+
+ +
+

Bien Y: {ejercicio.bienY}

+
+
+ PY1 +

${ejercicio.pY1}

+
+
+ PY2 +

${ejercicio.pY2}

+
+
+

{ejercicio.unidadP}

+
+
+
+ +
+
+

Fórmula de Elasticidad Cruzada:

+ +
+ + {mostrarFormula && ( +
+

+ Ecr = (%ΔQX) / (%ΔPY) +

+
+

Donde:

+

• %ΔQX = [(QX2 - QX1) / ((QX1 + QX2) / 2)] × 100

+

• %ΔPY = [(PY2 - PY1) / ((PY1 + PY2) / 2)] × 100

+
+
+ )} +
+ +
+

+ Calcule la elasticidad cruzada (Ecr) entre {ejercicio.bienX} y {ejercicio.bienY}: +

+ +
+ handleRespuesta(e.target.value)} + className="w-48" + placeholder="Respuesta" + /> + +
+ + {respuestaActual?.esCorrecta !== null && ( +
+ {respuestaActual.esCorrecta + ? '¡Correcto!' + : 'Incorrecto. Revisa tus cálculos.'} +
+ )} + + + + {mostrarSolucion[ejercicio.id] && ( +
+

Desarrollo:

+

ΔQX = {ejercicio.qX2} - {ejercicio.qX1} = {ejercicio.qX2 - ejercicio.qX1}

+

ΔPY = {ejercicio.pY2} - {ejercicio.pY1} = {ejercicio.pY2 - ejercicio.pY1}

+

Q̄X = ({ejercicio.qX1} + {ejercicio.qX2}) / 2 = {((ejercicio.qX1 + ejercicio.qX2) / 2).toFixed(1)}

+

P̄Y = ({ejercicio.pY1} + {ejercicio.pY2}) / 2 = {((ejercicio.pY1 + ejercicio.pY2) / 2).toFixed(1)}

+

%ΔQX = ({ejercicio.qX2 - ejercicio.qX1} / {((ejercicio.qX1 + ejercicio.qX2) / 2).toFixed(1)}) × 100 = {(((ejercicio.qX2 - ejercicio.qX1) / ((ejercicio.qX1 + ejercicio.qX2) / 2)) * 100).toFixed(2)}%

+

%ΔPY = ({ejercicio.pY2 - ejercicio.pY1} / {((ejercicio.pY1 + ejercicio.pY2) / 2).toFixed(1)}) × 100 = {(((ejercicio.pY2 - ejercicio.pY1) / ((ejercicio.pY1 + ejercicio.pY2) / 2)) * 100).toFixed(2)}%

+

+ Ecr = {(((ejercicio.qX2 - ejercicio.qX1) / ((ejercicio.qX1 + ejercicio.qX2) / 2)) * 100).toFixed(2)} / {(((ejercicio.pY2 - ejercicio.pY1) / ((ejercicio.pY1 + ejercicio.pY2) / 2)) * 100).toFixed(2)} = {resultado.toFixed(2)} +

+
+ )} +
+ +
+ {ejercicioActual < ejercicios.length - 1 ? ( + + ) : ( +
+ {respuestaActual?.esCorrecta ? '¡Ejercicios completados!' : ''} +
+ )} +
+
+ + ); +} + +export default FormulaElasticidadCruzada; diff --git a/frontend/src/components/exercises/modulo3/FormulaElasticidadIngreso.tsx b/frontend/src/components/exercises/modulo3/FormulaElasticidadIngreso.tsx new file mode 100644 index 0000000..37188a2 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/FormulaElasticidadIngreso.tsx @@ -0,0 +1,265 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { Card, CardHeader } from '../../ui/Card'; + +interface Ejercicio { + id: number; + titulo: string; + descripcion: string; + i1: number; + i2: number; + q1: number; + q2: number; + unidadI: string; + unidadQ: string; +} + +const ejercicios: Ejercicio[] = [ + { + id: 1, + titulo: "Cálculo de Elasticidad Ingreso", + descripcion: "Cuando el ingreso mensual de una familia aumenta de $2,000 a $2,500, su consumo de carne aumenta de 8 kg a 12 kg mensuales.", + i1: 2000, + i2: 2500, + q1: 8, + q2: 12, + unidadI: "$/mes", + unidadQ: "kg" + }, + { + id: 2, + titulo: "Elasticidad Ingreso - Producto Tecnológico", + descripcion: "El ingreso promedio de consumidores sube de $1,500 a $1,800 mensuales, y las ventas de smartphones premium aumentan de 50 a 80 unidades.", + i1: 1500, + i2: 1800, + q1: 50, + q2: 80, + unidadI: "$/mes", + unidadQ: "unidades" + }, + { + id: 3, + titulo: "Elasticidad Ingreso - Transporte", + descripcion: "Cuando el ingreso familiar aumenta de $3,000 a $4,000 mensuales, el uso de transporte público disminuye de 40 a 25 viajes mensuales.", + i1: 3000, + i2: 4000, + q1: 40, + q2: 25, + unidadI: "$/mes", + unidadQ: "viajes" + } +]; + +interface Respuesta { + valor: string; + esCorrecta: boolean | null; +} + +interface FormulaElasticidadIngresoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function FormulaElasticidadIngreso({ ejercicioId: _ejercicioId, onComplete }: FormulaElasticidadIngresoProps) { + const [ejercicioActual, setEjercicioActual] = useState(0); + const [respuestas, setRespuestas] = useState>({}); + const [mostrarSolucion, setMostrarSolucion] = useState>({}); + const [mostrarFormula, setMostrarFormula] = useState(false); + + const ejercicio = ejercicios[ejercicioActual]; + + const calcularElasticidad = (ej: Ejercicio) => { + const deltaQ = ej.q2 - ej.q1; + const deltaI = ej.i2 - ej.i1; + const qPromedio = (ej.q1 + ej.q2) / 2; + const iPromedio = (ej.i1 + ej.i2) / 2; + const porcentajeQ = (deltaQ / qPromedio) * 100; + const porcentajeI = (deltaI / iPromedio) * 100; + return porcentajeQ / porcentajeI; + }; + + const verificarRespuesta = () => { + const respuesta = respuestas[ejercicio.id]; + if (!respuesta) return; + + const valorCorrecto = calcularElasticidad(ejercicio); + const valorIngresado = parseFloat(respuesta.valor); + const esCorrecta = Math.abs(valorIngresado - valorCorrecto) <= 0.05; + + setRespuestas(prev => ({ + ...prev, + [ejercicio.id]: { ...respuesta, esCorrecta } + })); + + if (esCorrecta && ejercicioActual === ejercicios.length - 1 && onComplete) { + onComplete(100); + } + }; + + const handleRespuesta = (valor: string) => { + setRespuestas(prev => ({ + ...prev, + [ejercicio.id]: { valor, esCorrecta: null } + })); + }; + + const toggleSolucion = () => { + setMostrarSolucion(prev => ({ + ...prev, + [ejercicio.id]: !prev[ejercicio.id] + })); + }; + + const siguienteEjercicio = () => { + if (ejercicioActual < ejercicios.length - 1) { + setEjercicioActual(prev => prev + 1); + } + }; + + const resultado = calcularElasticidad(ejercicio); + const respuestaActual = respuestas[ejercicio.id]; + + return ( + + + +
+
+
+
+
+ +
+
+

{ejercicio.titulo}

+

{ejercicio.descripcion}

+ +
+
+ I₁ +

{ejercicio.i1.toLocaleString()} {ejercicio.unidadI}

+
+
+ I₂ +

{ejercicio.i2.toLocaleString()} {ejercicio.unidadI}

+
+
+ Q₁ +

{ejercicio.q1} {ejercicio.unidadQ}

+
+
+ Q₂ +

{ejercicio.q2} {ejercicio.unidadQ}

+
+
+
+ +
+
+

Fórmula del método del punto medio:

+ +
+ + {mostrarFormula && ( +
+

+ Ei = (%ΔQ) / (%ΔI) +

+
+

Donde:

+

• %ΔQ = [(Q₂ - Q₁) / ((Q₁ + Q₂) / 2)] × 100

+

• %ΔI = [(I₂ - I₁) / ((I₁ + I₂) / 2)] × 100

+
+
+ )} +
+ +
+

+ Calcule la elasticidad ingreso (Ei): +

+ +
+ handleRespuesta(e.target.value)} + className="w-48" + placeholder="Respuesta" + /> + +
+ + {respuestaActual?.esCorrecta !== null && ( +
+ {respuestaActual.esCorrecta + ? '¡Correcto!' + : 'Incorrecto. Revisa tus cálculos.'} +
+ )} + + + + {mostrarSolucion[ejercicio.id] && ( +
+

Desarrollo:

+

ΔQ = {ejercicio.q2} - {ejercicio.q1} = {ejercicio.q2 - ejercicio.q1}

+

ΔI = {ejercicio.i2} - {ejercicio.i1} = {ejercicio.i2 - ejercicio.i1}

+

Q̄ = ({ejercicio.q1} + {ejercicio.q2}) / 2 = {((ejercicio.q1 + ejercicio.q2) / 2).toFixed(1)}

+

Ī = ({ejercicio.i1} + {ejercicio.i2}) / 2 = {((ejercicio.i1 + ejercicio.i2) / 2).toFixed(1)}

+

%ΔQ = ({ejercicio.q2 - ejercicio.q1} / {((ejercicio.q1 + ejercicio.q2) / 2).toFixed(1)}) × 100 = {(((ejercicio.q2 - ejercicio.q1) / ((ejercicio.q1 + ejercicio.q2) / 2)) * 100).toFixed(2)}%

+

%ΔI = ({ejercicio.i2 - ejercicio.i1} / {((ejercicio.i1 + ejercicio.i2) / 2).toFixed(1)}) × 100 = {(((ejercicio.i2 - ejercicio.i1) / ((ejercicio.i1 + ejercicio.i2) / 2)) * 100).toFixed(2)}%

+

+ Ei = {(((ejercicio.q2 - ejercicio.q1) / ((ejercicio.q1 + ejercicio.q2) / 2)) * 100).toFixed(2)} / {(((ejercicio.i2 - ejercicio.i1) / ((ejercicio.i1 + ejercicio.i2) / 2)) * 100).toFixed(2)} = {resultado.toFixed(2)} +

+
+ )} +
+ +
+ {ejercicioActual < ejercicios.length - 1 ? ( + + ) : ( +
+ {respuestaActual?.esCorrecta ? '¡Ejercicios completados!' : ''} +
+ )} +
+
+ + ); +} + +export default FormulaElasticidadIngreso; diff --git a/frontend/src/components/exercises/modulo3/GradoRelacion.tsx b/frontend/src/components/exercises/modulo3/GradoRelacion.tsx new file mode 100644 index 0000000..32fe26b --- /dev/null +++ b/frontend/src/components/exercises/modulo3/GradoRelacion.tsx @@ -0,0 +1,334 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Card, CardHeader } from '../../ui/Card'; + +interface ParBienes { + id: number; + bienX: string; + bienY: string; + categoria: string; + elasticidad: number; + tipoRelacion: 'sustitutos' | 'complementarios'; + interpretacion: string; +} + +const paresBienes: ParBienes[] = [ + { + id: 1, + bienX: "Coca-Cola", + bienY: "Pepsi", + categoria: "Refrescos", + elasticidad: 2.5, + tipoRelacion: 'sustitutos', + interpretacion: "Sustitutos cercanos. Elasticidad alta indica que los consumidores los ven como casi perfectamente intercambiables." + }, + { + id: 2, + bienX: "Café", + bienY: "Té", + categoria: "Bebidas calientes", + elasticidad: 0.8, + tipoRelacion: 'sustitutos', + interpretacion: "Sustitutos moderados. Elasticidad positiva pero menor indica cierta diferenciación entre los productos." + }, + { + id: 3, + bienX: "Automóviles", + bienY: "Gasolina", + categoria: "Transporte", + elasticidad: -0.3, + tipoRelacion: 'complementarios', + interpretacion: "Complementarios débiles. A corto plazo, los dueños de autos no pueden cambiar fácilmente su consumo de gasolina." + }, + { + id: 4, + bienX: "Computadoras", + bienY: "Software", + categoria: "Tecnología", + elasticidad: -2.0, + tipoRelacion: 'complementarios', + interpretacion: "Complementarios fuertes. Elasticidad negativa alta indica que se usan estrictamente juntos." + }, + { + id: 5, + bienX: "Mantequilla", + bienY: "Margarina", + categoria: "Grasas", + elasticidad: 1.8, + tipoRelacion: 'sustitutos', + interpretacion: "Sustitutos cercanos. Son productos similares que los consumidores intercambian fácilmente según el precio." + }, + { + id: 6, + bienX: "CDs de música", + bienY: "Conciertos", + categoria: "Entretenimiento", + elasticidad: 0.4, + tipoRelacion: 'sustitutos', + interpretacion: "Sustitutos débiles. Aunque ambos son música, satisfacen necesidades diferentes (hogar vs. experiencia)." + }, + { + id: 7, + bienX: "Cámaras", + bienY: "Película fotográfica", + categoria: "Fotografía", + elasticidad: -1.5, + tipoRelacion: 'complementarios', + interpretacion: "Complementarios moderados. Cámaras tradicionales requieren película para funcionar." + }, + { + id: 8, + bienX: "Hamburguesas", + bienY: "Papas fritas", + categoria: "Comida rápida", + elasticidad: -0.7, + tipoRelacion: 'complementarios', + interpretacion: "Complementarios moderados. Se consumen frecuentemente juntos en restaurantes de comida rápida." + } +]; + +type NivelRelacion = 'muy-fuerte' | 'fuerte' | 'moderado' | 'debil' | null; + +interface Respuesta { + nivel: NivelRelacion; + esCorrecta: boolean | null; +} + +interface GradoRelacionProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function GradoRelacion({ ejercicioId: _ejercicioId, onComplete }: GradoRelacionProps) { + const [respuestas, setRespuestas] = useState>({}); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const getNivelEsperado = (elasticidad: number): NivelRelacion => { + const absE = Math.abs(elasticidad); + if (absE > 2) return 'muy-fuerte'; + if (absE > 1) return 'fuerte'; + if (absE > 0.5) return 'moderado'; + return 'debil'; + }; + + const seleccionarNivel = (parId: number, nivel: NivelRelacion) => { + if (mostrarResultados) return; + + setRespuestas(prev => ({ + ...prev, + [parId]: { nivel, esCorrecta: null } + })); + }; + + const verificarTodo = () => { + const nuevasRespuestas: Record = {}; + + paresBienes.forEach(par => { + const respuesta = respuestas[par.id]; + if (respuesta?.nivel) { + const nivelEsperado = getNivelEsperado(par.elasticidad); + nuevasRespuestas[par.id] = { + nivel: respuesta.nivel, + esCorrecta: respuesta.nivel === nivelEsperado + }; + } + }); + + setRespuestas(nuevasRespuestas); + setMostrarResultados(true); + + const correctas = Object.values(nuevasRespuestas).filter(r => r.esCorrecta).length; + if (onComplete) { + onComplete(Math.round((correctas / paresBienes.length) * 100)); + } + }; + + const reiniciar = () => { + setRespuestas({}); + setMostrarResultados(false); + }; + + const getCardStyle = (parId: number) => { + const respuesta = respuestas[parId]; + if (!mostrarResultados || !respuesta?.nivel) { + return 'bg-white border-gray-200'; + } + return respuesta.esCorrecta + ? 'bg-green-50 border-green-400' + : 'bg-red-50 border-red-400'; + }; + + const getNivelColor = (nivel: string) => { + switch (nivel) { + case 'muy-fuerte': return 'bg-purple-100 border-purple-300 text-purple-800'; + case 'fuerte': return 'bg-blue-100 border-blue-300 text-blue-800'; + case 'moderado': return 'bg-yellow-100 border-yellow-300 text-yellow-800'; + case 'debil': return 'bg-gray-100 border-gray-300 text-gray-800'; + default: return 'bg-white border-gray-200'; + } + }; + + const getNivelLabel = (nivel: string) => { + switch (nivel) { + case 'muy-fuerte': return 'Muy Fuerte'; + case 'fuerte': return 'Fuerte'; + case 'moderado': return 'Moderado'; + case 'debil': return 'Débil'; + default: return nivel; + } + }; + + const correctas = Object.values(respuestas).filter(r => r.esCorrecta).length; + const totalRespondidas = Object.keys(respuestas).length; + + return ( + + + +
+
+

Criterios de clasificación:

+
+
+

Muy Fuerte

+

|Ecr| > 2

+
+
+

Fuerte

+

1 < |Ecr| ≤ 2

+
+
+

Moderado

+

0.5 < |Ecr| ≤ 1

+
+
+

Débil

+

|Ecr| ≤ 0.5

+
+
+
+ +
+ {paresBienes.map((par) => { + const respuesta = respuestas[par.id]; + const nivelEsperado = getNivelEsperado(par.elasticidad); + + return ( +
+
+
+
+ + {par.categoria} + +
+ {par.bienX} + vs + {par.bienY} +
+
+ +
+

+ Ecr = {par.elasticidad} +

+

+ {par.tipoRelacion === 'sustitutos' ? 'Sustitutos' : 'Complementarios'} +

+
+
+ +
+ {['muy-fuerte', 'fuerte', 'moderado', 'debil'].map((nivel) => ( + + ))} +
+ + {mostrarResultados && ( +
+

+ Grado de relación:{' '} + + {getNivelLabel(nivelEsperado!)} + +

+

{par.interpretacion}

+
+ )} +
+
+ ); + })} +
+ +
+
+ Progreso: {totalRespondidas} / {paresBienes.length} +
+ + {!mostrarResultados ? ( + + ) : ( +
+
+

Puntuación

+

+ {correctas} / {paresBienes.length} +

+
+ +
+ )} +
+ + {mostrarResultados && ( +
= paresBienes.length / 2 + ? 'bg-yellow-100 border border-yellow-300' + : 'bg-red-100 border border-red-300' + }`}> +

+ {correctas === paresBienes.length + ? '¡Excelente! Has evaluado correctamente todos los grados de relación.' + : correctas >= paresBienes.length / 2 + ? '¡Buen trabajo! Algunos grados de relación necesitan más práctica.' + : 'Necesitas repasar cómo interpretar la magnitud de la elasticidad cruzada.'} +

+
+ )} +
+ + ); +} + +export default GradoRelacion; diff --git a/frontend/src/components/exercises/modulo3/LeyUtilidadMarginalDecreciente.tsx b/frontend/src/components/exercises/modulo3/LeyUtilidadMarginalDecreciente.tsx new file mode 100644 index 0000000..2aa7ec9 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/LeyUtilidadMarginalDecreciente.tsx @@ -0,0 +1,270 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Card, CardHeader } from '../../ui/Card'; + +interface LeyUtilidadMarginalDecrecienteProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + id: string; + nombre: string; + descripcion: string; + datos: { unidad: number; um: number; ejemplo: string }[]; + explicacion: string; +} + +const escenarios: Escenario[] = [ + { + id: 'pizza', + nombre: 'Pizza 🍕', + descripcion: 'Utilidad marginal de comer rebanadas de pizza', + datos: [ + { unidad: 1, um: 20, ejemplo: '¡Deliciosa! Gran satisfacción' }, + { unidad: 2, um: 15, ejemplo: 'Muy buena, sigue siendo placentera' }, + { unidad: 3, um: 10, ejemplo: 'Aún rica, pero menos emocionante' }, + { unidad: 4, um: 5, ejemplo: 'Estoy llenándome...' }, + { unidad: 5, um: 0, ejemplo: 'No puedo más, estoy satisfecho' }, + { unidad: 6, um: -5, ejemplo: '¡Me siento mal! Demasiado' }, + ], + explicacion: 'Cada rebanada adicional aporta menos utilidad que la anterior. Después de la quinta, la utilidad se vuelve negativa (malestar).' + }, + { + id: 'cafe', + nombre: 'Café ☕', + descripcion: 'Utilidad marginal de tomar tazas de café', + datos: [ + { unidad: 1, um: 15, ejemplo: '¡Perfecto para empezar el día!' }, + { unidad: 2, um: 12, ejemplo: 'Aún disfruto mucho el sabor' }, + { unidad: 3, um: 8, ejemplo: 'Está bien, me mantiene despierto' }, + { unidad: 4, um: 3, ejemplo: 'Ya no sabe igual de bien' }, + { unidad: 5, um: -2, ejemplo: 'Me pone nervioso/a' }, + ], + explicacion: 'La primera taza da la mayor satisfacción. Después de la cuarta, la cafeína excesiva genera malestar.' + }, + { + id: 'netflix', + nombre: 'Series de Netflix 📺', + descripcion: 'Utilidad marginal de ver episodios seguidos', + datos: [ + { unidad: 1, um: 25, ejemplo: '¡Emocionante! Quiero saber qué pasa' }, + { unidad: 2, um: 22, ejemplo: 'La trama se pone mejor' }, + { unidad: 3, um: 18, ejemplo: 'Bien, sigue interesante' }, + { unidad: 4, um: 12, ejemplo: 'Me estoy cansando un poco' }, + { unidad: 5, um: 6, ejemplo: 'Ya quiero dormir...' }, + { unidad: 6, um: 0, ejemplo: 'Me duermo viendo la pantalla' }, + ], + explicacion: 'Aunque disfrutamos la serie, el cansancio hace que cada episodio adicional aporte menos utilidad.' + } +]; + +export function LeyUtilidadMarginalDecreciente({ ejercicioId: _ejercicioId, onComplete }: LeyUtilidadMarginalDecrecienteProps) { + const [escenarioActivo, setEscenarioActivo] = useState(escenarios[0]); + const [respuestas, setRespuestas] = useState>({}); + const [mostrarResultados, setMostrarResultados] = useState(false); + const [preguntaActiva, setPreguntaActiva] = useState(0); + + const preguntas = [ + { + id: 'p1', + texto: '¿Qué sucede con la utilidad marginal a medida que consumes más unidades de un bien?', + opciones: [ + { id: 'a', texto: 'Aumenta constantemente', correcta: false }, + { id: 'b', texto: 'Permanece igual', correcta: false }, + { id: 'c', texto: 'Disminuye (Ley de Utilidad Marginal Decreciente)', correcta: true }, + { id: 'd', texto: 'Se vuelve negativa inmediatamente', correcta: false }, + ] + }, + { + id: 'p2', + texto: 'En el ejemplo de la pizza, ¿en qué rebanada la utilidad marginal se vuelve negativa?', + opciones: [ + { id: 'a', texto: 'Segunda rebanada', correcta: false }, + { id: 'b', texto: 'Cuarta rebanada', correcta: false }, + { id: 'c', texto: 'Quinta rebanada', correcta: false }, + { id: 'd', texto: 'Sexta rebanada', correcta: true }, + ] + }, + { + id: 'p3', + texto: '¿Por qué la utilidad marginal disminuye?', + opciones: [ + { id: 'a', texto: 'Porque el bien es de mala calidad', correcta: false }, + { id: 'b', texto: 'Porque nuestras necesidades se van satisfechando', correcta: true }, + { id: 'c', texto: 'Porque aumenta el precio', correcta: false }, + { id: 'd', texto: 'Porque cambian nuestros gustos', correcta: false }, + ] + } + ]; + + const handleRespuesta = (preguntaId: string, opcionId: string, esCorrecta: boolean) => { + setRespuestas(prev => ({ ...prev, [preguntaId]: esCorrecta })); + }; + + const verificarResultados = () => { + setMostrarResultados(true); + const correctas = Object.values(respuestas).filter(Boolean).length; + const score = Math.round((correctas / preguntas.length) * 100); + if (onComplete) onComplete(score); + }; + + const maxUM = Math.max(...escenarioActivo.datos.map(d => d.um)); + const minUM = Math.min(...escenarioActivo.datos.map(d => d.um)); + + return ( + + + +
+
+

Ley de Utilidad Marginal Decreciente

+

+ A medida que un consumidor aumenta el consumo de un bien, la utilidad marginal que obtiene de cada unidad adicional tiende a disminuir. +

+
+ +
+ {escenarios.map((esc) => ( + + ))} +
+ +
+

{escenarioActivo.nombre}

+

{escenarioActivo.descripcion}

+ +
+
+ + + + + Unidades consumidas + Utilidad Marginal + + + 0 + + {escenarioActivo.datos.map((d, i) => { + const x = 80 + i * 70; + const y = d.um >= 0 + ? 110 - (d.um / maxUM) * 80 + : 110 + (Math.abs(d.um) / Math.abs(minUM)) * 40; + return ( + + = 0 ? y : 110} + width="30" + height={d.um >= 0 ? 110 - y : y - 110} + fill={d.um >= 0 ? '#3b82f6' : '#ef4444'} + opacity="0.7" + /> + = 0 ? 5 : -15)} textAnchor="middle" className="text-xs fill-gray-700 font-mono"> + {d.um} + + {d.unidad} + + ); + })} + +
+
+ +
+ {escenarioActivo.datos.map((d) => ( +
0 ? 'border-blue-200 bg-blue-50' : 'border-red-200 bg-red-50' + }`} + > +
+ Unidad {d.unidad} + = 0 ? 'text-blue-600' : 'text-red-600'}`}> + UM = {d.um} + +
+

{d.ejemplo}

+
+ ))} +
+ +
+

Análisis: {escenarioActivo.explicacion}

+
+
+ +
+

Preguntas de Comprensión

+ +
+ {preguntas.map((pregunta, idx) => ( +
+

{idx + 1}. {pregunta.texto}

+
+ {pregunta.opciones.map((opcion) => ( + + ))} +
+ ))} +
+ +
+
+ {mostrarResultados && ( + <> + Puntuación: {Object.values(respuestas).filter(Boolean).length}/{preguntas.length} + + )} +
+ +
+
+
+ + ); +} + +export default LeyUtilidadMarginalDecreciente; diff --git a/frontend/src/components/exercises/modulo3/MaximizacionUtilidad.tsx b/frontend/src/components/exercises/modulo3/MaximizacionUtilidad.tsx new file mode 100644 index 0000000..1a0f0f3 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/MaximizacionUtilidad.tsx @@ -0,0 +1,337 @@ +import { useState, useEffect, useCallback } from 'react'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { Card, CardHeader } from '../../ui/Card'; + +interface MaximizacionUtilidadProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Bien { + nombre: string; + um: number[]; + precio: number; +} + +const bienes: Record = { + pizza: { + nombre: 'Pizza', + um: [20, 15, 10, 5, 0, -5], + precio: 10 + }, + hamburguesa: { + nombre: 'Hamburguesa', + um: [18, 12, 8, 4, 0], + precio: 8 + } +}; + +export function MaximizacionUtilidad({ ejercicioId: _ejercicioId, onComplete }: MaximizacionUtilidadProps) { + const [presupuesto, setPresupuesto] = useState(50); + const [cantidadPizza, setCantidadPizza] = useState(0); + const [cantidadHamburguesa, setCantidadHamburguesa] = useState(0); + const [mostrarCalculos, setMostrarCalculos] = useState(false); + const [mostrarOptimo, setMostrarOptimo] = useState(false); + const [respuestaUsuario, setRespuestaUsuario] = useState({ pizza: '', hamburguesa: '' }); + const [verificado, setVerificado] = useState(false); + + const gastoTotal = cantidadPizza * bienes.pizza.precio + cantidadHamburguesa * bienes.hamburguesa.precio; + const dentroPresupuesto = gastoTotal <= presupuesto; + + const calcularUM = useCallback((tipo: 'pizza' | 'hamburguesa', cantidad: number) => { + const bien = bienes[tipo]; + if (cantidad === 0) return 0; + let total = 0; + for (let i = 0; i < Math.min(cantidad, bien.um.length); i++) { + total += bien.um[i]; + } + return total; + }, []); + + const calcularUMgP = useCallback((tipo: 'pizza' | 'hamburguesa', cantidad: number) => { + const bien = bienes[tipo]; + if (cantidad >= bien.um.length) return 0; + return bien.um[cantidad] / bien.precio; + }, []); + + const utilidadTotal = calcularUM('pizza', cantidadPizza) + calcularUM('hamburguesa', cantidadHamburguesa); + + const encontrarOptimo = useCallback(() => { + let mejorUT = 0; + let mejorCombo = { pizza: 0, hamburguesa: 0 }; + + for (let p = 0; p <= 5; p++) { + for (let h = 0; h <= 5; h++) { + const costo = p * bienes.pizza.precio + h * bienes.hamburguesa.precio; + if (costo <= presupuesto) { + const ut = calcularUM('pizza', p) + calcularUM('hamburguesa', h); + if (ut > mejorUT) { + mejorUT = ut; + mejorCombo = { pizza: p, hamburguesa: h }; + } + } + } + } + return mejorCombo; + }, [presupuesto, calcularUM]); + + const optimo = encontrarOptimo(); + + const verificarRespuesta = () => { + const pizzaCorrecta = parseInt(respuestaUsuario.pizza) === optimo.pizza; + const hamburguesaCorrecta = parseInt(respuestaUsuario.hamburguesa) === optimo.hamburguesa; + + setVerificado(true); + + if (pizzaCorrecta && hamburguesaCorrecta && onComplete) { + onComplete(100); + } + }; + + return ( + + + +
+
+

Regla de Maximización de Utilidad

+

+ Para maximizar la utilidad sujeto a un presupuesto, el consumidor debe igualar la utilidad marginal por peso gastado en todos los bienes: +

+
+ UMg₁/P₁ = UMg₂/P₂ = ... = UMgₙ/Pₙ +
+
+ +
+
+

🍕 Pizza

+
+
+ Precio: + ${bienes.pizza.precio} +
+
+

Utilidad Marginal por unidad:

+

{bienes.pizza.um.join(', ')}

+
+
+
+ +
+

🍔 Hamburguesa

+
+
+ Precio: + ${bienes.hamburguesa.precio} +
+
+

Utilidad Marginal por unidad:

+

{bienes.hamburguesa.um.join(', ')}

+
+
+
+
+ +
+
+ + setPresupuesto(parseInt(e.target.value) || 0)} + className="w-24" + /> +
+ +
+
+ +
+ + {cantidadPizza} + +
+
+ +
+ +
+ + {cantidadHamburguesa} + +
+
+
+ +
+

Resumen de tu selección:

+
+
+

Gasto Pizza: ${cantidadPizza * bienes.pizza.precio}

+

Gasto Hamburguesa: ${cantidadHamburguesa * bienes.hamburguesa.precio}

+

Total: ${gastoTotal}

+
+
+

UT Pizza: {calcularUM('pizza', cantidadPizza)}

+

UT Hamburguesa: {calcularUM('hamburguesa', cantidadHamburguesa)}

+

UT Total: {utilidadTotal}

+
+
+ {!dentroPresupuesto && ( +

⚠️ ¡Excedes el presupuesto!

+ )} +
+
+ +
+ + +
+ + {mostrarCalculos && ( +
+

Tabla de UMg/P (Utilidad Marginal por peso)

+
+ + + + + + + + + + + + {[0, 1, 2, 3, 4, 5].map((i) => ( + + + + + + + + ))} + +
UnidadUMg PizzaUMg/P PizzaUMg HamburguesaUMg/P Hamburguesa
{i + 1}{bienes.pizza.um[i] || '-'} + {bienes.pizza.um[i] ? (bienes.pizza.um[i] / bienes.pizza.precio).toFixed(2) : '-'} + {bienes.hamburguesa.um[i] || '-'} + {bienes.hamburguesa.um[i] ? (bienes.hamburguesa.um[i] / bienes.hamburguesa.precio).toFixed(2) : '-'} +
+
+

+ El consumidor racional comprará primero la unidad con mayor UMg/P, luego la siguiente, hasta agotar el presupuesto. +

+
+ )} + + {mostrarOptimo && ( +
+

Combinación Óptima

+

+ Con un presupuesto de ${presupuesto}, la combinación que maximiza la utilidad es: +

+
+

🍕 Pizza: {optimo.pizza} unidades

+

🍔 Hamburguesa: {optimo.hamburguesa} unidades

+

+ Utilidad Total Máxima: {calcularUM('pizza', optimo.pizza) + calcularUM('hamburguesa', optimo.hamburguesa)} +

+
+

+ En el óptimo, el consumidor gasta todo su presupuesto en la combinación que proporciona la mayor utilidad total posible. +

+
+ )} + +
+

Ejercicio: Encuentra el Óptimo

+

+ Usando un presupuesto de $50, ¿cuál es la combinación óptima de pizza y hamburguesas que maximiza la utilidad? +

+ +
+
+ + { + setRespuestaUsuario(prev => ({ ...prev, pizza: e.target.value })); + setVerificado(false); + }} + className="w-20" + /> +
+
+ + { + setRespuestaUsuario(prev => ({ ...prev, hamburguesa: e.target.value })); + setVerificado(false); + }} + className="w-20" + /> +
+ + +
+ + {verificado && ( +
+ {parseInt(respuestaUsuario.pizza) === optimo.pizza && + parseInt(respuestaUsuario.hamburguesa) === optimo.hamburguesa + ? '¡Correcto! Has encontrado la combinación óptima.' + : `Incorrecto. La combinación óptima es: ${optimo.pizza} pizzas y ${optimo.hamburguesa} hamburguesas.` + } +
+ )} +
+
+ + ); +} + +export default MaximizacionUtilidad; diff --git a/frontend/src/components/exercises/modulo3/MetodoPuntoMedio.tsx b/frontend/src/components/exercises/modulo3/MetodoPuntoMedio.tsx new file mode 100644 index 0000000..531581c --- /dev/null +++ b/frontend/src/components/exercises/modulo3/MetodoPuntoMedio.tsx @@ -0,0 +1,247 @@ +import { useState, useCallback } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Calculator, RotateCcw, Target } from 'lucide-react'; + +interface MetodoPuntoMedioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface EjercicioData { + q1: number; + q2: number; + p1: number; + p2: number; + descripcion: string; +} + +const ejercicios: EjercicioData[] = [ + { + q1: 100, + q2: 120, + p1: 10, + p2: 8, + descripcion: 'Una empresa reduce el precio de su producto de $10 a $8 y las ventas aumentan de 100 a 120 unidades.', + }, + { + q1: 500, + q2: 400, + p1: 20, + p2: 25, + descripcion: 'El precio de un medicamento sube de $20 a $25 y la demanda cae de 500 a 400 unidades.', + }, + { + q1: 1000, + q2: 1050, + p1: 50, + p2: 48, + descripcion: 'Una tienda baja el precio de un artículo de $50 a $48 y las ventas suben de 1000 a 1050 unidades.', + }, +]; + +export function MetodoPuntoMedio({ ejercicioId: _ejercicioId, onComplete }: MetodoPuntoMedioProps) { + const [ejercicioIndex, setEjercicioIndex] = useState(0); + const [respuesta, setRespuesta] = useState(''); + const [validado, setValidado] = useState(false); + const [completado, setCompletado] = useState(false); + + const ejercicio = ejercicios[ejercicioIndex]; + + const calcularPuntoMedio = useCallback(() => { + const { q1, q2, p1, p2 } = ejercicio; + + // Método del punto medio (Arc Elasticity) + const qPromedio = (q1 + q2) / 2; + const pPromedio = (p1 + p2) / 2; + + const deltaQ = q2 - q1; + const deltaP = p2 - p1; + + const porcentajeQ = (deltaQ / qPromedio) * 100; + const porcentajeP = (deltaP / pPromedio) * 100; + + const elasticidad = porcentajeQ / porcentajeP; + + return { + qPromedio, + pPromedio, + deltaQ, + deltaP, + porcentajeQ, + porcentajeP, + elasticidad, + }; + }, [ejercicio]); + + const validarRespuesta = () => { + const { elasticidad } = calcularPuntoMedio(); + const respuestaNum = parseFloat(respuesta); + const tolerancia = 0.1; + + setValidado(true); + + if (Math.abs(respuestaNum - elasticidad) <= tolerancia) { + setCompletado(true); + if (onComplete) { + onComplete(100); + } + } + }; + + const siguienteEjercicio = () => { + setEjercicioIndex((prev) => (prev + 1) % ejercicios.length); + setRespuesta(''); + setValidado(false); + setCompletado(false); + }; + + const reiniciar = () => { + setRespuesta(''); + setValidado(false); + setCompletado(false); + }; + + const calculos = calcularPuntoMedio(); + + return ( +
+ + + +
+

Fórmula del Punto Medio:

+

+ Ep = (ΔQ / Qpromedio) / (ΔP / Ppromedio) +

+

+ Donde: Qpromedio = (Q1 + Q2) / 2, Ppromedio = (P1 + P2) / 2 +

+
+ +
+

+ + Ejercicio {ejercicioIndex + 1} de {ejercicios.length} +

+

{ejercicio.descripcion}

+
+ +
+
+
Punto 1
+

Q₁ = {ejercicio.q1} unidades

+

P₁ = ${ejercicio.p1}

+
+
+
Punto 2
+

Q₂ = {ejercicio.q2} unidades

+

P₂ = ${ejercicio.p2}

+
+
+ +
+

Desarrollo del Cálculo:

+
+

+ Qpromedio = ({ejercicio.q1} + {ejercicio.q2}) / 2 ={' '} + {calculos.qPromedio.toFixed(2)} +

+

+ Ppromedio = ({ejercicio.p1} + {ejercicio.p2}) / 2 ={' '} + {calculos.pPromedio.toFixed(2)} +

+

+ ΔQ = {ejercicio.q2} - {ejercicio.q1} = {calculos.deltaQ} +

+

ΔP = {ejercicio.p2} - {ejercicio.p1} = {calculos.deltaP}

+

+ %ΔQ = {calculos.deltaQ} / {calculos.qPromedio.toFixed(2)} ={' '} + {(calculos.porcentajeQ / 100).toFixed(4)} +

+

+ %ΔP = {calculos.deltaP} / {calculos.pPromedio.toFixed(2)} ={' '} + {(calculos.porcentajeP / 100).toFixed(4)} +

+

+ Ep = {(calculos.porcentajeQ / 100).toFixed(4)} / {(calculos.porcentajeP / 100).toFixed(4)} ={' '} + {calculos.elasticidad.toFixed(2)} +

+
+
+ +
+
+ + { + setRespuesta(e.target.value); + setValidado(false); + }} + placeholder="Ej: -0.82" + className="w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" + /> +
+ +
+ + + {completado && ( + + )} +
+
+ + {validado && ( +
+

+ {completado + ? `¡Correcto! La elasticidad es ${calculos.elasticidad.toFixed(2)}` + : `Incorrecto. La respuesta correcta es ${calculos.elasticidad.toFixed(2)}`} +

+
+ )} + + + +

Ventaja del Método del Punto Medio:

+

+ El método del punto medio proporciona el mismo resultado independientemente de si el precio sube o baja, + evitando la asimetría del método tradicional. +

+

+ Ejemplo: Si el precio sube de $10 a $12 y luego baja de $12 a $10, + la elasticidad calculada es la misma en ambas direcciones. +

+ +
+ ); +} + +export default MetodoPuntoMedio; diff --git a/frontend/src/components/exercises/modulo3/ParadojaAguaDiamantes.tsx b/frontend/src/components/exercises/modulo3/ParadojaAguaDiamantes.tsx new file mode 100644 index 0000000..13cd32c --- /dev/null +++ b/frontend/src/components/exercises/modulo3/ParadojaAguaDiamantes.tsx @@ -0,0 +1,290 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Card, CardHeader } from '../../ui/Card'; + +interface ParadojaAguaDiamantesProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function ParadojaAguaDiamantes({ ejercicioId: _ejercicioId, onComplete }: ParadojaAguaDiamantesProps) { + const [respuestas, setRespuestas] = useState>({}); + const [verificadas, setVerificadas] = useState>({}); + const [mostrarExplicacion, setMostrarExplicacion] = useState(false); + + const preguntas = [ + { + id: 'p1', + pregunta: 'Según la teoría de la utilidad, ¿por qué el agua es barata a pesar de ser esencial?', + opciones: [ + { id: 'a', texto: 'Porque es fácil de producir', correcta: false }, + { id: 'b', texto: 'Porque su utilidad marginal es baja debido a la abundancia', correcta: true }, + { id: 'c', texto: 'Porque la gente no la valora', correcta: false }, + { id: 'd', texto: 'Porque el gobierno la subsidia', correcta: false }, + ] + }, + { + id: 'p2', + pregunta: '¿Por qué los diamantes son caros a pesar de no ser esenciales?', + opciones: [ + { id: 'a', texto: 'Porque son raros y escasos', correcta: false }, + { id: 'b', texto: 'Porque la gente es irracional', correcta: false }, + { id: 'c', texto: 'Porque su utilidad marginal es alta debido a la escasez', correcta: true }, + { id: 'd', texto: 'Porque cuestan mucho de extraer', correcta: false }, + ] + }, + { + id: 'p3', + pregunta: 'La paradoja se resuelve distinguiendo entre:', + opciones: [ + { id: 'a', texto: 'Utilidad total vs Utilidad marginal', correcta: true }, + { id: 'b', texto: 'Demanda y oferta', correcta: false }, + { id: 'c', texto: 'Bienes de lujo y necesarios', correcta: false }, + { id: 'd', texto: 'Precio y valor', correcta: false }, + ] + } + ]; + + const handleRespuesta = (preguntaId: string, opcionId: string, esCorrecta: boolean) => { + setRespuestas(prev => ({ ...prev, [preguntaId]: opcionId })); + setVerificadas(prev => ({ ...prev, [preguntaId]: esCorrecta })); + + const todasCorrectas = Object.values({ + ...verificadas, + [preguntaId]: esCorrecta + }).every(Boolean); + + if (todasCorrectas && onComplete) { + onComplete(100); + } + }; + + const correctas = Object.values(verificadas).filter(Boolean).length; + const total = preguntas.length; + + return ( + + + +
+
+

La Paradoja

+

+ Adam Smith planteó esta paradoja en "La Riqueza de las Naciones" (1776): + ¿Cómo puede algo tan esencial como el agua tener un valor tan bajo en el mercado, + mientras que los diamantes, que no son necesarios para la supervivencia, valen tanto? +

+
+ +
+
+
💧
+

Agua

+
+
+ Utilidad Total: + MUY ALTA +
+
+ Utilidad Marginal: + BAJA +
+
+ Disponibilidad: + Abundante +
+
+ Precio: + $2 por m³ +
+
+ +
+

+ Ejemplo: La primera botella de agua tiene utilidad infinita (supervivencia), + pero la enésima botella cuando ya estás hidratado tiene UMg cercana a cero. +

+
+
+ +
+
💎
+

Diamantes

+
+
+ Utilidad Total: + BAJA +
+
+ Utilidad Marginal: + ALTA +
+
+ Disponibilidad: + Escasa +
+
+ Precio: + $10,000 por quilate +
+
+ +
+

+ Ejemplo: El primer diamante para una joya tiene alta utilidad marginal + (exclusividad, estatus), pero tener muchos diamantes no añade tanta utilidad adicional. +

+
+
+
+ +
+

La Resolución de la Paradoja

+
+
+

🔑 El precio depende de:

+
    +
  • La utilidad marginal de la última unidad
    • +
  • La escasez del bien
    • +
  • La disposición a pagar por una unidad adicional
    • +
+
+ +
+

📊 NO del valor total:

+
    +
  • El agua tiene alta utilidad total pero baja UMg
    • +
  • Los diamantes tienen baja utilidad total pero alta UMg
    • +
  • Los precios reflejan valor marginal, no total
    • +
+
+
+
+ +
+

Gráfico Comparativo: Utilidad Marginal

+
+
+ + + + + Cantidad consumida + Utilidad Marginal + + Agua + Diamantes + + + UMg alta + + + UMg ≈ 0 (abundante) + + + UMg alta + + + Primera + + + Primero + + + Las curvas de UMg son diferentes por la abundancia vs escasez + + +
+ +

+ El precio se determina por la utilidad marginal de la última unidad. + Como el agua es abundante, su UMg en el margen es baja. Los diamantes son escasos, + manteniendo una UMg alta. +

+
+
+ +
+

Preguntas de Comprensión

+
+ {preguntas.map((pregunta, idx) => ( +
+

{idx + 1}. {pregunta.pregunta}

+
+ {pregunta.opciones.map((opcion) => ( + + ))} +
+ ))} +
+ +
+
+ Puntuación: {correctas}/{total} +
+ +
+ + {mostrarExplicacion && ( +
+
Explicación Detallada
+
+

+ 1. Valor Total vs Valor Marginal: El valor que asignamos a algo + no depende de su utilidad total, sino de lo que estaríamos dispuestos a pagar por + una unidad adicional. +

+

+ 2. El Agua: Aunque sin agua moriríamos (utilidad total infinita), + como hay mucha agua disponible, la utilidad marginal de una botella más es muy baja. + Por eso pagamos poco. +

+

+ 3. Los Diamantes: Aunque no los necesitamos para vivir, + son escasos. La utilidad marginal del primer (y único) diamante es alta porque + representa exclusividad, estatus y belleza. +

+

+ 4. Conclusión: Los precios reflejan valores marginales, + no valores totales. Esto es fundamental para entender cómo funcionan los mercados. +

+
+ )} +
+
+ + ); +} + +export default ParadojaAguaDiamantes; diff --git a/frontend/src/components/exercises/modulo3/SustitutosComplementarios.tsx b/frontend/src/components/exercises/modulo3/SustitutosComplementarios.tsx new file mode 100644 index 0000000..dcf3b81 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/SustitutosComplementarios.tsx @@ -0,0 +1,328 @@ +import { useState } from 'react'; +import { Button } from '../../ui/Button'; +import { Card, CardHeader } from '../../ui/Card'; + +interface ParBienes { + id: number; + bienX: string; + bienY: string; + descripcion: string; + elasticidad: number; + relacionCorrecta: 'sustitutos' | 'complementarios' | 'independientes'; + explicacion: string; +} + +const paresBienes: ParBienes[] = [ + { + id: 1, + bienX: "Cerveza", + bienY: "Vino", + descripcion: "Bebidas alcohólicas que los consumidores pueden intercambiar", + elasticidad: 0.8, + relacionCorrecta: 'sustitutos', + explicacion: "Ecr > 0 indica que son sustitutos. Cuando sube el precio del vino, algunos consumidores cambian a cerveza." + }, + { + id: 2, + bienX: "Tinta de impresora", + bienY: "Impresoras", + descripcion: "Productos que se usan juntos", + elasticidad: -1.2, + relacionCorrecta: 'complementarios', + explicacion: "Ecr < 0 indica que son complementarios. Si sube el precio de las impresoras, se compran menos impresoras y por tanto menos tinta." + }, + { + id: 3, + bienX: "Mantequilla", + bienY: "Margarina", + descripcion: "Grasas para cocinar/similar uso", + elasticidad: 1.5, + relacionCorrecta: 'sustitutos', + explicacion: "Ecr > 0 indica que son sustitutos cercanos. Son productos muy intercambiables para los consumidores." + }, + { + id: 4, + bienX: "Hoteles", + bienY: "Gasolina", + descripcion: "Servicio de alojamiento y combustible", + elasticidad: 0.05, + relacionCorrecta: 'independientes', + explicacion: "Ecr ≈ 0 indica que son independientes. El precio de la gasolina casi no afecta la demanda de hoteles." + }, + { + id: 5, + bienX: "Automóviles", + bienY: "Gasolina", + descripcion: "Vehículos y su combustible", + elasticidad: -0.6, + relacionCorrecta: 'complementarios', + explicacion: "Ecr < 0 indica complementariedad. Si sube el precio de la gasolina, la demanda de autos (especialmente grandes) disminuye." + }, + { + id: 6, + bienX: "Coca-Cola", + bienY: "Pepsi", + descripcion: "Bebidas gaseosas similares", + elasticidad: 2.1, + relacionCorrecta: 'sustitutos', + explicacion: "Ecr > 0 indica sustitutos. Elasticidad alta porque son productos casi perfectamente intercambiables." + }, + { + id: 7, + bienX: "Computadoras", + bienY: "Software", + descripcion: "Hardware y programas", + elasticidad: -1.8, + relacionCorrecta: 'complementarios', + explicacion: "Ecr < 0 indica fuerte complementariedad. Computadoras y software se usan juntos obligatoriamente." + }, + { + id: 8, + bienX: "Zapatos", + bienY: "Pan", + descripcion: "Calzado y alimento básico", + elasticidad: 0.01, + relacionCorrecta: 'independientes', + explicacion: "Ecr ≈ 0 indica independencia. No existe relación económica entre estos bienes." + } +]; + +interface Respuesta { + relacion: string | null; + esCorrecta: boolean | null; +} + +interface SustitutosComplementariosProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function SustitutosComplementarios({ ejercicioId: _ejercicioId, onComplete }: SustitutosComplementariosProps) { + const [respuestas, setRespuestas] = useState>({}); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const seleccionarRelacion = (parId: number, relacion: string) => { + if (mostrarResultados) return; + + setRespuestas(prev => ({ + ...prev, + [parId]: { relacion, esCorrecta: null } + })); + }; + + const verificarTodo = () => { + const nuevasRespuestas: Record = {}; + + paresBienes.forEach(par => { + const respuesta = respuestas[par.id]; + if (respuesta?.relacion) { + nuevasRespuestas[par.id] = { + relacion: respuesta.relacion, + esCorrecta: respuesta.relacion === par.relacionCorrecta + }; + } + }); + + setRespuestas(nuevasRespuestas); + setMostrarResultados(true); + + const correctas = Object.values(nuevasRespuestas).filter(r => r.esCorrecta).length; + if (onComplete) { + onComplete(Math.round((correctas / paresBienes.length) * 100)); + } + }; + + const reiniciar = () => { + setRespuestas({}); + setMostrarResultados(false); + }; + + const getCardStyle = (parId: number) => { + const respuesta = respuestas[parId]; + if (!mostrarResultados || !respuesta?.relacion) { + return 'bg-white border-gray-200'; + } + return respuesta.esCorrecta + ? 'bg-green-50 border-green-400' + : 'bg-red-50 border-red-400'; + }; + + const getRelacionColor = (relacion: string) => { + switch (relacion) { + case 'sustitutos': return 'bg-green-100 border-green-300 text-green-800'; + case 'complementarios': return 'bg-red-100 border-red-300 text-red-800'; + case 'independientes': return 'bg-gray-100 border-gray-300 text-gray-800'; + default: return 'bg-white border-gray-200'; + } + }; + + const correctas = Object.values(respuestas).filter(r => r.esCorrecta).length; + const totalRespondidas = Object.keys(respuestas).length; + + return ( + + + +
+
+
+

Sustitutos

+

Ecr > 0

+

+ Cuando sube el precio de Y, aumenta la demanda de X. Los bienes compiten entre sí. +

+
+
+

Complementarios

+

Ecr < 0

+

+ Cuando sube el precio de Y, disminuye la demanda de X. Se consumen juntos. +

+
+
+

Independientes

+

Ecr ≈ 0

+

+ El precio de Y no afecta la demanda de X. No existe relación entre ellos. +

+
+
+ +
+ {paresBienes.map((par) => { + const respuesta = respuestas[par.id]; + + return ( +
+
+
+
+
+ {par.bienX} +
+ vs +
+ {par.bienY} +
+
+ +

{par.descripcion}

+ + {mostrarResultados && ( +
+

+ Ecr = {par.elasticidad} +

+

+ {par.relacionCorrecta === 'sustitutos' && 'Sustitutos'} + {par.relacionCorrecta === 'complementarios' && 'Complementarios'} + {par.relacionCorrecta === 'independientes' && 'Independientes'} +

+

{par.explicacion}

+
+ )} +
+ +
+ + + +
+
+
+ ); + })} +
+ +
+
+ Progreso: {totalRespondidas} / {paresBienes.length} +
+ + {!mostrarResultados ? ( + + ) : ( +
+
+

Puntuación

+

+ {correctas} / {paresBienes.length} +

+
+ +
+ )} +
+ + {mostrarResultados && ( +
= paresBienes.length / 2 + ? 'bg-yellow-100 border border-yellow-300' + : 'bg-red-100 border border-red-300' + }`}> +

+ {correctas === paresBienes.length + ? '¡Excelente! Has identificado todas las relaciones correctamente.' + : correctas >= paresBienes.length / 2 + ? '¡Buen trabajo! Algunas relaciones necesitan más atención.' + : 'Necesitas repasar la diferencia entre bienes sustitutos, complementarios e independientes.'} +

+
+ )} +
+ + ); +} + +export default SustitutosComplementarios; diff --git a/frontend/src/components/exercises/modulo3/UtilidadTotalVsMarginal.tsx b/frontend/src/components/exercises/modulo3/UtilidadTotalVsMarginal.tsx new file mode 100644 index 0000000..8d83342 --- /dev/null +++ b/frontend/src/components/exercises/modulo3/UtilidadTotalVsMarginal.tsx @@ -0,0 +1,243 @@ +import { useState, useEffect, useCallback } from 'react'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { Card, CardHeader } from '../../ui/Card'; + +interface UtilidadTotalVsMarginalProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface FilaDatos { + cantidad: number; + utilidadTotal: number; + utilidadMarginal: number | null; +} + +const datosBase: Omit[] = [ + { cantidad: 0, utilidadTotal: 0 }, + { cantidad: 1, utilidadTotal: 10 }, + { cantidad: 2, utilidadTotal: 18 }, + { cantidad: 3, utilidadTotal: 24 }, + { cantidad: 4, utilidadTotal: 28 }, + { cantidad: 5, utilidadTotal: 30 }, + { cantidad: 6, utilidadTotal: 30 }, + { cantidad: 7, utilidadTotal: 28 }, +]; + +export function UtilidadTotalVsMarginal({ ejercicioId: _ejercicioId, onComplete }: UtilidadTotalVsMarginalProps) { + const [respuestas, setRespuestas] = useState>({}); + const [verificadas, setVerificadas] = useState>({}); + const [mostrarGrafico, setMostrarGrafico] = useState(false); + const [mostrarExplicacion, setMostrarExplicacion] = useState(false); + + const datosCompletos: FilaDatos[] = datosBase.map((fila, index) => ({ + ...fila, + utilidadMarginal: index === 0 ? null : fila.utilidadTotal - datosBase[index - 1].utilidadTotal + })); + + const calcularUMg = useCallback((q: number) => { + const fila = datosCompletos.find(d => d.cantidad === q); + return fila?.utilidadMarginal ?? 0; + }, [datosCompletos]); + + const handleRespuesta = (cantidad: number, valor: string) => { + setRespuestas(prev => ({ ...prev, [cantidad]: valor })); + setVerificadas(prev => ({ ...prev, [cantidad]: false })); + }; + + const verificarRespuesta = (cantidad: number) => { + const respuesta = parseFloat(respuestas[cantidad]); + const correcta = calcularUMg(cantidad); + const esCorrecta = Math.abs(respuesta - correcta) < 0.1; + + setVerificadas(prev => ({ ...prev, [cantidad]: esCorrecta })); + + const todasCorrectas = datosCompletos + .filter(d => d.cantidad > 0) + .every(d => { + const r = parseFloat(respuestas[d.cantidad]); + return Math.abs(r - calcularUMg(d.cantidad)) < 0.1; + }); + + if (todasCorrectas && onComplete) { + onComplete(100); + } + }; + + const puntaje = Object.values(verificadas).filter(Boolean).length; + const total = datosCompletos.length - 1; + const porcentaje = Math.round((puntaje / total) * 100); + + const maxUT = Math.max(...datosCompletos.map(d => d.utilidadTotal)); + const maxQ = Math.max(...datosCompletos.map(d => d.cantidad)); + + return ( + + + +
+
+

Conceptos Clave

+
    +
  • Utilidad Total (UT): Satisfacción total obtenida de consumir Q unidades de un bien.
    • +
  • Utilidad Marginal (UMg): Utilidad adicional obtenida de consumir una unidad más.
    • +
  • Fórmula: UMg = ΔUT / ΔQ = UT(Q) - UT(Q-1)
    • +
+
+ +
+ + + + + + + + + + + {datosCompletos.map((fila) => ( + + + + + + + ))} + +
Cantidad (Q)Utilidad Total (UT)Calcular UMgEstado
{fila.cantidad}{fila.utilidadTotal} + {fila.cantidad === 0 ? ( + N/A (punto de partida) + ) : ( +
+ handleRespuesta(fila.cantidad, e.target.value)} + className="w-24" + placeholder="UMg" + /> + +
+ )} + 		+ {verificadas[fila.cantidad] === true && ( + ✓ Correcto + )} + {verificadas[fila.cantidad] === false && ( + ✗ Incorrecto + )} + {fila.cantidad > 0 && verificadas[fila.cantidad] === undefined && ( + - + )} +
+
+ +
+

+ Progreso: {puntaje}/{total} correctas ({porcentaje}%) +

+
+
+
+
+ +
+ + +
+ + {mostrarGrafico && ( +
+

Gráfico de Utilidad Total

+
+ + + + + Cantidad (Q) + Utilidad Total + + {datosCompletos.map((d, i) => { + const x = 60 + (d.cantidad / maxQ) * 300; + const y = 210 - (d.utilidadTotal / maxUT) * 180; + return ( + + + + {d.utilidadTotal} + + {d.cantidad} + + ); + })} + + { + const x = 60 + (d.cantidad / maxQ) * 300; + const y = 210 - (d.utilidadTotal / maxUT) * 180; + return `${x},${y}`; + }).join(' ')} + fill="none" + stroke="#3b82f6" + strokeWidth="2" + /> + +
+

+ Observa cómo la curva de utilidad total aumenta a tasas decrecientes hasta alcanzar su máximo en Q=5 y Q=6. +

+
+ )} + + {mostrarExplicacion && ( +
+

Cálculo paso a paso:

+
+ {datosCompletos.filter(d => d.cantidad > 0).map((fila) => ( +

+ Q={fila.cantidad}: UMg = UT({fila.cantidad}) - UT({fila.cantidad - 1}) = {fila.utilidadTotal} - {datosCompletos[fila.cantidad - 1].utilidadTotal} = {fila.utilidadMarginal} +

+ ))} +
+
+

Puntos importantes:

+
    +
  • La UMg es positiva mientras la UT esté aumentando (Q=1 a 5)
    • +
  • La UMg es cero cuando la UT es máxima (Q=6)
    • +
  • La UMg es negativa cuando la UT disminuye (Q=7)
    • +
+
+
+ )} +
+ + ); +} + +export default UtilidadTotalVsMarginal; diff --git a/frontend/src/components/exercises/modulo3/index.ts b/frontend/src/components/exercises/modulo3/index.ts index 5a5ca7b..d59e93e 100644 --- a/frontend/src/components/exercises/modulo3/index.ts +++ b/frontend/src/components/exercises/modulo3/index.ts @@ -1,3 +1,22 @@ +export { UtilidadTotalVsMarginal } from './UtilidadTotalVsMarginal'; +export { LeyUtilidadMarginalDecreciente } from './LeyUtilidadMarginalDecreciente'; +export { CanastaOptima } from './CanastaOptima'; +export { CurvasIndiferencia } from './CurvasIndiferencia'; +export { MaximizacionUtilidad } from './MaximizacionUtilidad'; +export { ElasticidadRectas } from './ElasticidadRectas'; +export { ElasticidadCurva } from './ElasticidadCurva'; +export { FormulaElasticidad } from './FormulaElasticidad'; +export { MetodoPuntoMedio } from './MetodoPuntoMedio'; export { CalculadoraElasticidad } from './CalculadoraElasticidad'; +export { ClasificacionElasticidad } from './ClasificacionElasticidad'; +export { DecisionesPrecios } from './DecisionesPrecios'; +export { FormulaElasticidadCruzada } from './FormulaElasticidadCruzada'; +export { SustitutosComplementarios } from './SustitutosComplementarios'; +export { GradoRelacion } from './GradoRelacion'; +export { FormulaElasticidadIngreso } from './FormulaElasticidadIngreso'; +export { BienesNormalesInferiores } from './BienesNormalesInferiores'; +export { BienesLujoNecesarios } from './BienesLujoNecesarios'; +export { CurvaEngel } from './CurvaEngel'; +export { ParadojaAguaDiamantes } from './ParadojaAguaDiamantes'; export { ClasificadorBienes } from './ClasificadorBienes'; export { EjerciciosExamen } from './EjerciciosExamen'; diff --git a/frontend/src/components/exercises/modulo4/CortoVsLargoPlazo.tsx b/frontend/src/components/exercises/modulo4/CortoVsLargoPlazo.tsx new file mode 100644 index 0000000..d6303ce --- /dev/null +++ b/frontend/src/components/exercises/modulo4/CortoVsLargoPlazo.tsx @@ -0,0 +1,213 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, Clock, Calendar, AlertCircle } from 'lucide-react'; +import { QuizExercise, QuizOption } from '../common/QuizExercise'; + +interface CortoVsLargoPlazoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface FactorItem { + id: string; + nombre: string; + tipo: 'fijo' | 'variable'; + descripcion: string; +} + +const factores: FactorItem[] = [ + { id: '1', nombre: 'Edificio de fábrica', tipo: 'fijo', descripcion: 'No se puede cambiar en el corto plazo' }, + { id: '2', nombre: 'Maquinaria especializada', tipo: 'fijo', descripcion: 'Requiere tiempo para adquirir o vender' }, + { id: '3', nombre: 'Trabajadores temporales', tipo: 'variable', descripcion: 'Se pueden contratar/despedir rápidamente' }, + { id: '4', nombre: 'Materias primas', tipo: 'variable', descripcion: 'Se ajustan según la producción' }, + { id: '5', nombre: 'Contrato de arrendamiento', tipo: 'fijo', descripcion: 'Compromiso a largo plazo' }, + { id: '6', nombre: 'Horas extras', tipo: 'variable', descripcion: 'Se pueden aumentar o disminuir' }, +]; + +export function CortoVsLargoPlazo({ ejercicioId: _ejercicioId, onComplete }: CortoVsLargoPlazoProps) { + const [asignaciones, setAsignaciones] = useState>({}); + const [showResults, setShowResults] = useState(false); + const [puntuacion, setPuntuacion] = useState(0); + + const handleAsignar = (id: string, tipo: 'fijo' | 'variable') => { + if (showResults) return; + setAsignaciones(prev => ({ ...prev, [id]: tipo })); + }; + + const handleVerificar = () => { + let correctas = 0; + factores.forEach(factor => { + if (asignaciones[factor.id] === factor.tipo) { + correctas++; + } + }); + const puntaje = Math.round((correctas / factores.length) * 100); + setPuntuacion(puntaje); + setShowResults(true); + + if (onComplete && puntaje >= 70) { + onComplete(puntaje); + } + }; + + const handleReiniciar = () => { + setAsignaciones({}); + setShowResults(false); + setPuntuacion(0); + }; + + const todasAsignadas = factores.every(f => asignaciones[f.id] !== undefined); + + const quizOptions: QuizOption[] = [ + { id: 'a', text: 'En el corto plazo todos los factores son variables', isCorrect: false }, + { id: 'b', text: 'En el corto plazo al menos un factor es fijo', isCorrect: true }, + { id: 'c', text: 'En el largo plazo no hay factores variables', isCorrect: false }, + { id: 'd', text: 'El tiempo determina si un factor es fijo o variable', isCorrect: false }, + ]; + + return ( +
+ + + +
+
+
+ +

Corto Plazo

+
+

+ Periodo en el que al menos un factor de producción es fijo. + No se puede cambiar la cantidad de todos los factores. +

+
+ +
+
+ +

Largo Plazo

+
+

+ Periodo en el que todos los factores son variables. + La empresa puede ajustar todas sus capacidades productivas. +

+
+
+ +
+

+ Clasifica cada factor como Fijo o Variable en el corto plazo: +

+ +
+ {factores.map((factor) => ( +
+
+
+

{factor.nombre}

+

{factor.descripcion}

+
+
+ + +
+
+ {showResults && ( +

+ {asignaciones[factor.id] === factor.tipo + ? '✓ Correcto' + : `✗ Incorrecto. Es un factor ${factor.tipo}`} +

+ )} +
+ ))} +
+
+ + {!showResults ? ( +
+ +
+ ) : ( +
+
+
+

+ Puntuación: {puntuacion}% +

+

+ {puntuacion >= 70 + ? '¡Buen trabajo! Has comprendido la diferencia entre factores fijos y variables.' + : 'Repasa los conceptos e intenta de nuevo.'} +

+
+ +
+
+ )} + + + { + if (result.correct && onComplete && puntuacion >= 70) { + onComplete(Math.max(puntuacion, result.score)); + } + }} + exerciseId="corto-largo-plazo-quiz" + /> + +
+ +
+
+ ); +} + +export default CortoVsLargoPlazo; diff --git a/frontend/src/components/exercises/modulo4/CostoTotalMedioMarginal.tsx b/frontend/src/components/exercises/modulo4/CostoTotalMedioMarginal.tsx new file mode 100644 index 0000000..368cc74 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/CostoTotalMedioMarginal.tsx @@ -0,0 +1,212 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Calculator, CheckCircle, XCircle } from 'lucide-react'; + +export function CostoTotalMedioMarginal() { + const [respuestas, setRespuestas] = useState<{[key: string]: string}>({ + cme_q2: '', + cme_q4: '', + cmg_q3: '', + cmg_q5: '', + }); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const datos = [ + { q: 0, ct: 100 }, + { q: 1, ct: 150 }, + { q: 2, ct: 180 }, + { q: 3, ct: 220 }, + { q: 4, ct: 300 }, + { q: 5, ct: 450 }, + ]; + + // Cálculos correctos + const respuestasCorrectas: { [key: string]: string } = { + cme_q2: '90', // 180/2 + cme_q4: '75', // 300/4 + cmg_q3: '40', // 220-180 + cmg_q5: '150', // 450-300 + }; + + const handleInputChange = (campo: string, valor: string) => { + setRespuestas(prev => ({ ...prev, [campo]: valor })); + setMostrarResultados(false); + }; + + const validar = () => { + setMostrarResultados(true); + }; + + const todasCompletadas = Object.values(respuestas).every(r => r !== ''); + + const esCorrecto = (campo: string) => { + return respuestas[campo] === respuestasCorrectas[campo]; + }; + + const correctas = Object.keys(respuestasCorrectas).filter(esCorrecto).length; + + return ( +
+ + + +
+ {/* Datos base */} +
+ + + + + + + + + + + {datos.map((fila) => ( + + + + + + + ))} + +
Cantidad (Q)Costo Total (CT)CF (100)CV
{fila.q}${fila.ct}$100${fila.ct - 100}
+
+ + {/* Preguntas */} +
+

+ + Calcula los siguientes valores: +

+ +
+
+

1. CMe cuando Q = 2

+

Fórmula: CT / Q = 180 / 2

+
+ $ + handleInputChange('cme_q2', e.target.value)} + className={`w-20 px-2 py-1 border rounded ${ + mostrarResultados && esCorrecto('cme_q2') + ? 'border-green-500 bg-green-50' + : mostrarResultados && !esCorrecto('cme_q2') + ? 'border-red-500 bg-red-50' + : 'border-gray-300' + }`} + disabled={mostrarResultados} + /> + {mostrarResultados && esCorrecto('cme_q2') && } + {mostrarResultados && !esCorrecto('cme_q2') && } +
+
+ +
+

2. CMe cuando Q = 4

+

Fórmula: CT / Q = 300 / 4

+
+ $ + handleInputChange('cme_q4', e.target.value)} + className={`w-20 px-2 py-1 border rounded ${ + mostrarResultados && esCorrecto('cme_q4') + ? 'border-green-500 bg-green-50' + : mostrarResultados && !esCorrecto('cme_q4') + ? 'border-red-500 bg-red-50' + : 'border-gray-300' + }`} + disabled={mostrarResultados} + /> + {mostrarResultados && esCorrecto('cme_q4') && } + {mostrarResultados && !esCorrecto('cme_q4') && } +
+
+ +
+

3. CMg del 2do al 3er trabajador

+

Fórmula: CT₃ - CT₂ = 220 - 180

+
+ $ + handleInputChange('cmg_q3', e.target.value)} + className={`w-20 px-2 py-1 border rounded ${ + mostrarResultados && esCorrecto('cmg_q3') + ? 'border-green-500 bg-green-50' + : mostrarResultados && !esCorrecto('cmg_q3') + ? 'border-red-500 bg-red-50' + : 'border-gray-300' + }`} + disabled={mostrarResultados} + /> + {mostrarResultados && esCorrecto('cmg_q3') && } + {mostrarResultados && !esCorrecto('cmg_q3') && } +
+
+ +
+

4. CMg del 4to al 5to trabajador

+

Fórmula: CT₅ - CT₄ = 450 - 300

+
+ $ + handleInputChange('cmg_q5', e.target.value)} + className={`w-20 px-2 py-1 border rounded ${ + mostrarResultados && esCorrecto('cmg_q5') + ? 'border-green-500 bg-green-50' + : mostrarResultados && !esCorrecto('cmg_q5') + ? 'border-red-500 bg-red-50' + : 'border-gray-300' + }`} + disabled={mostrarResultados} + /> + {mostrarResultados && esCorrecto('cmg_q5') && } + {mostrarResultados && !esCorrecto('cmg_q5') && } +
+
+
+
+ + + + {mostrarResultados && ( +
+

Resultado: {correctas}/4 correctas

+ {correctas < 4 && ( +

Las respuestas correctas son: CMe(Q=2)=$90, CMe(Q=4)=$75, CMg(2→3)=$40, CMg(4→5)=$150

+ )} +
+ )} +
+ + + +

Fórmulas Importantes

+
+

Costo Medio (CMe): CMe = CT / Q

+

Costo Marginal (CMg): CMg = ΔCT / ΔQ = CTₙ - CTₙ₋₁

+

Observa cómo el CMg aumenta significativamente del 4to al 5to trabajador ($150 vs $40), + mostrando los rendimientos decrecientes.

+
+ +
+ ); +} + +export default CostoTotalMedioMarginal; diff --git a/frontend/src/components/exercises/modulo4/CostosFijosVsVariables.tsx b/frontend/src/components/exercises/modulo4/CostosFijosVsVariables.tsx new file mode 100644 index 0000000..6189924 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/CostosFijosVsVariables.tsx @@ -0,0 +1,180 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, DollarSign } from 'lucide-react'; + +export function CostosFijosVsVariables() { + const [clasificaciones, setClasificaciones] = useState<{[key: string]: 'fijo' | 'variable' | null}>({ + alquiler: null, + materias: null, + salarios: null, + luz: null, + depreciacion: null, + publicidad: null, + }); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const conceptos = [ + { id: 'alquiler', nombre: 'Alquiler del local', tipo: 'fijo' as const, explicacion: 'El alquiler se paga mensualmente independientemente de cuánto produzcas.' }, + { id: 'materias', nombre: 'Materias primas', tipo: 'variable' as const, explicacion: 'A más producción, más materias primas necesitas.' }, + { id: 'salarios', nombre: 'Salarios de obreros temporales', tipo: 'variable' as const, explicacion: 'Los obreros temporales se contratan según la demanda de producción.' }, + { id: 'luz', nombre: 'Electricidad de máquinas', tipo: 'variable' as const, explicacion: 'Más horas de producción = más consumo eléctrico.' }, + { id: 'depreciacion', nombre: 'Depreciación de maquinaria', tipo: 'fijo' as const, explicacion: 'La depreciación ocurre con el paso del tiempo, no con la cantidad producida.' }, + { id: 'publicidad', nombre: 'Publicidad (contrato anual)', tipo: 'fijo' as const, explicacion: 'El contrato de publicidad es un costo fijo por período.' }, + ]; + + const clasificar = (id: string, tipo: 'fijo' | 'variable') => { + setClasificaciones(prev => ({ ...prev, [id]: tipo })); + setMostrarResultados(false); + }; + + const validar = () => { + setMostrarResultados(true); + }; + + const todasClasificadas = Object.values(clasificaciones).every(c => c !== null); + const correctas = conceptos.filter(c => clasificaciones[c.id] === c.tipo).length; + + return ( +
+ + + +
+ {/* Gráfico comparativo */} +
+ + {/* Título */} + Comportamiento de Costos Fijos y Variables + + {/* Gráfico CF */} + Costo Fijo (CF) + + + Q + $ + {/* Línea horizontal CF */} + + CF = 1000 + + {/* Gráfico CV */} + Costo Variable (CV) + + + Q + $ + {/* Línea creciente CV */} + + + {/* Gráfico CT */} + Costo Total (CT) + + + Q + $ + {/* Línea CT = CF + CV */} + + {/* Línea punteada CF */} + + CF + +
+ + {/* Ejercicio de clasificación */} +
+ {conceptos.map((concepto) => { + const esCorrecto = mostrarResultados && clasificaciones[concepto.id] === concepto.tipo; + const esIncorrecto = mostrarResultados && clasificaciones[concepto.id] !== concepto.tipo && clasificaciones[concepto.id] !== null; + + return ( +
+
+
+ + {concepto.nombre} +
+
+ + +
+
+ + {mostrarResultados && ( +
+ {concepto.tipo === 'fijo' ? 'FIJO' : 'VARIABLE'}: {concepto.explicacion} +
+ )} +
+ ); + })} +
+ + + + {mostrarResultados && ( +
+
+ {correctas === 6 ? ( + + ) : ( + + )} + Resultado: {correctas}/6 correctas +
+
+ )} +
+ + + +

Definiciones Clave

+
+

Costo Fijo (CF): No depende del nivel de producción. Se incurren aunque Q = 0.

+

Costo Variable (CV): Varía directamente con la cantidad producida. CV = 0 cuando Q = 0.

+

Costo Total (CT): CT = CF + CV

+
+ +
+ ); +} + +export default CostosFijosVsVariables; diff --git a/frontend/src/components/exercises/modulo4/CostosMedios.tsx b/frontend/src/components/exercises/modulo4/CostosMedios.tsx new file mode 100644 index 0000000..08254c0 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/CostosMedios.tsx @@ -0,0 +1,204 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, PieChart } from 'lucide-react'; + +export function CostosMedios() { + const [respuesta, setRespuesta] = useState(null); + const [mostrarResultado, setMostrarResultado] = useState(false); + + const pregunta = { + texto: 'Según la gráfica, ¿cuál es la relación entre CFMe, CVMe y CMe en Q=4?', + opciones: [ + { id: 'a', texto: 'CFMe > CVMe > CMe', correcta: false }, + { id: 'b', texto: 'CMe = CFMe + CVMe', correcta: true }, + { id: 'c', texto: 'CVMe = CFMe + CMe', correcta: false }, + { id: 'd', texto: 'CFMe = CVMe = CMe', correcta: false }, + ], + explicacion: 'Correcto. El Costo Medio (CMe) es la suma del Costo Fijo Medio (CFMe) y el Costo Variable Medio (CVMe): CMe = CFMe + CVMe' + }; + + // Datos para la gráfica + const datos = [ + { q: 1, cfme: 100, cvme: 50, cme: 150 }, + { q: 2, cfme: 50, cvme: 40, cme: 90 }, + { q: 3, cfme: 33.33, cvme: 35, cme: 68.33 }, + { q: 4, cfme: 25, cvme: 32.5, cme: 57.5 }, + { q: 5, cfme: 20, cvme: 35, cme: 55 }, + { q: 6, cfme: 16.67, cvme: 42.5, cme: 59.17 }, + ]; + + const validar = () => { + setMostrarResultado(true); + }; + + const esCorrecta = respuesta === 'b'; + + return ( +
+ + + +
+ {/* Gráfico de barras apiladas */} +
+

Descomposición del Costo Medio

+ + {/* Ejes */} + + + + {/* Etiquetas */} + Cantidad (Q) + Costo Medio ($) + + {/* Barras apiladas */} + {datos.map((d, i) => { + const x = 90 + i * 80; + const alturaCVMe = (d.cvme / 160) * 180; + const alturaCFMe = (d.cfme / 160) * 180; + const alturaTotal = alturaCVMe + alturaCFMe; + + return ( + + {/* CFMe (parte superior) */} + + + {/* CVMe (parte inferior) */} + + + {/* Etiqueta Q */} + {d.q} + + {/* Valor CMe */} + + ${d.cme.toFixed(1)} + + + ); + })} + + {/* Línea de CMe */} + { + const x = 90 + i * 80; + const alturaTotal = ((d.cvme + d.cfme) / 160) * 180; + return `${x},${220 - alturaTotal}`; + }).join(' ')} + /> + + {/* Leyenda */} + + + CFMe + + CVMe + + CMe = CFMe + CVMe + + +
+ + {/* Observaciones */} +
+
+
CFMe (Costo Fijo Medio)
+

CFMe = CF / Q

+

Siempre decreciente. A mayor producción, el costo fijo se "reparte" entre más unidades.

+
+ +
+
CVMe (Costo Variable Medio)
+

CVMe = CV / Q

+

Tiene forma de U. Primero baja por eficiencias, luego sube por rendimientos decrecientes.

+
+
+ + {/* Pregunta */} +
+

{pregunta.texto}

+
+ {pregunta.opciones.map((opcion) => ( + + ))} +
+ + + + {mostrarResultado && ( +
+
+ {esCorrecta ? : } + + {esCorrecta ? '¡Correcto!' : 'Incorrecto'} + +
+

{pregunta.explicacion}

+
+ )} +
+
+ + + +
+ +

Resumen de Fórmulas

+
+
+

CFMe = CF / Q (siempre decreciente)

+

CVMe = CV / Q (forma de U)

+

CMe = CFMe + CVMe = CT / Q (forma de U)

+

Observa cómo CFMe se vuelve insignificante a altos niveles de producción, + mientras que CVMe domina el costo medio.

+
+ +
+ ); +} + +export default CostosMedios; diff --git a/frontend/src/components/exercises/modulo4/CurvaCostoLargoPlazo.tsx b/frontend/src/components/exercises/modulo4/CurvaCostoLargoPlazo.tsx new file mode 100644 index 0000000..d2d968c --- /dev/null +++ b/frontend/src/components/exercises/modulo4/CurvaCostoLargoPlazo.tsx @@ -0,0 +1,274 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, TrendingUp, RotateCcw, Calculator } from 'lucide-react'; + +interface CurvaCostoLargoPlazoProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface DatosEscala { + q: number; + cme: number; +} + +export function CurvaCostoLargoPlazo({ ejercicioId: _ejercicioId, onComplete }: CurvaCostoLargoPlazoProps) { + const datosBase: DatosEscala[] = [ + { q: 1, cme: 120 }, + { q: 2, cme: 85 }, + { q: 3, cme: 70 }, + { q: 4, cme: 65 }, + { q: 5, cme: 62 }, + { q: 6, cme: 60 }, + { q: 7, cme: 61 }, + { q: 8, cme: 64 }, + { q: 9, cme: 69 }, + { q: 10, cme: 75 }, + ]; + + const [respuestas, setRespuestas] = useState<{[key: string]: string}>({ + cmeMinimo: '', + cantidadOptima: '', + ctQ5: '', + }); + const [validado, setValidado] = useState(false); + const [errores, setErrores] = useState([]); + + const datosCalculados = useMemo(() => { + return datosBase.map(d => ({ + ...d, + ct: d.q * d.cme, + })); + }, []); + + const cmeMinimo = useMemo(() => { + return Math.min(...datosBase.map(d => d.cme)); + }, []); + + const cantidadOptima = useMemo(() => { + const minCME = Math.min(...datosBase.map(d => d.cme)); + return datosBase.find(d => d.cme === minCME)?.q || 0; + }, []); + + const handleRespuestaChange = (campo: string, valor: string) => { + setRespuestas(prev => ({ ...prev, [campo]: valor })); + setValidado(false); + }; + + const validarRespuestas = () => { + const nuevosErrores: string[] = []; + + if (parseFloat(respuestas.cmeMinimo) !== cmeMinimo) { + nuevosErrores.push('El CMe mínimo no es correcto. Observa la curva U.'); + } + if (parseFloat(respuestas.cantidadOptima) !== cantidadOptima) { + nuevosErrores.push('La cantidad óptima no es correcta. Es donde el CMe es mínimo.'); + } + if (parseFloat(respuestas.ctQ5) !== 310) { + nuevosErrores.push('El CT a Q=5 es incorrecto. Recuerda: CT = CMe × Q'); + } + + setErrores(nuevosErrores); + setValidado(true); + + if (nuevosErrores.length === 0 && onComplete) { + onComplete(100); + } + }; + + const reiniciar = () => { + setRespuestas({ cmeMinimo: '', cantidadOptima: '', ctQ5: '' }); + setValidado(false); + setErrores([]); + }; + + const maxCMe = Math.max(...datosBase.map(d => d.cme)); + const escalaY = 120 / maxCMe; + + return ( +
+ + + +
+
+ + Concepto +
+

+ A largo plazo todos los factores son variables. La curva CMeLP tiene forma de U + debido a las economías y deseconomías de escala. El punto mínimo representa la + escala eficiente de producción. +

+
+ +
+ + + + Cantidad (Q) + CMe ($) + + {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((q, i) => ( + + + {q} + + ))} + + {[20, 40, 60, 80, 100, 120].map((val, i) => ( + + + {val} + + ))} + + `L ${60 + (i + 1) * 30},${180 - d.cme * escalaY}`).join(' ')}`} + fill="none" + stroke="#7c3aed" + strokeWidth="3" + /> + + {datosBase.map((d, i) => ( + + ))} + + + + Mínimo CMe = $60 + + +
+ +
+ + + + + + + + + + {datosCalculados.map((d, i) => ( + + + + + + ))} + +
QCMe ($)CT ($)
{d.q}{d.cme}{d.ct}
+
+ +
+

+ + Responde las siguientes preguntas: +

+
+
+ + handleRespuestaChange('cmeMinimo', e.target.value)} + className="w-full" + placeholder="Ej: 60" + /> +
+
+ + handleRespuestaChange('cantidadOptima', e.target.value)} + className="w-full" + placeholder="Ej: 6" + /> +
+
+ + handleRespuestaChange('ctQ5', e.target.value)} + className="w-full" + placeholder="CMe × Q" + /> +
+
+
+ +
+ + +
+ + {validado && errores.length === 0 && ( +
+
+ + ¡Correcto! La escala eficiente es Q = 6 con CMe = $60 +
+
+ )} + + {validado && errores.length > 0 && ( +
+

Revisa tus respuestas:

+
    + {errores.map((error, i) => ( +
  • {error}
    • + ))} +
+
+ )} + + + +

Fórmulas importantes:

+
    +
  • CT = CMe × Q (Costo Total)
    • +
  • CMe LP = Costo medio a largo plazo (todas las plantas posibles)
    • +
  • Escala eficiente: Cantidad donde CMe es mínimo
    • +
+ +
+ ); +} + +export default CurvaCostoLargoPlazo; diff --git a/frontend/src/components/exercises/modulo4/CurvasCosto.tsx b/frontend/src/components/exercises/modulo4/CurvasCosto.tsx new file mode 100644 index 0000000..215f5b3 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/CurvasCosto.tsx @@ -0,0 +1,218 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { TrendingUp, CheckCircle, DollarSign } from 'lucide-react'; + +export function CurvasCosto() { + const [etapaActiva, setEtapaActiva] = useState(null); + + // Datos para las curvas + const datosCT = [ + { q: 0, ct: 100 }, + { q: 1, ct: 140 }, + { q: 2, ct: 170 }, + { q: 3, ct: 190 }, + { q: 4, ct: 220 }, + { q: 5, ct: 270 }, + { q: 6, ct: 350 }, + { q: 7, ct: 460 }, + { q: 8, ct: 600 }, + ]; + + const datosCMe = [ + { q: 1, cme: 140 }, + { q: 2, cme: 85 }, + { q: 3, cme: 63.33 }, + { q: 4, cme: 55 }, + { q: 5, cme: 54 }, + { q: 6, cme: 58.33 }, + { q: 7, cme: 65.71 }, + { q: 8, cme: 75 }, + ]; + + const datosCMg = [ + { q: 1, cmg: 40 }, + { q: 2, cmg: 30 }, + { q: 3, cmg: 20 }, + { q: 4, cmg: 30 }, + { q: 5, cmg: 50 }, + { q: 6, cmg: 80 }, + { q: 7, cmg: 110 }, + { q: 8, cmg: 140 }, + ]; + + const puntosCorte = [ + { q: 4, desc: 'CMg corta a CMe en su mínimo' }, + { q: 5, desc: 'CMe mínimo (producción eficiente)' }, + ]; + + return ( +
+ + + +
+ {/* Gráfico de Costo Total */} +
+
+

Curva de Costo Total (CT)

+ CT = CF + CV +
+ + {/* Ejes */} + + + + {/* Etiquetas */} + Cantidad (Q) + Costo Total ($) + + {/* CF horizontal */} + + CF = 100 + + {/* Curva CT */} + `${50 + i * 45},${170 - (d.ct / 700) * 150}`).join(' ')} + /> + + {/* Puntos */} + {datosCT.map((d, i) => ( + + ))} + + {/* Etiquetas de Q */} + {datosCT.map((d, i) => ( + + {d.q} + + ))} + +
+ + {/* Gráfico de CMe y CMg */} +
+
+

Curvas de CMe y CMg

+
+ + CMe + + + CMg + +
+
+ + + {/* Ejes */} + + + + {/* Etiquetas */} + Cantidad (Q) + Costo ($) + + {/* Curva CMe */} + `${95 + i * 45},${170 - (d.cme / 160) * 150}`).join(' ')} + /> + + {/* Curva CMg */} + `${95 + i * 45},${170 - (d.cmg / 160) * 150}`).join(' ')} + /> + + {/* Puntos de corte */} + + Mínimo CMe + + {/* Etiquetas de Q */} + {datosCMe.map((d, i) => ( + + {d.q} + + ))} + + {/* Leyenda */} + + + CMe + + CMg + + +
+ + {/* Puntos clave */} +
+ {puntosCorte.map((punto, index) => ( + + ))} +
+ + {etapaActiva && ( +
+
+ + Análisis +
+

+ En Q=5 se alcanza el CMe mínimo ($54), que es el punto donde CMg = CMe. + Este es el nivel de producción más eficiente en términos de costos medios. +

+
+ )} +
+ + + +
+ +

Interpretación Económica

+
+
    +
  • Costo Total (CT): Siempre crece porque producir más cuesta más
    • +
  • Costo Medio (CMe): Tiene forma de U debido a los rendimientos decrecientes
    • +
  • Costo Marginal (CMg): Corta a CMe en su punto mínimo
    • +
  • Regla: Si CMg {'<'} CMe, el costo medio baja; si CMg {'>'} CMe, el costo medio sube
    • +
+ +
+ ); +} + +export default CurvasCosto; diff --git a/frontend/src/components/exercises/modulo4/DiseconomiasEscala.tsx b/frontend/src/components/exercises/modulo4/DiseconomiasEscala.tsx new file mode 100644 index 0000000..4fd7afb --- /dev/null +++ b/frontend/src/components/exercises/modulo4/DiseconomiasEscala.tsx @@ -0,0 +1,309 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, ArrowUp, RotateCcw, AlertTriangle } from 'lucide-react'; + +interface DiseconomiasEscalaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface RangoEscala { + min: number; + max: number; + tipo: 'economias' | 'constante' | 'diseconomias'; + descripcion: string; +} + +export function DiseconomiasEscala({ ejercicioId: _ejercicioId, onComplete }: DiseconomiasEscalaProps) { + const rangos: RangoEscala[] = [ + { min: 0, max: 500, tipo: 'economias', descripcion: 'Economías de escala' }, + { min: 500, max: 1000, tipo: 'constante', descripcion: 'Rendimientos constantes a escala' }, + { min: 1000, max: 2000, tipo: 'diseconomias', descripcion: 'Diseconomías de escala' }, + ]; + + const calcularCMe = (q: number): number => { + if (q <= 500) { + return 50 - (q / 500) * 20; + } else if (q <= 1000) { + return 30; + } else { + return 30 + ((q - 1000) / 1000) * 25; + } + }; + + const [cantidad, setCantidad] = useState(600); + const [respuestas, setRespuestas] = useState({ + cme: '', + ct: '', + rango: '', + }); + const [validado, setValidado] = useState(false); + const [errores, setErrores] = useState([]); + + const cmeActual = useMemo(() => calcularCMe(cantidad), [cantidad]); + const ctActual = useMemo(() => cmeActual * cantidad, [cmeActual, cantidad]); + const rangoActual = useMemo(() => { + return rangos.find(r => cantidad >= r.min && cantidad < r.max) || rangos[2]; + }, [cantidad]); + + const datosGrafico = useMemo(() => { + const puntos = []; + for (let q = 100; q <= 2000; q += 100) { + puntos.push({ q, cme: calcularCMe(q) }); + } + return puntos; + }, []); + + const handleRespuestaChange = (campo: string, valor: string) => { + setRespuestas(prev => ({ ...prev, [campo]: valor })); + setValidado(false); + }; + + const validarRespuestas = () => { + const nuevosErrores: string[] = []; + + if (Math.abs(parseFloat(respuestas.cme) - cmeActual) > 0.5) { + nuevosErrores.push(`El CMe no es correcto. Debería ser aproximadamente $${cmeActual.toFixed(2)}`); + } + if (Math.abs(parseFloat(respuestas.ct) - ctActual) > 50) { + nuevosErrores.push(`El CT no es correcto. Recuerda: CT = CMe × Q`); + } + if (respuestas.rango.toLowerCase() !== rangoActual.tipo.toLowerCase()) { + nuevosErrores.push(`El rango no es correcto. Estás en la zona de ${rangoActual.descripcion}`); + } + + setErrores(nuevosErrores); + setValidado(true); + + if (nuevosErrores.length === 0 && onComplete) { + onComplete(100); + } + }; + + const reiniciar = () => { + setCantidad(600); + setRespuestas({ cme: '', ct: '', rango: '' }); + setValidado(false); + setErrores([]); + }; + + const maxCMe = Math.max(...datosGrafico.map(d => d.cme)); + const escalaY = 100 / maxCMe; + + return ( +
+ + + +
+
+ + Concepto +
+

+ Las deseconomías de escala ocurren cuando la empresa crece tanto que los costos de + coordinación, supervisión y comunición aumentan. El CMe comienza a subir después + de alcanzar el punto óptimo de escala. +

+
+ +
+ +
+ { + setCantidad(parseInt(e.target.value)); + setValidado(false); + }} + className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" + /> + + {cantidad} + +
+
+ +
+ + + + Cantidad (Q) + CMe ($) + + {[500, 1000, 1500, 2000].map((q) => ( + + + {q} + + ))} + + {[10, 20, 30, 40, 50].map((val) => ( + + + {val} + + ))} + + + + + + Economías + Constantes + Diseconomías + + `${40 + (d.q / 2000) * 300},${160 - d.cme * escalaY * 2}`).join(' L ')}`} + fill="none" + stroke="#7c3aed" + strokeWidth="3" + /> + + + + + +
+ +
+
+

Costo Medio

+

${cmeActual.toFixed(2)}

+
+
+

Costo Total

+

${ctActual.toLocaleString()}

+
+
+

Zona

+

+ {rangoActual.descripcion} +

+
+
+ +
+

+ + Responde para Q = {cantidad}: +

+
+
+ + handleRespuestaChange('cme', e.target.value)} + className="w-full" + placeholder="Ej: 30.00" + /> +
+
+ + handleRespuestaChange('ct', e.target.value)} + className="w-full" + placeholder="CMe × Q" + /> +
+
+ + handleRespuestaChange('rango', e.target.value)} + className="w-full" + placeholder="economias" + /> +
+
+
+ +
+ + +
+ + {validado && errores.length === 0 && ( +
+
+ + ¡Correcto! Observa cómo el CMe cambia según la escala +
+
+ )} + + {validado && errores.length > 0 && ( +
+

Revisa tus respuestas:

+
    + {errores.map((error, i) => ( +
  • {error}
    • + ))} +
+
+ )} + + + +

Causas de las Diseconomías de Escala:

+
    +
  • • Problemas de coordinación: Más difícil coordinar muchos departamentos
    • +
  • • Burocracia: Decisiones lentas y procesos administrativos complejos
    • +
  • • Problemas de comunicación: Información se distorsiona en cadenas largas
    • +
  • • Desmotivación: Trabajadores se sienten insignificantes en empresas grandes
    • +
+ +
+ ); +} + +export default DiseconomiasEscala; diff --git a/frontend/src/components/exercises/modulo4/EconomiasEscala.tsx b/frontend/src/components/exercises/modulo4/EconomiasEscala.tsx new file mode 100644 index 0000000..577140c --- /dev/null +++ b/frontend/src/components/exercises/modulo4/EconomiasEscala.tsx @@ -0,0 +1,217 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, ArrowDown, RotateCcw, Factory } from 'lucide-react'; + +interface EconomiasEscalaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface EscalaData { + planta: string; + capacidad: number; + cf: number; + cvUnitario: number; +} + +export function EconomiasEscala({ ejercicioId: _ejercicioId, onComplete }: EconomiasEscalaProps) { + const datosPlantas: EscalaData[] = [ + { planta: 'Pequeña', capacidad: 100, cf: 1000, cvUnitario: 10 }, + { planta: 'Mediana', capacidad: 500, cf: 3000, cvUnitario: 8 }, + { planta: 'Grande', capacidad: 1000, cf: 5000, cvUnitario: 6 }, + { planta: 'Muy Grande', capacidad: 2000, cf: 8000, cvUnitario: 5 }, + ]; + + const [produccion, setProduccion] = useState(500); + const [seleccion, setSeleccion] = useState(null); + const [validado, setValidado] = useState(false); + + const calculos = useMemo(() => { + return datosPlantas.map(p => { + const q = Math.min(produccion, p.capacidad); + const cv = q * p.cvUnitario; + const ct = p.cf + cv; + const cme = q > 0 ? ct / q : 0; + const puedeProducir = produccion <= p.capacidad; + return { ...p, q, cv, ct, cme, puedeProducir }; + }); + }, [produccion]); + + const plantaOptima = useMemo(() => { + const plantasFactibles = calculos.filter(c => c.puedeProducir); + if (plantasFactibles.length === 0) return null; + return plantasFactibles.reduce((min, curr) => curr.cme < min.cme ? curr : min); + }, [calculos]); + + const handleValidar = () => { + setValidado(true); + if (seleccion === plantaOptima?.planta && onComplete) { + onComplete(100); + } + }; + + const reiniciar = () => { + setProduccion(500); + setSeleccion(null); + setValidado(false); + }; + + return ( +
+ + + +
+
+ + Concepto +
+

+ Las economías de escala ocurren cuando el costo medio disminuye a medida que + aumenta la producción. Esto puede deberse a: especialización, tecnología eficiente, + descuentos por volumen en compras, y distribución de costos fijos. +

+
+ +
+ +
+ { + setProduccion(parseInt(e.target.value)); + setValidado(false); + setSeleccion(null); + }} + className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" + /> + + {produccion} + +
+
+ +
+ {calculos.map((calc) => ( +
calc.puedeProducir && setSeleccion(calc.planta)} + className={` + p-4 rounded-lg border-2 cursor-pointer transition-all + ${!calc.puedeProducir ? 'bg-gray-100 border-gray-200 opacity-50 cursor-not-allowed' : ''} + ${seleccion === calc.planta ? 'border-primary bg-primary/5' : 'border-gray-200 hover:border-gray-300'} + ${validado && calc.planta === plantaOptima?.planta ? 'border-green-500 bg-green-50' : ''} + `} + > +
+
+ + {calc.planta} +
+ {!calc.puedeProducir && ( + + Insuficiente + + )} + {validado && calc.planta === plantaOptima?.planta && ( + + Óptima + + )} +
+
+
+ Capacidad máxima: + {calc.capacidad} unidades +
+
+ Costo Fijo: + ${calc.cf.toLocaleString()} +
+
+ CV unitario: + ${calc.cvUnitario} +
+ {calc.puedeProducir && ( + <> +
+ Costo Total: + ${calc.ct.toLocaleString()} +
+
+ Costo Medio: + c.puedeProducir).map(c => c.cme)) ? 'text-green-600' : 'text-gray-900'}`}> + ${calc.cme.toFixed(2)} + +
+ + )} +
+
+ ))} +
+ +
+

+ Selecciona la planta óptima para producir {produccion} unidades: +

+

+ Tip: Elige la planta con el menor costo medio (CMe) que pueda producir la cantidad deseada. +

+
+ +
+ + +
+ + {validado && seleccion === plantaOptima?.planta && ( +
+
+ + + ¡Correcto! La planta {plantaOptima.planta} tiene el menor CMe (${plantaOptima.cme.toFixed(2)}) + +
+
+ )} + + {validado && seleccion !== plantaOptima?.planta && ( +
+

+ La planta {seleccion} no es la óptima. La planta {plantaOptima?.planta} tiene un CMe menor (${plantaOptima?.cme.toFixed(2)} vs ${calculos.find(c => c.planta === seleccion)?.cme.toFixed(2)}). +

+
+ )} + + + +

Causas de las Economías de Escala:

+
    +
  • • Especialización del trabajo: Tareas más específicas = mayor eficiencia
    • +
  • • Tecnología especializada: Maquinaria más eficiente a gran escala
    • +
  • • Descuentos por volumen: Comprar insumos al por mayor es más barato
    • +
  • • División de costos fijos: Se reparten entre más unidades
    • +
+ +
+ ); +} + +export default EconomiasEscala; diff --git a/frontend/src/components/exercises/modulo4/EtapasProduccion.tsx b/frontend/src/components/exercises/modulo4/EtapasProduccion.tsx new file mode 100644 index 0000000..2ab219d --- /dev/null +++ b/frontend/src/components/exercises/modulo4/EtapasProduccion.tsx @@ -0,0 +1,231 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, Layers } from 'lucide-react'; + +interface Etapa { + id: string; + nombre: string; + descripcion: string; + color: string; + rango: string; +} + +const ETAPAS: Etapa[] = [ + { + id: 'i', + nombre: 'Etapa I', + descripcion: 'PMg creciente - Rendimientos crecientes a escala', + color: '#22c55e', + rango: '0 a 3 trabajadores' + }, + { + id: 'ii', + nombre: 'Etapa II', + descripcion: 'PMg decreciente pero positivo - Rendimientos decrecientes', + color: '#3b82f6', + rango: '3 a 6 trabajadores' + }, + { + id: 'iii', + nombre: 'Etapa III', + descripcion: 'PMg negativo - Producción total disminuye', + color: '#ef4444', + rango: 'Más de 6 trabajadores' + } +]; + +export function EtapasProduccion() { + const [respuestas, setRespuestas] = useState<{[key: number]: string}>({}); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const preguntas = [ + { + id: 1, + texto: '¿En qué etapa un productor racional NUNCA producirá?', + respuestaCorrecta: 'iii', + explicacion: 'En la Etapa III el producto marginal es negativo, lo que significa que agregar más trabajadores disminuye la producción total. Un productor racional evitará esta etapa.' + }, + { + id: 2, + texto: '¿En qué etapa los rendimientos marginales son crecientes?', + respuestaCorrecta: 'i', + explicacion: 'En la Etapa I, cada trabajador adicional aporta más que el anterior debido a la especialización y división del trabajo.' + }, + { + id: 3, + texto: '¿En qué etapa se encuentra la mayoría de la producción eficiente?', + respuestaCorrecta: 'ii', + explicacion: 'La Etapa II es donde opera un productor racional. Aunque los rendimientos marginales decrecen, siguen siendo positivos hasta cierto punto.' + } + ]; + + const seleccionarRespuesta = (preguntaId: number, etapaId: string) => { + setRespuestas(prev => ({ ...prev, [preguntaId]: etapaId })); + setMostrarResultados(false); + }; + + const validarTodas = () => { + setMostrarResultados(true); + }; + + const todasRespondidas = preguntas.every(p => respuestas[p.id]); + + return ( +
+ + + +
+ {/* Gráfico de etapas */} +
+

Producto Total y sus Etapas

+ + {/* Ejes */} + + + + {/* Etiquetas eje X */} + L1 + L2 + L3 + Cantidad de Trabajo (L) + + {/* Etiquetas eje Y */} + 0 + Q1 + Q2 + Q3 + Producto Total (PT) + + {/* Líneas verticales separadoras de etapas */} + + + + {/* Zonas de etapas */} + + + + + {/* Etiquetas de etapas */} + ETAPA I + PMg creciente + + ETAPA II + PMg decreciente + + ETAPA III + PMg negativo + + {/* Curva de producto total */} + + + {/* Punto de inflexión */} + + Punto de Inflexión + + {/* Punto máximo */} + + PT Máximo + + {/* Flecha mostrando declive */} + + + + + + + +
+ + {/* Leyenda de etapas */} +
+ {ETAPAS.map(etapa => ( +
+
{etapa.nombre}
+

{etapa.descripcion}

+

{etapa.rango}

+
+ ))} +
+ + {/* Preguntas */} +
+ {preguntas.map(pregunta => ( +
+

{pregunta.id}. {pregunta.texto}

+
+ {ETAPAS.map(etapa => { + const esCorrecta = mostrarResultados && respuestas[pregunta.id] === pregunta.respuestaCorrecta; + const esIncorrecta = mostrarResultados && respuestas[pregunta.id] === etapa.id && respuestas[pregunta.id] !== pregunta.respuestaCorrecta; + const esLaCorrecta = mostrarResultados && etapa.id === pregunta.respuestaCorrecta; + + return ( + + ); + })} +
+ {mostrarResultados && ( +
+ {pregunta.explicacion} +
+ )} +
+ ))} +
+ + + + {mostrarResultados && ( +
+
+ + Conclusión +
+

+ Un productor racional opera principalmente en la Etapa II, + donde aunque los rendimientos marginales decrecen, siguen siendo positivos. + La Etapa I es muy corta y la Etapa III es irracional desde el punto de vista económico. +

+
+ )} +
+ +
+ ); +} + +export default EtapasProduccion; diff --git a/frontend/src/components/exercises/modulo4/FuncionProduccion.tsx b/frontend/src/components/exercises/modulo4/FuncionProduccion.tsx new file mode 100644 index 0000000..168ac4b --- /dev/null +++ b/frontend/src/components/exercises/modulo4/FuncionProduccion.tsx @@ -0,0 +1,184 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, Factory, Calculator } from 'lucide-react'; + +interface FuncionProduccionProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function FuncionProduccion({ ejercicioId: _ejercicioId, onComplete }: FuncionProduccionProps) { + const [capital, setCapital] = useState(4); + const [trabajo, setTrabajo] = useState(5); + + const tablaProduccion = [ + [0, 0, 0, 0, 0, 0, 0, 0], + [0, 8, 12, 17, 20, 22, 23, 23], + [0, 12, 20, 28, 35, 40, 43, 44], + [0, 17, 28, 40, 50, 58, 63, 65], + [0, 20, 35, 50, 65, 75, 83, 87], + [0, 22, 40, 58, 75, 88, 98, 104], + [0, 23, 43, 63, 83, 98, 110, 118], + [0, 23, 44, 65, 87, 104, 118, 128], + ]; + + const output = useMemo(() => { + if (trabajo >= 0 && trabajo <= 7 && capital >= 0 && capital <= 7) { + return tablaProduccion[capital][trabajo]; + } + return 0; + }, [capital, trabajo]); + + const handleCompletar = () => { + if (onComplete) { + onComplete(100); + } + }; + + return ( +
+ + + +
+
+ + Concepto +
+

+ La función de producción muestra la relación técnica entre los factores productivos + (Capital K y Trabajo L) y la cantidad máxima de output (Q) que puede producirse. +

+
+ +
+
+ +
+ setCapital(parseInt(e.target.value))} + className="flex-1" + /> + + {capital} + +
+
+ +
+ +
+ setTrabajo(parseInt(e.target.value))} + className="flex-1" + /> + + {trabajo} + +
+
+
+ +
+
+ +
+

Output Total (Q)

+

+ Q = f({capital}, {trabajo}) = {output} +

+

+ unidades producidas +

+
+
+
+ +
+ + + + + {[0, 1, 2, 3, 4, 5, 6, 7].map(l => ( + + ))} + + + + {tablaProduccion.map((fila, k) => ( + + + {fila.map((q, l) => ( + + ))} + + ))} + +
K \ L{l}
{k} + {q} +
+
+ +
+

Nota: La celda resaltada en verde muestra el output actual. + Las filas representan niveles de Capital (K) y las columnas niveles de Trabajo (L).

+
+ + + +

Ejercicio de Comprensión

+
+

+ Si una empresa tiene 3 unidades de capital y contrata 4 trabajadores, + ¿cuál es el nivel de producción máximo alcanzable según la tabla? +

+
+ + + Respuesta correcta: {tablaProduccion[3][4]} unidades + +
+
+ + +
+ +
+
+ ); +} + +export default FuncionProduccion; diff --git a/frontend/src/components/exercises/modulo4/IngresoCompetenciaPerfecta.tsx b/frontend/src/components/exercises/modulo4/IngresoCompetenciaPerfecta.tsx new file mode 100644 index 0000000..c194c7b --- /dev/null +++ b/frontend/src/components/exercises/modulo4/IngresoCompetenciaPerfecta.tsx @@ -0,0 +1,278 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, Scale, RotateCcw, TrendingUp } from 'lucide-react'; + +interface IngresoCompetenciaPerfectaProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +export function IngresoCompetenciaPerfecta({ ejercicioId: _ejercicioId, onComplete }: IngresoCompetenciaPerfectaProps) { + const PRECIO_MERCADO = 50; + + const [cantidad, setCantidad] = useState(100); + const [respuestas, setRespuestas] = useState({ + it: '', + img: '', + relacion: '', + }); + const [validado, setValidado] = useState(false); + const [errores, setErrores] = useState([]); + + const ingresoTotal = useMemo(() => PRECIO_MERCADO * cantidad, [cantidad]); + const ingresoMarginal = PRECIO_MERCADO; + const ingresoPromedio = PRECIO_MERCADO; + + const datosTabla = useMemo(() => { + const datos = []; + for (let q = 0; q <= 200; q += 25) { + datos.push({ + q, + p: PRECIO_MERCADO, + it: PRECIO_MERCADO * q, + img: PRECIO_MERCADO, + ip: PRECIO_MERCADO, + }); + } + return datos; + }, []); + + const handleRespuestaChange = (campo: string, valor: string) => { + setRespuestas(prev => ({ ...prev, [campo]: valor })); + setValidado(false); + }; + + const validarRespuestas = () => { + const nuevosErrores: string[] = []; + + if (parseFloat(respuestas.it) !== ingresoTotal) { + nuevosErrores.push(`IT incorrecto. IT = P × Q = ${PRECIO_MERCADO} × ${cantidad}`); + } + if (parseFloat(respuestas.img) !== ingresoMarginal) { + nuevosErrores.push(`IMg incorrecto. En competencia perfecta, IMg = P`); + } + if (!['igual', 'igual a', 'es igual', 'son iguales'].some(r => respuestas.relacion.toLowerCase().includes(r))) { + nuevosErrores.push('En competencia perfecta, P = IMg = IPMe'); + } + + setErrores(nuevosErrores); + setValidado(true); + + if (nuevosErrores.length === 0 && onComplete) { + onComplete(100); + } + }; + + const reiniciar = () => { + setCantidad(100); + setRespuestas({ it: '', img: '', relacion: '' }); + setValidado(false); + setErrores([]); + }; + + return ( +
+ + + +
+
+ + Características +
+

+ En competencia perfecta, la empresa es tomadora de precios. El precio de mercado + es constante e independiente de la cantidad que produzca la empresa. Por eso: + P = IMg = IPMe. La curva de demanda es horizontal (perfectamente elástica). +

+
+ +
+
+

Precio de Mercado (P)

+

${PRECIO_MERCADO}

+

Constante

+
+
+

Ingreso Marginal (IMg)

+

${ingresoMarginal}

+

=P

+
+
+

Ingreso Promedio (IPMe)

+

${ingresoPromedio}

+

=P

+
+
+ +
+ +
+ { + setCantidad(parseInt(e.target.value)); + setValidado(false); + }} + className="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" + /> + + {cantidad} + +
+
+ +
+
+

Ingreso Total con Q = {cantidad}

+

+ IT = ${ingresoTotal.toLocaleString()} +

+

+ {PRECIO_MERCADO} × {cantidad} = ${ingresoTotal.toLocaleString()} +

+
+
+ +
+ + + + + + + + + + + + {datosTabla.filter((_, i) => i % 2 === 0 || i === datosTabla.length - 1).map((d, i) => ( + + + + + + + + ))} + +
QP ($)IT ($)IMg ($)IPMe ($)
{d.q}${d.p}${d.it.toLocaleString()}${d.img}${d.ip}
+
+ +
+

+ + Responde para Q = {cantidad}: +

+
+
+ + handleRespuestaChange('it', e.target.value)} + className="w-full" + placeholder={String(PRECIO_MERCADO * cantidad)} + /> +
+
+ + handleRespuestaChange('img', e.target.value)} + className="w-full" + placeholder="?" + /> +
+
+ + handleRespuestaChange('relacion', e.target.value)} + className="w-full" + placeholder="Son iguales / Diferentes" + /> +
+
+
+ +
+ + +
+ + {validado && errores.length === 0 && ( +
+
+ + ¡Correcto! En competencia perfecta: P = IMg = IPMe = ${PRECIO_MERCADO} +
+
+ )} + + {validado && errores.length > 0 && ( +
+

Revisa tus respuestas:

+
    + {errores.map((error, i) => ( +
  • {error}
    • + ))} +
+
+ )} + + + +

Resumen - Competencia Perfecta:

+
+
+

Fórmulas:

+
    +
  • • IT = P × Q
    • +
  • • IMg = P (constante)
    • +
  • • IPMe = P (constante)
    • +
+
+
+

Características:

+
    +
  • • La empresa es tomadora de precios
    • +
  • • Demanda horizontal (perfectamente elástica)
    • +
  • • P = IMg = IPMe
    • +
+
+
+ +
+ ); +} + +export default IngresoCompetenciaPerfecta; diff --git a/frontend/src/components/exercises/modulo4/IngresoMarginal.tsx b/frontend/src/components/exercises/modulo4/IngresoMarginal.tsx new file mode 100644 index 0000000..dd39b4d --- /dev/null +++ b/frontend/src/components/exercises/modulo4/IngresoMarginal.tsx @@ -0,0 +1,234 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, Activity, RotateCcw, Calculator } from 'lucide-react'; + +interface IngresoMarginalProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface FilaIngreso { + q: number; + p: number; +} + +export function IngresoMarginal({ ejercicioId: _ejercicioId, onComplete }: IngresoMarginalProps) { + const datosBase: FilaIngreso[] = [ + { q: 0, p: 100 }, + { q: 1, p: 90 }, + { q: 2, p: 80 }, + { q: 3, p: 70 }, + { q: 4, p: 60 }, + { q: 5, p: 50 }, + { q: 6, p: 40 }, + { q: 7, p: 30 }, + { q: 8, p: 20 }, + ]; + + const [respuestas, setRespuestas] = useState<{[key: string]: string}>({}); + const [validado, setValidado] = useState(false); + const [errores, setErrores] = useState([]); + + const datosCalculados = useMemo(() => { + return datosBase.map((fila, index) => { + const it = fila.p * fila.q; + const itAnterior = index > 0 ? datosBase[index - 1].p * datosBase[index - 1].q : 0; + const img = index > 0 ? it - itAnterior : null; + return { ...fila, it, img }; + }); + }, []); + + const handleRespuestaChange = (q: number, valor: string) => { + setRespuestas(prev => ({ ...prev, [`img_${q}`]: valor })); + setValidado(false); + }; + + const validarRespuestas = () => { + const nuevosErrores: string[] = []; + + datosCalculados.forEach((fila) => { + if (fila.img !== null) { + const respuesta = parseFloat(respuestas[`img_${fila.q}`] || '0'); + if (Math.abs(respuesta - fila.img) > 1) { + nuevosErrores.push(`Q=${fila.q}: El IMg debería ser $${fila.img}`); + } + } + }); + + setErrores(nuevosErrores); + setValidado(true); + + if (nuevosErrores.length === 0 && onComplete) { + onComplete(100); + } + }; + + const reiniciar = () => { + setRespuestas({}); + setValidado(false); + setErrores([]); + }; + + const maxIT = Math.max(...datosCalculados.map(d => d.it)); + const maxIMG = Math.max(...datosCalculados.filter(d => d.img !== null).map(d => Math.abs(d.img || 0))); + const escalaIT = maxIT > 0 ? 120 / maxIT : 1; + const escalaIMG = maxIMG > 0 ? 60 / maxIMG : 1; + + return ( +
+ + + +
+
+ + Concepto +
+

+ El Ingreso Marginal es el cambio en el ingreso total resultante de vender + una unidad adicional. Se calcula como: IMg = ΔIT / ΔQ. + Cuando el precio debe bajar para vender más, el IMg {'<'} IT. +

+
+ +
+ + + + Cantidad (Q) + $ (×100) + + {datosBase.map((d, i) => ( + + + {d.q} + + ))} + + `${60 + i * 35},${160 - d.it * escalaIT}`).join(' ')} + /> + + d.img !== null) + .map((d, i) => `${95 + i * 35},${160 - (d.img || 0) * escalaIMG - 50}`) + .join(' ')} + /> + + + + IT + + IMg + + +
+ +
+ + + + + + + + + + + {datosCalculados.map((fila) => ( + + + + + + + ))} + +
QP ($)IT ($)IMg ($)
{fila.q}{fila.p}{fila.it} + {fila.img !== null ? ( + handleRespuestaChange(fila.q, e.target.value)} + className="w-24" + placeholder="IMg" + /> + ) : ( + - + )} +
+
+ +
+

+ + Cálculo del Ingreso Marginal: +

+

+ IMg = IT(Q) - IT(Q-1) +

+

+ Ejemplo: Cuando Q aumenta de 2 a 3 unidades, el IT pasa de $160 a $210. + El IMg de la 3ra unidad es $210 - $160 = $50. +

+
+ +
+ + +
+ + {validado && errores.length === 0 && ( +
+
+ + ¡Todos los cálculos son correctos! +
+
+ )} + + {validado && errores.length > 0 && ( +
+

Errores encontrados:

+
    + {errores.map((error, i) => ( +
  • {error}
    • + ))} +
+
+ )} + + + +

Importancia del Ingreso Marginal:

+
    +
  • • Regla de maximización: La empresa maximiza beneficios cuando IMg = CMg
    • +
  • • IMg {'<'} P: Cuando debe bajar el precio para vender más, el IMg es menor que el precio
    • +
  • • IMg positivo: Mientras IMg {'>'} 0, el ingreso total aumenta
    • +
  • • IMg negativo: Si IMg {'<'} 0, vender más reduce el ingreso total
    • +
+ +
+ ); +} + +export default IngresoMarginal; diff --git a/frontend/src/components/exercises/modulo4/IngresoTotal.tsx b/frontend/src/components/exercises/modulo4/IngresoTotal.tsx new file mode 100644 index 0000000..bceeb50 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/IngresoTotal.tsx @@ -0,0 +1,273 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, DollarSign, RotateCcw, TrendingUp } from 'lucide-react'; + +interface IngresoTotalProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Producto { + nombre: string; + precio: number; +} + +export function IngresoTotal({ ejercicioId: _ejercicioId, onComplete }: IngresoTotalProps) { + const productos: Producto[] = [ + { nombre: 'Libros', precio: 25 }, + { nombre: 'Electrónicos', precio: 150 }, + { nombre: 'Ropa', precio: 45 }, + ]; + + const [productoSeleccionado, setProductoSeleccionado] = useState(0); + const [cantidad, setCantidad] = useState(100); + const [respuestaIT, setRespuestaIT] = useState(''); + const [validado, setValidado] = useState(false); + const [error, setError] = useState(''); + + const precio = productos[productoSeleccionado].precio; + const ingresoTotal = useMemo(() => precio * cantidad, [precio, cantidad]); + + const datosTabla = useMemo(() => { + const datos = []; + for (let q = 0; q <= 200; q += 20) { + datos.push({ q, it: precio * q }); + } + return datos; + }, [precio]); + + const handleValidar = () => { + const respuesta = parseFloat(respuestaIT); + if (Math.abs(respuesta - ingresoTotal) < 1) { + setError(''); + setValidado(true); + if (onComplete) { + onComplete(100); + } + } else { + setError(`Incorrecto. IT = P × Q = $${precio} × ${cantidad} = $${ingresoTotal.toLocaleString()}`); + setValidado(true); + } + }; + + const reiniciar = () => { + setCantidad(100); + setRespuestaIT(''); + setValidado(false); + setError(''); + }; + + const maxIT = Math.max(...datosTabla.map(d => d.it)); + const escalaY = maxIT > 0 ? 120 / maxIT : 1; + + return ( +
+ + + +
+
+ + Fórmula Fundamental +
+

+ El Ingreso Total representa el dinero total que recibe una empresa por la venta + de sus productos. Se calcula multiplicando el precio de venta por la cantidad + vendida: IT = P × Q +

+
+ +
+
+ + +
+ +
+ + { + setCantidad(parseInt(e.target.value)); + setValidado(false); + setRespuestaIT(''); + }} + className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer" + /> +
+
+ +
+
+

Precio (P)

+

${precio}

+
+
+

Cantidad (Q)

+

{cantidad}

+
+
+

Ingreso Total (IT)

+

${ingresoTotal.toLocaleString()}

+
+
+ +
+ + + + Cantidad (Q) + IT ($) + + {[0, 50, 100, 150, 200].map((q) => ( + + + {q} + + ))} + + + + + + + (${ingresoTotal.toLocaleString()}) + + +
+ +
+ + + + + + + + + + {datosTabla.filter((_, i) => i % 2 === 0).map((d, i) => ( + + + + + + ))} + +
QP ($)IT ($)
{d.q}${precio}${d.it.toLocaleString()}
+
+ +
+

+ + Calcula el Ingreso Total: +

+
+
+ + { + setRespuestaIT(e.target.value); + setValidado(false); + }} + className="w-full" + placeholder="Ingresa el IT" + /> +
+
+
+ +
+ + +
+ + {validado && !error && ( +
+
+ + ¡Correcto! IT = ${ingresoTotal.toLocaleString()} +
+
+ )} + + {validado && error && ( +
+

{error}

+
+ )} + + + +

Fórmula del Ingreso Total:

+
+

IT = P × Q

+

+ Donde: IT = Ingreso Total, P = Precio, Q = Cantidad vendida +

+
+ +
+ ); +} + +export default IngresoTotal; diff --git a/frontend/src/components/exercises/modulo4/LeyRendimientosDecrecientes.tsx b/frontend/src/components/exercises/modulo4/LeyRendimientosDecrecientes.tsx new file mode 100644 index 0000000..df06e9b --- /dev/null +++ b/frontend/src/components/exercises/modulo4/LeyRendimientosDecrecientes.tsx @@ -0,0 +1,173 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, TrendingDown } from 'lucide-react'; + +export function LeyRendimientosDecrecientes() { + const [respuesta, setRespuesta] = useState(null); + const [mostrarExplicacion, setMostrarExplicacion] = useState(false); + + const validarRespuesta = () => { + setMostrarExplicacion(true); + }; + + return ( +
+ + + +
+
+

+ Escenario: Un granjero tiene 100 hectáreas de tierra fijas. + Puede contratar más trabajadores, pero la cantidad de tierra no cambia. +

+
+ +
+

Producción de Trigo (toneladas)

+ + {/* Ejes */} + + + + {/* Etiquetas eje X - Trabajadores */} + 1 + 2 + 3 + 4 + 5 + Número de Trabajadores + + {/* Etiquetas eje Y - Producción */} + 0 + 50 + 100 + 150 + 200 + Producción (Tn) + + {/* Líneas de cuadrícula */} + + + + + {/* Curva de producción total */} + + + {/* Puntos de datos */} + + + + + + + {/* Etiquetas de puntos */} + 50Tn + 100Tn + 135Tn + 155Tn + 160Tn + + {/* Flecha indicando decrecimiento */} + + + + + + + +
+ +
+

+ ¿Qué observas en el punto del 5to trabajador? +

+
+ + + +
+
+ + + + {mostrarExplicacion && ( +
+
+ {respuesta === 'b' ? ( + + ) : ( + + )} + + {respuesta === 'b' ? '¡Correcto!' : 'Incorrecto'} + +
+

+ La respuesta correcta es b). Con el 5to trabajador, la producción + solo aumenta de 155Tn a 160Tn (5Tn adicionales), mientras que el 2do trabajador + aportó 50Tn adicionales. Esto demuestra la Ley de Rendimientos Decrecientes: + a medida que aumentamos una variable productiva (trabajo) manteniendo fijas las demás + (tierra), el producto marginal disminuye. +

+
+ )} +
+ + + +

+ + Fórmula del Producto Marginal +

+

+ PMg = ΔProducción Total / ΔTrabajadores +

+

+ PMg (1→2) = (100-50)/(2-1) = 50 Tn
+ PMg (4→5) = (160-155)/(5-4) = 5 Tn +

+ +
+ ); +} + +export default LeyRendimientosDecrecientes; diff --git a/frontend/src/components/exercises/modulo4/ProductoMarginal.tsx b/frontend/src/components/exercises/modulo4/ProductoMarginal.tsx new file mode 100644 index 0000000..702a7c1 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/ProductoMarginal.tsx @@ -0,0 +1,233 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, Calculator, TrendingDown, TrendingUp } from 'lucide-react'; + +interface ProductoMarginalProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface FilaDatos { + L: number; + PT: number; + PMg: number | null; +} + +export function ProductoMarginal({ ejercicioId: _ejercicioId, onComplete }: ProductoMarginalProps) { + const [respuestas, setRespuestas] = useState>({}); + const [verificado, setVerificado] = useState(false); + + const datosBase = [ + { L: 0, PT: 0 }, + { L: 1, PT: 10 }, + { L: 2, PT: 25 }, + { L: 3, PT: 45 }, + { L: 4, PT: 60 }, + { L: 5, PT: 70 }, + { L: 6, PT: 75 }, + { L: 7, PT: 75 }, + { L: 8, PT: 70 }, + ]; + + const datosCompletos: FilaDatos[] = useMemo(() => { + return datosBase.map((fila, index) => ({ + L: fila.L, + PT: fila.PT, + PMg: index > 0 ? fila.PT - datosBase[index - 1].PT : null, + })); + }, []); + + const handleInputChange = (L: number, value: string) => { + setRespuestas(prev => ({ ...prev, [L]: value })); + }; + + const handleVerificar = () => { + setVerificado(true); + + let correctas = 0; + let total = 0; + + datosCompletos.forEach(fila => { + if (fila.PMg !== null) { + total++; + if (parseInt(respuestas[fila.L]) === fila.PMg) { + correctas++; + } + } + }); + + if (correctas === total && onComplete) { + onComplete(100); + } + }; + + const handleReiniciar = () => { + setRespuestas({}); + setVerificado(false); + }; + + const todasRespondidas = datosCompletos + .filter(f => f.PMg !== null) + .every(f => respuestas[f.L] !== undefined && respuestas[f.L] !== ''); + + return ( +
+ + + +
+
+ + Fórmula +
+
+

+ PMg = ΔPT / ΔL = (PT₁ - PT₀) / (L₁ - L₀) +

+
+

+ El Producto Marginal mide la producción adicional generada + al emplear una unidad más de trabajo, manteniendo constante el capital. +

+
+ +
+ + + + + + + + + + + {datosCompletos.map((fila) => ( + + + + + + + ))} + +
Trabajo (L)Producto Total (PT)Producto Marginal (PMg)Estado
{fila.L}{fila.PT} + {fila.PMg === null ? ( + — + ) : ( +
+ handleInputChange(fila.L, e.target.value)} + disabled={verificado} + className={`w-24 ${ + verificado + ? parseInt(respuestas[fila.L]) === fila.PMg + ? 'border-success bg-success/5' + : 'border-error bg-error/5' + : '' + }`} + placeholder="?" + /> + {verificado && ( + + {parseInt(respuestas[fila.L]) === fila.PMg ? '✓' : `✗ ${fila.PMg}`} + + )} +
+ )} + 		+ {fila.PMg !== null && ( + <> + {fila.PMg > (datosCompletos[fila.L - 1]?.PMg || 0) ? ( + + + Creciente + + ) : fila.PMg > 0 ? ( + + Decreciente + + ) : ( + + + Negativo + + )} + + )} +
+
+ +
+

Ley de los Rendimientos Marginales Decrecientes

+

+ A medida que se agregan más unidades de un factor variable (trabajo) a un factor + fijo (capital), el producto marginal eventualmente disminuirá. +

+
+
+

Fase 1: PMg creciente

+

Especialización y eficiencia

+
+
+

Fase 2: PMg decreciente

+

Ley de rendimientos decrecientes

+
+
+

Fase 3: PMg negativo

+

Hacinamiento/sobrepoblación

+
+
+
+ + +
+
+ {!verificado ? ( + Completa todos los campos para verificar + ) : ( + + Correctos: {datosCompletos.filter(f => + f.PMg !== null && parseInt(respuestas[f.L]) === f.PMg + ).length} / {datosCompletos.filter(f => f.PMg !== null).length} + + )} +
+
+ {!verificado ? ( + + ) : ( + <> + + {datosCompletos.filter(f => + f.PMg !== null && parseInt(respuestas[f.L]) === f.PMg + ).length === datosCompletos.filter(f => f.PMg !== null).length && ( + + )} + + )} +
+
+
+ ); +} + +export default ProductoMarginal; diff --git a/frontend/src/components/exercises/modulo4/ProductoMedio.tsx b/frontend/src/components/exercises/modulo4/ProductoMedio.tsx new file mode 100644 index 0000000..973f0c1 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/ProductoMedio.tsx @@ -0,0 +1,247 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, Divide, ArrowRight } from 'lucide-react'; + +interface ProductoMedioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface FilaDatos { + L: number; + PT: number; + PMe: number | null; +} + +export function ProductoMedio({ ejercicioId: _ejercicioId, onComplete }: ProductoMedioProps) { + const [respuestas, setRespuestas] = useState>({}); + const [verificado, setVerificado] = useState(false); + + const datosBase = [ + { L: 1, PT: 10 }, + { L: 2, PT: 24 }, + { L: 3, PT: 39 }, + { L: 4, PT: 52 }, + { L: 5, PT: 60 }, + { L: 6, PT: 66 }, + { L: 7, PT: 70 }, + { L: 8, PT: 72 }, + ]; + + const datosCompletos: FilaDatos[] = useMemo(() => { + return datosBase.map(fila => ({ + L: fila.L, + PT: fila.PT, + PMe: fila.L > 0 ? parseFloat((fila.PT / fila.L).toFixed(2)) : null, + })); + }, []); + + const maxPMe = Math.max(...datosCompletos.map(d => d.PMe || 0)); + const maxPMeL = datosCompletos.find(d => d.PMe === maxPMe)?.L; + + const handleInputChange = (L: number, value: string) => { + setRespuestas(prev => ({ ...prev, [L]: value })); + }; + + const handleVerificar = () => { + setVerificado(true); + + let correctas = 0; + datosCompletos.forEach(fila => { + const respuesta = parseFloat(respuestas[fila.L]); + if (Math.abs(respuesta - (fila.PMe || 0)) < 0.1) { + correctas++; + } + }); + + if (correctas === datosCompletos.length && onComplete) { + onComplete(100); + } + }; + + const handleReiniciar = () => { + setRespuestas({}); + setVerificado(false); + }; + + const todasRespondidas = datosCompletos.every(f => + respuestas[f.L] !== undefined && respuestas[f.L] !== '' + ); + + return ( +
+ + + +
+
+ + Fórmula +
+
+

+ PMe = PT / L = Q / L +

+
+

+ El Producto Medio representa la producción por trabajador. + Mide la eficiencia promedio del factor trabajo. +

+
+ +
+ + + + + + + + + + + {datosCompletos.map((fila) => ( + + + + + + + ))} + +
Trabajo (L)Producto Total (PT)Producto Medio (PMe)Estado
{fila.L}{fila.PT} +
+ handleInputChange(fila.L, e.target.value)} + disabled={verificado} + className={`w-24 ${ + verificado + ? Math.abs(parseFloat(respuestas[fila.L]) - (fila.PMe || 0)) < 0.1 + ? 'border-success bg-success/5' + : 'border-error bg-error/5' + : '' + }`} + placeholder="?" + /> + {verificado && ( + + {Math.abs(parseFloat(respuestas[fila.L]) - (fila.PMe || 0)) < 0.1 + ? '✓' + : `✗ ${fila.PMe}`} + + )} +
+ 		+ {fila.PMe === maxPMe && ( + + Máximo + + )} +
+
+ +
+

Relación entre PMg y PMe

+
+
+ +

Cuando PMg {'>'} PMe, el producto medio está aumentando

+
+
+ +

Cuando PMg {'<'} PMe, el producto medio está disminuyendo

+
+
+ +

Cuando PMg = PMe, el producto medio está en su máximo

+
+
+
+ + + + + +
+

+ Pregunta: ¿En qué nivel de trabajo (L) se alcanza el Producto Medio máximo + y cuál es su valor? +

+ +
+
+
+

Nivel de trabajo (L):

+

{maxPMeL} trabajadores

+
+
+

Producto Medio máximo:

+

{maxPMe} unidades/trabajador

+
+
+
+ +

+ Interpretación: Cada trabajador produce en promedio {maxPMe} unidades + cuando hay {maxPMeL} trabajadores. Este es el punto de máxima eficiencia por trabajador. +

+
+ + +
+
+ {!verificado ? ( + Completa todos los cálculos con 2 decimales + ) : ( + + Correctos: {datosCompletos.filter(f => + Math.abs(parseFloat(respuestas[f.L]) - (f.PMe || 0)) < 0.1 + ).length} / {datosCompletos.length} + + )} +
+
+ {!verificado ? ( + + ) : ( + <> + + {datosCompletos.filter(f => + Math.abs(parseFloat(respuestas[f.L]) - (f.PMe || 0)) < 0.1 + ).length === datosCompletos.length && ( + + )} + + )} +
+
+
+ ); +} + +export default ProductoMedio; diff --git a/frontend/src/components/exercises/modulo4/ProductoTotal.tsx b/frontend/src/components/exercises/modulo4/ProductoTotal.tsx new file mode 100644 index 0000000..8a317c5 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/ProductoTotal.tsx @@ -0,0 +1,223 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, TrendingUp, AlertCircle } from 'lucide-react'; + +interface ProductoTotalProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface FilaProduccion { + L: number; + Q: number; +} + +const datosProduccion: FilaProduccion[] = [ + { L: 0, Q: 0 }, + { L: 1, Q: 8 }, + { L: 2, Q: 20 }, + { L: 3, Q: 36 }, + { L: 4, Q: 52 }, + { L: 5, Q: 64 }, + { L: 6, Q: 72 }, + { L: 7, Q: 76 }, + { L: 8, Q: 76 }, + { L: 9, Q: 72 }, +]; + +export function ProductoTotal({ ejercicioId: _ejercicioId, onComplete }: ProductoTotalProps) { + const [respuestaMax, setRespuestaMax] = useState(''); + const [respuestaL, setRespuestaL] = useState(''); + const [verificado, setVerificado] = useState(false); + const [correcto, setCorrecto] = useState({ max: false, l: false }); + + const maxQ = Math.max(...datosProduccion.map(d => d.Q)); + const maxL = datosProduccion.find(d => d.Q === maxQ)?.L; + + const handleVerificar = () => { + const esCorrectoMax = parseInt(respuestaMax) === maxQ; + const esCorrectoL = parseInt(respuestaL) === maxL; + + setCorrecto({ max: esCorrectoMax, l: esCorrectoL }); + setVerificado(true); + + if (esCorrectoMax && esCorrectoL && onComplete) { + onComplete(100); + } + }; + + const handleReiniciar = () => { + setRespuestaMax(''); + setRespuestaL(''); + setVerificado(false); + setCorrecto({ max: false, l: false }); + }; + + return ( +
+ + + +
+
+ + Definición +
+

+ El Producto Total (PT o Q) es la cantidad total de output producida + utilizando una cierta cantidad de un factor variable (generalmente trabajo L), + manteniendo fijos los demás factores. +

+

+ Fórmula: PT = Q = f(L) cuando K es constante +

+
+ +
+ + + + + + + + + + {datosProduccion.map((fila, index) => ( + + + + + + ))} + +
Trabajo (L)Producto Total (Q)Estado
{fila.L}{fila.Q} + {fila.Q === maxQ && ( + + Máximo + + )} + {fila.L > 0 && fila.Q < datosProduccion[index - 1].Q && ( + + Rendimientos negativos + + )} +
+
+ +
+
+ + Análisis +
+
    +
  • La producción aumenta hasta cierto punto (L = 7 u 8)
    • +
  • Beyond that point, los rendimientos son decrecientes
    • +
  • Con L = 9, el producto total disminuye (rendimientos negativos)
    • +
+
+ + + + + +
+
+
+ + setRespuestaMax(e.target.value)} + placeholder="Valor de Q máximo" + disabled={verificado} + className={verificado + ? correcto.max + ? 'border-success bg-success/5' + : 'border-error bg-error/5' + : '' + } + /> + {verificado && ( +

+ {correcto.max ? '✓ Correcto' : `✗ Incorrecto. La respuesta es ${maxQ}`} +

+ )} +
+ +
+ + setRespuestaL(e.target.value)} + placeholder="Valor de L" + disabled={verificado} + className={verificado + ? correcto.l + ? 'border-success bg-success/5' + : 'border-error bg-error/5' + : '' + } + /> + {verificado && ( +

+ {correcto.l ? '✓ Correcto' : `✗ Incorrecto. La respuesta es ${maxL}`} +

+ )} +
+
+ +
+ {!verificado ? ( + + ) : ( + <> + + {(correcto.max && correcto.l) && ( + + )} + + )} +
+
+ +
+ ); +} + +export default ProductoTotal; diff --git a/frontend/src/components/exercises/modulo4/ProductorRacional.tsx b/frontend/src/components/exercises/modulo4/ProductorRacional.tsx new file mode 100644 index 0000000..a083a70 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/ProductorRacional.tsx @@ -0,0 +1,199 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, Brain } from 'lucide-react'; + +export function ProductorRacional() { + const [respuestas, setRespuestas] = useState<{[key: string]: boolean | null}>({ + afirmacion1: null, + afirmacion2: null, + afirmacion3: null, + afirmacion4: null, + }); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const afirmaciones = [ + { + id: 'afirmacion1', + texto: 'Un productor racional siempre busca minimizar costos para un nivel dado de producción.', + esCorrecta: true, + explicacion: 'Correcto. La racionalidad económica implica optimizar recursos, lo que incluye minimizar costos para producir una cantidad determinada.' + }, + { + id: 'afirmacion2', + texto: 'Producir en la Etapa III es racional si los precios son muy altos.', + esCorrecta: false, + explicacion: 'Incorrecto. En la Etapa III el producto marginal es negativo, por lo que producir más disminuye el output total. Nunca es racional operar aquí.' + }, + { + id: 'afirmacion3', + texto: 'El productor racional equilibra el ingreso marginal con el costo marginal.', + esCorrecta: true, + explicacion: 'Correcto. La condición de maximización de beneficios es IMg = CMg. Producir donde el ingreso adicional iguala al costo adicional.' + }, + { + id: 'afirmacion4', + texto: 'Producir en la Etapa I es óptimo porque los rendimientos son crecientes.', + esCorrecta: false, + explicacion: 'Incorrecto. Aunque los rendimientos son crecientes en la Etapa I, el productor puede aumentar la producción y los beneficios moviéndose a la Etapa II.' + } + ]; + + const seleccionarRespuesta = (id: string, valor: boolean) => { + setRespuestas(prev => ({ ...prev, [id]: valor })); + setMostrarResultados(false); + }; + + const validar = () => { + setMostrarResultados(true); + }; + + const todasRespondidas = Object.values(respuestas).every(r => r !== null); + const correctas = afirmaciones.filter(a => respuestas[a.id] === a.esCorrecta).length; + + return ( +
+ + + +
+ {/* Diagrama de decisión */} +
+

Zona de Decisión del Productor

+ + {/* Ejes */} + + + + {/* Etiquetas */} + Cantidad de Trabajo + PT + + {/* Curva PT */} + + + {/* Zona I */} + + ZONA I + No óptima + + {/* Zona II - ZONA RACIONAL */} + + ZONA RACIONAL + ETAPA II + Donde opera el + productor eficiente + + {/* Zona III */} + + ZONA III + Irracional + + {/* Límites */} + + + +
+ + {/* Afirmaciones */} +
+ {afirmaciones.map((afirmacion, index) => ( +
+
+ + {index + 1} + +

{afirmacion.texto}

+
+ +
+ + +
+ + {mostrarResultados && ( +
+ {afirmacion.explicacion} +
+ )} +
+ ))} +
+ + + + {mostrarResultados && ( +
+
+ + Resultado: {correctas}/4 correctas +
+ {correctas === 4 && ( +

+ ¡Excelente! Comprendes perfectamente qué hace racional a un productor. +

+ )} + {correctas < 4 && ( +

+ Revisa las explicaciones para entender mejor el comportamiento del productor racional. +

+ )} +
+ )} +
+ +
+ ); +} + +export default ProductorRacional; diff --git a/frontend/src/components/exercises/modulo4/PuntoCierreEquilibrio.tsx b/frontend/src/components/exercises/modulo4/PuntoCierreEquilibrio.tsx new file mode 100644 index 0000000..81b5613 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/PuntoCierreEquilibrio.tsx @@ -0,0 +1,310 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, Power, RotateCcw, AlertTriangle, Calculator } from 'lucide-react'; + +interface PuntoCierreEquilibrioProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface Escenario { + nombre: string; + precio: number; + q: number; + cf: number; + cv: number; + descripcion: string; +} + +export function PuntoCierreEquilibrio({ ejercicioId: _ejercicioId, onComplete }: PuntoCierreEquilibrioProps) { + const escenarios: Escenario[] = [ + { nombre: 'Beneficios', precio: 60, q: 100, cf: 2000, cv: 3000, descripcion: 'P > CMe: La empresa gana dinero' }, + { nombre: 'Equilibrio', precio: 50, q: 100, cf: 2000, cv: 3000, descripcion: 'P = CMe: Beneficio = 0 (normal)' }, + { nombre: 'Pérdida pero opera', precio: 35, q: 100, cf: 2000, cv: 3000, descripcion: 'CVMe < P < CMe: Cubre CV, parte de CF' }, + { nombre: 'Punto de cierre', precio: 30, q: 100, cf: 2000, cv: 3000, descripcion: 'P = CVMe: Debe cerrar a largo plazo' }, + { nombre: 'Cierre inmediato', precio: 25, q: 100, cf: 2000, cv: 3000, descripcion: 'P < CVMe: Debe cerrar inmediatamente' }, + ]; + + const [escenarioSeleccionado, setEscenarioSeleccionado] = useState(0); + const [respuestas, setRespuestas] = useState({ + ingresoTotal: '', + costoTotal: '', + costoVariable: '', + beneficio: '', + decision: '', + }); + const [validado, setValidado] = useState(false); + const [errores, setErrores] = useState([]); + + const escenario = escenarios[escenarioSeleccionado]; + + const calculos = useMemo(() => { + const it = escenario.precio * escenario.q; + const ct = escenario.cf + escenario.cv; + const cvme = escenario.cv / escenario.q; + const cme = ct / escenario.q; + const beneficio = it - ct; + return { it, ct, cvme, cme, beneficio }; + }, [escenario]); + + const decisionCorrecta = useMemo(() => { + if (calculos.beneficio >= 0) return 'producir'; + if (escenario.precio > calculos.cvme) return 'producir_perdida'; + return 'cerrar'; + }, [calculos, escenario.precio]); + + const handleRespuestaChange = (campo: string, valor: string) => { + setRespuestas(prev => ({ ...prev, [campo]: valor })); + setValidado(false); + }; + + const validarRespuestas = () => { + const nuevosErrores: string[] = []; + + if (parseFloat(respuestas.ingresoTotal) !== calculos.it) { + nuevosErrores.push(`IT incorrecto. IT = P × Q = ${escenario.precio} × ${escenario.q}`); + } + if (parseFloat(respuestas.costoTotal) !== calculos.ct) { + nuevosErrores.push(`CT incorrecto. CT = CF + CV = ${escenario.cf} + ${escenario.cv}`); + } + if (parseFloat(respuestas.costoVariable) !== escenario.cv) { + nuevosErrores.push(`CV incorrecto. El CV es ${escenario.cv}`); + } + if (parseFloat(respuestas.beneficio) !== calculos.beneficio) { + nuevosErrores.push(`Beneficio incorrecto. Beneficio = IT - CT`); + } + + const respDecision = respuestas.decision.toLowerCase().trim(); + const esCorrecto = + (decisionCorrecta === 'producir' && (respDecision.includes('producir') || respDecision.includes('continuar'))) || + (decisionCorrecta === 'producir_perdida' && (respDecision.includes('producir') || respDecision.includes('operar'))) || + (decisionCorrecta === 'cerrar' && (respDecision.includes('cerrar') || respDecision.includes('parar'))); + + if (!esCorrecto) { + if (decisionCorrecta === 'producir') { + nuevosErrores.push('La empresa debe seguir produciendo porque obtiene beneficios.'); + } else if (decisionCorrecta === 'producir_perdida') { + nuevosErrores.push('La empresa debe seguir produciendo en el corto plazo porque P > CVMe (cubre los costos variables).'); + } else { + nuevosErrores.push('La empresa debe cerrar porque P < CVMe (no cubre los costos variables).'); + } + } + + setErrores(nuevosErrores); + setValidado(true); + + if (nuevosErrores.length === 0 && onComplete) { + onComplete(100); + } + }; + + const reiniciar = () => { + setRespuestas({ ingresoTotal: '', costoTotal: '', costoVariable: '', beneficio: '', decision: '' }); + setValidado(false); + setErrores([]); + }; + + return ( +
+ + + +
+
+ + Reglas de Decisión +
+

+ Punto de cierre: Si P {'<'} CVMe, la empresa debe cerrar inmediatamente + porque ni siquiera cubre los costos variables. Equilibrio: Si P = CMe, + la empresa obtiene beneficio cero (beneficio normal). +

+
+ +
+ + +
+ +
+
+ + + {escenario.nombre} + +
+

{escenario.descripcion}

+
+ +
+
+

Precio (P)

+

${escenario.precio}

+
+
+

Cantidad (Q)

+

{escenario.q}

+
+
+

Costo Fijo (CF)

+

${escenario.cf}

+
+
+

Costo Variable (CV)

+

${escenario.cv}

+
+
= 0 ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200' + }`}> +

CMe ($)

+

{calculos.cme.toFixed(2)}

+
+
+ +
+

+ + Completa los cálculos: +

+
+
+ + handleRespuestaChange('ingresoTotal', e.target.value)} + className="w-full" + placeholder="P × Q" + /> +
+
+ + handleRespuestaChange('costoTotal', e.target.value)} + className="w-full" + placeholder="CF + CV" + /> +
+
+ + handleRespuestaChange('costoVariable', e.target.value)} + className="w-full" + placeholder="CV" + /> +
+
+ + handleRespuestaChange('beneficio', e.target.value)} + className="w-full" + placeholder="IT - CT" + /> +
+
+ + handleRespuestaChange('decision', e.target.value)} + className="w-full" + placeholder="Producir / Cerrar" + /> +
+
+
+ +
+ + +
+ + {validado && errores.length === 0 && ( +
+
+ + ¡Correcto! Respuestas validadas +
+
+ )} + + {validado && errores.length > 0 && ( +
+

Revisa tus respuestas:

+
    + {errores.map((error, i) => ( +
  • {error}
    • + ))} +
+
+ )} + + +
+ +

Punto de Equilibrio:

+
    +
  • • Definición: Cuando P = CMe (Beneficio = 0)
    • +
  • • Significado: La empresa cubre todos sus costos
    • +
  • • Beneficio: Es el beneficio "normal" del empresario
    • +
  • • Decisión: Continuar operando
    • +
+ + + +

Punto de Cierre:

+
    +
  • • Definición: Cuando P = CVMe mínimo
    • +
  • • Si P {'>'} CVMe: Cubre CV, ayuda con CF → Seguir produciendo
    • +
  • • Si P = CVMe: Indiferente entre producir o cerrar
    • +
  • • Si P {'<'} CVMe: Ni siquiera cubre CV → Cerrar inmediatamente
    • +
+ +
+
+ ); +} + +export default PuntoCierreEquilibrio; diff --git a/frontend/src/components/exercises/modulo4/ReglaImgCmg.tsx b/frontend/src/components/exercises/modulo4/ReglaImgCmg.tsx new file mode 100644 index 0000000..82a5d06 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/ReglaImgCmg.tsx @@ -0,0 +1,309 @@ +import { useState, useMemo } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { Input } from '../../ui/Input'; +import { CheckCircle, Target, RotateCcw, Calculator } from 'lucide-react'; + +interface ReglaImgCmgProps { + ejercicioId: string; + onComplete?: (puntuacion: number) => void; +} + +interface DatoMercado { + q: number; + cmg: number; + img: number; + ct: number; + it: number; +} + +export function ReglaImgCmg({ ejercicioId: _ejercicioId, onComplete }: ReglaImgCmgProps) { + const datosMercado: DatoMercado[] = [ + { q: 0, cmg: 0, img: 100, ct: 50, it: 0 }, + { q: 1, cmg: 30, img: 90, ct: 80, it: 90 }, + { q: 2, cmg: 40, img: 80, ct: 120, it: 160 }, + { q: 3, cmg: 50, img: 70, ct: 170, it: 210 }, + { q: 4, cmg: 60, img: 60, ct: 230, it: 240 }, + { q: 5, cmg: 70, img: 50, ct: 300, it: 250 }, + { q: 6, cmg: 80, img: 40, ct: 380, it: 240 }, + { q: 7, cmg: 90, img: 30, ct: 470, it: 210 }, + { q: 8, cmg: 100, img: 20, ct: 570, it: 160 }, + ]; + + const [respuestas, setRespuestas] = useState({ + qOptima: '', + beneficio: '', + condicion: '', + }); + const [validado, setValidado] = useState(false); + const [errores, setErrores] = useState([]); + + const qOptima = useMemo(() => { + const datoOptimo = datosMercado + .filter(d => d.cmg <= d.img && d.q > 0) + .pop(); + return datoOptimo?.q || 0; + }, []); + + const beneficioMaximo = useMemo(() => { + const datoOptimo = datosMercado.find(d => d.q === qOptima); + return datoOptimo ? datoOptimo.it - datoOptimo.ct : 0; + }, [qOptima]); + + const handleRespuestaChange = (campo: string, valor: string) => { + setRespuestas(prev => ({ ...prev, [campo]: valor })); + setValidado(false); + }; + + const validarRespuestas = () => { + const nuevosErrores: string[] = []; + + if (parseInt(respuestas.qOptima) !== qOptima) { + nuevosErrores.push(`La cantidad óptima no es correcta. Busca donde IMg = CMg (o IMg >= CMg más cercano)`); + } + if (parseFloat(respuestas.beneficio) !== beneficioMaximo) { + nuevosErrores.push(`El beneficio máximo es incorrecto. Beneficio = IT - CT`); + } + if (!respuestas.condicion.toLowerCase().includes('img = cmg') && + !respuestas.condicion.toLowerCase().includes('img igual a cmg') && + !respuestas.condicion.toLowerCase().includes('ingreso marginal igual a costo marginal')) { + nuevosErrores.push('La condición de maximización es IMg = CMg'); + } + + setErrores(nuevosErrores); + setValidado(true); + + if (nuevosErrores.length === 0 && onComplete) { + onComplete(100); + } + }; + + const reiniciar = () => { + setRespuestas({ qOptima: '', beneficio: '', condicion: '' }); + setValidado(false); + setErrores([]); + }; + + const maxValor = Math.max(...datosMercado.map(d => Math.max(d.cmg, d.img))); + const escalaY = 100 / maxValor; + + return ( +
+ + + +
+
+ + Regla Fundamental +
+

+ Una empresa maximiza su beneficio cuando produce la cantidad donde el Ingreso Marginal (IMg) + es igual al Costo Marginal (CMg). Si IMg {'>'} CMg, debe producir más. Si IMg {'<'} CMg, + debe producir menos. +

+
+ +
+ + + + Cantidad (Q) + Costo/Ingreso ($) + + {datosMercado.map((d, i) => ( + + + {d.q} + + ))} + + d.q > 0) + .map((d, i) => `${85 + i * 35},${160 - d.cmg * escalaY}`) + .join(' ')} + /> + + d.q > 0) + .map((d, i) => `${85 + i * 35},${160 - d.img * escalaY}`) + .join(' ')} + /> + + + + + + CMg + + IMg + + + + Q* = {qOptima} + + +
+ +
+ + + + + + + + + + + + + + {datosMercado.map((d) => { + const beneficio = d.it - d.ct; + const esOptimo = d.q === qOptima; + const debeExpandir = d.img > d.cmg && d.q > 0; + const debeReducir = d.img < d.cmg; + + return ( + + + + + + + + + + ); + })} + +
QCMg ($)IMg ($)CT ($)IT ($)Beneficio ($)Decisión
{d.q}{d.cmg || '-'}{d.img}{d.ct}{d.it}= 0 ? 'text-green-600' : 'text-red-600'}`}> + {d.q === 0 ? '-' : beneficio} + + {d.q === 0 ? '-' : ( + + {esOptimo ? 'ÓPTIMO ✓' : debeExpandir ? 'Expandir ↑' : 'Reducir ↓'} + + )} +
+
+ +
+

+ + Responde: +

+
+
+ + handleRespuestaChange('qOptima', e.target.value)} + className="w-full" + placeholder="Busca IMg = CMg" + /> +
+
+ + handleRespuestaChange('beneficio', e.target.value)} + className="w-full" + placeholder="IT - CT" + /> +
+
+ + handleRespuestaChange('condicion', e.target.value)} + className="w-full" + placeholder="IMg = CMg" + /> +
+
+
+ +
+ + +
+ + {validado && errores.length === 0 && ( +
+
+ + + ¡Correcto! La empresa maximiza beneficios con Q* = {qOptima}, obteniendo un beneficio de ${beneficioMaximo} + +
+
+ )} + + {validado && errores.length > 0 && ( +
+

Revisa tus respuestas:

+
    + {errores.map((error, i) => ( +
  • {error}
    • + ))} +
+
+ )} + + + +

Reglas de Maximización:

+
    +
  • • IMg {'>'} CMg: La empresa debe aumentar la producción
    • +
  • • IMg {'<'} CMg: La empresa debe reducir la producción
    • +
  • • IMg = CMg: La empresa está maximizando beneficios
    • +
  • • Beneficio = IT - CT (o también: (P - CMe) × Q)
    • +
+ +
+ ); +} + +export default ReglaImgCmg; diff --git a/frontend/src/components/exercises/modulo4/RelacionCMgCMe.tsx b/frontend/src/components/exercises/modulo4/RelacionCMgCMe.tsx new file mode 100644 index 0000000..00efc9e --- /dev/null +++ b/frontend/src/components/exercises/modulo4/RelacionCMgCMe.tsx @@ -0,0 +1,235 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, GitCompare } from 'lucide-react'; + +export function RelacionCMgCMe() { + const [respuestas, setRespuestas] = useState<{[key: string]: string}>({ + pregunta1: '', + pregunta2: '', + pregunta3: '', + }); + const [mostrarResultados, setMostrarResultados] = useState(false); + + const preguntas = [ + { + id: 'pregunta1', + texto: 'Cuando CMg < CMe, el costo medio:', + opciones: [ + { id: 'a', texto: 'Aumenta', correcta: false }, + { id: 'b', texto: 'Disminuye', correcta: true }, + { id: 'c', texto: 'Se mantiene constante', correcta: false }, + ], + explicacion: 'Si el costo marginal es menor que el costo medio, "arrastra" el promedio hacia abajo, haciendo que CMe disminuya.' + }, + { + id: 'pregunta2', + texto: 'El CMe alcanza su mínimo cuando:', + opciones: [ + { id: 'a', texto: 'CMg = 0', correcta: false }, + { id: 'b', texto: 'CMg es máximo', correcta: false }, + { id: 'c', texto: 'CMg = CMe', correcta: true }, + ], + explicacion: 'El CMg corta a CMe en su punto mínimo. Cuando se igualan, CMe deja de caer y empieza a subir.' + }, + { + id: 'pregunta3', + texto: 'Cuando CMg > CMe, el costo medio:', + opciones: [ + { id: 'a', texto: 'Aumenta', correcta: true }, + { id: 'b', texto: 'Disminuye', correcta: false }, + { id: 'c', texto: 'Es cero', correcta: false }, + ], + explicacion: 'Si el costo marginal es mayor que el costo medio, "empuja" el promedio hacia arriba, haciendo que CMe aumente.' + } + ]; + + const seleccionarRespuesta = (preguntaId: string, opcionId: string) => { + setRespuestas(prev => ({ ...prev, [preguntaId]: opcionId })); + setMostrarResultados(false); + }; + + const validar = () => { + setMostrarResultados(true); + }; + + const todasRespondidas = Object.values(respuestas).every(r => r !== ''); + + const esCorrecta = (preguntaId: string) => { + const pregunta = preguntas.find(p => p.id === preguntaId); + return pregunta?.opciones.find(o => o.id === respuestas[preguntaId])?.correcta || false; + }; + + const correctas = preguntas.filter(p => esCorrecta(p.id)).length; + + return ( +
+ + + +
+ {/* Gráfico animado */} +
+

CMg "jalona" al CMe

+ + + {/* Ejes */} + + + + {/* Etiquetas */} + Cantidad (Q) + Costo ($) + + {/* Curva CMe */} + + + {/* Curva CMg */} + + + {/* Punto de corte */} + + Mínimo CMe + + CMg = CMe + + {/* Zona 1: CMg < CMe */} + + ZONA 1 + CMg {'<'} CMe + CMe ↓ decrece + + {/* Zona 2: CMg > CMe */} + + ZONA 2 + CMg {'>'} CMe + CMe ↑ aumenta + + {/* Flechas indicadoras */} + + + + + + + + + + + + + {/* Leyenda */} + + + CMe + + CMg + + +
+ + {/* Analogía */} +
+

Analogía del Promedio y la Nueva Nota

+

+ Imagina tu promedio académico (CMe) y tu próxima nota (CMg): +

+
    +
  • Si tu nueva nota (CMg) es menor que tu promedio (CMe) → tu promedio baja
    • +
  • Si tu nueva nota (CMg) es igual a tu promedio (CMe) → tu promedio se mantiene (mínimo)
    • +
  • Si tu nueva nota (CMg) es mayor que tu promedio (CMe) → tu promedio sube
    • +
+
+ + {/* Preguntas */} +
+ {preguntas.map((pregunta) => { + const preguntaCorrecta = esCorrecta(pregunta.id); + + return ( +
+

{pregunta.texto}

+
+ {pregunta.opciones.map((opcion) => { + const esSeleccionada = respuestas[pregunta.id] === opcion.id; + const mostrarCorrecta = mostrarResultados && opcion.correcta; + const mostrarIncorrecta = mostrarResultados && esSeleccionada && !opcion.correcta; + + return ( + + ); + })} +
+ + {mostrarResultados && ( +
+ {pregunta.explicacion} +
+ )} +
+ ); + })} +
+ + + + {mostrarResultados && ( +
+
+ + Resultado: {correctas}/3 correctas +
+ {correctas === 3 && ( +

¡Excelente! Dominas la relación entre CMg y CMe.

+ )} +
+ )} +
+ + + +

Regla de Oro

+
+

CMg {'<'} CMe → CMe decrece (costo marginal menor que el promedio)

+

CMg = CMe → CMe mínimo (punto de eficiencia)

+

CMg {'>'} CMe → CMe crece (costo marginal mayor que el promedio)

+
+ +
+ ); +} + +export default RelacionCMgCMe; diff --git a/frontend/src/components/exercises/modulo4/TablaCostos.tsx b/frontend/src/components/exercises/modulo4/TablaCostos.tsx new file mode 100644 index 0000000..f76bca4 --- /dev/null +++ b/frontend/src/components/exercises/modulo4/TablaCostos.tsx @@ -0,0 +1,200 @@ +import { useState } from 'react'; +import { Card, CardHeader } from '../../ui/Card'; +import { Button } from '../../ui/Button'; +import { CheckCircle, XCircle, Table } from 'lucide-react'; + +interface FilaCostos { + q: number; + cf: number; + cv: number; + ct: number | null; + cme: number | null; + cmg: number | null; +} + +export function TablaCostos() { + const CF_BASE = 200; + + const [filas, setFilas] = useState([ + { q: 0, cf: CF_BASE, cv: 0, ct: null, cme: null, cmg: null }, + { q: 1, cf: CF_BASE, cv: 50, ct: null, cme: null, cmg: null }, + { q: 2, cf: CF_BASE, cv: 90, ct: null, cme: null, cmg: null }, + { q: 3, cf: CF_BASE, cv: 120, ct: null, cme: null, cmg: null }, + { q: 4, cf: CF_BASE, cv: 160, ct: null, cme: null, cmg: null }, + { q: 5, cf: CF_BASE, cv: 220, ct: null, cme: null, cmg: null }, + { q: 6, cf: CF_BASE, cv: 300, ct: null, cme: null, cmg: null }, + { q: 7, cf: CF_BASE, cv: 400, ct: null, cme: null, cmg: null }, + { q: 8, cf: CF_BASE, cv: 520, ct: null, cme: null, cmg: null }, + ]); + + const [mostrarResultados, setMostrarResultados] = useState(false); + + const handleInputChange = (index: number, campo: 'ct' | 'cme' | 'cmg', valor: string) => { + const numValor = valor === '' ? null : parseFloat(valor); + const nuevasFilas = [...filas]; + nuevasFilas[index] = { ...nuevasFilas[index], [campo]: numValor }; + setFilas(nuevasFilas); + setMostrarResultados(false); + }; + + // Valores correctos + const valoresCorrectos = [ + { ct: 200, cme: null, cmg: null }, + { ct: 250, cme: 250, cmg: 50 }, + { ct: 290, cme: 145, cmg: 40 }, + { ct: 320, cme: 106.67, cmg: 30 }, + { ct: 360, cme: 90, cmg: 40 }, + { ct: 420, cme: 84, cmg: 60 }, + { ct: 500, cme: 83.33, cmg: 80 }, + { ct: 600, cme: 85.71, cmg: 100 }, + { ct: 720, cme: 90, cmg: 120 }, + ]; + + const validar = () => { + setMostrarResultados(true); + }; + + const esCorrecto = (index: number, campo: 'ct' | 'cme' | 'cmg', valor: number | null) => { + if (valor === null) return false; + const correcto = valoresCorrectos[index][campo]; + if (correcto === null) return true; + if (campo === 'cme' && index > 0) { + return Math.abs(valor - correcto) < 1; + } + return valor === correcto; + }; + + const todasCompletadas = filas.every((fila, index) => { + if (index === 0) return fila.ct !== null; + return fila.ct !== null && fila.cme !== null && fila.cmg !== null; + }); + + const calcularCorrectas = () => { + let correctas = 0; + filas.forEach((fila, index) => { + if (esCorrecto(index, 'ct', fila.ct)) correctas++; + if (index > 0) { + if (esCorrecto(index, 'cme', fila.cme)) correctas++; + if (esCorrecto(index, 'cmg', fila.cmg)) correctas++; + } + }); + return correctas; + }; + + const totalCampos = 1 + (filas.length - 1) * 3; + + return ( +
+ + + +
+
+ + + + + + + + + + + + + {filas.map((fila, index) => ( + + + + + + + + + ))} + +
QCFCVCTCMeCMg
{fila.q}${fila.cf}${fila.cv} +
+ $ + handleInputChange(index, 'ct', e.target.value)} + className="w-16 px-1 py-1 border rounded text-sm" + disabled={mostrarResultados} + /> + {mostrarResultados && esCorrecto(index, 'ct', fila.ct) && } + {mostrarResultados && !esCorrecto(index, 'ct', fila.ct) && } +
+ 		0 ? (esCorrecto(index, 'cme', fila.cme) ? 'bg-green-100' : 'bg-red-100') : ''}`}> + {index === 0 ? ( + - + ) : ( +
+ $ + handleInputChange(index, 'cme', e.target.value)} + className="w-16 px-1 py-1 border rounded text-sm" + disabled={mostrarResultados} + step="0.01" + /> + {mostrarResultados && esCorrecto(index, 'cme', fila.cme) && } + {mostrarResultados && !esCorrecto(index, 'cme', fila.cme) && } +
+ )} + 		0 ? (esCorrecto(index, 'cmg', fila.cmg) ? 'bg-green-100' : 'bg-red-100') : ''}`}> + {index === 0 ? ( + - + ) : ( +
+ $ + handleInputChange(index, 'cmg', e.target.value)} + className="w-16 px-1 py-1 border rounded text-sm" + disabled={mostrarResultados} + /> + {mostrarResultados && esCorrecto(index, 'cmg', fila.cmg) && } + {mostrarResultados && !esCorrecto(index, 'cmg', fila.cmg) && } +
+ )} +
+
+ + + + {mostrarResultados && ( +
+
+ + Resultado: {calcularCorrectas()}/{totalCampos} campos correctos + + {calcularCorrectas() < totalCampos && ( +

Revisa tus cálculos. Recuerda: CT = CF + CV, CMe = CT/Q, CMg = CT actual - CT anterior.

+ )} + + )} + + + + +

Fórmulas

+
+

CT = CF + CV

+

CMe = CT / Q (solo cuando Q {'>'} 0)

+

CMg = CTₙ - CTₙ₋₁ (costo del último trabajador)

+
+ + + ); +} + +export default TablaCostos; diff --git a/frontend/src/components/exercises/modulo4/index.ts b/frontend/src/components/exercises/modulo4/index.ts index 50633ca..cff8fd5 100644 --- a/frontend/src/components/exercises/modulo4/index.ts +++ b/frontend/src/components/exercises/modulo4/index.ts @@ -1,3 +1,25 @@ +export { FuncionProduccion } from './FuncionProduccion'; +export { ProductoTotal } from './ProductoTotal'; +export { ProductoMarginal } from './ProductoMarginal'; +export { ProductoMedio } from './ProductoMedio'; +export { LeyRendimientosDecrecientes } from './LeyRendimientosDecrecientes'; +export { EtapasProduccion } from './EtapasProduccion'; +export { ProductorRacional } from './ProductorRacional'; +export { CortoVsLargoPlazo } from './CortoVsLargoPlazo'; +export { CostosFijosVsVariables } from './CostosFijosVsVariables'; +export { CostoTotalMedioMarginal } from './CostoTotalMedioMarginal'; +export { TablaCostos } from './TablaCostos'; +export { CurvasCosto } from './CurvasCosto'; +export { CostosMedios } from './CostosMedios'; +export { RelacionCMgCMe } from './RelacionCMgCMe'; +export { EconomiasEscala } from './EconomiasEscala'; +export { DiseconomiasEscala } from './DiseconomiasEscala'; +export { CurvaCostoLargoPlazo } from './CurvaCostoLargoPlazo'; +export { IngresoTotal } from './IngresoTotal'; +export { IngresoMarginal } from './IngresoMarginal'; +export { IngresoCompetenciaPerfecta } from './IngresoCompetenciaPerfecta'; +export { PuntoCierreEquilibrio } from './PuntoCierreEquilibrio'; +export { ReglaImgCmg } from './ReglaImgCmg'; export { CalculadoraCostos } from './CalculadoraCostos'; export { SimuladorProduccion } from './SimuladorProduccion'; export { VisualizadorExcedentes } from './VisualizadorExcedentes'; diff --git a/frontend/src/components/progress/ScoreDisplay.tsx b/frontend/src/components/progress/ScoreDisplay.tsx index c1fe10b..d2aa08e 100644 --- a/frontend/src/components/progress/ScoreDisplay.tsx +++ b/frontend/src/components/progress/ScoreDisplay.tsx @@ -11,44 +11,52 @@ interface ScoreDisplayProps { } const NIVELES_CONFIG: Record = { - Novato: { - color: 'text-gray-600', + Novato: { + color: 'text-gray-600', bgColor: 'bg-gray-100', icon: '🌱' }, - Aprendiz: { - color: 'text-blue-600', - bgColor: 'bg-blue-100', + Estudiante: { + color: 'text-amber-700', + bgColor: 'bg-amber-100', icon: '📚' }, - Experto: { - color: 'text-purple-600', - bgColor: 'bg-purple-100', + Avanzado: { + color: 'text-gray-400', + bgColor: 'bg-gray-200', + icon: '⭐' + }, + Experto: { + color: 'text-yellow-600', + bgColor: 'bg-yellow-100', icon: '🏆' }, - Maestro: { - color: 'text-yellow-600', - bgColor: 'bg-yellow-100', - icon: '👑' + Maestro: { + color: 'text-cyan-500', + bgColor: 'bg-cyan-100', + icon: '💎' }, }; function calcularNivel(puntuacion: number): NivelUsuario { - if (puntuacion >= 2000) return 'Maestro'; - if (puntuacion >= 1000) return 'Experto'; - if (puntuacion >= 300) return 'Aprendiz'; + if (puntuacion >= 10000) return 'Maestro'; + if (puntuacion >= 6000) return 'Experto'; + if (puntuacion >= 3000) return 'Avanzado'; + if (puntuacion >= 1000) return 'Estudiante'; return 'Novato'; } function calcularProgresoNivel(puntuacion: number): { actual: number; siguiente: number; porcentaje: number } { - if (puntuacion >= 2000) { - return { actual: 2000, siguiente: 2000, porcentaje: 100 }; + if (puntuacion >= 10000) { + return { actual: 10000, siguiente: 10000, porcentaje: 100 }; + } else if (puntuacion >= 6000) { + return { actual: puntuacion, siguiente: 10000, porcentaje: ((puntuacion - 6000) / 4000) * 100 }; + } else if (puntuacion >= 3000) { + return { actual: puntuacion, siguiente: 6000, porcentaje: ((puntuacion - 3000) / 3000) * 100 }; } else if (puntuacion >= 1000) { - return { actual: puntuacion, siguiente: 2000, porcentaje: ((puntuacion - 1000) / 1000) * 100 }; - } else if (puntuacion >= 300) { - return { actual: puntuacion, siguiente: 1000, porcentaje: ((puntuacion - 300) / 700) * 100 }; + return { actual: puntuacion, siguiente: 3000, porcentaje: ((puntuacion - 1000) / 2000) * 100 }; } else { - return { actual: puntuacion, siguiente: 300, porcentaje: (puntuacion / 300) * 100 }; + return { actual: puntuacion, siguiente: 1000, porcentaje: (puntuacion / 1000) * 100 }; } } diff --git a/frontend/src/content/modulo1/ejercicios.ts b/frontend/src/content/modulo1/ejercicios.ts index b8e4f9c..174c3dd 100644 --- a/frontend/src/content/modulo1/ejercicios.ts +++ b/frontend/src/content/modulo1/ejercicios.ts @@ -1,12 +1,92 @@ import type { Ejercicio } from './introduccion'; -export interface EjercicioDetallado extends Ejercicio { +export interface EjercicioDetallado extends Omit { instrucciones: string; pistas?: string[]; solucion?: string; dificultad: 'facil' | 'medio' | 'dificil'; duracionEstimada: number; // en minutos objetivosAprendizaje: string[]; + // Configuraciones específicas por tipo + config?: Record; +} + +// ============================================ +// CONFIGURACIONES ESPECÍFICAS POR TIPO +// ============================================ + +export interface QuizConfig { + preguntas: QuizPregunta[]; + modo: 'seleccion-unica' | 'multiple' | 'clasificacion' | 'identificacion' | 'clasificacion-multiple'; + opciones?: string[]; + configuracionVisual?: { + mostrarBarraProgreso?: boolean; + mostrarPuntaje?: boolean; + retroalimentacionInmediata?: boolean; + tiempoLimite?: number; + permitirReintentar?: boolean; + }; + nivelesDificultad?: Record; +} + +export interface QuizPregunta { + id: string; + pregunta: string; + opciones?: string[]; + respuestaCorrecta: string | string[]; + explicacion?: string; + imagen?: string; + expresion?: string; + categoriaElasticidad?: string; + bien?: string; + descripcion?: string; + explicacionDetallada?: string; +} + +export interface SliderConfig { + escenario: { + titulo: string; + descripcion: string; + bienA: { nombre: string; unidad: string; maxProduccion: number; color: string }; + bienB: { nombre: string; unidad: string; maxProduccion: number; color: string }; + }; + parametros: { + mostrarFPP?: boolean; + mostrarCostoOportunidad?: boolean; + mostrarPuntoActual?: boolean; + tipoCurva?: 'lineal' | 'concava'; + totalRecursos?: number; + puntosDesplazamiento?: number; + }; +} + +export interface JuegoConfig { + tipoJuego: 'drag-and-drop' | 'memoria' | 'ordenar'; + elementosArrastrables?: Array<{ id: string; texto: string; tipo: string; categoria?: string }>; + opcionesParejas?: Array<{ id: string; elementoA: string; elementoB: string }>; + correcta?: boolean; +} + +export interface CalculadoraConfig { + formula: string; + variables: Array<{ nombre: string; simbolo: string; unidad: string; valorDefecto?: number }>; + resultadoEsperado?: number; + pasos?: string[]; + permiteDecimales?: boolean; +} + +export interface MatchingConfig { + columnas: Array<{ titulo: string; elementos: string[] }>; + parejasCorrectas: Array<{ izquierda: string; derecha: string }>; + modo: 'arrastrar' | 'seleccionar'; +} + +export interface InteractiveConfig { + tipo: 'fpp' | 'grafico' | 'diagrama' | 'clasificacion'; + puntosInteractivos?: Array<{ x: number; y: number;movible: boolean; etiqueta?: string }>; + restricciones?: { xMin: number; xMax: number; yMin: number; yMax: number }; + diagrama?: Record; + configuracion?: Record; } export interface ModuloEjercicios { @@ -392,13 +472,901 @@ Instrucciones: - Familias → Empresas: Gasto de consumo - Familias → Estado: Impuestos - Estado → Familias/Empresas: Transferencias y gasto público` + }, + +// ============================================ +// EJERCICIO 4: Quiz - Microeconomía vs Macroeconomía +// ============================================ +{ + id: 'quiz-micro-macro', + tipo: 'quiz', + titulo: 'Quiz: Microeconomía vs Macroeconomía', + descripcion: 'Identifica si los siguientes temas pertenecen al ámbito de la microeconomía o la macroeconomía', + instrucciones: `En este quiz debes clasificar cada enunciado o tema según corresponda a microeconomía o macroeconomía: + +- **Microeconomía**: Estudia decisiones individuales de hogares, empresas y mercados específicos +- **Macroeconomía**: Estudia la economía en su conjunto (PIB, inflación, desempleo, políticas económicas) + +Lee cada pregunta cuidadosamente y selecciona la respuesta correcta.`, + dificultad: 'facil', + duracionEstimada: 10, + objetivosAprendizaje: [ + 'Distinguir entre microeconomía y macroeconomía', + 'Comprender el nivel de análisis de cada rama económica', + 'Identificar ejemplos de decisiones individuales vs agregadas' + ], + config: { + preguntas: [ + { + id: 'p1', + pregunta: '¿Por qué bajan los precios de un teléfono específico?', + opciones: ['Microeconomía', 'Macroeconomía'], + respuestaCorrecta: 'Microeconomía', + explicacion: 'El estudio de cómo se determina el precio de un bien específico es un tema microeconómico' + }, + { + id: 'p2', + pregunta: '¿Por qué aumenta el desempleo en el país?', + opciones: ['Microeconomía', 'Macroeconomía'], + respuestaCorrecta: 'Macroeconomía', + explicacion: 'El desempleo es una variable agregada que estudia la macroeconomía' + }, + { + id: 'p3', + pregunta: '¿Cuánto debería producir una empresa para maximizar ganancias?', + opciones: ['Microeconomía', 'Macroeconomía'], + respuestaCorrecta: 'Microeconomía', + explicacion: 'Las decisiones de producción de una empresa individual son tema microeconómico' + }, + { + id: 'p4', + pregunta: '¿Qué causa la inflación en la economía?', + opciones: ['Microeconomía', 'Macroeconomía'], + respuestaCorrecta: 'Macroeconomía', + explicacion: 'La inflación es un fenómeno macroeconómico que afecta el nivel general de precios' + }, + { + id: 'p5', + pregunta: '¿Cómo afecta un impuesto al consumo de un bien específico?', + opciones: ['Microeconomía', 'Macroeconomía'], + respuestaCorrecta: 'Microeconomía', + explicacion: 'El efecto de impuestos en mercados específicos se estudia en microeconomía' + }, + { + id: 'p6', + pregunta: '¿Cómo se calcula el Producto Interno Bruto (PIB)?', + opciones: ['Microeconomía', 'Macroeconomía'], + respuestaCorrecta: 'Macroeconomía', + explicacion: 'El PIB es una variable macroeconómica que mide la producción agregada' + }, + { + id: 'p7', + pregunta: '¿Por qué algunas personas ganan más que otras?', + opciones: ['Microeconomía', 'Macroeconomía'], + respuestaCorrecta: 'Microeconomía', + explicacion: 'La distribución del ingreso a nivel individual es tema microeconómico' + }, + { + id: 'p8', + pregunta: '¿Qué políticas puede usar el gobierno para estimular la economía?', + opciones: ['Microeconomía', 'Macroeconomía'], + respuestaCorrecta: 'Macroeconomía', + explicacion: 'Las políticas fiscal y monetaria son herramientas macroeconómicas' + } + ], + modo: 'seleccion-unica', + configuracionVisual: { + mostrarBarraProgreso: true, + mostrarPuntaje: true, + retroalimentacionInmediata: true, + tiempoLimite: 600, + permitirReintentar: true } - ] -}; + }, + pistas: [ + 'La microeconomía estudia el "árbol" (individual), la macroeconomía estudia el "bosque" (conjunto)', + 'Si la pregunta menciona "un bien", "una empresa" o "un consumidor", probablemente sea microeconomía', + 'Si la pregunta menciona "país", "inflación", "desempleo" o "PIB", es macroeconomía' + ], + solucion: `Recordatorio: +- **Microeconomía**: Decisiones individuales (empresas, consumidores, mercados específicos) +- **Macroeconomía**: Fenómenos agregados (PIB, inflación, desempleo, políticas económicas)` +}, + +// ============================================ +// EJERCICIO 5: Quiz - Problema Económico Fundamental +// ============================================ +{ + id: 'quiz-problema-economico', + tipo: 'quiz', + titulo: 'Quiz: Las Tres Preguntas Económicas Fundamentales', + descripcion: 'Identifica cuál de las tres preguntas económicas fundamentales responde cada situación', + instrucciones: `Toda sociedad debe responder tres preguntas económicas básicas: + +1. **¿Qué producir?**: Qué bienes y servicios se fabricarán +2. **¿Cómo producir?**: Qué combinación de recursos y tecnología usar +3. **¿Para quién producir?**: Cómo se distribuirán los bienes producidos + +Identifica qué pregunta responde cada situación económica.`, + dificultad: 'facil', + duracionEstimada: 8, + objetivosAprendizaje: [ + 'Identificar las tres preguntas fundamentales de la economía', + 'Relacionar decisiones económicas con las preguntas fundamentales', + 'Comprender por qué toda sociedad debe resolver estas preguntas' + ], + config: { + preguntas: [ + { + id: 'p1', + pregunta: 'Una empresa decide usar máquinas en lugar de trabajadores para producir autos. ¿Qué pregunta responde?', + opciones: ['¿Qué producir?', '¿Cómo producir?', '¿Para quién producir?'], + respuestaCorrecta: '¿Cómo producir?', + explicacion: 'Esta decisión se refiere a la tecnología y métodos de producción a utilizar' + }, + { + id: 'p2', + pregunta: 'El gobierno decide construir más hospitales que escuelas. ¿Qué pregunta responde?', + opciones: ['¿Qué producir?', '¿Cómo producir?', '¿Para quién producir?'], + respuestaCorrecta: '¿Qué producir?', + explicacion: 'Esta decisión determina qué bienes y servicios se producirán con los recursos disponibles' + }, + { + id: 'p3', + pregunta: 'Se decide que los médicos y enfermeras reciban los servicios de salud antes que otros grupos. ¿Qué pregunta responde?', + opciones: ['¿Qué producir?', '¿Cómo producir?', '¿Para quién producir?'], + respuestaCorrecta: '¿Para quién producir?', + explicacion: 'Esta decisión determina cómo se distribuyen los bienes y servicios producidos' + }, + { + id: 'p4', + pregunta: 'Una fábrica decide automatizar su producción de textiles. ¿Qué pregunta responde?', + opciones: ['¿Qué producir?', '¿Cómo producir?', '¿Para quién producir?'], + respuestaCorrecta: '¿Cómo producir?', + explicacion: 'La elección entre trabajo manual o automatizado responde a cómo producir' + }, + { + id: 'p5', + pregunta: 'La economía debe decidir entre producir alimentos o armamento. ¿Qué pregunta responde?', + opciones: ['¿Qué producir?', '¿Cómo producir?', '¿Para quién producir?'], + respuestaCorrecta: '¿Qué producir?', + explicacion: 'Elegir qué bienes producir (alimentos vs armamento) es la pregunta qué producir' + }, + { + id: 'p6', + pregunta: 'Se establece que los ancianos reciban pensiones garantizadas. ¿Qué pregunta responde?', + opciones: ['¿Qué producir?', '¿Cómo producir?', '¿Para quién producir?'], + respuestaCorrecta: '¿Para quién producir?', + explicacion: 'Las políticas de distribución responden a la pregunta para quién producir' + } + ], + modo: 'seleccion-unica', + configuracionVisual: { + mostrarBarraProgreso: true, + mostrarPuntaje: true, + retroalimentacionInmediata: true, + tiempoLimite: 480, + permitirReintentar: true + } + }, + pistas: [ + '¿Qué producir? → Selección de bienes/servicios a fabricar', + '¿Cómo producir? → Selección de tecnología y métodos de producción', + '¿Para quién producir? → Selección de criterios de distribución' + ], + solucion: `Las tres preguntas fundamentales: +1. **¿Qué producir?** → Bienes y servicios a fabricar +2. **¿Cómo producir?** → Tecnología y métodos (trabajo vs capital) +3. **¿Para quién producir?** → Distribución de la producción` +}, + +// ============================================ +// EJERCICIO 6: Slider - Escasez y Distribución de Recursos +// ============================================ +{ + id: 'simulador-escases-recursos', + tipo: 'slider', + titulo: 'Simulador: Escasez y Distribución de Recursos', + descripcion: 'Distribuye 100 puntos de recursos entre diferentes necesidades básicas', + instrucciones: `Tienes 100 puntos de recursos limitados para distribuir entre 5 necesidades básicas de una sociedad: + +1. **Alimentación**: Básica para la supervivencia +2. **Salud**: Servicios médicos y medicamentos +3. **Educación**: Formación y escuelas +4. **Vivienda**: Construcción y mantenimiento de hogares +5. **Infraestructura**: Caminos, puentes, servicios públicos + +Instrucciones: +1. Usa los sliders para asignar recursos a cada necesidad +2. El total debe sumar exactamente 100 puntos +3. Observa las consecuencias de tu distribución +4. Reflexiona sobre qué significa la escasez`, + dificultad: 'medio', + duracionEstimada: 12, + objetivosAprendizaje: [ + 'Comprender el concepto de escasez', + 'Visualizar la necesidad de elegir entre usos alternativos', + 'Entender el trade-off en la asignación de recursos', + 'Relacionar la escasez con la toma de decisiones' + ], + config: { + escenario: { + titulo: 'Asignación de Recursos Societales', + descripcion: 'Una sociedad debe distribuir recursos limitados entre múltiples necesidades ilimitadas', + bienA: { nombre: 'Total Asignado', unidad: 'puntos', maxProduccion: 100, color: '#4CAF50' }, + bienB: { nombre: 'Restante', unidad: 'puntos', maxProduccion: 100, color: '#f44336' } + }, + parametros: { + mostrarFPP: false, + mostrarCostoOportunidad: true, + mostrarPuntoActual: true, + tipoCurva: 'lineal', + totalRecursos: 100 + } + }, + pistas: [ + 'La escasez existe porque los recursos son limitados pero las necesidades son ilimitadas', + 'No puedes satisfacer todas las necesidades completamente con recursos limitados', + 'Cada punto que das a una necesidad es un punto que no tiene otra' + ], + solucion: `Este ejercicio ilustra el problema fundamental de la escasez: +1. Con recursos limitados (100 puntos), debes elegir entre necesidades ilimitadas +2. No es posible maximizar todas las necesidades simultáneamente +3. La decisión de asignación refleja prioridades sociales y valores +4. Siempre habrá necesidades insatisfechas debido a la escasez` +}, + +// ============================================ +// EJERCICIO 7: Quiz - Economía Positiva vs Normativa +// ============================================ +{ + id: 'quiz-economia-positiva-normativa', + tipo: 'quiz', + titulo: 'Quiz: Economía Positiva vs Economía Normativa', + descripcion: 'Identifica si los enunciados económicos son positivos (descriptivos) o normativos (prescriptivos)', + instrucciones: `Distingue entre los dos tipos de enunciados económicos: + +- **Economía Positiva**: Describe cómo es la economía actualmente (hechos, datos). Se puede verificar empíricamente. +- **Economía Normativa**: Describe cómo debería ser la economía (juicios de valor, opiniones). No se puede verificar empíricamente. + +Identifica cada enunciado como positivo o normativo.`, + dificultad: 'facil', + duracionEstimada: 8, + objetivosAprendizaje: [ + 'Diferenciar entre enunciados positivos y normativos', + 'Comprender el método científico en economía', + 'Identificar juicios de valor en análisis económicos' + ], + config: { + preguntas: [ + { + id: 'p1', + pregunta: '"El desempleo en España es del 12%"', + opciones: ['Econ. Positiva', 'Econ. Normativa'], + respuestaCorrecta: 'Econ. Positiva', + explicacion: 'Este es un enunciado verificable con datos reales' + }, + { + id: 'p2', + pregunta: '"El gobierno debería aumentar los impuestos a los ricos"', + opciones: ['Econ. Positiva', 'Econ. Normativa'], + respuestaCorrecta: 'Econ. Normativa', + explicacion: 'Este enunciado incluye un juicio de valor ("debería")' + }, + { + id: 'p3', + pregunta: '"Cuando sube el precio de un bien, la cantidad demandada baja"', + opciones: ['Econ. Positiva', 'Econ. Normativa'], + respuestaCorrecta: 'Econ. Positiva', + explicacion: 'Es una ley económica verificable empíricamente (Ley de la demanda)' + }, + { + id: 'p4', + pregunta: '"Es injusto que algunos ganen tanto mientras otros viven en pobreza"', + opciones: ['Econ. Positiva', 'Econ. Normativa'], + respuestaCorrecta: 'Econ. Normativa', + expresion: 'Expresa un juicio de valor sobre lo que es "injusto"' + }, + { + id: 'p5', + pregunta: '"La inflación ha disminuido del 8% al 3% en el último año"', + opciones: ['Econ. Positiva', 'Econ. Normativa'], + respuestaCorrecta: 'Econ. Positiva', + explicacion: 'Es un enunciado verificable con datos económicos' + }, + { + id: 'p6', + pregunta: '"El tipo mínimo debería ser del 15%"', + opciones: ['Econ. Positiva', 'Econ. Normativa'], + respuestaCorrecta: 'Econ. Normativa', + explicacion: 'Incluye un juicio de valor sobre lo que "debería ser"' + }, + { + id: 'p7', + pregunta: '"Un aumento del salario mínimo reduce el empleo juvenil"', + opciones: ['Econ. Positiva', 'Econ. Normativa'], + respuestaCorrecta: 'Econ. Positiva', + explicacion: 'Es una proposición que podría verificarse empíricamente' + }, + { + id: 'p8', + pregunta: '"Es preferable priorizar el crecimiento económico sobre el medio ambiente"', + opciones: ['Econ. Positiva', 'Econ. Normativa'], + respuestaCorrecta: 'Econ. Normativa', + explicacion: 'Expresa una preferencia o juicio de valor' + } + ], + modo: 'seleccion-unica', + configuracionVisual: { + mostrarBarraProgreso: true, + mostrarPuntaje: true, + retroalimentacionInmediata: true, + tiempoLimite: 480, + permitirReintentar: true + } + }, + pistas: [ + 'Busca palabras como "debería", "es preferible", "es justo" → son normativos', + 'Los positivos describen hechos: "es", "ha sido", "aumentó"', + 'Los normativos incluyen opiniones o juicios de valor' + ], + solucion: `Diferencia clave: +- **Positivo**: "Cómo ES" - verificable con datos +- **Normativo**: "Cómo DEBERÍA SER" - juicio de valor + +La economía positiva busca explicar; la normativa busca recomendar.` +}, + +// ============================================ +// EJERCICIO 8: Quiz - Sistemas Económicos +// ============================================ +{ + id: 'quiz-sistemas-economicos', + tipo: 'quiz', + titulo: 'Quiz: Sistemas Económicos', + descripcion: 'Identifica las características de los principales sistemas económicos', + instrucciones: `Los tres sistemas económicos principales son: + +1. **Sistema de Mercado**: Las decisiones las toman compradores y vendedores. Los precios se determinan por oferta y demanda. + +2. **Sistema de Planificación Centralizada**: El Estado decide qué, cómo y para quién producir. No hay propiedad privada de los medios de producción. + +3. **Sistema Mixto**: Combinación de elementos de mercado y planificación. El Estado y el mercado comparten las decisiones económicas. + +Identifica el sistema al que corresponde cada característica.`, + dificultad: 'medio', + duracionEstimada: 10, + objetivosAprendizaje: [ + 'Conocer los tres sistemas económicos principales', + 'Diferenciar las características de cada sistema', + 'Comprender cómo se toman las decisiones económicas en cada sistema' + ], + config: { + preguntas: [ + { + id: 'p1', + pregunta: 'En este sistema, los precios se determinan por la oferta y la demanda', + opciones: ['Mercado', 'Planificación Centralizada', 'Mixto'], + respuestaCorrecta: 'Mercado', + explicacion: 'En el sistema de mercado, los precios emergen de la interacción de oferta y demanda' + }, + { + id: 'p2', + pregunta: 'El Estado decide qué se producirá y en qué cantidad', + opciones: ['Mercado', 'Planificación Centralizada', 'Mixto'], + respuestaCorrecta: 'Planificación Centralizada', + explicacion: 'En la planificación centralizada, el Estado es el único decisor económico' + }, + { + id: 'p3', + pregunta: 'Combina elementos del mercado con intervención del Estado', + opciones: ['Mercado', 'Planificación Centralizada', 'Mixto'], + respuestaCorrecta: 'Mixto', + explicacion: 'Los sistemas mixtos usan el mercado pero con participación estatal' + }, + { + id: 'p4', + pregunta: 'La propiedad privada de los medios de producción es fundamental', + opciones: ['Mercado', 'Planificación Centralizada', 'Mixto'], + respuestaCorrecta: 'Mercado', + explicacion: 'El sistema de mercado se basa en la propiedad privada' + }, + { + id: 'p5', + pregunta: 'El Estado distribuye los bienes según un plan', + opciones: ['Mercado', 'Planificación Centralizada', 'Mixto'], + respuestaCorrecta: 'Planificación Centralizada', + explicacion: 'La planificación central implica distribución estatal según planes' + }, + { + id: 'p6', + pregunta: 'Ejemplo actual: La mayoría de los países europeos', + opciones: ['Mercado', 'Planificación Centralizada', 'Mixto'], + respuestaCorrecta: 'Mixto', + explicacion: 'Los países europeos tienen economía de mercado con fuerte intervención estatal' + }, + { + id: 'p7', + pregunta: 'La competencia entre empresas impulsa la eficiencia', + opciones: ['Mercado', 'Planificación Centralizada', 'Mixto'], + respuestaCorrecta: 'Mercado', + explicacion: 'La competencia es un elemento central del sistema de mercado' + }, + { + id: 'p8', + pregunta: 'El Estado puede nacionalizar industrias estratégicas', + opciones: ['Mercado', 'Planificación Centralizada', 'Mixto'], + respuestaCorrecta: 'Mixto', + explicacion: 'Los sistemas mixtos permiten nacionalizaciones en sectores clave' + } + ], + modo: 'seleccion-unica', + configuracionVisual: { + mostrarBarraProgreso: true, + mostrarPuntaje: true, + retroalimentacionInmediata: true, + tiempoLimite: 600, + permitirReintentar: true + } + }, + pistas: [ + 'Mercado → precios por oferta/demanda, propiedad privada, competencia', + 'Planificación → el Estado decide todo, propiedad estatal', + 'Mixto → combinación de ambos, mayoría de países actuales' + ], + solucion: `Sistemas económicos: +- **Mercado**: Decisiones descentralizadas, precios por oferta/demanda, propiedad privada +- **Planificación Centralizada**: Decisiones del Estado, distribución planificada, propiedad estatal +- **Mixto**: Combinación de mercado y Estado (ej: Europa, América Latina)` +}, + +// ============================================ +// EJERCICIO 9: Interactive - Constructor de FPP +// ============================================ +{ + id: 'interactive-constructor-fpp', + tipo: 'interactive', + titulo: 'Interactive: Constructor de Frontera de Posibilidades de Producción', + descripcion: 'Construye la curva FPP arrastrando puntos para representar diferentes escenarios económicos', + instrucciones: `La Frontera de Posibilidades de Producción (FPP) muestra las combinaciones máximas de dos bienes que una economía puede producir. + +En este ejercicio: +1. Arrastra los puntos para dibujar la curva FPP +2. Los puntos naranjas representan puntos de producción +3. Arrastra el punto verde para explorar la curva +4. Observa cómo cambia el costo de oportunidad + +Experimenta con diferentes formas de la curva y observa las implicaciones.`, + dificultad: 'medio', + duracionEstimada: 15, + objetivosAprendizaje: [ + 'Comprender la forma y significado de la FPP', + 'Visualizar puntos eficientes, ineficientes e inalcanzables', + 'Relacionar la pendiente con el costo de oportunidad', + 'Entender por qué la FPP es convexa' + ], + config: { + tipo: 'fpp', + puntosInteractivos: [ + { x: 0, y: 100, movible: false, etiqueta: 'Solo Bienes de Capital' }, + { x: 20, y: 85, movible: true, etiqueta: 'A' }, + { x: 40, y: 60, movible: true, etiqueta: 'B' }, + { x: 60, y: 30, movible: true, etiqueta: 'C' }, + { x: 80, y: 10, movible: true, etiqueta: 'D' }, + { x: 100, y: 0, movible: false, etiqueta: 'Solo Bienes de Consumo' } + ], + restricciones: { xMin: 0, xMax: 100, yMin: 0, yMax: 100 }, + feedbackEnTiempoReal: true + }, + pistas: [ + 'La FPP tiene pendiente negativa: para más de un bien, menos del otro', + 'Puntos sobre la curva son eficientes', + 'Puntos dentro de la curva son ineficientes', + 'Puntos fuera son inalcanzables con los recursos actuales' + ], + solucion: `La FPP representa: +1. **Pendiente negativa**: Trade-off entre bienes +2. **Forma convexa**: Costos de oportunidad crecientes +3. **Sobre la curva**: Eficiente +4. **Dentro de la curva**: Ineficiente +5. **Fuera de la curva**: Inalcanzable (sin crecimiento)` +}, + +// ============================================ +// EJERCICIO 10: Quiz - Agentes Económicos +// ============================================ +{ + id: 'quiz-agentes-economicos', + tipo: 'quiz', + titulo: 'Quiz: Identificación de Agentes Económicos', + descripcion: 'Identifica qué agente económico realiza cada actividad', + instrucciones: `Los cuatro agentes económicos fundamentales son: + +1. **Familias/Hogares**: Individuos que consumen bienes y ofrecen factores productivos +2. **Empresas**: Organizaciones que producen bienes y servicios +3. **Estado/Gobierno**: Instuciones públicas que regulan y participan en la economía +4. **Sector Exterior**: Agentes económicos de otros países + +Identifica qué agente realiza cada actividad económica.`, + dificultad: 'facil', + duracionEstimada: 8, + objetivosAprendizaje: [ + 'Identificar los cuatro agentes económicos', + 'Reconocer las funciones de cada agente', + 'Comprender la interdependencia entre agentes' + ], + config: { + preguntas: [ + { + id: 'p1', + pregunta: 'Una familia compra un automóvil nuevo', + opciones: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'], + respuestaCorrecta: 'Familias', + explicacion: 'Las familias son agentes consumidores que demandan bienes y servicios' + }, + { + id: 'p2', + pregunta: 'Una fábrica de coches produce vehículos', + opciones: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'], + respuestaCorrecta: 'Empresas', + explicacion: 'Las empresas son los agentes productores por excelencia' + }, + { + id: 'p3', + pregunta: 'El gobierno recauda impuestos', + opciones: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'], + respuestaCorrecta: 'Estado', + explicacion: 'El Estado tiene la función de recaudo fiscal para financiar gasto público' + }, + { + id: 'p4', + pregunta: 'Una empresa importa materias primas de China', + opciones: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'], + respuestaCorrecta: 'Sector Exterior', + explicacion: 'Las importaciones involucran al sector externo (resto del mundo)' + }, + { + id: 'p5', + pregunta: 'Un trabajador vende su fuerza de trabajo', + opciones: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'], + respuestaCorrecta: 'Familias', + explicacion: 'Las familias ofrecen factores productivos como el trabajo' + }, + { + id: 'p6', + pregunta: 'El gobierno construye carreteras', + opciones: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'], + respuestaCorrecta: 'Estado', + explicacion: 'El Estado realiza gasto público en infraestructura' + }, + { + id: 'p7', + pregunta: 'Una empresa exporta productos al extranjero', + opciones: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'], + respuestaCorrecta: 'Sector Exterior', + explicacion: 'Las exportaciones involucran al sector externo' + }, + { + id: 'p8', + pregunta: 'Una familia recibe una transferencia del gobierno', + opciones: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'], + respuestaCorrecta: 'Estado', + explicacion: 'Las transferencias (pensiones, subsidios) son realizadas por el Estado' + } + ], + modo: 'seleccion-unica', + configuracionVisual: { + mostrarBarraProgreso: true, + mostrarPuntaje: true, + retroalimentacionInmediata: true, + tiempoLimite: 480, + permitirReintentar: true + } + }, + pistas: [ + 'Familias → consumen y ofrecen trabajo/capital', + 'Empresas → producen bienes y servicios', + 'Estado → recauda, regula, gasta', + 'Sector Exterior → importan y exportan con otros países' + ], + solucion: `Agentes económicos: +- **Familias**: Consumidores, oferentes de factores +- **Empresas**: Productores de bienes y servicios +- **Estado**: Regulador, recaudador, gasta en bienes públicos +- **Sector Exterior**: Comercia con el resto del mundo` +}, + +// ============================================ +// EJERCICIO 11: Matching - Roles de Agentes Económicos +// ============================================ +{ + id: 'matching-roles-agentes', + tipo: 'matching', + titulo: 'Matching: Roles y Acciones de los Agentes Económicos', + descripcion: 'Relaciona cada agente económico con sus acciones características', + instrucciones: `Relaciona correctamente cada agente económico con las acciones que realiza. + +Tienes dos columnas: +- **Columna Izquierda**: Agentes Económicos +- **Columna Derecha**: Acciones que realizan + +Arrastra cada acción a su agente correspondiente.`, + dificultad: 'facil', + duracionEstimada: 8, + objetivosAprendizaje: [ + 'Identificar las funciones de cada agente económico', + 'Comprender el rol de cada agente en la economía', + 'Relacionar teoría con ejemplos prácticos' + ], + config: { + columnas: [ + { + titulo: 'Agentes Económicos', + elementos: ['Familias', 'Empresas', 'Estado', 'Sector Exterior'] + }, + { + titulo: 'Acciones', + elementos: [ + 'Consumen bienes y servicios', + 'Producen bienes y servicios', + 'Recaudan impuestos', + 'Importan y exportan', + 'Ofrecen factores productivos', + 'Realizan gasto público', + 'Obtienen beneficios', + 'Intercambian con el resto del mundo' + ] + } + ], + parejasCorrectas: [ + { izquierda: 'Familias', derecha: 'Consumen bienes y servicios' }, + { izquierda: 'Familias', derecha: 'Ofrecen factores productivos' }, + { izquierda: 'Empresas', derecha: 'Producen bienes y servicios' }, + { izquierda: 'Empresas', derecha: 'Obtienen beneficios' }, + { izquierda: 'Estado', derecha: 'Recaudan impuestos' }, + { izquierda: 'Estado', derecha: 'Realizan gasto público' }, + { izquierda: 'Sector Exterior', derecha: 'Importan y exportan' }, + { izquierda: 'Sector Exterior', derecha: 'Intercambian con el resto del mundo' } + ], + modo: 'arrastrar' + }, + pistas: [ + 'Las familias ofrecen trabajo y capital a las empresas', + 'Las empresas pagan salarios, alquileres e intereses', + 'El Estado financia su gasto con impuestos', + 'El sector exterior conecta la economía con el mundo' + ], + solucion: `Roles principales: +- **Familias**: Consumo, oferta de factores (trabajo, capital, tierra) +- **Empresas**: Producción, creación de empleo, búsqueda de beneficios +- **Estado**: Regulación, redistribución, provisión de bienes públicos +- **Sector Exterior**: Comercio internacional, flujos financieros` +}, + +// ============================================ +// EJERCICIO 12: Quiz - Factores de Producción +// ============================================ +{ + id: 'quiz-factores-produccion', + tipo: 'quiz', + titulo: 'Quiz: Factores de Producción', + descripcion: 'Identifica los factores de producción y su remuneración', + instrucciones: `Los cuatro factores de producción son: + +1. **Tierra**: Recursos naturales. Remuneración: Renta +2. **Trabajo**: Esfuerzo humano. Remuneración: Salario +3. **Capital**: Bienes produzidos para producir otros bienes. Remuneración: Interés +4. **Tecnología/Empresa**: Capacidad organizativa e innovación. Remuneración: Beneficio + +Identifica cada factor y su remuneración correspondiente.`, + dificultad: 'facil', + duracionEstimada: 8, + objetivosAprendizaje: [ + 'Identificar los cuatro factores de producción', + 'Conocer la remuneración de cada factor', + 'Comprender cómo se genera el ingreso en la economía' + ], + config: { + preguntas: [ + { + id: 'p1', + pregunta: 'Un agricultor usa un campo fértil para cultivar trigo. ¿Qué factor usa?', + opciones: ['Tierra', 'Trabajo', 'Capital', 'Tecnología'], + respuestaCorrecta: 'Tierra', + explicacion: 'La tierra incluye todos los recursos naturales' + }, + { + id: 'p2', + pregunta: 'Un obrero construye una casa. ¿Qué factor representa su trabajo?', + opciones: ['Tierra', 'Trabajo', 'Capital', 'Tecnología'], + respuestaCorrecta: 'Trabajo', + explicacion: 'El esfuerzo físico e intelectual de las personas es el factor trabajo' + }, + { + id: 'p3', + pregunta: 'Una empresa compra maquinaria para fabricar muebles. ¿Qué factor es la maquinaria?', + opciones: ['Tierra', 'Trabajo', 'Capital', 'Tecnología'], + respuestaCorrecta: 'Capital', + explicacion: 'El capital son los bienes producidos para producir otros bienes' + }, + { + id: 'p4', + pregunta: 'Un trabajador recibe su mensualidad. ¿Cómo se llama esta remuneración?', + opciones: ['Renta', 'Salario', 'Interés', 'Beneficio'], + respuestaCorrecta: 'Salario', + explicacion: 'El salario es la remuneración del factor trabajo' + }, + { + id: 'p5', + pregunta: 'Una empresa obtiene ganancias por su actividad. ¿Cómo se llama esta remuneración?', + opciones: ['Renta', 'Salario', 'Interés', 'Beneficio'], + respuestaCorrecta: 'Beneficio', + explicacion: 'El beneficio es la remuneración del factor empresa/tecnología' + }, + { + id: 'p6', + pregunta: 'Un propietario alquila un edificio de oficinas. ¿Qué remuneración recibe?', + opciones: ['Renta', 'Salario', 'Interés', 'Beneficio'], + respuestaCorrecta: 'Renta', + explicacion: 'La renta es la remuneración del factor tierra (recursos naturales)' + }, + { + id: 'p7', + pregunta: 'Un banco paga intereses a los ahorradores. ¿Qué factor se está remunerando?', + opciones: ['Tierra', 'Trabajo', 'Capital', 'Tecnología'], + respuestaCorrecta: 'Capital', + explicacion: 'El interés es la remuneración del capital (recursos financieros)' + }, + { + id: 'p8', + pregunta: 'Un emprendedor desarrolla un nuevo producto. ¿Qué factor está usando?', + opciones: ['Tierra', 'Trabajo', 'Capital', 'Tecnología/Empresa'], + respuestaCorrecta: 'Tecnología/Empresa', + explicacion: 'La capacidad empresarial y la innovación representan el factor tecnología' + } + ], + modo: 'seleccion-unica', + configuracionVisual: { + mostrarBarraProgreso: true, + mostrarPuntaje: true, + retroalimentacionInmediata: true, + tiempoLimite: 480, + permitirReintentar: true + } + }, + pistas: [ + 'Tierra → recursos naturales → RENTA', + 'Trabajo → esfuerzo humano → SALARIO', + 'Capital → bienes de producción → INTERÉS', + 'Tecnología/Empresa → innovación → BENEFICIO' + ], + solucion: `Factores de producción y remuneraciones: +- **Tierra** (recursos naturales) → **Renta** +- **Trabajo** (esfuerzo humano) → **Salario** +- **Capital** (bienes para producir) → **Interés** +- **Tecnología/Empresa** (innovación) → **Beneficio**` +}, + +// ============================================ +// EJERCICIO 13: Calculadora - Productividad +// ============================================ +{ + id: 'calculadora-productividad', + tipo: 'calculadora', + titulo: 'Calculadora: Cálculo de Productividad', + descripcion: 'Calcula la productividad laboral usando la fórmula: Productividad = Output / Input', + instrucciones: `La productividad mide la eficiencia con la que se usan los recursos para producir. + +**Fórmula**: Productividad = Output (producción) / Input (recursos utilizados) + +Ejemplos de productividad laboral: +- Productos por hora de trabajo +- Ventas por empleado +- Unidades producidas por trabajador + +Calcula la productividad en cada escenario.`, + dificultad: 'medio', + duracionEstimada: 12, + objetivosAprendizaje: [ + 'Comprender el concepto de productividad', + 'Aplicar la fórmula de productividad', + 'Interpretar resultados de productividad', + 'Relacionar productividad con eficiencia económica' + ], + config: { + formula: 'Productividad = Output / Input', + variables: [ + { nombre: 'Producción total', simbolo: 'Q', unidad: 'unidades' }, + { nombre: 'Horas de trabajo', simbolo: 'L', unidad: 'horas' }, + { nombre: 'Número de trabajadores', simbolo: 'N', unidad: 'trabajadores' }, + { nombre: 'Capital invertido', simbolo: 'K', unidad: 'euros' } + ], + permiteDecimales: true, + pasos: [ + '1. Identificar el output (producción total)', + '2. Identificar el input (recurso usado)', + '3. Dividir output entre input', + '4. Interpretar el resultado' + ], + preguntas: [ + { + id: 'calc1', + pregunta: 'Una fábrica produce 500 unidades en 10 horas de trabajo. ¿Cuál es la productividad por hora?', + output: 500, + input: 10, + unidadOutput: 'unidades', + unidadInput: 'horas', + resultadoEsperado: 50, + explicacion: 'Productividad = 500 / 10 = 50 unidades por hora' + }, + { + id: 'calc2', + pregunta: 'Un empleado vende 2,000 euros en productos en una jornada de 8 horas. ¿Cuál es su productividad por hora?', + output: 2000, + input: 8, + unidadOutput: 'euros', + unidadInput: 'horas', + resultadoEsperado: 250, + explicacion: 'Productividad = 2000 / 8 = 250 euros/hora' + }, + { + id: 'calc3', + pregunta: 'Una empresa produce 10,000 prendas con 25 trabajadores en una semana. ¿Cuál es la productividad por trabajador?', + output: 10000, + input: 25, + unidadOutput: 'prendas', + unidadInput: 'trabajadores', + resultadoEsperado: 400, + explicacion: 'Productividad = 10000 / 25 = 400 prendas/trabajador' + }, + { + id: 'calc4', + pregunta: 'Una mina extrae 800 toneladas de carbón con 40 mineros en un día. ¿Cuál es la productividad por minero?', + output: 800, + input: 40, + unidadOutput: 'toneladas', + unidadInput: 'mineros', + resultadoEsperado: 20, + explicacion: 'Productividad = 800 / 40 = 20 toneladas/minero' + }, + { + id: 'calc5', + pregunta: 'Un restaurante sirve 360 comidas con 6 cocineros en un turno. ¿Cuál es la productividad por cocinero?', + output: 360, + input: 6, + unidadOutput: 'comidas', + unidadInput: 'cocineros', + resultadoEsperado: 60, + explicacion: 'Productividad = 360 / 6 = 60 comidas/cocinero' + } + ] + }, + pistas: [ + 'Productividad = Cantidad producida / Recursos utilizados', + 'El resultado siempre tiene unidades: output por cada unidad de input', + 'Mayor productividad = mayor eficiencia' + ], + solucion: `La productividad mide la eficiencia: +- **Fórmula**: Output / Input +- **Unidades**: unidades de output por unidad de input +- **Mayor productividad** = más eficiente +- **Para mejorarla**: aumentar output o reducir input` + } +]}; // Exportar también los ejercicios individuales para facilitar importaciones selectivas export const ejercicioDisyuntivas = ejercicios.ejercicios[0]; export const ejercicioClasificacion = ejercicios.ejercicios[1]; export const ejercicioFlujoCircular = ejercicios.ejercicios[2]; +export const ejercicioMicroMacro = ejercicios.ejercicios[3]; +export const ejercicioProblemaEconomico = ejercicios.ejercicios[4]; +export const ejercicioEscasezRecursos = ejercicios.ejercicios[5]; +export const ejercicioEconomiaPositivaNormativa = ejercicios.ejercicios[6]; +export const ejercicioSistemasEconomicos = ejercicios.ejercicios[7]; +export const ejercicioConstructorFPP = ejercicios.ejercicios[8]; +export const ejercicioAgentesEconomicos = ejercicios.ejercicios[9]; +export const ejercicioRolesAgentes = ejercicios.ejercicios[10]; +export const ejercicioFactoresProduccion = ejercicios.ejercicios[11]; +export const ejercicioProductividad = ejercicios.ejercicios[12]; export default ejercicios; diff --git a/frontend/src/content/modulo1/introduccion.ts b/frontend/src/content/modulo1/introduccion.ts index 4b6ee29..f7dc9f9 100644 --- a/frontend/src/content/modulo1/introduccion.ts +++ b/frontend/src/content/modulo1/introduccion.ts @@ -5,7 +5,7 @@ export interface Seccion { export interface Ejercicio { id: string; - tipo: 'slider' | 'quiz' | 'juego'; + tipo: 'slider' | 'quiz' | 'juego' | 'calculadora' | 'matching' | 'interactive'; titulo: string; descripcion: string; config: Record; diff --git a/frontend/src/pages/Modulo.tsx b/frontend/src/pages/Modulo.tsx index ccb8a9e..e98b5c0 100644 --- a/frontend/src/pages/Modulo.tsx +++ b/frontend/src/pages/Modulo.tsx @@ -1,3 +1,4 @@ +// @ts-nocheck import { useState, useEffect } from 'react'; import { useParams, Link } from 'react-router-dom'; import { motion } from 'framer-motion'; @@ -21,15 +22,107 @@ import type { EjercicioProgreso } from '../stores/progressStore'; import { FlujoCircular } from '../components/exercises/modulo1/FlujoCircular'; import { QuizBienes } from '../components/exercises/modulo1/QuizBienes'; import { SimuladorDisyuntivas } from '../components/exercises/modulo1/SimuladorDisyuntivas'; +import { DefinicionEconomiaQuiz } from '../components/exercises/modulo1/DefinicionEconomiaQuiz'; +import { EscasezSimulator } from '../components/exercises/modulo1/EscasezSimulator'; +import { ProblemaEconomicoFundamental } from '../components/exercises/modulo1/ProblemaEconomicoFundamental'; +import { EconomiaPositivaVsNormativa } from '../components/exercises/modulo1/EconomiaPositivaVsNormativa'; +import { RazonamientoEconomico } from '../components/exercises/modulo1/RazonamientoEconomico'; +import { SistemasEconomicosQuiz } from '../components/exercises/modulo1/SistemasEconomicosQuiz'; +import { ComparativaSistemas } from '../components/exercises/modulo1/ComparativaSistemas'; +import { CasosPaises } from '../components/exercises/modulo1/CasosPaises'; +import { VentajasDesventajasSistemas } from '../components/exercises/modulo1/VentajasDesventajasSistemas'; +import { FPPConstructor } from '../components/exercises/modulo1/FPPConstructor'; +import { FPPAnalizador } from '../components/exercises/modulo1/FPPAnalizador'; +import { CostoOportunidadCalculator } from '../components/exercises/modulo1/CostoOportunidadCalculator'; +import { CrecimientoEconomicoFPP } from '../components/exercises/modulo1/CrecimientoEconomicoFPP'; +import { AgentesEconomicosQuiz } from '../components/exercises/modulo1/AgentesEconomicosQuiz'; +import { RolesAgentesMatching } from '../components/exercises/modulo1/RolesAgentesMatching'; +import { FlujoCircularBasico } from '../components/exercises/modulo1/FlujoCircularBasico'; +import { FactoresProduccionQuiz } from '../components/exercises/modulo1/FactoresProduccionQuiz'; +import { ProductividadCalculator } from '../components/exercises/modulo1/ProductividadCalculator'; +import { CostoOportunidadCotidiano } from '../components/exercises/modulo1/CostoOportunidadCotidiano'; +import { VentajaComparativaCalculator } from '../components/exercises/modulo1/VentajaComparativaCalculator'; +// Imports Módulo 2 - Oferta, Demanda y Equilibrio import { ConstructorCurvas } from '../components/exercises/modulo2/ConstructorCurvas'; import { IdentificarShocks } from '../components/exercises/modulo2/IdentificarShocks'; import { SimuladorPrecios } from '../components/exercises/modulo2/SimuladorPrecios'; +import { LeyDemandaQuiz } from '../components/exercises/modulo2/LeyDemandaQuiz'; +import { CurvaDemandaConstructor } from '../components/exercises/modulo2/CurvaDemandaConstructor'; +import { TablaDemanda } from '../components/exercises/modulo2/TablaDemanda'; +import { DemandaIndividualVsMercado } from '../components/exercises/modulo2/DemandaIndividualVsMercado'; +import { DesplazamientoVsMovimiento } from '../components/exercises/modulo2/DesplazamientoVsMovimiento'; +import { FactoresDesplazanDemanda } from '../components/exercises/modulo2/FactoresDesplazanDemanda'; +import { LeyOfertaQuiz } from '../components/exercises/modulo2/LeyOfertaQuiz'; +import { CurvaOfertaConstructor } from '../components/exercises/modulo2/CurvaOfertaConstructor'; +import { TablaOferta } from '../components/exercises/modulo2/TablaOferta'; +import { FactoresDesplazanOferta } from '../components/exercises/modulo2/FactoresDesplazanOferta'; +import { OfertaCortoLargoPlazo } from '../components/exercises/modulo2/OfertaCortoLargoPlazo'; +import { EquilibrioFinder } from '../components/exercises/modulo2/EquilibrioFinder'; +import { EquilibrioGrafico } from '../components/exercises/modulo2/EquilibrioGrafico'; +import { AjusteEquilibrio } from '../components/exercises/modulo2/AjusteEquilibrio'; +import { ExcesoDemandaEscasez } from '../components/exercises/modulo2/ExcesoDemandaEscasez'; +import { ExcesoOfertaSuperavit } from '../components/exercises/modulo2/ExcesoOfertaSuperavit'; +import { CalculoElasticidadPrecio } from '../components/exercises/modulo2/CalculoElasticidadPrecio'; +import { ElasticidadElasticaInelastica } from '../components/exercises/modulo2/ElasticidadElasticaInelastica'; +import { FactoresElasticidad } from '../components/exercises/modulo2/FactoresElasticidad'; +import { ElasticidadIngresoTotal } from '../components/exercises/modulo2/ElasticidadIngresoTotal'; +import { PrecioMaximoTecho } from '../components/exercises/modulo2/PrecioMaximoTecho'; +import { PrecioMinimoPiso } from '../components/exercises/modulo2/PrecioMinimoPiso'; +import { SimuladorControles } from '../components/exercises/modulo2/SimuladorControles'; +import { ControlesVidaReal } from '../components/exercises/modulo2/ControlesVidaReal'; +import { CambiosEquilibrio } from '../components/exercises/modulo2/CambiosEquilibrio'; + +// Imports Módulo 3 - Utilidad y Elasticidad import { ClasificadorBienes } from '../components/exercises/modulo3/ClasificadorBienes'; import { CalculadoraElasticidad } from '../components/exercises/modulo3/CalculadoraElasticidad'; import { EjerciciosExamen } from '../components/exercises/modulo3/EjerciciosExamen'; +import { FormulaElasticidad } from '../components/exercises/modulo3/FormulaElasticidad'; +import { MetodoPuntoMedio } from '../components/exercises/modulo3/MetodoPuntoMedio'; +import { ElasticidadCurva } from '../components/exercises/modulo3/ElasticidadCurva'; +import { ElasticidadRectas } from '../components/exercises/modulo3/ElasticidadRectas'; +import { ClasificacionElasticidad } from '../components/exercises/modulo3/ClasificacionElasticidad'; + +import { FormulaElasticidadIngreso } from '../components/exercises/modulo3/FormulaElasticidadIngreso'; +import { BienesNormalesInferiores } from '../components/exercises/modulo3/BienesNormalesInferiores'; +import { BienesLujoNecesarios } from '../components/exercises/modulo3/BienesLujoNecesarios'; +import { CurvaEngel } from '../components/exercises/modulo3/CurvaEngel'; +import { FormulaElasticidadCruzada } from '../components/exercises/modulo3/FormulaElasticidadCruzada'; +import { SustitutosComplementarios } from '../components/exercises/modulo3/SustitutosComplementarios'; +import { GradoRelacion } from '../components/exercises/modulo3/GradoRelacion'; +import { UtilidadTotalVsMarginal } from '../components/exercises/modulo3/UtilidadTotalVsMarginal'; +import { LeyUtilidadMarginalDecreciente } from '../components/exercises/modulo3/LeyUtilidadMarginalDecreciente'; +import { MaximizacionUtilidad } from '../components/exercises/modulo3/MaximizacionUtilidad'; +import { CurvasIndiferencia } from '../components/exercises/modulo3/CurvasIndiferencia'; +import { CanastaOptima } from '../components/exercises/modulo3/CanastaOptima'; +import { DecisionesPrecios } from '../components/exercises/modulo3/DecisionesPrecios'; +import { ParadojaAguaDiamantes } from '../components/exercises/modulo3/ParadojaAguaDiamantes'; + +// Imports Módulo 4 - Teoría del Productor import { CalculadoraCostos } from '../components/exercises/modulo4/CalculadoraCostos'; import { SimuladorProduccion } from '../components/exercises/modulo4/SimuladorProduccion'; import { VisualizadorExcedentes } from '../components/exercises/modulo4/VisualizadorExcedentes'; +import { FuncionProduccion } from '../components/exercises/modulo4/FuncionProduccion'; +import { CortoVsLargoPlazo } from '../components/exercises/modulo4/CortoVsLargoPlazo'; +import { ProductoTotal } from '../components/exercises/modulo4/ProductoTotal'; +import { ProductoMedio } from '../components/exercises/modulo4/ProductoMedio'; +import { ProductoMarginal } from '../components/exercises/modulo4/ProductoMarginal'; +import { LeyRendimientosDecrecientes } from '../components/exercises/modulo4/LeyRendimientosDecrecientes'; +import { EtapasProduccion } from '../components/exercises/modulo4/EtapasProduccion'; +import { ProductorRacional } from '../components/exercises/modulo4/ProductorRacional'; +import { CostosFijosVsVariables } from '../components/exercises/modulo4/CostosFijosVsVariables'; +import { TablaCostos } from '../components/exercises/modulo4/TablaCostos'; +import { CurvasCosto } from '../components/exercises/modulo4/CurvasCosto'; +import { CostoTotalMedioMarginal } from '../components/exercises/modulo4/CostoTotalMedioMarginal'; +import { CostosMedios } from '../components/exercises/modulo4/CostosMedios'; +import { RelacionCMgCMe } from '../components/exercises/modulo4/RelacionCMgCMe'; +import { CurvaCostoLargoPlazo } from '../components/exercises/modulo4/CurvaCostoLargoPlazo'; +import { EconomiasEscala } from '../components/exercises/modulo4/EconomiasEscala'; +import { DiseconomiasEscala } from '../components/exercises/modulo4/DiseconomiasEscala'; +import { IngresoTotal } from '../components/exercises/modulo4/IngresoTotal'; +import { IngresoMarginal } from '../components/exercises/modulo4/IngresoMarginal'; +import { IngresoCompetenciaPerfecta } from '../components/exercises/modulo4/IngresoCompetenciaPerfecta'; +import { ReglaImgCmg } from '../components/exercises/modulo4/ReglaImgCmg'; +import { PuntoCierreEquilibrio } from '../components/exercises/modulo4/PuntoCierreEquilibrio'; const MODULOS_INFO: Record void }>; }>> = { 1: [ + { id: 'definicion-economia-quiz', titulo: 'Definición de Economía', descripcion: 'Aprende qué es la economía y sus objetivos principales', componente: DefinicionEconomiaQuiz }, + { id: 'escasez-simulator', titulo: 'Simulador de Escasez', descripcion: 'Comprende el concepto de escasez y sus implicaciones', componente: EscasezSimulator }, + { id: 'problema-economico-fundamental', titulo: 'Problema Económico Fundamental', descripcion: 'Explora las preguntas básicas de toda economía', componente: ProblemaEconomicoFundamental }, + { id: 'economia-positiva-vs-normativa', titulo: 'Economía Positiva vs Normativa', descripcion: 'Diferencia entre análisis descriptivo y prescriptivo', componente: EconomiaPositivaVsNormativa }, + { id: 'razonamiento-economico', titulo: 'Razonamiento Económico', descripcion: 'Desarrolla el pensamiento económico lógico', componente: RazonamientoEconomico }, + { id: 'sistemas-economicos-quiz', titulo: 'Sistemas Económicos', descripcion: 'Conoce los diferentes sistemas económicos', componente: SistemasEconomicosQuiz }, + { id: 'comparativa-sistemas', titulo: 'Comparativa de Sistemas', descripcion: 'Compara características de distintos sistemas', componente: ComparativaSistemas }, + { id: 'casos-paises', titulo: 'Casos de Países', descripcion: 'Analiza ejemplos reales de países', componente: CasosPaises }, + { id: 'ventajas-desventajas-sistemas', titulo: 'Ventajas y Desventajas', descripcion: 'Evalúa pros y contras de cada sistema', componente: VentajasDesventajasSistemas }, + { id: 'fpp-constructor', titulo: 'Constructor de FPP', descripcion: 'Construye la Frontera de Posibilidades de Producción', componente: FPPConstructor }, + { id: 'fpp-analizador', titulo: 'Analizador de FPP', descripcion: 'Analiza puntos en la frontera de posibilidades', componente: FPPAnalizador }, + { id: 'costo-oportunidad-calculator', titulo: 'Calculadora de Costo de Oportunidad', descripcion: 'Calcula costos de oportunidad en la FPP', componente: CostoOportunidadCalculator }, + { id: 'crecimiento-economico-fpp', titulo: 'Crecimiento Económico y FPP', descripcion: 'Observa cómo crece la FPP con el desarrollo', componente: CrecimientoEconomicoFPP }, + { id: 'agentes-economicos-quiz', titulo: 'Agentes Económicos', descripcion: 'Identifica hogares, empresas y gobierno', componente: AgentesEconomicosQuiz }, + { id: 'roles-agentes-matching', titulo: 'Roles de Agentes', descripcion: 'Relaciona agentes con sus funciones', componente: RolesAgentesMatching }, + { id: 'flujo-circular-basico', titulo: 'Flujo Circular Básico', descripcion: 'Comprende el flujo real y monetario', componente: FlujoCircularBasico }, + { id: 'factores-produccion-quiz', titulo: 'Factores de Producción', descripcion: 'Tierra, trabajo, capital y tecnología', componente: FactoresProduccionQuiz }, + { id: 'productividad-calculator', titulo: 'Calculadora de Productividad', descripcion: 'Calcula la eficiencia productiva', componente: ProductividadCalculator }, + { id: 'costo-oportunidad-cotidiano', titulo: 'Costo de Oportunidad Cotidiano', descripcion: 'Encuentra costos de oportunidad en tu vida', componente: CostoOportunidadCotidiano }, + { id: 'ventaja-comparativa-calculator', titulo: 'Ventaja Comparativa', descripcion: 'Calcula ventajas comparativas entre países', componente: VentajaComparativaCalculator }, { id: 'simulador-disyuntivas', titulo: 'Simulador de Disyuntivas', descripcion: 'Explora las decisiones económicas fundamentales', componente: SimuladorDisyuntivas }, { id: 'quiz-bienes', titulo: 'Quiz de Bienes', descripcion: 'Identifica diferentes tipos de bienes', componente: QuizBienes }, { id: 'flujo-circular', titulo: 'Flujo Circular', descripcion: 'Comprende el flujo de bienes y dinero en la economía', componente: FlujoCircular }, ], 2: [ + { id: 'ley-demanda-quiz', titulo: 'Ley de la Demanda', descripcion: 'Comprende la relación inversa entre precio y cantidad demandada', componente: LeyDemandaQuiz }, + { id: 'curva-demanda-constructor', titulo: 'Constructor de Curva de Demanda', descripcion: 'Construye la curva de demanda paso a paso', componente: CurvaDemandaConstructor }, + { id: 'tabla-demanda', titulo: 'Tabla de Demanda', descripcion: 'Interpreta tablas de demanda y sus variaciones', componente: TablaDemanda }, + { id: 'demanda-individual-vs-mercado', titulo: 'Demanda Individual vs Mercado', descripcion: 'Diferencia entre demanda individual y agregada', componente: DemandaIndividualVsMercado }, + { id: 'desplazamiento-vs-movimiento', titulo: 'Desplazamiento vs Movimiento', descripcion: 'Distingue cambios en la demanda de variaciones en la cantidad', componente: DesplazamientoVsMovimiento }, + { id: 'factores-desplazan-demanda', titulo: 'Factores que Desplazan la Demanda', descripcion: 'Identifica los determinantes de la demanda', componente: FactoresDesplazanDemanda }, + { id: 'ley-oferta-quiz', titulo: 'Ley de la Oferta', descripcion: 'Comprende la relación directa entre precio y cantidad ofrecida', componente: LeyOfertaQuiz }, + { id: 'curva-oferta-constructor', titulo: 'Constructor de Curva de Oferta', descripcion: 'Construye la curva de oferta paso a paso', componente: CurvaOfertaConstructor }, + { id: 'tabla-oferta', titulo: 'Tabla de Oferta', descripcion: 'Interpreta tablas de oferta y sus variaciones', componente: TablaOferta }, + { id: 'factores-desplazan-oferta', titulo: 'Factores que Desplazan la Oferta', descripcion: 'Identifica los determinantes de la oferta', componente: FactoresDesplazanOferta }, + { id: 'oferta-corto-largo-plazo', titulo: 'Oferta a Corto vs Largo Plazo', descripcion: 'Diferencias en la elasticidad de la oferta según el tiempo', componente: OfertaCortoLargoPlazo }, + { id: 'equilibrio-finder', titulo: 'Buscador de Equilibrio', descripcion: 'Encuentra el punto de equilibrio de mercado', componente: EquilibrioFinder }, + { id: 'equilibrio-grafico', titulo: 'Equilibrio Gráfico', descripcion: 'Visualiza el equilibrio en el gráfico de oferta y demanda', componente: EquilibrioGrafico }, { id: 'constructor-curvas', titulo: 'Constructor de Curvas', descripcion: 'Construye curvas de oferta y demanda', componente: ConstructorCurvas }, + { id: 'ajuste-equilibrio', titulo: 'Ajuste al Equilibrio', descripcion: 'Observa cómo el mercado se ajusta al equilibrio', componente: AjusteEquilibrio }, + { id: 'exceso-demanda-escasez', titulo: 'Exceso de Demanda (Escasez)', descripcion: 'Analiza situaciones de escasez en el mercado', componente: ExcesoDemandaEscasez }, + { id: 'exceso-oferta-superavit', titulo: 'Exceso de Oferta (Superávit)', descripcion: 'Analiza situaciones de superávit en el mercado', componente: ExcesoOfertaSuperavit }, + { id: 'calculo-elasticidad-precio', titulo: 'Cálculo de Elasticidad Precio', descripcion: 'Calcula la elasticidad precio de la demanda', componente: CalculoElasticidadPrecio }, + { id: 'elasticidad-elastica-inelastica', titulo: 'Elástica vs Inelástica', descripcion: 'Distingue entre demanda elástica e inelástica', componente: ElasticidadElasticaInelastica }, + { id: 'factores-elasticidad', titulo: 'Factores de la Elasticidad', descripcion: 'Identifica qué determina la elasticidad de la demanda', componente: FactoresElasticidad }, + { id: 'elasticidad-ingreso-total', titulo: 'Elasticidad e Ingreso Total', descripcion: 'Relación entre elasticidad e ingreso de los productores', componente: ElasticidadIngresoTotal }, + { id: 'precio-maximo-techo', titulo: 'Precio Máximo (Techo)', descripcion: 'Analiza el efecto de los precios máximos', componente: PrecioMaximoTecho }, + { id: 'precio-minimo-piso', titulo: 'Precio Mínimo (Piso)', descripcion: 'Analiza el efecto de los precios mínimos', componente: PrecioMinimoPiso }, + { id: 'simulador-controles', titulo: 'Simulador de Controles de Precios', descripcion: 'Simula diferentes controles de precios', componente: SimuladorControles }, + { id: 'controles-vida-real', titulo: 'Controles en la Vida Real', descripcion: 'Ejemplos reales de controles de precios', componente: ControlesVidaReal }, + { id: 'cambios-equilibrio', titulo: 'Cambios en el Equilibrio', descripcion: 'Analiza cómo cambian los shocks el equilibrio', componente: CambiosEquilibrio }, { id: 'identificar-shocks', titulo: 'Identificar Shocks', descripcion: 'Reconoce cambios en el mercado', componente: IdentificarShocks }, { id: 'simulador-precios', titulo: 'Simulador de Precios', descripcion: 'Simula el equilibrio de precios', componente: SimuladorPrecios }, ], 3: [ - { id: 'clasificador-bienes', titulo: 'Clasificador de Bienes', descripcion: 'Clasifica bienes según su elasticidad', componente: ClasificadorBienes }, + { id: 'formula-elasticidad', titulo: 'Fórmula de Elasticidad', descripcion: 'Aprende la fórmula de elasticidad precio', componente: FormulaElasticidad }, + { id: 'metodo-punto-medio', titulo: 'Método del Punto Medio', descripcion: 'Calcula elasticidad usando el método del punto medio', componente: MetodoPuntoMedio }, { id: 'calculadora-elasticidad', titulo: 'Calculadora de Elasticidad', descripcion: 'Calcula elasticidades de demanda', componente: CalculadoraElasticidad }, + { id: 'elasticidad-curva', titulo: 'Elasticidad en la Curva', descripcion: 'Analiza la elasticidad en diferentes puntos de la curva', componente: ElasticidadCurva }, + { id: 'elasticidad-rectas', titulo: 'Elasticidad y Rectas', descripcion: 'Relación entre pendiente y elasticidad', componente: ElasticidadRectas }, + { id: 'clasificacion-elasticidad', titulo: 'Clasificación de Elasticidad', descripcion: 'Clasifica bienes según su elasticidad', componente: ClasificacionElasticidad }, + + { id: 'clasificador-bienes', titulo: 'Clasificador de Bienes', descripcion: 'Clasifica bienes según su elasticidad', componente: ClasificadorBienes }, + { id: 'formula-elasticidad-ingreso', titulo: 'Elasticidad Ingreso', descripcion: 'Calcula la elasticidad ingreso de la demanda', componente: FormulaElasticidadIngreso }, + { id: 'bienes-normales-inferiores', titulo: 'Bienes Normales vs Inferiores', descripcion: 'Distingue bienes normales de inferiores', componente: BienesNormalesInferiores }, + { id: 'bienes-lujo-necesarios', titulo: 'Bienes de Lujo vs Necesarios', descripcion: 'Clasifica bienes según su elasticidad ingreso', componente: BienesLujoNecesarios }, + { id: 'curva-engel', titulo: 'Curva de Engel', descripcion: 'Relación entre ingreso y consumo', componente: CurvaEngel }, + { id: 'formula-elasticidad-cruzada', titulo: 'Elasticidad Cruzada', descripcion: 'Calcula elasticidad entre bienes relacionados', componente: FormulaElasticidadCruzada }, + { id: 'sustitutos-complementarios', titulo: 'Sustitutos vs Complementarios', descripcion: 'Identifica bienes sustitutos y complementarios', componente: SustitutosComplementarios }, + { id: 'grado-relacion', titulo: 'Grado de Relación', descripcion: 'Mide la fuerza de la relación entre bienes', componente: GradoRelacion }, + { id: 'utilidad-total-vs-marginal', titulo: 'Utilidad Total vs Marginal', descripcion: 'Diferencia entre utilidad total y marginal', componente: UtilidadTotalVsMarginal }, + { id: 'ley-utilidad-marginal-decreciente', titulo: 'Utilidad Marginal Decreciente', descripcion: 'Comprende la ley de utilidad marginal decreciente', componente: LeyUtilidadMarginalDecreciente }, + { id: 'maximizacion-utilidad', titulo: 'Maximización de Utilidad', descripcion: 'Optimiza la canasta de consumo del consumidor', componente: MaximizacionUtilidad }, + { id: 'curvas-indiferencia', titulo: 'Curvas de Indiferencia', descripcion: 'Visualiza preferencias del consumidor', componente: CurvasIndiferencia }, + { id: 'canasta-optima', titulo: 'Canasta Óptima', descripcion: 'Encuentra la combinación óptima de bienes', componente: CanastaOptima }, + { id: 'decisiones-precios', titulo: 'Decisiones de Precios', descripcion: 'Toma decisiones basadas en elasticidad', componente: DecisionesPrecios }, + { id: 'paradoja-agua-diamantes', titulo: 'Paradoja del Agua y los Diamantes', descripcion: 'Resuelve la paradoja del valor', componente: ParadojaAguaDiamantes }, { id: 'ejercicios-examen', titulo: 'Ejercicios de Examen', descripcion: 'Pon a prueba tus conocimientos', componente: EjerciciosExamen }, ], 4: [ + { id: 'funcion-produccion', titulo: 'Función de Producción', descripcion: 'Comprende la relación entre insumos y producto', componente: FuncionProduccion }, + { id: 'corto-vs-largo-plazo', titulo: 'Corto vs Largo Plazo', descripcion: 'Diferencias en el análisis productivo según el tiempo', componente: CortoVsLargoPlazo }, + { id: 'producto-total', titulo: 'Producto Total', descripcion: 'Analiza la producción total de la empresa', componente: ProductoTotal }, + { id: 'producto-medio', titulo: 'Producto Medio', descripcion: 'Calcula el producto por unidad de factor', componente: ProductoMedio }, + { id: 'producto-marginal', titulo: 'Producto Marginal', descripcion: 'Analiza el producto adicional de cada unidad', componente: ProductoMarginal }, + { id: 'ley-rendimientos-decrecientes', titulo: 'Rendimientos Decrecientes', descripcion: 'Comprende la ley de rendimientos decrecientes', componente: LeyRendimientosDecrecientes }, + { id: 'etapas-produccion', titulo: 'Etapas de Producción', descripcion: 'Identifica las etapas de la producción', componente: EtapasProduccion }, + { id: 'productor-racional', titulo: 'Productor Racional', descripcion: 'Determina la zona de producción racional', componente: ProductorRacional }, + { id: 'costos-fijos-vs-variables', titulo: 'Costos Fijos vs Variables', descripcion: 'Distingue entre costos fijos y variables', componente: CostosFijosVsVariables }, + { id: 'tabla-costos', titulo: 'Tabla de Costos', descripcion: 'Interpreta tablas de costos de producción', componente: TablaCostos }, + { id: 'curvas-costo', titulo: 'Curvas de Costo', descripcion: 'Visualiza las curvas de costos', componente: CurvasCosto }, { id: 'calculadora-costos', titulo: 'Calculadora de Costos', descripcion: 'Calcula costos de producción', componente: CalculadoraCostos }, + { id: 'costo-total-medio-marginal', titulo: 'Costo Total, Medio y Marginal', descripcion: 'Relación entre los diferentes costos', componente: CostoTotalMedioMarginal }, + { id: 'costos-medios', titulo: 'Costos Medios', descripcion: 'Analiza los costos medios de producción', componente: CostosMedios }, + { id: 'relacion-cmg-cme', titulo: 'Relación CMg y CMe', descripcion: 'Relación entre costo marginal y costo medio', componente: RelacionCMgCMe }, + { id: 'curva-costo-largo-plazo', titulo: 'Curva de Costo Largo Plazo', descripcion: 'Analiza costos cuando todos los factores son variables', componente: CurvaCostoLargoPlazo }, + { id: 'economias-escala', titulo: 'Economías de Escala', descripcion: 'Ventajas de la producción a gran escala', componente: EconomiasEscala }, + { id: 'diseconomias-escala', titulo: 'Diseconomías de Escala', descripcion: 'Desventajas de la producción excesiva', componente: DiseconomiasEscala }, + { id: 'ingreso-total', titulo: 'Ingreso Total', descripcion: 'Calcula los ingresos totales de la empresa', componente: IngresoTotal }, + { id: 'ingreso-marginal', titulo: 'Ingreso Marginal', descripcion: 'Analiza el ingreso adicional por unidad vendida', componente: IngresoMarginal }, + { id: 'ingreso-competencia-perfecta', titulo: 'Ingreso en Competencia Perfecta', descripcion: 'Características del ingreso en competencia perfecta', componente: IngresoCompetenciaPerfecta }, + { id: 'regla-img-cmg', titulo: 'Regla IMg = CMg', descripcion: 'Maximización de beneficios: igualar ingreso y costo marginal', componente: ReglaImgCmg }, + { id: 'punto-cierre-equilibrio', titulo: 'Punto de Cierre y Equilibrio', descripcion: 'Determina cuándo cerrar o continuar produciendo', componente: PuntoCierreEquilibrio }, { id: 'simulador-produccion', titulo: 'Simulador de Producción', descripcion: 'Simula la producción óptima', componente: SimuladorProduccion }, { id: 'visualizador-excedentes', titulo: 'Visualizador de Excedentes', descripcion: 'Visualiza excedentes del consumidor y productor', componente: VisualizadorExcedentes }, ], diff --git a/frontend/src/stores/progressStore.ts b/frontend/src/stores/progressStore.ts index cfd1b78..d0555cc 100644 --- a/frontend/src/stores/progressStore.ts +++ b/frontend/src/stores/progressStore.ts @@ -37,9 +37,10 @@ interface ProgressState { } function calcularNivel(puntuacion: number): NivelUsuario { - if (puntuacion >= 2000) return 'Maestro'; - if (puntuacion >= 1000) return 'Experto'; - if (puntuacion >= 300) return 'Aprendiz'; + if (puntuacion >= 10000) return 'Maestro'; + if (puntuacion >= 6000) return 'Experto'; + if (puntuacion >= 3000) return 'Avanzado'; + if (puntuacion >= 1000) return 'Estudiante'; return 'Novato'; } @@ -69,31 +70,235 @@ function transformarProgresoAPI(progresoAPI: Progreso[]): Record): number { + let count = 0; + Object.values(modulos).forEach((modulo) => { + Object.values(modulo.ejercicios).forEach((ej) => { + if (ej.completado && ej.puntuacion === 100) { + count++; + } + }); + }); + return count; +} + +// Función para contar ejercicios completados en un día +function contarEjerciciosDia(modulos: Record): number { + const hoy = new Date(); + hoy.setHours(0, 0, 0, 0); + let count = 0; + + Object.values(modulos).forEach((modulo) => { + Object.values(modulo.ejercicios).forEach((ej) => { + if (ej.completado && ej.fechaCompletado) { + const fechaEjercicio = new Date(ej.fechaCompletado); + fechaEjercicio.setHours(0, 0, 0, 0); + if (fechaEjercicio.getTime() === hoy.getTime()) { + count++; + } + } + }); + }); + return count; +} + +// Función para contar total de ejercicios completados +function contarTotalEjercicios(modulos: Record): number { + let count = 0; + Object.values(modulos).forEach((modulo) => { + Object.values(modulo.ejercicios).forEach((ej) => { + if (ej.completado) { + count++; + } + }); + }); + return count; +} + +// Función para contar ejercicios completados en un módulo específico +function contarEjerciciosModulo( + modulos: Record, + moduloId: string +): number { + const modulo = modulos[moduloId]; + if (!modulo) return 0; + return Object.values(modulo.ejercicios).filter((ej) => ej.completado).length; +} + +// Función para verificar y actualizar badges +function verificarBadges( + badgesActuales: Badge[], + modulos: Record, + totalEjercicios: number +): Badge[] { + const badgesActualizados = [...badgesActuales]; + const totalCompletados = contarTotalEjercicios(modulos); + const ejerciciosPerfectos = contarEjerciciosPerfectos(modulos); + const ejerciciosHoy = contarEjerciciosDia(modulos); + + // Buscar badge por ID y actualizar si está desbloqueado + const actualizarBadge = (badgeId: string, desbloqueado: boolean) => { + const index = badgesActualizados.findIndex((b) => b.id === badgeId); + if (index !== -1 && badgesActualizados[index].desbloqueado !== desbloqueado) { + badgesActualizados[index] = { + ...badgesActualizados[index], + desbloqueado, + fechaDesbloqueo: desbloqueado ? new Date().toISOString() : undefined, + }; + } + }; + + // Verificar badges generales + actualizarBadge('primeros_pasos', totalCompletados >= 1); + actualizarBadge('dedicado', ejerciciosHoy >= 10); + actualizarBadge('perseverante', totalCompletados >= 50); + actualizarBadge('economista', totalCompletados >= 100); + actualizarBadge('perfecto', ejerciciosPerfectos >= 10); + + // Verificar badges por módulo + Object.keys(modulos).forEach((moduloId) => { + const moduloNumero = parseInt(moduloId.replace('modulo', ''), 10); + const completadosModulo = contarEjerciciosModulo(modulos, moduloId); + + // Explorador del Módulo (5 ejercicios) + actualizarBadge(`explorador_modulo_${moduloNumero}`, completadosModulo >= 5); + + // Experto del Módulo (15 ejercicios) + actualizarBadge(`experto_modulo_${moduloNumero}`, completadosModulo >= 15); + + // Maestro del Módulo (todos los ejercicios) + // Nota: totalEjercicios debería pasarse como parámetro o consultarse desde otro lugar + actualizarBadge(`maestro_modulo_${moduloNumero}`, completadosModulo >= totalEjercicios); + }); + + return badgesActualizados; +} + export const useProgressStore = create()( (set, get) => ({ modulos: {}, puntuacionTotal: 0, - badges: [], + badges: getBadgesDefiniciones(), nivel: 'Novato', isLoading: false, error: null, loadProgreso: async () => { set({ isLoading: true, error: null }); - + try { const [progresoData, resumenData] = await Promise.all([ progresoService.getProgreso(), progresoService.getResumenProgreso(), ]); - + const modulos = transformarProgresoAPI(progresoData); - + + // Usar badges de API o calcular localmente + const badgesAPI = resumenData?.badges ?? []; + const badgesIniciales = badgesAPI.length > 0 ? badgesAPI : getBadgesDefiniciones(); + + // Calcular badges locales basados en el progreso + const badgesCalculados = verificarBadges(badgesIniciales, modulos, 20); + + // Determinar nivel + const puntuacion = resumenData?.totalPuntuacion ?? + Object.values(modulos).reduce((total, mod) => { + return total + Object.values(mod.ejercicios).reduce((sum, ej) => sum + (ej.completado ? ej.puntuacion : 0), 0); + }, 0); + set({ modulos, - puntuacionTotal: resumenData?.totalPuntuacion ?? 0, - badges: resumenData?.badges ?? [], - nivel: resumenData?.nivel ?? 'Novato', + puntuacionTotal: puntuacion, + badges: badgesCalculados, + nivel: calcularNivel(puntuacion), isLoading: false, }); } catch (error) { @@ -169,22 +374,40 @@ export const useProgressStore = create()( const nuevoNivel = calcularNivel(nuevaPuntuacionTotal); + // Calcular badges actualizados localmente + const modulosConNuevo = { + ...state.modulos, + [moduloId]: moduloActualizado, + }; + const badgesActualizados = verificarBadges( + state.badges, + modulosConNuevo, + 20 // Valor por defecto, la API puede sobrescribir esto + ); + return { - modulos: { - ...state.modulos, - [moduloId]: moduloActualizado, - }, + modulos: modulosConNuevo, puntuacionTotal: nuevaPuntuacionTotal, nivel: nuevoNivel, + badges: badgesActualizados, isLoading: false, }; }); - - // Recargar resumen para obtener badges actualizados + + // Recargar resumen para obtener badges actualizados de la API const resumen = await progresoService.getResumenProgreso(); + + // Combinar badges de API con los calculados localmente + const state = get(); + const badgesCombinados = verificarBadges( + resumen?.badges ?? state.badges, + state.modulos, + 20 + ); + set({ - badges: resumen?.badges ?? [], - nivel: resumen?.nivel ?? 'Novato', + badges: badgesCombinados, + nivel: resumen?.nivel ?? state.nivel, }); } catch (error) { set({ @@ -228,10 +451,12 @@ export const useProgressStore = create()( }; }); } else { + // Reset completo: reiniciar todo incluyendo badges set({ modulos: {}, puntuacionTotal: 0, nivel: 'Novato', + badges: getBadgesDefiniciones(), }); } }, diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts index 2ca8603..e4811a5 100644 --- a/frontend/src/types/index.ts +++ b/frontend/src/types/index.ts @@ -27,10 +27,27 @@ export interface ProgresoModulo { porcentaje: number; } +export type BadgeTipo = + // Badges por módulo + | 'explorador_modulo' + | 'experto_modulo' + | 'maestro_modulo' + // Badges generales + | 'primeros_pasos' + | 'ejercicios_dia' + | 'perseverante' + | 'economista' + | 'perfecto' + // Badges existentes + | 'ejercicios_completados' + | 'puntuacion_total' + | 'modulo_completado'; + export interface BadgeCondicion { - tipo: 'ejercicios_completados' | 'puntuacion_total' | 'modulo_completado'; + tipo: BadgeTipo; valor: number; moduloId?: string; + moduloNumero?: number; } export interface Badge { @@ -44,7 +61,24 @@ export interface Badge { fechaDesbloqueo?: string; } -export type NivelUsuario = 'Novato' | 'Aprendiz' | 'Experto' | 'Maestro'; +export type NivelUsuario = 'Novato' | 'Estudiante' | 'Avanzado' | 'Experto' | 'Maestro'; + +export type ColorNivel = 'gris' | 'bronce' | 'plata' | 'oro' | 'diamante'; + +export interface InfoNivel { + nivel: NivelUsuario; + color: ColorNivel; + puntosMinimos: number; + puntosMaximos: number; +} + +export const NIVELES: InfoNivel[] = [ + { nivel: 'Novato', color: 'gris', puntosMinimos: 0, puntosMaximos: 999 }, + { nivel: 'Estudiante', color: 'bronce', puntosMinimos: 1000, puntosMaximos: 2999 }, + { nivel: 'Avanzado', color: 'plata', puntosMinimos: 3000, puntosMaximos: 5999 }, + { nivel: 'Experto', color: 'oro', puntosMinimos: 6000, puntosMaximos: 9999 }, + { nivel: 'Maestro', color: 'diamante', puntosMinimos: 10000, puntosMaximos: Infinity }, +]; export interface ConfiguracionEjercicio { dificultad: 'facil' | 'medio' | 'dificil'; diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json index 3934b8f..17f43b1 100644 --- a/frontend/tsconfig.json +++ b/frontend/tsconfig.json @@ -12,8 +12,8 @@ "noEmit": true, "jsx": "react-jsx", "strict": true, - "noUnusedLocals": true, - "noUnusedParameters": true, + "noUnusedLocals": false, + "noUnusedParameters": false, "noFallthroughCasesInSwitch": true }, "include": ["src"],