Je schrijft je in via Github Classroom (login met je Google account).

• hier intekenen voor 4H
• hier intekenen voor 4V

GitHub is een online platform waar je code kunt opslaan, delen en samen aan projecten kunt werken. Een soort “Google Drive voor programmeercode”. Via GitHub Classroom krijg je van je docent een link naar een opdracht. Die opent een eigen map (repository) waarin je kunt werken. Met GitHub Codespaces kun je die map rechtstreeks in je browser openen zonder iets te installeren, je kunt er meteen programmeren, uitvoeren en testen.

Belangrijk: Bij het inloggen moet je een username aanmaken, zorg dat minimaal je voornaam hier herkenbaar in voor komt.

Let op: Je werk wordt niet automatisch opgeslagen op GitHub. Je moet committen en syncen om je werk op te slaan en naar GitHub te uploaden. Doe dit regelmatig, vooral voordat je Codespaces afsluit, zodat je niets kwijtraakt.

In deze fase maak je het plan voor je eigen website. Je mag zelf kiezen over welk onderwerp je werkt, iets wat jij interessant vindt, maar het onderwerp moet wel eerst goedgekeurd worden door de docent. Denk dus goed na over wat je wilt doen en zorg dat het haalbaar is. Je werkt aan een informatieve website. Denk dus zeker na of alles wat je wilt maken wel kan. Je kan geen spel/interactieve dingen in je website krijgen. Denk aan wat je vorige periode hebt geleerd en hoe je dit nu kan toepassen.

Je dient de ontwerpfase twee keer in als PDF door het bestand toe te voegen aan je GitHub-mapje “Ontwerpfase”: de eerste versie op de vrijdag na de herfstvakantie, en de tweede bij het einde van het PO, zijn deze te laat ingeleverd krijg je cijfer aftrek. Verwijder de eerste versie niet wanneer je de tweede uploadt, ook hier volgt cijfer aftrek. Hoe beter je tweede ontwerp overeenkomt met je uiteindelijke website én hoe meer gelijkend je eerste ontwerp is met de tweede versie, hoe hoger je score zal zijn. Maak dus vanaf het begin een realistisch en goed doordacht plan.

Werk aan het document in een editor naar keuze. Enkele voorbeelden zijn Google Docs, Pages of Microsoft Word. Let op: als je de IMac’s op school afsluit worden alle lokale bestanden verwijderd. Werk dus bijvoorbeeld via Google Drive, of mail je bestand op het einde van de les naar jezelf op Magister.

Het document bevat vier onderdelen. Eerst beschrijf je je onderwerp en wat je erover wilt vertellen. Schrijf dit in duidelijke zinnen of korte opsommingen. Vermeld ook hoe je die informatie wilt verdelen over de verschillende pagina’s van je website.

Daarna maak je een sitemap. Dat is een schema dat toont hoe de verschillende pagina’s van je website met elkaar verbonden zijn. Het geeft een overzicht van de structuur van je site en helpt je nadenken over de navigatie. Online vind je veel voorbeelden. Een handige app om hieraan te werken is draw.io . Als je klaar bent kan je je diagram opslaan als een .png bestand en die invoegen in je ontwerpfase.

