Basisschool De Borne · Tilburg

Maak je eigen
AI-quiz

Dit is de vervolgopdracht, voor als je meer wilt. Je maakt je eigen AI-quiz website met ChatGPT. Je hoeft niet te programmeren. Je hebt alleen een goede prompt nodig.

Heb je al gechat met de AI?

Begin eerst met de chat-opdracht: daar praat je zelf met een AI-chatbot, met allerlei leuke startprompts. Heb je dat al gedaan en wil je meer? Dan ben je hier op de goede plek. Naar de chat-opdracht →

1
Stap 1

Wat is een prompt?

Wat is een prompt?

Een prompt (= de opdracht die je aan AI geeft) is wat jij aan de AI vraagt.

Hoe duidelijker je vraag, hoe beter het antwoord van ChatGPT.

ChatGPT is net een slimme helper

Stel je voor: je vraagt een helper om iets te maken.

Zeg je alleen "maak iets"? Dan weet hij niet wat je wilt.

Zeg je "maak een quiz over dieren met 5 vragen, 3 antwoorden per vraag, voor kinderen van 10 jaar"? Dan kan hij meteen beginnen.

Zo werkt ChatGPT ook. Jij geeft de opdracht. ChatGPT doet het.

Slechte prompt

"Maak een quiz."

Goede prompt

"Maak een quiz over ruimtevaart met 5 vragen voor kinderen van 10 jaar, met 3 antwoorden per vraag."

2
Stap 2

Kies een onderwerp voor jullie quiz

Elk groepje kiest een eigen AI-onderwerp

Jullie quiz gaat over AI. Maar AI is heel groot.

Kies samen één onderwerp voor jullie quiz.

Klik hieronder op een onderwerp. Dan staat het meteen in de prompt.

Doe: bedenk samen 1 onderwerp dat jullie leuk vinden. Klik dat onderwerp dan aan.

Wat is AI?
Hoe leert een computer?
Zelfrijdende auto's
AI en kunst
ChatGPT gebruiken
Veilig met AI
AI en mensen
AI in het dagelijks leven
AI en de toekomst
AI in games
AI en foto's
AI in de zorg
Gekozen onderwerp: — de prompt hieronder is automatisch bijgewerkt!

Tip voor het groepje

Kies iets wat jullie zelf leuk vinden.

Dan zijn de vragen makkelijker te bedenken. En de quiz wordt leuker om te spelen.

3
Stap 3

Kopieer deze prompt

Gebruik deze prompt in ChatGPT

Hieronder staat de prompt al klaar voor je.

Doe deze 3 dingen:

1. Klik in stap 2 op jullie onderwerp. Dan vult de prompt zich vanzelf.

2. Klik op de knop "Kopieer de prompt". Kopiëren (= de tekst tijdelijk onthouden) doet de computer voor je.

3. Plak (= de onthouden tekst ergens neerzetten) de prompt straks in ChatGPT.

Kopieer onderstaande prompt
Maak een complete, interactieve quizpagina in HTML over het onderwerp: [ONDERWERP]. De quiz moet voldoen aan de volgende eisen: 1. De pagina heeft een duidelijke titel met het onderwerp. 2. Er zijn precies 5 quizvragen over [ONDERWERP]. 3. Elke vraag heeft 3 antwoordmogelijkheden (A, B en C). 4. Slechts één antwoord is goed. De goede antwoorden wisselen af (niet altijd A). 5. Na het klikken op een antwoord: - Staat het goede antwoord groen gemarkeerd. - Staat het foute antwoord rood gemarkeerd. - Verschijnt er een korte uitleg (1 of 2 zinnen) waarom het goede antwoord goed is. 6. Er is een "Volgende vraag" knop die pas verschijnt na het beantwoorden. 7. Aan het einde verschijnt de totaalscore van de speler. 8. De vragen zijn geschreven voor kinderen van 10 tot 12 jaar: begrijpelijk, niet te moeilijk. 9. Het ontwerp is kleurrijk, modern en heeft grote knoppen. 10. Alles zit in één enkel HTML-bestand zonder externe bestanden of internet nodig. Geef alleen de HTML-code terug, zonder uitleg erbuiten.

Nog geen onderwerp gekozen?

Klik in stap 2 op een onderwerp.

Het gekleurde woord [ONDERWERP] wordt dan vanzelf ingevuld in de prompt hierboven.

