Challenges

Portfolio Challenge

O1 - Ontwerp de basis pagina's

Bouw een website die over jezelf gaat, de teksten van je website ga je tijdens de persoonlijk profileren lessen opstellen.

De opdracht:

Opdracht

  1. Bouw een pagina voor de homepage (index .html ).
  2. Bouw een pagina voor je profiel (profiel.html).
  3. Bouw een pagina voor je overmij (overmij.html).
  4. Bouw een pagina voor je visie ( visie .html).

Zorg dat alle pagina's hetzelfde menu hebben. Menu's moeten ook werken!
Maak van je website iets persoonlijks, geef het een mooie vorm, gebruik een achtergrond plaatje, doe iets met de font keuze.

Leef je uit en gebruik de technieken die je hebt geleerd!

Inleveren bij deze opdracht:

  1. index.html
  2. profiel.html
  3. overmij.html
  4. visie.html

  5. screenshot van index.html in browser
  6. screenshot van profiel .html in browser
  7. screenshot van overmij.html in browser
  8. screenshot van visie.html in browser

O2 - Maak de website compleet

Plaats jouw opdrachten van Persoonlijk Profileren op jouw website. De vorm mag jezelf bepalen.

De vervolgpagina's vul je met onderstaande:

Vervolgpagina Mijn profiel:
- Plaats hier een foto van jezelf
- Schrijf hier je naam, leeftijd, de stad waar je woont

Vervolgpagina Over mij:
- Plaats hier de 6 lesopdrachten van persoonlijk profileren (tijdlijn, normen &waarden, DISC, kernkwadranten, SWOT analyse, 360 graden feedback)

Vervolgpagina Mijn visie:

Als je tevreden bent kun je de files inleveren en tonen aan een van de docenten.

Inleveren bij deze opdracht:

Voetbal Challenge

Challenge

In deze challenge krijg je een aantal voetbaluitslagen en met die uitslagen moet jij berekenen hoeveel punten de voetbalclubs hebben.

Voorkennis

Voor deze challenge heb je kennis nodig van:

Data structuren

Data structuren zijn manieren waarop gegevens in de computer zijn opgeslagen. In deze challenge gaan we kijken naar een datastructuur van voetbaluitslagen. Uit deze uitslagen gaan we per ploeg berekenen hoeveel punten deze club in totaal heeft.

In deze challenge bestaat de datastructuur uit een array van gespeelde wedstrijden.

Elke wedstrijd is een assciociative array, bijvoorbeeld:

['thuis' => 'FC Twente', 'uit' => 'Fortuna Sittard', 'uitslag'=> [1,2] ]

Het assiociative array heeft drie elementen. De naam van de thuisclub, de naam van de uitclub en de uitslag. De uitslag zelf is weer een (indexed) array met twee elementen.

De uitdaging

Je hebt een datastructuur $uitslagen (zie regel 3 en volgende in code hieronder).

Deze datastructuur is een array van acciociative arrays waarin van een aantal gespeelde wedstrijden de eindscore staat.

Je ziet op bijvoorbeeld regel 4 dat Feyenoord tegen FC Twente heeft gespeeld en dat de uitslag 1-2 was. FC Twente heeft dus gewonnen.

De opdracht is om een lijstje te maken waarin van alle voetbalclubs het aantal punten dat zij hebben behaald wordt berekend.

De punten worden als volgt berekend;

Uitslag Punten
Gewonnen 3
Gelijkspel 1
Verloren 0

Voorbeeld, later we FC Twente nemen.

FC Twente heeft 3 x gespeeld (regel 4, 21 en 31). FC Twente heeft 2x gewonnen en 1x verloren. FC Twente heeft dus 6 punten uit 3 wedstrijden.

De output zou dan worden:

Club Punten Gespeeld
FC Twente 6 3
... ... ..

The code

Je krijgt al een heel stuk code aangeleverd.

  1. Er is een datastructuur voor de uitslage ($uitslagen).
  2. Dan wordt er een tabel afgedrukt met alle uitslagen.
  3. Vervolgens wordt er twee lege data structuren gemaakt.
    • $punten hierin komt per ploeg te staan hoeveel punten ze hebben. Bijvoorbeeld $punten['FC Twente'] wordt op 0 gezet, maar zal uiteindelijk de waarde 6 moeten krijgen.
    • $gespeeld hierin komt per ploeg te staan hoeveel wedstrijden zij gespeeld hebben. Bijvoorbeeld $gespeeld['FC Twente'] wordt op 0 gezet, maar zal uiteindelijk de waarde 3 moeten krijgen.
  4. Na deze code moet jij code toevoegen die de punten en het aantal gespeelde wedstrijden berekend.
  5. Het laatste code-stukje drukt alle punten en aantal gespeelde wedstrijden af.

Je mag de bestaande code veranderen. Het enige dat vast staat is de $uitslagen array. Deze blijft ongewijzigd!

<?php