Vervolgens voeg je een kleurenstaal toe. Gebruik hiervoor de [Figma Color Palette Generator]( https://www.figma.com/color-palette-generator/ om een kleurenpalet te maken dat past bij jouw onderwerp. Noteer bij elke kleur de juiste HEX-waarde en bewaar die goed, zodat je dezelfde kleuren later in de echte website kunt gebruiken.

Tot slot maak je één of meerdere wireframes online of op papier. Dat zijn schetsen van hoe je webpagina’s eruit zullen zien. Je geeft aan waar tekst, afbeeldingen, knoppen en menu’s komen. Begin met één goed uitgewerkte wireframe, bijvoorbeeld van je homepage. Online vind je veel voorbeelden. Als je tijd hebt, maak er dan meerdere, zodat ook andere pagina’s al een duidelijk ontwerp hebben. Maak deze ontwerpen erg algemeen, zodat verschillende pagina’s dezelfde lay-out/wireframe kunnen krijgen. Je kan volgende tool gebruiken om je layout te helpen bouwen: Hulpmiddel: Div en Float

Het cijfer dat je voor je PO krijgt wordt vanuit verschillende invalshoeken bepaald:

• Minimale eisen (pass/fail)
• Ontwerpfase
• Code structuur
• Visueel resultaat
• Techniek
• Inzet en Planning

Minimale eisen

Voordat je een cijfer krijgt voor je PO, wordt gekeken of je werk voldoet aan de minimale eisen. Werk dat niet voldoet aan de minimale eisen krijgt het cijfer 1,0. De minimale eisen zijn:

• De inhoud van je webshop is moreel verantwoord: het is niet beledigend, visueel gewelddadig of op andere manieren onfatsoenlijk.
• Je maakt minimaal 1 hoofdpagina en 3 subpagina’s (meer mag).
• Je gebruikt het stappenplan dat bij deze opdracht gegeven is.
• Natuurlijk mag je overleggen met klasgenoten en mag je op internet kijken hoe je bepaalde dingen kunt maken. Let wel op dat je geen plagiaat pleegt. Je moet alle code zelf kunnen uitleggen en binnen een korte tijd kunnen aanpassen naar een gevraagde variant, anders krijg je een 1.

Ontwerpfase Enkele punten waarop gelet kan worden bij de beoordeling van de ontwerpfase zijn

• Inhoud is logisch verdeeld over verschillende pagina’s
• Er is een sitemap aanwezig waar duidelijk wordt hoe pagina’s naar elkaar linken
• Er is een passend en mooi kleurenstaal toegevoegd
• Er zijn 1-3 wireframes uitgewerkt over hoe de lay-out van verschillende pagina’s eruit moet zien.
• Het gehele document is duidelijk en mooi vorm gegeven

Code structuur Enkele punten waarop gelet kan worden bij de beoordeling van de code structuur zijn

• De homepage is te vinden op index.html
• De bestandenstructuur is logisch en duidelijk. Elk bestand heeft een logische naam.
• Indentatie en commentaar toegevoegd waar nodig
• CSS-klassen en ID’s hebben duidelijke en begrijpelijke namen
• Er zijn geen ongebruikte code of ongebruikte bestanden aanwezig
• Je linkt niet naar afbeeldingen op andere websites, alle afbeeldingen die je gebruikt heb je lokaal opgeslagen. Je afbeeldingen hebben een passende resolutie, zodat ze niet blokkerig zijn (te lage resolutie) of langzaam laden (te hoge resolutie).
• CSS bevindt zich niet in de HTML-pagina, maar in een los CSS-bestand. Je gebruikt één CSS-bestand voor je hele website.

Visueel Resultaat Enkele punten waarop gelet kan worden bij de beoordeling van visueel resultaat zijn

• De vormgeving ziet er aantrekkelijk uit en nodigt uit om verder te kijken op je website.
• De vormgeving wijkt (sterk) af van de template.
• De website is goed te bekijken op gangbare browsers en computers met verschillende schermresoluties.
• De uitlijning van de verschillende onderdelen op je website is netjes.

Techniek Enkele punten waarop gelet kan worden bij de beoordeling van techniek zijn

• Je laat zien dat je de in de les aangereikte technieken begrijpt en op een nette manier kan toepassen, hierbij hoort zeker het gebruik van floats om een nette layout te maken, die afwijkt van de template.
• Je laat zien dat je in staat bent om zelf nieuwe dingen kunt toevoegen die voortbouwen op wat je al geleerd hebt.
• Je hebt 1-3 verschillende pagina lay-outs over je website. Hoe meer verschillende (goede/correcte/logische) layouts hoe beter je score.
• Je navigatie op je site werkt naar behoren en volgt je sitemap uit de ontwerpfase
• Je gebruikt moeilijkere elementen op een correcte en logische manier op je webpagina zoals: een tabel, span, div, padding, border, margin, float en clear

Inzet en planning

• Je toont inzet tijdens de lessen
• Het werk is verdeeld over de weken waarin aan de opdracht kon worden gewerkt, dit blijkt onder andere uit de commits in Github.

• De deadline voor inleveren vind je in de lesplanner.
• Je kunt vragen stellen tot de laatste les voor de deadline.
• Je zorgt dat alle bestanden in die nodig zijn om je website correct te laten werken in GitHub staan, dit zijn ten minste: index.html, 3 html-bestanden voor de subpagina’s en style.css. Als je plaatjes gebruikt, dan staan die er ook bij. Verder staan in het mapje ontwerpfase zowel ontwerpfase versie 1 als versie 2.
• Uit de versiegeschiedenis in GitHub blijkt wanneer je wat gedaan hebt.
• De laatste versie van je PO die op het moment van de deadline in GitHub staat, wordt gebruikt voor de beoordeling.

Gebruik van AI bij het maken van je website: Je mag AI gebruiken om je te helpen bij het maken van je praktische opdracht, maar er gelden belangrijke voorwaarden:

• Je moet alle code die je gebruikt kunnen uitleggen. Tijdens de beoordeling kan ik vragen stellen over jouw bestanden. Kun je het niet uitleggen, dan beschouw ik het als niet-eigen werk en krijg je een 1. Er is geen herkansing voor dit PO.
• Je moet kleine aanpassingen in de code snel zelf kunnen uitvoeren. AI mag je ondersteunen, maar jij moet begrijpen wat er gebeurt. Dit wordt getest doormiddel van het vragen om een kleine aanpassing door te voeren.
• Gebruik vooral de template die je al gekregen hebt. Laat AI deze template niet volledig aanpassen. Als je de structuur te veel verandert, kan de docent je later niet goed helpen.
• Neem slechts kleine stukjes code over. Vraag AI bijvoorbeeld om uitleg, een stukje CSS of een oplossing voor één specifiek probleem. Als je grote blokken code overneemt, is de kans groot dat je het niet begrijpt en dat merk ik direct tijdens de beoordeling.

Kort samengevat: AI is een hulpmiddel, geen vervanging van jouw eigen inzicht. Gebruik het slim, neem kleine stukken over en zorg dat je altijd weet wat je code doet. Succes!

1. Je hebt het onderwerp van je website gekozen en door je docent laten goedkeuren.
2. Inhoud per pagina verdeeld
3. Sitemap toegevoegd (structuur/navigatie duidelijk)
4. Kleurenstaal met HEX-codes toegevoegd
5. 1-3 wireframes gemaakt en toegevoegd
6. Ontwerpfase_v1.pdf ingeleverd op Github in mapje Ontwerpfase

1. Je hebt een account aangemaakt op www.github.com .
2. Je hebt de code van de voorbeeldwebsite en kunt deze aanpassen.
3. Je kan je wijzigen aan de site commiten en synchen, zodat je werk niet verloren gaat.
4. Je begrijpt dat we nu met verschillende HTML bestanden werken, elk voor een eigen pagina. Je kan zelf nieuwe bestanden toevoegen en deze aan de hoofdpagina linken.
5. Je ziet style.css en ziet dat hierin alle CSS gaat voor alle pagina’s.

1. Je hebt bepaald wat je op de hoofdpagina en de subpagina’s (minimaal 3) wilt laten zien.
2. Je past het menu in index.html aan, zodat het de keuzes biedt voor jouw subpagina’s
3. Je maakt een html-bestand voor alle pagina’s. De titel en het menu staan erop, maar de inhoud nog niet.
4. Je hebt een werkend menu waarmee je naar de verschillende pagina’s kunt gaan, de layout kun je later nog aanpassen en mooi maken.

1. Je hebt in html de tekst op je hoofdpagina gezet.
2. Je hebt plaatjes bij je teksten gezocht, omgezet naar de juiste resolutie en op je website gezet. Alle plaatjes moet je opslaan, je linkt niet naar plaatjes op andere websites, die kunnen immers verwijderd worden. Duidelijke alt-teksten en bestandsnamen voor elke afbeelding.

1. Je hebt met CSS ervoor gezorgd dat alle onderdelen op de juiste plaats op de pagina worden weergegeven, zoals je vast hebt gelegd in de ontwerpfase.
2. Je hebt opmaak zoals kleuren, lettertypen en kaders in css toegevoegd aan de onderdelen in je layout.

1. Je hebt in html de tekst op je subpagina’s gezet.
2. Je hebt plaatjes bij je teksten gezocht, omgezet naar de juiste resolutie en op je website gezet. Alle plaatjes moet je opslaan, je linkt niet naar plaatjes op andere websites, die kunnen immers verwijderd worden. Duidelijke alt-teksten en bestandsnamen voor elke afbeelding.
3. Je hebt ervoor gezorgd dat je subpagina’s goed bereikbaar zijn, en vanuit de subpagina de hoofdpagina terug bereikbaar is.

1. Je hebt met CSS ervoor gezorgd dat alle onderdelen op de juiste plaats op de pagina worden weergegeven, zoals je vast hebt gelegd in de ontwerpfase.
2. Je hebt opmaak zoals kleuren, lettertypen en kaders in css toegevoegd aan de onderdelen in je layout.
3. Je probeert een andere lay-out te creëeren voor subpagina’s (1-3 verschillende lay-outs op je website).

1. Je hebt slordigheden in de lay-out, kleuren en inhoud gerepareerd.
2. Je hebt gezorgd dat je HTML en CSS goed leesbaar zijn (geen herhaling, namen van classes die aangeven wat erin zit in plaats van hoe het eruit ziet, uit logische onderdelen opgebouwd, inclusief commentaar, …)
3. Je hebt gecontroleerd of de lay-out werkt op een groter venster, een kleiner venster, een ander apparaat en andere browser.
4. Namen van bestanden/klassen zijn duidelijk en consequent
5. Geen ongebruikte bestanden of code
6. Indentatie en commentaar waar nodig
7. Ontwerpfase_v2.pdf ingeleverd op Github in mapje Ontwerpfase

1. Je hebt een aantal extra dingen toegevoegd die je website nog mooier maken. Denk bijvoorbeeld aan animaties met CSS, een responsive design (=website heeft een andere indeling op apparaten met een kleiner scherm), een fotogalerij, visuele effecten als je met je muis ergens overheen beweegt, vernieuwingen in het ontwerp van een gebruikte voorbeeldwebsite etc.
2. Eigen voorstellen worden overwogen. Aan het einde van stap 9 heb je een perfecte website met één of enkele opvallende functies die je zelf hebt toegevoegd.

Je schrijft je in via GitHub Classroom via de onderstaande link (login met je github account).
Letop: De teamnaam die je kiest bevat de namen van alle leerlingen in je team, bijvoorbeeld jolanda-klaas

• 4H Git Oefening
• 4H Game Maken
• 4V Git Oefening
• 4V Game Maken

Nadat je jezelf helemaal ingeschreven hebt, krijg je automatisch toegang tot een repository met startcode. Er is één repository per team. Elk teamlid heeft lees- en schrijfrechten in de repository.

In dit eerste deel van het PO leren jullie samenwerken aan code en ontwerpen jullie jullie eigen game.

Programmeurs werken bijna nooit alleen. In echte softwareprojecten werken meerdere programmeurs tegelijk aan dezelfde code. Daarom gebruiken we een systeem zoals Git om veranderingen bij te houden en samen te werken.

Deel 1 bestaat uit twee onderdelen.

Git-oefening Eerst maken jullie een korte oefening waarin jullie leren samenwerken met Git. Jullie werken per twee leerlingen in dezelfde repository maar ieder op een eigen computer.

Deze oefening is belangrijk, omdat jullie Git ook gebruiken tijdens het maken van jullie game, en dat in team werken aan dezelde code soms problemen kan opleveren.

Na de Git-oefening beginnen jullie met het ontwerpen van jullie eigen game.

Je bent vrij om zelf te kiezen welke game je gaat maken. Je docent moet de game die je kiest goedkeuren. Enkele voorbeelden van een game die je kunt maken zijn: Tennis, Flappy Bird, Snake (voorganger van Slither.io), een Break Out Game (zoals Arkanoid), een race spelletje, een eenvoudige platform game (zoals pacman), een puzzelspel enzovoort.

Jullie bepalen samen:

• of het spel singleplayer of multiplayer (2 spelers) wordt
• wat het doel van het spel is
• wanneer je verliest of het spel eindigt
• hoe spelers punten kunnen halen
• hoe het spel moeilijker wordt
• hoe de bediening werkt

Aan het einde van deel 1 hebben jullie:

• de Git-oefening afgerond
• een duidelijk ontwerp voor jullie game gemaakt

• Je maakt deze opdracht in een team van twee personen. De docent geeft aan hoe de teams gemaakt worden. Je bepaalt zelf hoe je het werk binnen je team verdeelt, zolang iedereen een gelijkwaardige bijdrage levert.
• Je krijgt van de docent startcode voor deze opdracht. Deze staat klaar in een repo op GitHub. Er is één repo per team.

Het cijfer dat je voor je PO krijgt wordt vanuit verschillende invalshoeken bepaald:

Minimale eisen

Voordat je een cijfer krijgt voor je PO, wordt gekeken of je werk voldoet aan de minimale eisen. Werk dat niet voldoet aan de minimale eisen krijgt het cijfer 1,0. De minimale eisen zijn:

• De inhoud is moreel verantwoord: het is niet beledigend, visueel gewelddadig of op andere manieren onfatsoenlijk.
• Natuurlijk mag je overleggen met klasgenoten en mag je op internet kijken hoe je bepaalde dingen kunt maken. Let wel op dat je geen plagiaat pleegt. Je mag maximaal 5 regels code overnemen van andere leerlingen of internet en je schrijft in het commentaar erbij waar je het voorbeeld vandaan hebt. Dat geldt ook voor code die je zelf vertaalt naar het Nederlands. Overtypen van code uit een Youtube-video of een tutorial van internet volgen en dat resultaat inleveren is niet toegestaan.
• Je gebruikt de startcode die je krijgt.
• Je gebruikt het stappenplan dat bij deze opdracht gegeven is.

Werking en aantrekkelijkheid

• Spel start op
• Het spel werkt (hoe klein ook)
• Behaalde punten zijn zichtbaar bij game-over
• Het doel en de bediening van het spel is duidelijk
• Aantrekkelijk uiterlijk
• Prettige bediening
• Eenvoudig om mee te beginnen en moeilijker als je verder komt

Techniek

• De code volgt de lijn van het template
• De code is netjes en duidelijk leesbaar
• De code bevat geen dubbele stukken code
• Je hebt de technieken gebruikt die in de programmeerlessen zijn aangeboden.
• Je hebt dingen toegevoegd waarvan je zelf hebt uitgezocht hoe ze werken

Proces

• Je toont inzet tijdens de lessen
• De taakverdeling is duidelijk en alle teamleden dragen in gelijke mate bij.
• Het werk is verdeeld over de weken waarin aan de opdracht kon worden gewerkt, dit blijkt onder andere uit de commits in Github.

Extra bepalingen voor je cijfer

• Je krijgt één cijfer per team, maar de docent kan daarvan afwijken.
• Als de teamleden geen gelijkwaardige bijdrage hebben geleverd, dan kun je een individueel cijfer krijgen.
  Tip: Zorg dat je een gelijkwaardige bijdrage levert binnen het team.
• Als het ingeleverde werk van een hoger niveau is dan wat je begrijpt, dan kan de docent extra vragen stellen over je opdracht en op basis daarvan je cijfer bijstellen.
  Tip: Zorg dat jij en je teamleden je eigen en elkaars werk begrijpen.
• Fraude wordt gemeld aan de examencommissie, daarna bepaalt de examencommissie wat er met je cijfer gebeurt.
  Tip: Vermeld altijd de bronnen die je gebruikt hebt en zorg dat duidelijk is welk stuk van je werk op welke bron is gebaseerd. Van Youtube video’s of AI-chats kun je de linken bijvoegen.

Gebruik van AI bij het maken van je game: Je mag AI gebruiken om je te helpen bij het maken van je praktische opdracht, maar er gelden belangrijke voorwaarden:

• Je moet alle code die je gebruikt kunnen uitleggen. Tijdens de beoordeling kan ik vragen stellen over jouw bestanden. Kun je het niet uitleggen, dan beschouw ik het als niet-eigen werk en krijg je een 1. Er is geen herkansing voor dit PO.
• Je moet kleine aanpassingen in de code snel zelf kunnen uitvoeren. AI mag je ondersteunen, maar jij moet begrijpen wat er gebeurt. Dit wordt getest doormiddel van het vragen om een kleine aanpassing door te voeren.
• Gebruik vooral de template die je al gekregen hebt. Laat AI deze template niet volledig aanpassen. Als je de structuur te veel verandert, kan de docent je later niet goed helpen.
• Neem slechts kleine stukjes code over. Vraag AI bijvoorbeeld om uitleg, een stukje CSS of een oplossing voor één specifiek probleem. Als je grote blokken code overneemt, is de kans groot dat je het niet begrijpt en dat merk ik direct tijdens de beoordeling.

Kort samengevat: AI is een hulpmiddel, geen vervanging van jouw eigen inzicht. Gebruik het slim, neem kleine stukken over en zorg dat je altijd weet wat je code doet. Succes!

• De deadline voor inleveren vind je in de lesplanner.
• Je kunt vragen stellen tot de laatste les voor de deadline.
• Je zorgt dat alle bestanden in die nodig zijn om je spel te spelen in GitHub staan, dit zijn ten minste: index.html, style.css en script.js. Als je plaatjes gebruikt, dan staan die er ook bij.
• Uit de versie historie in GitHub blijkt wanneer je wat gedaan hebt.
• De laatste versie van je PO die op het moment van de deadline in GitHub staat, wordt gebruikt voor de beoordeling.

Maak een team aan voor de assignment “Git Oefening” Let op: de teamnaam bevat beide namen. Volg de stappen op het werkblad.

Volg de stappen op het werkblad.

1. Teken de speler
2. Zorg dat de speler kan bewegen
3. Teken vijanden / obstakels / doelen
4. Laat vijanden / obstakels bewegen
5. Detecteer botsingen
6. Zorg dat je kunt verliezen
7. Zorg dat je punten kunt halen
8. Toon de score op het scherm
9. Maak een startscherm en een game-over scherm

Voeg nieuwe spelmechanieken toe:

• bijvoorbeeld springen, schieten of verzamelen
• maak het spel moeilijker
• meer vijanden
• snellere vijanden
• verbeter de besturing
• voeg nieuwe regels toe
• gebruik afbeeldingen voor speler of vijanden
• animeer speler of vijanden
• voeg geluid toe
• maak meerdere levels
• voeg power-ups toe
• maak een highscore systeem
• maak verschillende soorten vijanden
• of bedenk zelf een uitbreiding

Je schrijft je in via Github Classroom (login met je github account).

• 5Hin1 CAM 25/26
• 5Vin1 CAM 25/26
• 5Vin2 CAM 25/26

De teamnaam die je invult is de voornamen van de leerlingen in je team, gescheiden door een streepje.
Bijvoorbeeld piet-truus.

Je bent vrij om zelf te kiezen wat je in je webshop gaat verkopen. Je docent moet goedkeuren wat je verkoopt. Je kunt denken aan kleding, producten die te maken hebben met je idool, zelfgemaakte sieraden, tweedehandsspullen enzovoort. Het hoeven niet persé bestaande producten te zijn.

• Je maakt deze opdracht in een team van twee personen. De docent geeft aan hoe de teams gemaakt worden. Je bepaalt zelf hoe je het werk binnen je team verdeelt, zolang iedereen een gelijkwaardige bijdrage levert. Je krijgt één cijfer per team, maar de docent kan hiervan afwijken als teamleden geen gelijkwaardige bijdrage hebben geleverd.
• Je krijgt van de docent startcode voor deze opdracht. Deze staat klaar in een repo op GitHub. Er is één repo per team.
• Je maakt code in Gitpod. Elk teamlid heeft zijn eigen Gitpod omgeving.
• Elke week (liefst vaker) slaan alle teamleden hun tussentijdse werk op in de repo op GitHub. Zo zorgen jullie ervoor dat de laatste werkende versie van jullie opdracht steeds op GitHub staat.
• Deze opdracht maak je alsof het een echt project is. Je maakt eerst een planning. Daarna kijk je wekelijks of je nog volgens plan loopt. Als je niet volgens plan loopt, dan stuur je bij. In de les word je hiermee geholpen, maar uiteindelijk moet jij zorgen dat je op tijd klaar bent en een goed resultaat oplevert.

Het cijfer dat je voor je PO krijgt wordt vanuit verschillende invalshoeken bepaald:

• De technische kwaliteit van de database (vwo 40%, havo 60%)
• De technische kwaliteit van de aanpassingen in de api en het website-deel (vwo 20%, havo 10%)
• Uitbreidingen die je hebt toegevoegd (vwo 20%, havo 10%)
• Inzet, planning en samenwerking (20%)

Minimale eisen

Voordat je een cijfer krijgt voor je PO, wordt gekeken of je werk voldoet aan de minimale eisen. Werk dat niet voldoet aan de minimale eisen krijgt het cijfer 1,0. De minimale eisen zijn:

• De inhoud van je webshop is moreel verantwoord: het is niet beledigend, visueel gewelddadig of op andere manieren onfatsoenlijk.
• Natuurlijk mag je overleggen met klasgenoten en mag je op internet kijken hoe je bepaalde dingen kunt maken. Let wel op dat je geen plagiaat pleegt. Je mag maximaal 5 regels code overnemen van andere leerlingen of internet en je schrijft in het commentaar erbij waar je het voorbeeld vandaan hebt. Dat geldt ook voor code die je zelf vertaalt naar het Nederlands. Overtypen van code uit een Youtube-video of een tutorial van internet volgen en dat resultaat inleveren is niet toegestaan.
• Je gebruikt de startcode die je krijgt.
• Je gebruikt het stappenplan dat bij deze opdracht gegeven is.
• Een download in zip-formaat van je opdracht mag maximaal 50 MB groot zijn.

Database Enkele punten waarop gelet kan worden bij de beoordeling zijn

• Je database is genormaliseerd, dat betekent dat je redundante gegevens hebt voorkomen door het gebruik van meerdere tabellen.
• Je database bevat minimaal tien producten
• Je neemt ten minste vijf eigenschappen van producten op.
• Je database bevat minimaal vijf tabellen.
• Je database bevat minimaal één relatie van de vorm 1:n en minimaal één relatie van de vorm n:m.
• Je SQL-code is toegankelijk, dat wil zeggen niet complexer dan nodig, logisch georganiseerd en waar nodig voorzien van commentaar.

API en web Enkele punten waarop gelet kan worden bij de beoordeling zijn.

• De API is aangepast, zodat hij alle informatie uit de database kan doorgeven aan je website.
• De html en scripts in je website zijn aangepast, zodat ze alle data die de api levert netjes laten zien.

Uitbreidingen Enkele punten waarop gelet kan worden bij de beoordeling zijn.

• Je hebt functies toegevoegd waaruit blijkt dat je heel goed begrijpt hoe de database, api en website samenwerken. Je kunt bijvoorbeeld denken aan het aanbrengen van filters waarmee je snel producten kunt zoeken, of een zoekfunctie.
• Je hebt substantiële (grote) toevoegingen gedaan aan de html/css van het web-site gedeelte, zowel wat betreft de layout als de functionaliteit. Je kunt bijvoorbeeld denken aan een uitbreiding van meerdere pagina’s met nuttige informatie voor kopers.
• …

Inzet, planning en samenwerking

• Je toont inzet tijdens de lessen
• De planning is vooraf gemaakt, gevolgd en als nodig bijgesteld.
• De taakverdeling is duidelijk en alle teamleden dragen in gelijke mate bij.
• Het werk is verdeeld over de weken waarin aan de opdracht kon worden gewerkt, dit blijkt onder andere uit de commits in Github.

• De deadline voor inleveren vind je in de lesplanner.
• Je kunt vragen stellen tot de laatste les voor de deadline.
• Je zorgt dat alle bestanden in die nodig zijn om je spel te spelen in GitHub staan, dit zijn ten minste: index.html, style.css en script.js. Als je plaatjes gebruikt, dan staan die er ook bij.
• Uit de versie historie in GitHub blijkt wanneer je wat gedaan hebt.
• De laatste versie van je PO die op het moment van de deadline in GitHub staat, wordt gebruikt voor de beoordeling.

1. Pas de achtergrondkleur van de shop aan (zie mapje web)
2. Pas de titel van het eerste product in de shop aan (zie mapje db)
3. Pas de query aan zodat getoonde producten gesorteerd worden op naam (zie mapje api)

1. Maak tabellen en velden (CREATE TABLE commando) in je database waarin alle informatie kan worden opgeslagen die je over je producten wilt tonen.
   Tip: je kunt een multipliciteitendiagram gebruiken als tussenstap voor je database-ontwerp
2. Vul de tabellen met informatie (INSERT commando)
3. Voeg eventueel plaatjes toe (web/images map)

1. Pas de API aan, zodat je alle informatie uit je database kunt opvragen via de API

1. Pas de website aan, zodat alle informatie getoond wordt.

1. Herhaal stap 2 t/m 4 om je webshop verder te verbeteren. Voor en goed cijfer is het belangrijk dat je laat zien dat je uitstekend begrepen hebt hoe je een webshop moet opzetten.

Je schrijft je in via het onderstaande formulier dat de docent aanlevert (login met je google account van school voor toegang).
Je teamnaam is de voornamen van iedereen die in je groepje zit.

• 5Vin1 HAR 24/25
• 5Vin2 GEE 24/25
• 5Vin3 GEE 24/25
• 5Hin2 GEE 24/25
• 5Hin CAM 24/25

Je bent vrij om zelf te kiezen voor welk van de aangeboden apparaten je een programma gaat maken. Je docent moet je keuze goedkeuren. De apparaten die je kunt programmeren zijn:

1. Stoplichtenplein (havo)
   De opdracht voor dit apparaat
   Maak een programma waarmee de stoplichten zo op groen, oranje en rood springen dat auto’s en voetgangers zo efficient mogelijk over de kruising kunnen.
   
   Het stoplichtenplein
   Je mag het plein uitbreiden met sensoren die auto’s waarnemen.

2. Arcade game box (havo en vwo)
   De opdracht voor dit apparaat
   Maak een game die zo boeiend mogelijk is.
   
   De arcade box
   Je mag gebruik maken van alle mogelijkheden die de hardware in de arcadebox biedt. Dit zijn 4 knoppen met dimbare verlichting, een speaker en een display met twee regels van zestien karakters en de mogelijkheid om zelf een beperkt aantal karakters te ontwerpen.

3. Alphabot2 rijdende robot (havo en vwo)
   De opdracht voor dit apparaat
   Maak een programma dat de alphabot zo snel mogelijk de uitgang van een doolhof laat vinden.
   
   De alphabot
   Je moet mimimaal de beide motoren en één type afstandssensor van de alphabot2 gebruiken. De afstandssensoren waar je uit kunt kiezen zijn de ultrasone afstandssensor voorop, de twee infrarode aftandssensoren schuin links- en rechtsvoor en de lijnvolgsensoren onderop. Je kunt je oplossing uitbreiden door meerdere sensortypen te gebruiken. Je kunt je programma ook uitbreiden door het display, de speaker of de RGB-leds onderop te gebruiken om te laten merken wat de alphabot aan het doen is.
   
   Het doolhof
   Het doolhof bestaat uit en pad met doodlopende vertakkingen. In het doolhof zitten geen rondjes. De paden worden gevormd door vierkanten van ongeveer 30x30 cm. Aan de randen van de paden staan muren. De muren bestaan uit stukken van ongeveer 30 centimeter lang. De stukken muur sluiten recht op elkaar aan of maken een hoek van ongeveer 90 graden. In de midden van het pad is er een strook zwart tape op de vloer gemaakt. Dit tape bevat vertakkingen en is steeds ongeveer 15 cm van een muur verwijderd.

4. Drone (experimenteel voor vwo in 22/23, vwo vanaf 23/24)
   De opdracht voor dit apparaat
   Laat de drone zo snel mogelijk van de startplek naar de finish plek vliegen. Onderweg staan opstakels.
   
   De drone
   Je gebruikt commando’s om de drone te laten opstijgen en landen en om de drone in een bepaalde richting te laten vliegen. Je gebruikt de afstandssensor voor op de drone om de afstand tot opstakels te meten.
   
   Het parcours
   Het parkcours wordt telkens opgebouwd en afgebroken in de gang. De drone mag niet buiten het parcours vliegen, geen obstakels of muren raken en tijdens het vliegen mogen er geen personen binnen de grenzen van het parcours aanwezig zijn. Er is een vast punt waar de drone start en een zone waar de drone eindigt. De drone vliegt op vaste afstand van de grond (ongeveer 1 meter). De obstakels bevinden zich op de hoogte waar de drone vliegt. Tijdens de opdracht werk je in overleg met de docent het parcours verder uit.

5. In overleg met je docent mag je ook een eigen apparaat kiezen of een bestaand apparaat uitbreiden.

• Je maakt deze opdracht in een team van twee personen. De docent geeft aan hoe de teams gemaakt worden. Je bepaalt zelf hoe je het werk binnen je team verdeelt, zolang iedereen een gelijkwaardige bijdrage levert. Je krijgt één cijfer per team, maar de docent kan hiervan afwijken als teamleden geen gelijkwaardige bijdrage hebben geleverd.
• Je krijgt van de docent startcode voor deze opdracht. Deze staat klaar in een repo op GitHub. Er is één repo per team.
• Je maakt code in de Arduino IDE. Je zorgt dat alle teamleden even veel coderen.
• Elke les sla je je tussentijdse werk op in de repo op GitHub. Dat doe je door de nieuwe versies van je bestanden met de hand te uploaden in de webpagina, want de Arduino IDE heeft geen automatische koppeling met GitHub.
• Deze opdracht maak je alsof het een echt project is. Je maakt eerst een planning. Daarna kijk je wekelijks of je nog volgens plan loopt. Als je niet volgens plan loopt, dan stuur je bij. In de les word je hiermee geholpen, maar uiteindelijk moet jij zorgen dat je op tijd klaar bent en een goed resultaat oplevert.

Het cijfer dat je voor je PO krijgt wordt vanuit vier invalshoeken bepaald:

• minimale eisen
• uiterlijk
• techniek
• inzet, planning en samenwerking

Minimale eisen

Voordat je een cijfer krijgt voor je PO, wordt gekeken of je werk voldoet aan de minimale eisen. Werk dat niet voldoet aan de minimale eisen krijgt het cijfer 1,0. De minimale eisen zijn:

• De inhoud van je opdracht is moreel verantwoord: het is niet beledigend, visueel gewelddadig of op andere manieren onfatsoenlijk.
• Natuurlijk mag je overleggen met klasgenoten en mag je op internet kijken hoe je bepaalde dingen kunt maken. Let wel op dat je geen plagiaat pleegt. Je mag maximaal 5 regels code overnemen van andere leerlingen of internet en je schrijft in het commentaar erbij waar je het voorbeeld vandaan hebt. Dat geldt ook voor code die je zelf vertaalt naar het Nederlands. Overtypen van code uit een Youtube-video of een tutorial van internet volgen en dat resultaat inleveren is niet toegestaan.
• Je gebruikt de startcode die je krijgt.
• Je gebruikt het stappenplan dat bij deze opdracht gegeven is.
• Een download in zip-formaat van je opdracht mag maximaal 50 MB groot zijn.

Werking en aantrekkelijkheid

• Je apparaat start op
• Je apparaat reageert op de omgeving
• De bediening van je apparaat is eenvoudig en logisch
• Het nut/doel van je apparaat is duidelijk
• Het apparaat bevat diverse functionaliteiten / mogelijkheden
• Je hebt uitbreidingen op het apparaat gemaakt
• …

Techniek

• De code volgt de lijn van de startcode
• De code is netjes en duidelijk leesbaar
• De code bevat geen dubbele stukken code
• Je hebt de technieken gebruikt die in de lessen zijn aangeboden.
• Je hebt dingen toegevoegd waarvan je zelf hebt uitgezocht hoe ze werken
• …

Inzet, planning en samenwerking

• Je toont inzet tijdens de lessen
• De planning is vooraf gemaakt, gevolgd en als nodig bijgesteld.
• De taakverdeling is duidelijk en alle teamleden dragen in gelijke mate bij.
• Het werk is verdeeld over de weken waarin aan de opdracht kon worden gewerkt.

• De deadline voor inleveren vind je in de lesplanner.
• Je kunt vragen stellen tot de laatste les voor de deadline.
• Je zorgt dat alle bestanden in die nodig zijn om je spel te spelen in GitHub staan, dit zijn ten minste:
  • het .ino bestand met de code,
  • een bestand met het toestandsdiagram (.excalidraw, .drawio, .pptx, .jpeg, .png of .pdf) en
  • een link naar de video op youtube (.txt) of de video zelf (.mp4 of .mov).
  • Als je libraries gebruikt, dan staan die er ook bij.
• Uit de versie historie in GitHub blijkt wanneer je wat gedaan hebt.
• De laatste versie van je PO die op het moment van de deadline in GitHub staat, wordt gebruikt voor de beoordeling.

1. Je hebt je GitHub-inlognaam aan de docent doorgegeven, zodat die een Github-repo kan aanmaken.
2. Je hebt gekozen wat je gaat maken en dat aan de docent doorgegeven, bij een eigen idee moet de docent het goedkeuren.
3. Je hebt thuis een computer of laptop (Arduino werkt niet op een iPad) waarop je de gratis Arduino software hebt geïnstalleerd, of je hebt er rekening mee gehouden dat je een paar uur per week op school op een computer kan werken.
4. Je hebt de startcode voor je project uitgeprobeerd. Je vindt de startcode in het .ino bestand in de map die hoort bij wat je gaat maken.

1. Je hebt een toestandsdiagram gemaakt. Dit sla je op in GitHub.
2. Je hebt je docent gevraagd om feedback over je toestandsdiagram. De feedback heb je verwerkt. Het uiteindelijke resultaat sla je weer op in GitHub.
3. Je hebt aangegeven welke sensoren en actuatoren je gaat gebruiken, dit kan in een kort lijstje op hetzelfde blad als je toestandsdiagram.

Je kunt een toestandsdiagram bijvoorbeeld als volgt maken

• op https://excalidraw.com/ (snel en eenvoudig) of op https://draw.io (meer mogelijkheden)
• in Powerpoint
• op papier en dan fotograferen (het is dan wel lastig om het netjes te doen)

1. Je hebt het toestandsdiagram in code omgezet, zodat alle toestanden doorlopen kunnen worden met jouw circuit. Daarbij heb je het door de docent aangeleverde projectcode als startpunt gebruikt. Nog niet alle sensoren of actuatoren van je apparaat hoeven het te doen, zolang alle toestanden maar doorlopen kunnen worden. De laatste versie van je code sla je steeds op op GitHub.
2. Je hebt de code van je toestandsdiagram uitgebreid, zodat alle sensoren en actuatoren van je project het doen. Je apparaat werkt nu volledig en zoals beschreven in het toestandsdiagram. De laatste versie van je code sla je steeds op op GitHub.

1. Je hebt je ontwerp uitgebreid met extra ideeën en deze heb je verwerkt in je toestandsdiagram en in je code. De laatste versie van je toestandsdiagram en code sla je steeds op op GitHub.

1. Maak een video die de werking van je project demonstreert.

Het is een video met geluid (uitleg tijdens de demonstratie) in .mp4 of .mov formaat van maximaal 20MB of .txt bestand met link naar youtube. De video duurt maximaal 2 minuten.

Een module voor een knikkerbaan. Het is de bedoeling dat je bovenaan knikkers kunt ontvangen en ze onderaan weer laat vallen, zodat een volgende module ze weer kan opvangen. Ook moet de knikkerbaan om kunnen gaan met verschillen in de snelheid waarmee nieuwe knikkers aangeleverd worden en ervoor zorgen dat er geen knikkers vastlopen. Klik hier voor de basislayout.

Deze module is interactief: hij maakt gebruik van Arduino, heeft minimaal een teller, een snelheidsmeter (sensors), een poortje en een wissel (actuators). De module staat via USB in verbinding met een website die op een computer draait. De basis van de opdracht wordt aan je gegeven met uitleg hoe je de basis van de knikkerbaan moet maken, inclusief een teller (onderbrekingssensor) en een poortje (servomotor -> actuator).

De knikkerbaanmodule mag natuurlijk meer sensors en actuators krijgen. Je kunt natuurlijk meer tellers toevoegen en meer poortjes, je kunt ook denken aan een kleurensensor, afstandssensor, krachtsensor, gewichtsensor etc. Of als actuators: ledjes, een RGB-ledstrip, display, buzzer, andere bewegende onderdelen (bijv. met behulp van een 360-gradensensor). Als je twijfelt of iets kan / mag, vraag even aan je docent.

Een kleine webpagina. Deze webpagina is een widget waarmee je de statusgeschiedenis van je knikkerbaanmodule kunt weergeven, maar ook het gedrag van de knikkerbaan kunt aanpassen / configureren. Je krijgt informatie van de knikkerbaan, maar geeft ook informatie terug waarop de knikkerbaan moet reageren. Je kunt dus informatie van de sensors zien en het functioneren van de actuators beïnvloeden. De widget kan later door de docent opgenomen worden in een grote webpagina waar een overzicht te zien is van alle modules van de uiteindelijke knikkerbaan.

Verslaglegging van planning, voortgang en samenwerking. We verwachten dat je minimaal aan het begin van elke sprint de todo lijst en sprint planning bijwerkt in de map planning. Aan het einde van elke sprint verwachten we een korte video die het behaalde resultaat laat zien, deze zet je in het mapje demo. Daarnaast willen we dat ieder teamlid in gelijke mate bijdraagt.

• De laatste les van de week van sprint 3 wordt de knikkerbaan zonder widget beoordeeld. Er wordt beoordeeld op uiterlijk, functionaliteit, techniek en planning. Dit deelcijfer telt voor 50% mee in het totaalcijfer van S13.
• De laatste les van de week van sprint 5 wordt de widget beoordeeld. Ook bij deze beoordeling wordt naar uiterlijk, de functionaliteit, techniek en planning gekeken. Belangrijk is dat de widget en de knikkerbaan echt met elkaar communiceren. Mocht je aan het einde van sprint 5 nog substantiële verbeteringen hebben gedaan aan de knikkerbaan, dan kan je eerste deelcijfer met maximaal 1 punt opgehoogd worden.

• GitHub - zodat iedereen aan de code kan werken en alles wel netjes op één plek staat. Daarnaast maken we gebruik van extra functies van GitHub om goed projectmatig te kunnen werken.
  • Intekenen kan per groepje hieronder. De eerste kiest de teamnaam, andere joinen bij het team:
    • 6V.in1: https://classroom.github.com/a/DSEtihJe
    • 6V.in2: https://classroom.github.com/a/PACNiEjX
• Arduino - voor het programmeren van de knikkerbaan.

Je werkt bij deze opdrachten in sprints. Een sprint is een periode van twee weken waarbij je met elkaar afspreekt wat er aan het einde van de twee weken af is en wie dit doet. Halverwege de sprint kun je daar eventueel een kleine wijziging in aanbrengen.

Voor iedere sprint hebben wij in algemene termen opgeschreven wat er af moet zijn. Dit vind je terug in de individuele sprint in de map planning.

De opdracht wordt op de volgende aspecten beoordeeld, waarbij de vragen niet uitputtend beschreven zijn:

Knikkerbaan

• Hoeveel uitbreidingen zijn er aan de basis toegevoegd?
• Hoe functioneert de knikkerbaan?
• Werkt de knikkerbaan soepel?
• Hoe is de totale afwerking?
• Hoe is de kwaliteit van de code?
• Is de code een rommeltje of is het netjes?
• Hoe objectgeoriënteerd is het geheel van de code?

Widget

• Hoe ziet de widget eruit?
• Hoe slag je de ontvangen en verzonden gegevens op?
• Doet de widget wat het moet doen?
• Hoeveel interactiviteit met de knikkerbaan wordt hierdoor mogelijk?
• Doe je iets met de geschiedenis van de ontvangen en verzonden gegevens?
• Hoe objectgeoriënteerd is het geheel van de code?
• Is de code netjes?

Samenwerking en planning

• Hoe was de inzet van de groepsleden.
• Heeft ieder groepslid evenveel bijgedragen?
• Heeft iedereen zicht op het hele project, ook als iemand anders daar vooral aan heeft gewerkt?
• Is er planmatig in sprints gewerkt?
• Hoe is de verslaglegging van de planning?

Er wordt verwacht dat elk teamlid een gelijkwaardige bijdrage levert. Je mag taken verdelen, maar iedereen heeft in ieder geval aan een deel van de code zelf meegeschreven. Aan het einde van de opdracht wordt van alle teamleden verwacht dat zij dezelfde kennis hebben van alle onderdelen van de opdracht. Bij twijfel kan de docent dit toetsen in een kort gesprek met de teamleden en onderzoeken welke commits door teamleden zijn gedaan. Het staat de docent vrij om aan groepsleden verschillende cijfers toe te kennen op basis van hoe en wat zij controleerbaar aan het project hebben bijgedragen.