Spring til indholdet
kenjtecJournal
Søg i Journal

En skyder forklarer mere end et afsnit: interaktive modeller med ChatGPT

En lille bordmodel gør afrunding håndgribelig. Med JavaScript i fuld synlighed og klare grænser bliver den din egen sporbare byggeklods til et website.

Ana skubber pladsmarkører med en lineal; den femte, røde markør står allerede ved det andet bord. AI-illustration.

Fire personer har brug for ét bord. Den femte person har pludselig brug for et andet. Det er netop ved spring som disse, at en justerbar model forklarer mere end et glat decimaltal. Du ser ikke kun et resultat, men også hvilken regel der giver det.

I understøttede brugerflader kan ChatGPT vise interaktive forklaringer og beregnere. Tilgængeligheden afhænger blandt andet af kontoen og brugerfladen. Én enkelt sammenhæng er nok til en fornuftig start. Bordmodellen nedenfor er vores egen illustration; den er ikke genereret i en ChatGPT-session og ikke testet som applikation.

Antagelsen hører hjemme ved siden af skyderen

Vores forenklede model antager fire pladser pr. bord. Det, vi leder efter, er et helt antal borde til et ikke-negativt helt antal deltagere. Rummets form, flugtveje, tilgængelighed og særlige pladsbehov bliver ikke beregnet. Gyldighedsområdet står læsbart lige ved siden af visningen.

Reglen er: Divider antallet af personer med fire, og rund op. Med nul personer giver denne model nul. Én til fire personer giver ét bord; fem til otte giver to. Disse værdier følger matematisk af den valgte regel; de er ikke observerede resultater af en modelevaluering.

En lille funktion gør reglen synlig

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);
}

Vores egen JavaScript-funktion indeholder bevidst kun den faglige sammenhæng. Den ved intet om et rum eller om bookinger. Denne snævre rækkevidde er en hjælp: Beregningen kan læses uafhængigt af farver, bevægelse og betjeningselementer.

Til brugerfladen kan et talfelt med en synlig værdi være nok. En skyder er en ekstra måde at betjene det på, ikke en erstatning for det præcise resultat. Det følgende HTML-uddrag, som vi selv har lavet, viser mærkningen og et område til tilbagemeldingen.

<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>

Forbind input og beregning bevidst

Et forbindende stykke kode læser teksten fra talfeltet, kontrollerer, om der er tale om et tilladt helt tal, og kalder først derefter beregningsfunktionen. Et tomt felt bør udløse en forståelig tilbagemelding i stedet for utilsigtet at blive behandlet som et bevidst indtastet nul.

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"}`;
});

Den øvre grænse på 200 er en grænse, vi har valgt til denne læringsbrugerflade. Den er ikke et faktuelt bevis for kapacitet. Placer den udførende del af scriptet efter talfeltet og outputtet. Saml funktionen og uddraget i det samme lille dokument, hvis du eksperimenterer med dem; det er læsbare byggeklodser, ikke en leverance, der allerede er blevet kørt.

Bevægelse må ikke erstatte den eneste tekst, der viser resultatet. Den, der reducerer animationer eller kun læser tallet, skal kunne forstå den samme regel. Hold derfor antagelsen og det beregnede resultat permanent synlige.

Kontrollér springene og betjeningen hver for sig

Regn selv nul, én, fire, fem og otte personer igennem. Se også på et tomt felt, et negativt tal og en decimalværdi. På den måde undersøger du både reglen og håndteringen af input. Kontrollér derefter betjeningen med tastaturet og læsbarheden af tilbagemeldingen.

Hvis du vil genbruge den samme byggeklods, som du selv har lavet, på et website, tilbyder udviklertilstanden i KENJTEC WebSiteBuilder aifor eksempel et sted til din egen HTML, CSS og JavaScript med en forhåndsvisning og separat publicering af koden. Overførslen sker bevidst som kode; en visualisering fra chatten bliver ikke overført automatisk.

Til syvende og sidst besvarer modellen præcis sit eget lille spørgsmål. Dens styrke ligger i, at input, formel og grænse er synlige samtidig. Virkelig rumplanlægning kræver yderligere oplysninger, som denne visning udtrykkeligt ikke giver.

Kilder og dokumentationsstatus: 25. oktober 2026.

Hamborg er vores udgangspunkt.

Det nyttige rejser med dig.

Praktisk AI fra Hamborg, forklaret internationalt.

Gemte artikler