4
Stap 4

ChatGPT aan het werk zetten

  • 1
    Ga naar chatgpt.com Open de browser (= het programma waarmee je op internet gaat) en typ chatgpt.com. Heb je een account? Log dan in. Lukt het niet? Vraag de juf of meester.
  • 2
    Plak de prompt in het tekstvak Klik onderin op het tekstvak. Plak daar de prompt die je kopieerde. Kijk of jullie onderwerp er goed in staat.
  • 3
    Druk op Enter of klik op de pijl ChatGPT schrijft nu de HTML-code (= de taal waarin een website wordt gemaakt). Dit duurt ongeveer 15 tot 30 seconden.
  • 4
    Lees de vragen na Lees de vragen en antwoorden die ChatGPT bedacht. Kloppen ze? Zijn ze leuk? Zo niet, stuur bij (zie de tip hieronder).
  • 5
    Kopieer de HTML-code Selecteer alle code (van <!DOCTYPE html> tot </html>) en kopieer die. Of klik op het kopieer-knopje boven de code, als dat er is.

Niet tevreden? Stuur bij!

Is een vraag te moeilijk of te makkelijk? Klopt er iets niet?

Typ dan nog een opdracht aan ChatGPT. Bijvoorbeeld:

Voorbeeld vervolgprompt

"Vraag 3 klopt niet helemaal. Pas die vraag aan zodat het antwoord beter uitgelegd wordt."

Voorbeeld vervolgprompt

"Maak de vragen een beetje makkelijker. Ze zijn nu te moeilijk voor kinderen van 10 jaar."

Voorbeeld vervolgprompt

"Maak de achtergrond blauw en de knoppen groter."

5
Stap 5

Testen in CodePen

Bekijk je quiz meteen in de browser

CodePen (= een website waar je code meteen kunt testen) laat jullie quiz direct zien.

Zo zie je of alles werkt, voordat je inlevert.

Je hoeft niets te downloaden. CodePen werkt gewoon in de browser.

Hoe werkt het?

Ga naar codepen.io/pen/. Plak daar je HTML-code. Je quiz komt dan meteen in beeld.

1
Ga naar codepen.io/pen/ Open een nieuw tabblad. Ga naar codepen.io/pen/. Je ziet drie vakken: HTML, CSS en JS.
2
Klik op het HTML-vak (linksboven) Klik in het grote witte vak met "HTML" erboven.
3
Plak alle HTML-code Druk op Ctrl+A. Zo selecteer je alles. Druk dan op Ctrl+V. Zo plak je de code van ChatGPT.
4
Kijk rechtsonder Daar zie je je quiz meteen verschijnen. Gebeurt er niets? Wacht even of klik op "Run".
5
Test de quiz Klik wat antwoorden aan. Klopt de score? Werken de knoppen? Zo niet: ga terug naar ChatGPT en stuur bij.

Alles werkt? Top!

Werkt de quiz goed in CodePen? Dan is hij klaar.

Ga nu door naar stap 6.

6
Stap 6

Inleveren en online zetten

Zo lever je je quiz in

Zijn jullie blij met de quiz? Dan lever je de HTML-code in bij de juf of meester.

Die zet jullie quiz op de website. Dan kan iedereen hem spelen.

01

Kopieer alle HTML-code uit ChatGPT

Alles van <!DOCTYPE html> tot en met </html>

02

Geef het door aan de juf of meester

Die plakt de code in het bestand van jullie groepje (groep-1.html, groep-2.html, enz.)

03

Jullie quiz staat online!

De juf of meester slaat het bestand op. Dan staat jullie quiz op de hoofdpagina. Iedereen kan hem nu spelen.

Goed gedaan!

Jullie hebben net een echte website gemaakt met AI.

En jullie typten zelf geen enkele regel code. Zo helpt AI je.

In het kort
  • Stap 1: een prompt is wat jij aan de AI vraagt.
  • Stap 2: kies samen 1 onderwerp voor jullie quiz.
  • Stap 3: kopieer de prompt die al voor je klaarstaat.
  • Stap 4: plak de prompt in ChatGPT en lees de vragen na.
  • Stap 5: test je quiz in CodePen in de browser.
  • Stap 6: lever de code in. Dan staat je quiz online!

Bekijk alvast de andere quizzen

Zijn alle groepjes klaar? Dan kun je ze allemaal spelen op de hoofdpagina.