$uitslagen=[
['thuis' => 'Feyenoord', 'uit' => 'FC Twente', 'uitslag'=> [1,2] ],
['thuis' => 'AZ', 'uit' => 'RKC Waalwijk', 'uitslag'=> [1,3] ],
['thuis' => 'PEC Zwolle', 'uit' => 'PSV', 'uitslag'=> [1,2] ],
['thuis' => 'Heracles Almelo', 'uit' => 'Sparta Rotterdam', 'uitslag'=> [1,3] ],
['thuis' => 'sc Heerenveen', 'uit' => 'Go Ahead Eagles', 'uitslag'=> [3,1] ],
['thuis' => 'FC Groningen', 'uit' => 'SC Cambuur', 'uitslag'=> [2,3] ],
['thuis' => 'Vitesse', 'uit' => 'Ajax', 'uitslag'=> [2,2] ],
['thuis' => 'Willem I', 'uit' => 'FC Utrecht', 'uitslag'=> [3,0] ],
['thuis' => 'N.E.C.', 'uit' => 'Fortuna Sittard', 'uitslag'=> [0,1] ],

['thuis' => 'Ajax', 'uit' => 'sc Heerenveen', 'uitslag'=> [5,0] ],
['thuis' => 'RKC Waalwijk', 'uit' => 'Heracles Almelo', 'uitslag'=> [2,0] ],
['thuis' => 'Fortuna Sittard', 'uit' => 'Vitesse', 'uitslag'=> [1,2] ],
['thuis' => 'Sparta Rotterdam', 'uit' => 'PEC Zwolle', 'uitslag'=> [2,0] ],
['thuis' => 'Go Ahead Eagles', 'uit' => 'Feyenoord', 'uitslag'=> [0,1] ],
['thuis' => 'SC Cambuur', 'uit' => 'Willem I', 'uitslag'=> [1,1] ],
['thuis' => 'PSV', 'uit' => 'N.E.C.', 'uitslag'=> [3,2] ],
['thuis' => 'FC Twente', 'uit' => 'FC Groningen', 'uitslag'=> [3,0] ],
['thuis' => 'FC Utrecht', 'uit' => 'AZ', 'uitslag'=> [2,2] ],

['thuis' => 'Feyenoord', 'uit' => 'PSV', 'uitslag'=> [2,2] ],
['thuis' => 'AZ', 'uit' => 'Ajax', 'uitslag'=> [2,2] ],
['thuis' => 'Vitesse', 'uit' => 'sc Heerenveen', 'uitslag'=> [1,2] ],
['thuis' => 'N.E.C.', 'uit' => 'Go Ahead Eagles', 'uitslag'=> [1,0] ],
['thuis' => 'FC Groningen', 'uit' => 'Sparta Rotterdam', 'uitslag'=> [1,2] ],
['thuis' => 'PEC Zwolle', 'uit' => 'FC Utrecht', 'uitslag'=> [1,1] ],
['thuis' => 'Willem I', 'uit' => 'Heracles Almelo', 'uitslag'=> [4,0] ],
['thuis' => 'FC Twente', 'uit' => 'Fortuna Sittard', 'uitslag'=> [1,2] ],
['thuis' => 'SC Cambuur', 'uit' => 'RKC Waalwijk', 'uitslag'=> [0,0] ],

['thuis' => 'N.E.C.', 'uit' => 'Fortuna Sittard', 'uitslag'=> [0,0] ],

];

echo "<table border=1>";
echo "<tr><th>Thuis</th><th>Uit</th><th></th><th></th></tr>";
foreach ($uitslagen as $uitslag) {
  echo "<tr>";
  echo "<td>".$uitslag['thuis']."</td>";
  echo "<td>".$uitslag['uit']."</td>";
  echo "<td>".$uitslag['uitslag'][0]."</td>";
  echo "<td>".$uitslag['uitslag'][1]."</td>";
  echo "</tr>";
}
echo "</table>";

$punten=[];
$gespeeld=[];
foreach ($uitslagen as $uitslag) {
  $punten[$uitslag['thuis']]=0;
  $punten[$uitslag['uit']]=0;
  $gespeeld[$uitslag['thuis']]=0;
  $gespeeld[$uitslag['uit']]=0;
}

// bereken hier de punten en aantal gespeelde wedstrijden per team.
//
// Het is de bedoeling om:
//    de punten in het array $punten[] te zetten;
//    en het aantal gespelede wedstrijden in $gespeeld[];
// Deze arays zien er als volgt uit:
//    $punten['naam van de club'] = 0
//    $gespeeld['naam van de club'] = 0
// Alle waarden zijn dus 0 en is jou taak om beiede arrays met de juiste waarden te vullen.
// Gebruik alleen code die je al hebt geoeffend; je moet de code kunnen uitleggen.

echo "<table border=1>";
echo "<tr><th>Club</th><th>Punten</th><th>Gespeeld</th></tr>";
foreach ($punten as $key => $value) {
  echo "<tr>";
  echo "<td>".$key."</td>";
  echo "<td>".$value."</td>";
  echo "<td>".$gespeeld[$key]."</td>";
  echo "</tr>";
}
echo "</table>";

