Zo simpel en fijn kan HTML-code zijn
Loop je bij het ontwikkelen van een online werkvorm tegen de grenzen van je auteurstool of LMS aan? Of ziet je werkvorm er nét niet uit zoals jij voor ogen hebt? Dan kan HTML-code je helpen.
En nee, daarvoor hoef je geen programmeur te zijn. Met AI als codeerbuddy maak je snel interactieve werkvormen voor je e-learning.
Wat is HTML-code eigenlijk?
Even kort: de code achter een interactieve online werkvorm bestaat uit drie onderdelen: HTML, CSS en JavaScript.
- HTML geeft structuur aan je pagina
- CSS zorgt voor de vormgeving
- JavaScript maakt interactie mogelijk
Samen vormen HTML, CSS en JavaScript de code achter een interactieve werkvorm. Voor het gemak noemen wij dat: HTML-code. Zo. Genoeg codetaal.
Denk je nu al: HTML-code schrijven is niets voor mij? Dat is iets voor ICT’ers en computerfreaks. Nou, nee hoor. En je hoeft het ook niet allemaal zelf te kunnen. Je moet vooral goed kunnen uitleggen wat je wilt maken.
Interactieve werkvormen maken met AI
Stel: je hebt een goed idee voor een werkvorm, maar je krijgt het niet gebouwd in je auteurstool of LMS. Dan kun je je favoriete AI-tool vragen om een HTML-code voor je te maken. Begin met je idee.
Hoe ziet jouw ideale werkvorm eruit? Wat moet de deelnemer zien? Waar moet iemand op kunnen klikken? En wat moet er daarna gebeuren?
Schrijf vervolgens een duidelijke prompt. Vertel AI:
- Welke werkvorm je wilt maken
- Welke teksten, afbeeldingen en knoppen erin moeten
- Hoe de werkvorm eruit moet zien
- Wat er gebeurt als iemand ergens op klikt
- Op welke apparaten de werkvorm goed moet werken
Hoe concreter je bent, hoe groter de kans dat AI precies bouwt wat jij voor ogen hebt.
Gebruik bijvoorbeeld deze prompt:
Werkvormen ontwikkelen met HTML-code
Wil je vaker werkvormen ontwikkelen met HTML-code? Sla deze prompt op in een eigen GPT. Zo hoef je niet steeds opnieuw te beginnen. Test de code in je e-learning.
- Werkt alles goed?
- Past het op het scherm?
- Werkt het op een laptop en tablet?
- Zijn de knoppen duidelijk?
- Is de tekst goed leesbaar?
Nog niet tevreden? Geef concreet aan wat je wilt aanpassen. Bijvoorbeeld: “Maak de startknop twee keer zo groot en geef hem de kleur #7952E8” of “Zet de afbeelding links, de uitleg rechts en zorg dat beide op mobiel onder elkaar komen te staan”. Hoe concreter jij bent, hoe beter AI helpt.
Ter inspiratie: vertel AI niet alleen welke ingrediënten je hebt en dat je daarmee pasta bolognese wilt maken. Geef ook aan hoeveel pitten je hebt, of er peper en zout bij moet, met hoeveel personen je gaat eten en wie van de gezinsleden nog moet sporten om 18:37. Juist ja, specifiek zijn, dan kan AI je codeerbuddy worden. Of je souschef.
HTML-code? Makkie!
Je hoeft dus geen programmeur te zijn om gave interactieve werkvormen te maken. Je moet vooral een goed idee hebben, duidelijk kunnen uitleggen wat je wilt en kritisch kijken naar wat AI oplevert.
Zo kun je met AI en HTML-code werkvormen maken die wél doen wat jij voor ogen hebt.
Makkie, toch?
