Zo bouw je een quizapp
Een quizapp toont vragen, verzamelt antwoorden, scoort ze en toont een resultaat. De eenvoudige versie, één vaste quiz die in de browser wordt gescoord, kost een middag. De versie waar mensen op vertrouwen voor leren, werving of wedstrijden heeft een vragenbank, antwoorden die op de server blijven, opgeslagen pogingen en eerlijke timing nodig. Bepaal vroeg welke van de twee je bouwt, want dat verandert de architectuur.
Bepaal wat voor quiz het is
Het woord "quiz" dekt heel verschillende producten:
| Soort | Voorbeeld | Wat het meest telt |
|---|---|---|
| Leuk / marketing | "Welk abonnement past bij jou?" of een persoonlijkheidsquiz | Uitstraling, delen, leads verzamelen; scoring is eenvoudig |
| Leren / oefenen | Herhalingsquizzen voor een klas of cursus | Uitleg, opnieuw proberen, voortgang in de tijd |
| Toetsing | Trainingscontroles voor personeel, toelatingstoetsen | Verborgen antwoorden, één poging, timing, registraties |
| Live / wedstrijd | Pubquiz, klassikaal spel | Scorebord in real time, iedereen bij dezelfde vraag |
Een persoonlijkheidsquiz zonder gevolgen kan veilig volledig in de browser draaien. Een toets kan dat niet. Live quizzen hebben real-time updates nodig, wat een ander complexiteitsniveau is. Laat ze weg uit de eerste versie, tenzij dat precies het doel is.
Wat een quizapp nodig heeft
Data
- Quizzen: titel, beschrijving, instellingen (tijdslimiet, toegestane pogingen, schudden, slaagcijfer, antwoorden tonen na afloop?).
- Vragen: de quiz, de tekst, het type, punten, een optionele afbeelding en een uitleg die achteraf wordt getoond.
- Opties: de antwoordkeuzes voor een vraag, met welke ervan juist zijn.
- Pogingen: wie welke quiz maakte, wanneer ze begonnen en indienden, de score.
- Antwoorden: welke optie (of tekst) de deelnemer voor elke vraag in een poging gaf.
Door pogingen en antwoorden apart te houden, kun je mensen precies laten zien wat ze fout hadden en vragen opsporen die bijna iedereen mist. Dat is vaak een teken dat de vraag slecht geformuleerd is.
Pagina's
- Quizbewerker voor de auteur: vragen toevoegen, herordenen, het juiste antwoord aanwijzen, voorvertonen.
- Startpagina van de quiz met de regels: aantal vragen, tijdslimiet, pogingen.
- Vraagscherm, één vraag per keer op telefoons, met voortgang ("4 van 10").
- Resultatenpagina met de score, geslaagd of niet, en feedback per vraag als de instellingen dat toestaan.
- Dashboard voor de auteur met pogingen, gemiddelde score en de moeilijkste vragen.
Rechten
Auteurs maken en bewerken quizzen; deelnemers doen ze alleen. Als quizzen voor een klas of team zijn, voeg groepen toe zodat mensen alleen de quizzen zien die aan hen zijn toegewezen. Zie hoe je login aan je app toevoegt.
Scoringregels die je moet opschrijven
De meeste quizbugs zijn scoringbugs. Zet deze regels in je prompt:
- Enkelvoudige keuze: volledige punten bij het juiste antwoord, nul anders.
- Meervoudige keuze ("kies alles wat van toepassing is"): beslis tussen alles-of-niets en gedeeltelijke punten. Bij gedeeltelijke punten: trekken foute keuzes punten af? Schrijf een voorbeeld: "Juiste opties A en C. Alleen A kiezen scoort 1 van 2. A, B en C kiezen scoort 1 van 2."
- Onbeantwoorde vragen scoren nul en worden getoond als onbeantwoord, niet als fout.
- Tijdslimieten worden op de server afgedwongen met de starttijd. Een timer in de browser is alleen een weergave; iedereen kan die pauzeren of aanpassen.
- Schudden verandert de volgorde die wordt getoond, nooit welke optie juist is. Sla het juiste antwoord op via zijn ID, niet via zijn positie.
Houd de antwoorden uit de browser
Dit is het ene technische punt dat elke serieuze quizapp goed moet doen. Als de pagina de vragen met de juiste antwoorden ontvangt en zelf scoort, kan iedereen de ontwikkelaarstools openen en de antwoordsleutel lezen.
De oplossing is simpel te beschrijven: de server stuurt vragen zonder de juistheidsvlaggen, de deelnemer dient in, en de server beoordeelt de poging en geeft het resultaat terug. Zeg dit expliciet in je prompt. Voor een leuke quiz maakt het niet uit; voor alles met een certificaat, cijfer of prijs wel.
Een eerste prompt die werkt
Bouw een quiz-webapp. Auteurs loggen in en maken quizzen met een titel, beschrijving, optionele tijdslimiet, aantal toegestane pogingen en een slaagcijfer. Elke quiz heeft vragen van het type enkelvoudige keuze, meervoudige keuze of waar/onwaar, met punten en een optionele uitleg. Deelnemers openen een quiz via een link, zien de regels en beantwoorden één vraag per scherm met een voortgangsbalk. De juiste antwoorden mogen nooit naar de browser worden gestuurd vóór het indienen: beoordeel pogingen op de server en dwing de tijdslimiet af vanaf de starttijd op de server. Meervoudige keuze is alles-of-niets. Toon na het indienen de score, geslaagd/niet geslaagd en, als de auteur dat toestaat, elke vraag met het juiste antwoord en de uitleg. Sla elke poging en elk antwoord op in een database. Geef auteurs een resultatenpagina met de gemiddelde score en de meest gemiste vragen.
Bouw het stap voor stap
- Eerst de bewerker. Maak één quiz met tien vragen van gemengde typen. Als vragen schrijven pijnlijk is, gebruiken auteurs de app niet.
- Een quiz maken. Probeer het op een telefoon. Controleer de voortgang, vooruit en achteruit, en wat er gebeurt bij verversen.
- Scoren op de server. Open tijdens het maken van de quiz het netwerkoverzicht van de browser en controleer dat geen enkele reactie de juiste antwoorden bevat vóór het indienen.
- Scoringtests. Geef de AI vijf uitgewerkte voorbeelden met verwachte scores, inclusief een gedeeltelijk juist antwoord bij meervoudige keuze en een onbeantwoorde vraag.
- Timer. Start een quiz met tijdslimiet, wacht tot na de limiet en dien dan in. Hij moet worden geweigerd of gescoord zoals hij stond op de deadline; beslis welke van de twee.
- Resultaten en analyse. Controleer de lijst met meest gemiste vragen tegen pogingen die je opzettelijk hebt gedaan.
- Extra's. Voeg pas nu afbeeldingen, vragenbanken met willekeurige selectie, certificaten of een ranglijst toe.
Veelgemaakte fouten
- Antwoordsleutel in de pagina. De meest voorkomende en ernstigste fout.
- De browserklok vertrouwen. Dwing limieten af op de server.
- Het juiste antwoord opslaan als "optie 2". Na het schudden is dan het verkeerde antwoord juist.
- Een quiz bewerken nadat mensen hem hebben gemaakt. Als je een vraag verandert, verandert de betekenis van oude scores. Vergrendel quizzen met pogingen, of geef ze versienummers.
- Onbeperkt opnieuw proberen bij een toets. Bepaal de regel voor pogingen en dwing die af op de server.
- Ranglijsten met volledige namen als standaard. Laat mensen een weergavenaam kiezen, vooral voor leerlingen.
Wanneer een kant-en-klaar product beter is
Als je snel een klassikaal spel nodig hebt, een quiz binnen een cursusplatform dat je al gebruikt, of een eenmalige quiz om leads te verzamelen, dan zijn bestaande quiz- en formuliertools sneller en vaak gratis. Leerplatforms hebben al quizzen met een cijferlijst. Zie alternatieven voor Typeform en alternatieven voor Google Forms voor de route via formulieren.
Bouw zelf wanneer de quiz onderdeel is van iets groters: een cursus die je verkoopt, een wervingsproces, een trainingsprogramma met eigen regels, of wanneer je scoring, huisstijl of dataeigendom nodig hebt die de tools niet bieden. Combineer het met een flashcardapp voor oefening, of plaats het in een onlinecursusplatform.
Bouwen met Mythex
Op Mythex beschrijf je de quizapp in de chat en probeer je hem uit in de live voorvertoning, ook in een weergave op telefoonformaat. De agent voegt een database toe wanneer je vraagt om pogingen op te slaan, en schrijft de scoring op de server naast de frontend. Voor logins van auteurs koppelt Mythex een authenticatiemethode die jij kiest, in plaats van een ingebouwd inlogproduct. Als een wijziging de scoring breekt, zet je terug naar een eerder checkpoint en probeer je het opnieuw.
Veelgestelde vragen
Hoe voorkom ik dat mensen de antwoorden van een quiz in de browser zien?
Houd de juiste antwoorden op de server. Stuur de vragen zonder antwoorden, laat de deelnemer indienen en beoordeel de inzending op de server. Alles wat naar de browser wordt gestuurd, kan met de ontwikkelaarstools worden gelezen.
Heeft een quizapp een database nodig?
Een enkele vaste quiz zonder opgeslagen scores kan volledig in de browser draaien. Zodra je opgeslagen resultaten, ranglijsten, meerdere quizzen of geheime antwoorden wilt, heb je een database en een kleine server nodig.
Kan ik een quizapp bouwen zonder te programmeren?
Ja. Een AI-appbouwer kan op basis van een beschrijving de vragenbewerker, het quizscherm en de scoring maken. Controleer de scoringregels zelf met een paar uitgewerkte voorbeelden voordat je de app deelt.
Welke vraagtypen moet een quizapp ondersteunen?
Enkelvoudige keuze, meervoudige keuze en waar/onwaar dekken de meeste quizzen en zijn makkelijk automatisch te beoordelen. Korte tekstantwoorden hebben regels voor matching of handmatige beoordeling nodig, dus voeg die later toe.