Figma Opdracht – Pixel Game Fest Quiz

Profielmodule 4 – Interactieve vormgeving | CSPE 2025 Rood

---

Naam: _____________________________ Niveau: BB / KB / GL

---

Voorbereiding

Je start de opdracht vanuit het Figma-bestand Quiz PTA toets.fig dat klaarstaat in het teamproject (open bestand). Open dit bestand. Je vindt daarin:

• Pagina 1 – Kleurenpalet: de zeven kleurenpaletten om uit te kiezen.
• Pagina 2 – Afbeeldingen: alle afbeeldingen die je nodig hebt, geordend per categorie: logo's, vormen, socials, figuren, smileys en achtergronden.
• Pagina 3 – Quiz: een leeg frame voor de landingspagina om mee te beginnen.

---

Opdrachten

Opdracht 1 – Een quiz ontwerpen en maken

Maak in Figma een interactieve quiz voor het gaming-event Pixel Game Fest. De quiz bestaat uit de volgende pagina's:

• Een landingspagina
• Een vraagpagina
• Een gefeliciteerd-pagina
• (BB/GL) Een fout antwoord-overlay (popup)
• (KB) Een fout antwoord-overlay (popup) of een aparte fout antwoord-pagina — jij kiest

Werkwijze

• Lees de productie-eisen hieronder.
• Bekijk de afbeeldingen op pagina 2 van het bestand Quiz PTA toets.fig.
• Bekijk de voorbeeldfilmpjes voor jouw niveau: BB | KB | GL
• Maak de overige frames op het juiste formaat op pagina 3.
• Maak de quiz volgens de productie-eisen en jouw ontwerpkeuzes.
• Sla de quiz op als quiz_jouwNaam.fig en lever alles in via Teams.
• Bereken je eigen cijfer.

Ontwerpkeuzes

Noteer je keuzes als een tekstkader op een aparte Ontwerpkeuzes-pagina in Figma voordat je begint.

---

Algemene productie-eisen

• De pagina's van de quiz zijn 800 × 1200 pixels.
• Het kleurgebruik in de quiz komt overeen met het gekozen kleurpalet, behalve de achtergrond van de gefeliciteerd-pagina.
• Alle afbeeldingen staan in de juiste verhoudingen.
• Alle teksten zijn leesbaar en staan in een schreefloos lettertype.
• De woorden QUIZ en TOPPER staan in een speels lettertype.
• De quiz is opgeslagen met de juiste bestandsnaam en extensie.
• (BB) Knoppen en keuzerondjes hebben geen hover-effect.
• (KB) Alle knoppen en de keuzerondjes bij de vraag hebben een hover-effect. Je mag zelf kiezen hoe je dat maakt.
• (GL) Alle knoppen en de keuzerondjes bij de vraag hebben een hover-effect, gemaakt met componenten.

---

Footer

Op de vraagpagina staat een footer.

• De footer is 250 pixels hoog en gevuld met een kleur uit het kleurpalet.
• In de footer staat de tekst '6 & 7 september Jaarbeurs in Utrecht'.
• In de footer staan de contactgegevens: www.pixelgamefest.nl en info@pixelgamefest.nl.
• In de footer staan het logo en drie gekleurde iconen van socials.
• Eén van de social-iconen bevat een link naar www.pixelgamefest.nl.

---

Landingspagina

• Het logo staat bovenaan de pagina.
• Het logo komt geanimeerd van boven naar beneden in beeld. Na de animatie staat het logo bovenaan de pagina.
• Op de pagina staat een gekleurde vorm uit de map 'Vormen'.
• Op de pagina staat het woord QUIZ in een groot, speels lettertype.
• Er staat een knop met de tekst BEGIN HIER. De knop linkt naar de vraagpagina.
• Onderaan de pagina staat een foto van 800 × 270 pixels. Dit is een uitsnede van een aangeleverde foto.

---

Vraagpagina

• Bovenaan de pagina staat een gekleurde vorm met daarin het woord 'vraag' in een speels lettertype.
• Daaronder staat de Vraag: 'Welke software bevat een visuele programmeertaal?'
• De vraag staat gecentreerd op de pagina.
• De antwoorden staan linkslijnend, elk met een rondje ervoor dat als knop dient.
• Plaats een figuur uit de map 'Figuren' op de vraagpagina.
• (GL) Het figuur is continu geanimeerd via een component set.

Gebruik de volgende vraag en antwoorden:

Welke software bevat een visuele programmeertaal?

○ Python

○ Scratch

○ Unity

Het juiste antwoord is Scratch. Het rondje bij Scratch linkt door naar de gefeliciteerd-pagina. De rondjes bij Python en Unity openen een fout antwoord-melding.

Fout antwoord

Bij een klik op een fout antwoord verschijnt een fout antwoord-melding. (BB/KB) Je mag kiezen of je dat doet met een pop-up (Figma noemt dit een overlay) of een aparte pagina:

