Pendiente de una Recta body { font-family: 'Inter', Arial, sans-serif; /* Usando Inter como fuente principal */ display: flex; flex-direction: column; align-items: center; margin-top: 20px; background-color: #f4f7f9; /* Un fondo ligeramente más suave */ color: #333; } h2 { color: #2c3e50; /* Un color más oscuro para el título */ } #escena { border: 2px solid #bdc3c7; /* Un borde más sutil para el canvas */ background-color: white; border-radius: 8px; /* Bordes redondeados para el canvas */ box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Sombra sutil */ } #controles { margin-top: 25px; display: flex; align-items: center; gap: 15px; /* Mayor espaciado entre controles */ padding: 15px; background-color: #ffffff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); } label { font-size: 1em; color: #555; } input[type="number"], input[type="text"] { padding: 10px; border: 1px solid #ccc; border-radius: 6px; /* Bordes redondeados para input */ width: 120px; /* Un poco más ancho */ font-size: 1em; transition: border-color 0.3s ease; } input[type="number"]:focus, input[type="text"]:focus { border-color: #007bff; /* Resaltar al enfocar */ outline: none; } button { padding: 12px 20px; /* Botones más grandes */ background-color: #007bff; color: white; border: none; border-radius: 6px; /* Bordes redondeados para botones */ cursor: pointer; font-size: 1em; /* Tamaño de fuente consistente */ transition: background-color 0.3s ease, transform 0.1s ease; /* Transiciones suaves */ } button:hover { background-color: #0056b3; transform: translateY(-1px); /* Ligero efecto al pasar el mouse */ } button:active { transform: translateY(0px); /* Efecto al presionar */ } #mensaje { margin-top: 20px; font-size: 1.1em; min-height: 24px; /* Para evitar saltos de diseño */ padding: 10px; border-radius: 6px; width: 80%; max-width: 480px; /* Ancho máximo para el mensaje */ text-align: center; } .correcto { color: #27ae60; /* Verde más agradable */ background-color: #e9f7ef; /* Fondo verde claro */ border: 1px solid #a3e9a4; } .incorrecto { color: #c0392b; /* Rojo más agradable */ background-color: #fdedec; /* Fondo rojo claro */ border: 1px solid #f5b7b1; } .info { color: #2980b9; /* Azul para mensajes informativos */ background-color: #eaf2f8; border: 1px solid #a9cce3; } /* Estilos para el modal de mensajes */ .modal { display: none; /* Oculto por defecto */ position: fixed; /* Se queda fijo en la pantalla */ z-index: 1000; /* Por encima de otros elementos */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* Permite scroll si el contenido es muy largo */ background-color: rgba(0,0,0,0.4); /* Fondo oscuro semitransparente */ } .modal-contenido { background-color: #fefefe; margin: 15% auto; /* 15% desde arriba y centrado horizontalmente */ padding: 25px; border: 1px solid #888; width: 80%; max-width: 400px; /* Ancho máximo del modal */ border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); text-align: center; } .modal-contenido p { font-size: 1.1em; margin-bottom: 20px; } .modal-contenido button { background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; } .modal-contenido button:hover { background-color: #0056b3; } Calcula la Pendiente de la Recta Pendiente (m): Verificar Nueva Pregunta Entendido <script> const canvas = document.getElementById('escena'); const ctx = canvas.getContext('2d'); const tamanoCuadricula = 25; // Tamaño de cada celda de la cuadrícula const numCeldasAncho = canvas.width / tamanoCuadricula; const numCeldasAlto = canvas.height / tamanoCuadricula; const centroCanvasX = canvas.width / 2; const centroCanvasY = canvas.height / 2; let punto1Canvas, punto2Canvas, pendienteReal; let coordMatP1, coordMatP2; // Coordenadas matemáticas de los puntos const mensajeDiv = document.getElementById('mensaje'); const modal = document.getElementById('modalMensaje'); const textoModal = document.getElementById('textoModal'); const inputRespuesta = document.getElementById('respuestaPendiente'); function mostrarModal(mensaje, tipo = 'info') { textoModal.textContent = mensaje; modal.style.display = "block"; } function cerrarModal() { modal.style.display = "none"; } window.onclick = function(event) { if (event.target == modal) { cerrarModal(); } } function dibujarCuadricula() { ctx.strokeStyle = "#e0e0e0"; ctx.lineWidth = 0.5; for (let i = 0; i