Een quiz voor Cybersecuritymaand bouwen met Macaly AI

Cybersecurity en AI gaan niet helemáál hand in hand. Om een AI builder te gebruiken voor een quiz over cybersecurity voelt daarom misschien wat tegenstrijdig, maar dat is exact hoe ik de cybersecurityquiz voor Cybersecuritymaand heb gebouwd. Hoe ik hem gemaakt heb, en hoe ik heb geprobeerd ervoor te zorgen dat hij echt binnen het thema bleef, lees je hier.

Het uitgangspunt

Onze landingspagina voor Cybersecuritymaand kon wel wat meer kleur gebruiken. Daarom wilde ik een interactief element bouwen met onze AI builder, Macaly AI. Ik had een aantal vereisten waar het aan moest voldoen: de quiz moest 10 vragen hebben (niet te veel, niet te weinig), ze moesten niet té ingewikkeld zijn maar wel een beetje uitdaging geven (daarover later meer), ik wilde een competitief element erin verwerken, er moest wat ruimte zijn om uitleg te geven over het juiste antwoord en aan het einde van de quiz wilde ik een resultaat-scherm inbouwen.

Voor versie 1 gaf ik aan Macaly de volgende opdracht:

“In oktober is het cybersecuritymaand. Denk als een marketeer bij een techbedrijf die tijdens cybersecuritymaand extra aandacht wil geven aan de gevaren rondom cybersecurity, AI-gebruik, wachtwoorden-recycling en goede/slechte cybersecuritygewoonten. Maak een quiz voor me met 10 vragen, meerkeuze-antwoorden, met een timer die bijhoudt hoe snel iemand de vragen heeft beantwoord. Mensen mogen voor ze beginnen een username en emailadres invoeren waarop ze hun score ontvangen. De deelnemer met de meeste goede antwoorden en de snelste tijd, wint.”

Versie 1: Basic functionaliteit

Versie 1 werd opgeleverd met hele basic functionaliteit. De quiz werkte, de timer werkte, registeren en inloggen werkte. De app had een database, een codebase en een test-versie waar ik aan kon sleutelen.

Macaly gaf me na het opleveren van de eerste versie wat suggesties om de backend van mijn nieuwbakken app veiliger en ook valsspeel-proof te maken, zoals inzendingen checken tegen de database en niet binnen de browser. Ik gaf het de opdracht die toe te voegen en nam meteen ook een username-check mee om schunnige of beledigende usernames tegen te gaan. Ik vond ook wat bugjes, wat leidde tot versie 2.

Versie 2: Bug hunt

Een van de meest opvallende bugs die ik vond in het checken van Versie 1 was in de check van de goede antwoorden. Zelfs bij 10 goede antwoorden, gaf de quiz namelijk een resultaat van maar 2/10 terug. Volgens Macaly zelf kwam dat doordat de client en de backend twee verschillende antwoord-keys gebruikten. Omdat ik zelf in de code kon checken waar het fout ging, kon ik vrij makkelijk achterhalen dat er inderdaad twee verschillende functies werden aangeroepen, al kon Macaly zelf niet verklaren waarom. Gelukkig kon hij het wel zelf oplossen.

Versie 3: back to basic

Na deze versie had ik mijn twijfels over een aantal onderdelen: wilde ik wel een leaderboard? En een timer? Want als ik de tijd bijhoud, kan men de uitleg bij een antwoord niet lezen tenzij ze tijd wilden inleveren. En wilden we er wel een race van maken? En wilde ik überhaupt wel gegevens van spelers opslaan? De beste verdediging voor je data is ten slotte om zo min mogelijk op te slaan. Dus vroeg ik om een versimpelde versie: geen registratie, geen opgeslagen e-mailadressen, geen leaderboard.

In Macaly heb je niet alleen een AI-bot waar je tegen praat, maar krijg je ook toegang tot de code die gegenereerd wordt, de database die eraan gekoppeld wordt, en zie je al je wijzigingen terug in een preview-modus waar je ook je styling kunt aanpassen. Met de quiz zo goed als klaar, kon ik dus de details gaan aanpassen. Ik schreef nieuwe vragen voor de quiz, voegde ze toe (met de antwoorden op de goede plek, zodat ik niet de oude bug opnieuw introduceerde), paste de styling aan zodat het echt TransIP was en gaf hem een betere header.

Embedden maar!

Hoewel de basic versie van de quiz nu klaar om te gaan was, wilde ik nog wat extra tests doen om te kijken wat ik nog meer kon uitspoken. Daarvoor maakte ik een clone van mijn project. Ik voegde bijvoorbeeld de VPS Security-quiz toe, waardoor de logica dubbel uitgevoerd moest worden.

Ik haalde ook de timer uit de quiz, want zonder leaderboard was die niet meer nodig, en verbeterde de leesbaarheid door de automatische roll-over naar de volgende vraag te vervangen door een knop. Het slotscherm maakte ik ook quiz-afhankelijk zodat spelers een toepasselijke beloning krijgen als ze de quiz hebben voltooid.

Takeaways

Een AI-builder als Macaly is heel goed in staat om een simpele web-app in korte tijd in elkaar te zetten die je daarna naar je eigen hand kunt zetten. Vooral vanaf versie 3 en de splitsing was het vooral detail-werk waarvoor ik zelf de code in ben gedoken. De UI is daarvoor heel gebruiksvriendelijk.

Iemand die minder technisch aangelegd is, kan dit code-heavy werk ook door de AI zelf laten uitvoeren. Daarvoor moet je wel goed kunnen uitleggen waar je aanpassingen wilt laten maken, of screenshots gebruiken en Macaly omzetten naar ‘planning’-modus zodat hij eerst een analyse maakt voor je en uitlegt welke stappen er genomen moeten worden.

Waar Macaly en ik wat minder door één deur konden, was in de styling van mijn app. Zeker toen ik de app los had getrokken van een webpagina en hem wilde embedden, moest ik redelijk vechten om alle overbodige content los te halen en aan te passen hoe ik het wilde hebben.

Ten slotte is het altijd goed om te onthouden dat een AI-builder als Macaly uitvoert wat je hem opdraagt. Soms denkt hij voor je uit, zoals met de checks in versie 1. Maar wanneer je zeker wilt weten dat je niet tegen onverwachte problemen aanloopt bij een app die ingewikkelder is dan de mijne, is het heel verstandig om de ‘planning’-modus te gebruiken en je aanpassingen eerst door te nemen voor Macaly ze mag doorvoeren.

Het resultaat

Het resultaat van mijn Macaly-avontuur is live en te bekijken (en te spelen!) op onze Cybersecuritymaand-pagina. Ben je geïnspireerd geraakt en wil je zelf Macaly AI uitproberen? Dat kan de eerste maand gratis!