• Kies je voor een overlay, geef die dan de naam Fout antwoord overlay.
• Kies je voor een aparte pagina, geef die dan de naam Fout antwoord pagina.

(GL) Gebruik een overlay.

De overlay of pagina bevat:

• Een rode achtergrond.
• Een verdrietige smiley.
• De tekst FOUT ANTWOORD.
• Een knop BEGIN OPNIEUW die terugkeert naar de vraagpagina.

Hoe maak je een overlay in Figma?

1. Maak een nieuw frame (bijv. 500 × 300 px) met een rode achtergrond, de smiley, de tekst en de knop.
2. Zet dit frame buiten je pagina's, op het canvas.
3. Verbind in de Prototype-modus het foute antwoord-rondje met dit frame via Open overlay.
4. Verbind de knop BEGIN OPNIEUW met Close overlay.

---

Gefeliciteerd-pagina

• De pagina heeft een groene of oranje achtergrond.
• Over de achtergrond staat een aangeleverde achtergrondafbeelding op 75% dekking.
• Bovenaan staat een vrolijke smiley.
• Op de pagina staan de teksten GEFELICITEERD! en 'Je hoort snel of je gewonnen hebt.'
• Onder de felicitatietekst staat een gekleurde vorm met daarin het woord TOPPER in een speels lettertype.
• (KB/GL) Op de pagina staan 3 gekleurde sterren als decoratief element, onder de TOPPER-vorm. Gebruik hiervoor de Ster-tool in Figma.
• Onder de gekleurde vorm staan twee invulvakken. Deze hoeven in de prototype-stand niet echt invulbaar te zijn.
  • Vak 1: placeholder-tekst 'voornaam + achternaam' in lichtgrijs.
  • Vak 2: placeholder-tekst 'e-mailadres' in lichtgrijs.
• Onderaan staat een knop VERZENDEN. De knop linkt naar quiz@pixelgamefest.nl.
• Linksonder op de pagina staat het logo. Het logo linkt terug naar de landingspagina.

---

Opdracht 2 – Prototype instellen

Stel in Figma de interactieve verbindingen in zodat de quiz werkt als een prototype.

• Schakel naar de Prototype-modus rechtsboven in Figma.
• Zorg dat de knop BEGIN HIER op de landingspagina doorlinkt naar de vraagpagina.
• Zorg dat het rondje bij het juiste antwoord (Scratch) doorlinkt naar de gefeliciteerd-pagina.
• Zorg dat de rondjes bij de foute antwoorden (Python en Unity) de fout antwoord-overlay of fout antwoord-pagina openen.
• Zorg dat de knop BEGIN OPNIEUW correct werkt en terugkeert naar de vraagpagina.
• Zorg dat de knop VERZENDEN linkt naar quiz@pixelgamefest.nl.
• Zorg dat het logo in de footer op de vraagpagina teruglinkt naar de landingspagina.
• Zorg dat het logo linksonder op de gefeliciteerd-pagina teruglinkt naar de landingspagina.
• Zorg dat één social-icoon in de footer linkt naar www.pixelgamefest.nl.
• Stel de landingspagina in als startscherm.
• Test je prototype via de Play-knop (▶) rechtsboven.

Hoe maak je een link naar een website of e-mailadres in Figma?

1. Selecteer het element (bijv. het social-icoon of de VERZENDEN-knop).
2. Ga naar de Prototype-modus.
3. Klik op + bij Interactions.
4. Stel de trigger in op On click.
5. Kies bij Action: Open link.
6. Typ de URL: bijv. https://www.pixelgamefest.nl voor een website, of mailto:quiz@pixelgamefest.nl voor een e-mailadres.

---

Opdracht 3 – Inleveren

• Sla een lokale kopie op van je Figma-bestand via het menu Bestand → Lokaal bestand maken. Geef het bestand de naam quiz_jouwNaam.fig en upload dit naar de Teams-opdracht.
• Voeg de deellink van je Figma-prototype toe via 'Link toevoegen' bij het inleveren in Teams: klik op Share in Figma, stel de toegang in op 'Anyone with the link can view' en kopieer de link.

---

Naam: _____________________________ Niveau: BB / KB / GL

Berekening van de punten

Omcirkel hieronder de goede antwoorden, tel daarna de punten op en bereken je cijfer met de formule onderaan.

---

Totaal behaalde punten: ______

Tel eerst de punten op voor jouw niveau (• = telt mee, — = niet van toepassing). Bereken daarna je cijfer met de onderstaande formule.

BB: Cijfer = (behaalde punten ÷ 33) × 9 + 1

KB: Cijfer = (behaalde punten ÷ 37) × 9 + 1

GL: Cijfer = (behaalde punten ÷ 38) × 9 + 1

Minimumcijfer: 1,0 | Maximumcijfer: 10,0