Output

De output is gesorteerd op punten en laat een lijstje zien van alle voetbalclubs en hun behaalde punten. De tabel ziet er netjes uit.

Onderstaand plaatje is een voorbeeld, de uitkomsten kunnen iets anders zijn.

image-1657872023212.png

Aanpak

Er zijn meerdere mogelijkheden om dit aan te pakken. Hieronder wordt een mogelijke oplossing beschreven. Je hoeft deze stappen niet te volgend.

  1. We moeten door de uitslagen array heen lopen om per wedstrijd te bepalen welke ploeg hoeveel punten krijgt.
    Maak dus een loop die door de uitslagen loopt.

  2. In de loop maak je twee variabelen $ thuisClub en $ uitClub . Je geeft deze de waarden (naam) van de thuis en uitclub.
    -> Test of je deze twee variabelen de juiste waarde heb gegeven door ze af te drukken.

  3. In de loop maak je nog twee variabelen $ thuisScore en $ uitScore . Je geeft deze de waarden van het aantal doelpunten dat de thuis- en uitclub hebben gescoord.
    -> Test of je ook deze twee variabelen de juiste waarde heb gegeven door ze af te drukken.

  4. Nu zijn er drie mogelijkheden:
    De $thuisScore > $ uitScore , de $ thuisClub krijgt 3 punten
    De $ uitScore > $ thuisScore , de $ uitClub krijgt 3 punten
    De $ thuisScore == $ uitScore , de $ thuisClub en $ uitClub krijgen beiden 1 punt.

    Maak de juiste if's en vul het punten array.

    Denk eraan dat de key van het punten array de naam van de club is en die staat in $ thuisClub en $ uitClulb .
    -> Test , bedenk een manier om te testen of de club de juiste punten krijgt.

  5. Voor de thuis- en uitclub moet je het aantal gespeelde wedstrijden met één ophogen. Hiervoor hoog je de juiste waarde op in het $ gespeeld array. Ook in het $ gespeeld array is de key de naam van de club.

  6. Test de gehele berekening.

Eisen

  1. Zorg ervoor dat alle uitkomsten kloppen (60 punten). Vergeet niet te sorteren.

  2. Zorg ervoor dat de output gestyled is (gebruik styles en classes). Maak er wat moois van, overtuig de klant dat jij iets moois kan maken (20 punten)

  3. Zorg ervoor dat de HTML code klopt en volledig is. Dus gebruik <html>, <head> etc (10 punten).

  4. De code klopt, het inspringen en uitlijnen is goed en je hebt duidelijk commentaar toegevoegd om uit te leggen wat je doet (10 punten).

Inleveren

  1. Screendump van jouw gehele browser met het resultaat.
  2. De PHP code en eventueel je CSS style sheet.

--

Javascript Challenge

Bestelsysteem kantine

Maak een bestelsysteem voor de kantine van het ROC. In het scherm van het systeem zijn twee blokken zichtbaar. Het linkerblok bestaat uit een bestellijst / formulier, waarin kan worden aangegeven wat wordt besteld en de aantallen. Hier staan minimaal 4 te bestellen producten. Elk product heeft een andere prijs. In het rechter blok wordt een overzicht gegeven van de bestelling. Hierin staan de bestelde producten, de kosten per product (rekening houdend met het aantal dat wordt besteld) en de totale kosten van de bestelling.

Na het invoeren van een bestelling, kan op een knop ‘OPNIEUW’ worden geklikt om de bestelling te resetten en opnieuw te beginnen.

Overige functionele eisen:
• In het overzicht worden alleen regels opgenomen voor producten die zijn besteld
• Er mogen geen negatieve aantallen worden opgenomen in de bestelling
• Als er nog geen productaantallen zijn ingevoerd, is het rechter blok leeg
• Als een product wordt aangepast naar 0 stuks, verdwijnt de bestelling in het besteloverzicht (rechter blok)

https://talnet.instructure.com/media_objects_iframe/m-5aCLxZqnohJPEKDnEHqsMXcHpt6rezai

Functionaliteit

Punten

Het scherm heeft een duidelijke verzorgde opmaak met een eigen stijl. De menulijst en de bestelling worden als twee blokken die naast elkaar staan weergegeven.

20

De bestellijst geeft alleen de producten weer die worden besteld (dus waarvan het aantal bestellingen groter dan 0 is). In eerste instantie is de bestellijst leeg.

20

Bij veranderen van een productaantal zie je een verandering op de bestellijst.

10

De productregel op de bestellijst geeft zowel de prijs per product, het aantal en de totaal prijs voor dat product weer.

10

Onder de bestelregels staat de totaalprijs van de hele bestelling.

10

Na het klikken op de ‘opnieuw’-knop, wordt het scherm gereset en kan een nieuwe bestelling worden ingevoerd.

10

Een besteld product dat na de bestelling weer op het aantal 0 wordt gezet, verdwijnt als regel in het blok van de bestelling.

10

Het aantal bestellingen van een product kan niet negatief zijn.

10

Inleveren