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
This commit is contained in:
Renato
@@ -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<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;
|
||||
Reference in New Issue
Block a user