Widget Builder - AI
Alles over de AI-kant van de Widget Builder: prompts schrijven en verfijnen.
Block-documentatie
Zie de Widget Builder block-pagina voor instellingen, sandbox-details en algemene informatie over het block.Hoe de AI widgets bouwt
Wanneer je een prompt invoert, stuurt Doojoo deze naar Azure OpenAI GPT-4.1. Het model genereert een complete HTML/CSS/JS-widget die direct in een beveiligde iframe wordt getoond. Je tenant-branding (kleuren, lettertype) wordt automatisch meegegeven zodat de widget past bij je cursus.
Effectieve prompts schrijven
De kwaliteit van je widget hangt direct af van je prompt. Volg deze richtlijnen:
- Wees concreet - Beschrijf precies wat de widget moet doen, hoeveel elementen er zijn, en welke interactie je verwacht.
- Noem het type - "quiz", "memory spel", "drag-and-drop oefening", "calculator" geeft de AI een duidelijk kader.
- Geef context - Vermeld het onderwerp, de doelgroep of het vakgebied voor relevantere content.
- Specificeer details - Aantal vragen, kleuren, timer, score-overzicht, hoe meer detail, hoe beter.
Voorbeeldprompts
| Prompt | Resultaat |
|---|---|
| "Maak een memory spel met 8 kaartjes over Nederlandse provincies" | Memory-game met provincienamen als kaartparen |
| "Bouw een BMI calculator met invoervelden en een resultaatgrafiek" | Calculator met lengte/gewicht-invoer en visuele BMI-schaal |
| "Maak een interactieve tijdlijn van de Tweede Wereldoorlog met 10 gebeurtenissen" | Scrollbare tijdlijn met datums, beschrijvingen en afbeeldingen |
| "Bouw een drag-and-drop sorteeroefening voor de stappen van een HACCP-audit" | Versleepbare kaarten die in de juiste volgorde moeten worden geplaatst |
Verfijnen
Na de eerste generatie kun je de widget stapsgewijs verbeteren. Beschrijf wat je wilt veranderen en klik op Verfijnen. De AI past de bestaande widget aan zonder helemaal opnieuw te beginnen. Elke verfijning kost 5 credits.
Beschikbare bibliotheken
De AI kan de volgende CDN-bibliotheken gebruiken in gegenereerde widgets:
- Chart.js - Grafieken en diagrammen
- Three.js - 3D-visualisaties
- SortableJS - Drag-and-drop functionaliteit
- Leaflet - Interactieve kaarten
- Confetti.js - Visuele beloningseffecten
- Canvas API - Tekentools en animaties
Begin eenvoudig, verfijn daarna
"Maak een quiz" → genereer → "Voeg een timer toe" → verfijn → "Maak de knoppen groter" → verfijn. Werk in kleine stappen voor het beste resultaat.