Cuatro personas necesitan una mesa. La quinta persona necesita de repente una segunda. Es precisamente en saltos como estos donde un modelo ajustable explica más que un número decimal sin saltos. No ves solo un resultado, sino también qué regla lo produce.
En las interfaces compatibles, ChatGPT puede mostrar explicaciones y calculadoras interactivas. La disponibilidad depende, entre otras cosas, de la cuenta y de la interfaz. Una sola relación basta para empezar de forma sensata. El modelo de mesas que aparece a continuación es una ilustración propia; no se generó en una sesión de ChatGPT ni se probó como aplicación.
La suposición va junto al control deslizante
Nuestro modelo simplificado supone cuatro plazas por mesa. Lo que buscamos es un número entero de mesas para un número entero no negativo de participantes. No se calculan la forma de la sala, las vías de evacuación, la accesibilidad ni necesidades particulares de espacio. El alcance sigue siendo legible justo al lado de la visualización.
La regla es: divide el número de personas entre cuatro y redondea hacia arriba. Con cero personas, este modelo da cero. De una a cuatro personas da una mesa; de cinco a ocho, dos. Estos valores se derivan matemáticamente de la regla elegida; no son resultados observados de una evaluación del modelo.
Una pequeña función hace visible la regla
function tische(personen) {
if (!Number.isInteger(personen) || personen < 0) {
throw new Error("Number of participants must be a whole number from zero.");
}
return Math.ceil(personen / 4);
}Nuestra propia función de JavaScript contiene deliberadamente solo la relación temática. No sabe nada de salas ni de reservas. Este alcance reducido resulta útil: el cálculo puede leerse con independencia de los colores, el movimiento y los controles.
Para la interfaz, puede bastar un campo numérico con un valor visible. Un control deslizante es una forma adicional de manejarlo, no un sustituto del resultado exacto. El siguiente fragmento propio de HTML muestra el etiquetado y una zona para la respuesta.
<label for="personen">Number of participants</label>
<input id="personen" type="number" min="0" max="200" step="1" value="0">
<p>Assumption: four places per table.</p>
<output id="bedarf" aria-live="polite">0 tables</output>Conecta de forma deliberada la entrada y el cálculo
Un fragmento de código de conexión lee el texto del campo numérico, comprueba que sea un número entero admisible y solo entonces llama a la función de cálculo. Un campo vacío debería generar una respuesta comprensible en lugar de tratarse, sin querer, como un cero introducido a propósito.
const eingabe = document.querySelector("#personen");
const ausgabe = document.querySelector("#bedarf");
eingabe.addEventListener("input", () => {
const text = eingabe.value.trim();
const n = Number(text);
if (text === "" || !Number.isInteger(n) || n < 0 || n > 200) {
ausgabe.textContent = "Please enter a whole number from 0 to 200.";
return;
}
const anzahl = tische(n);
ausgabe.textContent = `${anzahl} ${anzahl === 1 ? "table" : "tables"}`;
});El límite superior de 200 es un límite que elegimos para esta interfaz de aprendizaje. No es una prueba objetiva de capacidad. Coloca la parte ejecutable del script después del campo numérico y de la salida. Si experimentas con ellos, incluye la función y el fragmento en el mismo documento pequeño; son componentes legibles, no una entrega que ya se haya ejecutado.
El movimiento no debe sustituir al único texto que muestra el resultado. Quien reduzca las animaciones o solo lea el número debería poder entender la misma regla. Por eso, mantén la suposición y el resultado calculado visibles en todo momento.
Comprueba por separado los saltos y los controles
Calcula tú mismo los casos de cero, una, cuatro, cinco y ocho personas. Fíjate también en un campo vacío, un número negativo y un valor decimal. Así examinas tanto la regla como el manejo de la entrada. Después, comprueba el uso con el teclado y la legibilidad de la respuesta.
Si quieres reutilizar ese mismo componente propio en un sitio web, el modo de desarrollador de KENJTEC WebSiteBuilder ai, por ejemplo, ofrece un espacio para tu propio HTML, CSS y JavaScript, con vista previa y publicación del código por separado. La transferencia se hace de forma deliberada como código; una visualización del chat no se traslada automáticamente.
Al final, el modelo responde exactamente a su propia pequeña pregunta. Su fuerza reside en que la entrada, la fórmula y el límite son visibles a la vez. Una planificación real de salas necesita más información, que esta visualización expresamente no proporciona.
Fuentes y estado de la documentación: 25 de octubre de 2026.
