aec6aef50f
- 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
305 lines
12 KiB
TypeScript
305 lines
12 KiB
TypeScript
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<number>(0);
|
|
const [respuestas, setRespuestas] = useState<{ [key: number]: string }>({});
|
|
const [mostrarResultado, setMostrarResultado] = useState<boolean>(false);
|
|
const [quizTerminado, setQuizTerminado] = useState<boolean>(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 (
|
|
<div className="max-w-4xl mx-auto p-6">
|
|
<h2 className="text-2xl font-bold mb-6">Resultados del Quiz</h2>
|
|
|
|
<div className="bg-blue-50 p-6 rounded-lg text-center mb-6">
|
|
<p className="text-4xl font-bold text-blue-600 mb-2">
|
|
{puntuacion} / {preguntas.length}
|
|
</p>
|
|
<p className="text-xl">{porcentaje.toFixed(0)}% de aciertos</p>
|
|
<p className="mt-4">
|
|
{porcentaje >= 80
|
|
? '🎉 ¡Excelente! Dominas los agentes económicos'
|
|
: porcentaje >= 60
|
|
? '👍 ¡Bien! Puedes mejorar un poco más'
|
|
: '📚 Sigue estudiando los agentes económicos'}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4 mb-6">
|
|
{preguntas.map((pregunta, index) => {
|
|
const respuestaUsuario = respuestas[pregunta.id];
|
|
const opcionCorrecta = pregunta.opciones.find(o => o.correcta);
|
|
const esCorrecta = respuestaUsuario === opcionCorrecta?.letra;
|
|
|
|
return (
|
|
<div key={pregunta.id} className={`p-4 rounded-lg ${esCorrecta ? 'bg-green-100' : 'bg-red-100'}`}>
|
|
<p className="font-semibold">{index + 1}. {pregunta.pregunta}</p>
|
|
<p className="text-sm mt-2">
|
|
Tu respuesta: <span className={esCorrecta ? 'text-green-700 font-medium' : 'text-red-700'}>
|
|
{respuestaUsuario || 'Sin respuesta'}
|
|
</span>
|
|
{!esCorrecta && (
|
|
<span className="text-green-700 font-medium ml-4">
|
|
Correcta: {opcionCorrecta?.letra}
|
|
</span>
|
|
)}
|
|
</p>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<button
|
|
onClick={reiniciarQuiz}
|
|
className="w-full bg-blue-500 text-white px-6 py-3 rounded-lg hover:bg-blue-600"
|
|
>
|
|
Intentar de Nuevo
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const pregunta = preguntas[preguntaActual];
|
|
const respuestaSeleccionada = respuestas[pregunta.id];
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto p-6">
|
|
<h2 className="text-2xl font-bold mb-2">Quiz: Agentes Económicos</h2>
|
|
|
|
<div className="flex justify-between items-center mb-6">
|
|
<span className="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
|
|
Pregunta {preguntaActual + 1} de {preguntas.length}
|
|
</span>
|
|
<span className="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm">
|
|
Categoría: {pregunta.categoria}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="bg-white border rounded-lg p-6 mb-6">
|
|
<h3 className="text-lg font-semibold mb-4">{pregunta.pregunta}</h3>
|
|
|
|
<div className="space-y-3">
|
|
{pregunta.opciones.map((opcion) => {
|
|
const estaSeleccionada = respuestaSeleccionada === opcion.letra;
|
|
const mostrarCorrecta = mostrarResultado && opcion.correcta;
|
|
const mostrarIncorrecta = mostrarResultado && estaSeleccionada && !opcion.correcta;
|
|
|
|
return (
|
|
<button
|
|
key={opcion.letra}
|
|
onClick={() => !mostrarResultado && seleccionarRespuesta(opcion.letra)}
|
|
disabled={mostrarResultado}
|
|
className={`w-full text-left p-4 rounded-lg border-2 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 hover:border-blue-300'
|
|
}`}
|
|
>
|
|
<span className="font-bold mr-2">{opcion.letra})</span>
|
|
{opcion.texto}
|
|
{mostrarCorrecta && <span className="ml-2 text-green-600">✓</span>}
|
|
{mostrarIncorrecta && <span className="ml-2 text-red-600">✗</span>}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{mostrarResultado && (
|
|
<div className="mt-6 p-4 bg-yellow-50 rounded-lg">
|
|
<p className="font-semibold mb-2">Explicación:</p>
|
|
<p className="text-gray-700">{pregunta.explicacion}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex justify-between">
|
|
<button
|
|
onClick={anteriorPregunta}
|
|
disabled={preguntaActual === 0}
|
|
className="bg-gray-500 text-white px-6 py-2 rounded hover:bg-gray-600 disabled:bg-gray-300"
|
|
>
|
|
Anterior
|
|
</button>
|
|
|
|
<button
|
|
onClick={siguientePregunta}
|
|
disabled={!respuestaSeleccionada}
|
|
className="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600 disabled:bg-gray-300"
|
|
>
|
|
{preguntaActual === preguntas.length - 1 ? 'Ver Resultados' : 'Siguiente'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="mt-6 flex justify-center gap-2">
|
|
{preguntas.map((_, index) => (
|
|
<div
|
|
key={index}
|
|
className={`w-3 h-3 rounded-full ${
|
|
index === preguntaActual
|
|
? 'bg-blue-500'
|
|
: respuestas[preguntas[index].id]
|
|
? 'bg-green-400'
|
|
: 'bg-gray-300'
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AgentesEconomicosQuiz;
|