Cybersikker

Kravet var klart afgrænset: en responsiv, interaktiv brugergrænseflade i ren HTML/SCSS/JavaScript — ingen frameworks — med et forgrenet scenarie, der formidler et selvvalgt datasikkerhedsemne til studerende på erhvervsakademier. Scenariet skulle som minimum have flere trin, mindst ét valg med konsekvenser og mindst to mulige slutninger.

MMDsEDK25B · Multimediedesign, IBA Erhvervsakademi Kolding

Den første idé opstod af en konkret oplevelse fra undervisningen: links fra undervisere er ofte fulgt af en cookie-/tracking-samtykke-popup om "samarbejdspartnere" — relevant i en privat sammenhæng, men malplaceret i en studiekontekst, hvor man ikke selv har valgt de virksomheder. Idéen blev undersøgt grundigt i sparring med ChatGPT: et forgrenet scenarie om at modtage et undervisningslink, blive mødt af en tracking-popup og vælge, hvordan man håndterer den — med tre skitserede slutninger (fra ukritisk accept til en bevidst, privat tilgang).

"Det er faktisk en rigtig stærk og meget realistisk idé, og den passer ekstremt godt til projektkravene."

Ved forsøget på at omsætte idéen til et fungerende flowchart gik processen i stå — konceptet viste sig svært at oversætte til en fungerende UX/UI-struktur i praksis. Fremfor at presse en idé, der ikke ville lykkes, blev den bevidst forkastet.

Flowchart v1 · den forkastede idé

Idéen findes dokumenteret i en gemt ChatGPT-samtale, som en del af AI-loggen (se afsnit 9).

Samme dag konceptet gik i stå, blev en ny idé vurderet: at bruge en chatbot som omdrejningspunkt i stedet. Den nye idé bevarede kernen fra den oprindelige — tillid til en tilsyneladende legitim digital tjeneste, gradvis datadeling, konsekvenser af valget — men i en form, der var langt lettere at udvikle og teste i praksis. Et nyt flowchart blev udarbejdet samme dag, og det blev den endelige retning.

En chatbot-popup møder brugeren med hjælpsomhed, og forsøger gradvist — gennem en række spørgsmål og opfordringer — at få brugeren til at dele mere, end der er grund til. Formålet er ikke at skræmme, men at gøre brugeren opmærksom på, hvor let tillid kan misbruges, og hvordan man genkender det undervejs.

Trin 1

Første kontakt

Trin 2

Bedes dele mere

Trin 3

Presset stiger

Trin 4

Konsekvens

Trin 5

Feedback

Version 1 af flowchartet var en simpel, forgrenet skitse uden klare kategorier — nok til at få idéen ned, men svær at kvalitetssikre og bruge som grundlag for kode. Version 2 blev bygget om med tydelige swimlanes (introduktion → opbygning af tillid → risikovalg → udfald) og en eksplicit legend, der skelner mellem brugerhandlinger, systemhandlinger, beslutninger og feedback. Det gjorde strukturen langt lettere at omsætte direkte til det datadrevne scenariesystem i kode (se afsnit 6).

Flowchart v1

Flowchart v2

Chatbotten er bygget som en dynamisk popup i vanilla JavaScript, hvor selve indholdet — dialoger, forgreninger og feedback — er samlet i ét datadrevet array. Hvert scenarie har et unikt id og en type (dialog, information eller feedback-udfald), så navigationen styres af data frem for hardcodet logik i selve programmet. Det betyder, at nye scenarier kan tilføjes eller fjernes, uden at resten af systemet skal skrives om — en bevidst arkitektonisk beslutning, der rækker ud over opgavens minimumskrav.

export const scenarier = [
  {
    id: "intro",
    type: "question",
    tekst: `Hej! Jeg kan hjælpe dig...`,
    svar: [
      { tekst: "Jeg skriver en opgave om websikkerhed", næste: "share" },
      { tekst: "Hvem er du?", næste: "present-ai" }
    ]
  },
  {
    id: "phish",
    type: "info",
    tekst: `Du bliver sendt til en side, der ligner en studieplatform...`,
    konsekvens: `Kort efter modtager du en mail: "Din konto er kompromitteret."`,
    cta: `clicked`
  }
];

En interaktiv chatbot-modal er let at bygge, så den kun virker med mus og øjne. Her var fokus på tastaturnavigation, en fokusfælde der holder brugeren inde i dialogen mens den er åben, og fuld understøttelse af tab- og escape-tasterne — både i chatbotten og i sitets hamburgermenu.

Det færdige site samler chatbot-simulationen, designsystemet og tilgængelighedsarbejdet i én sammenhængende oplevelse.

Forside — fuld mobilvisning

Chatbot åben — samtale i gang

Et af de seks udfald

heididesire.dk/cybersikker · GitHub: github.com/heikri01/sem0202

AI-brugen i dette projekt er ikke et enkelt værktøjsopslag, men en løbende dialog gennem hele forløbet — fra at vurdere den første, forkastede idé, til at få hjælp til konkrete tekniske forhindringer undervejs (en hamburgermenu, der ikke ville virke; en oprydning af kodefilerne mod slutningen).

Pointen: AI blev brugt til sparring og tekniske forhindringer undervejs — men både beslutningen om at forkaste den første idé, den endelige systemarkitektur og alt indhold i chatbot-scenariet er egne, bearbejdede valg.

Udsnit af AI-loggen