Noah
4 years ago
parent
b0a70141d4
commit
7f591cddd7
@ -0,0 +1,40 @@
|
||||
# Operatoren
|
||||
|
||||
## Instructies
|
||||
|
||||
Speel met operatoren. Hier is een suggestie voor een programma dat u kunt implementeren:
|
||||
|
||||
U hebt een groep studenten uit twee verschillende beoordelingssystemen.
|
||||
|
||||
### Eerste beoordelingssysteem
|
||||
|
||||
Een beoordelingssysteem wordt gedefinieerd met cijfers van 1-5, waarbij 3 en hoger betekent dat u slaagt voor de cursus.
|
||||
|
||||
### Tweede beoordelingssysteem
|
||||
|
||||
Het andere cijfer systeem heeft de volgende cijfers `A, A-, B, B-, C, C-` waarbij `A` het hoogste cijfer is en `C` het laagste voldoende is.
|
||||
|
||||
### De taak
|
||||
|
||||
Gegeven de volgende array `allStudents` die alle studenten en hun cijfers vertegenwoordigt, construeert u een nieuwe array `studentsWhoPass` met daarin alle studenten die slagen.
|
||||
|
||||
> TIP, gebruik een for-loop, if...else en vergelijkingsoperatoren:
|
||||
|
||||
```javascript
|
||||
let allStudents = [
|
||||
'A',
|
||||
'B-',
|
||||
1,
|
||||
4,
|
||||
5,
|
||||
2
|
||||
]
|
||||
|
||||
let studentsWhoPass = [];
|
||||
```
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ------------------------------ | ----------------------------- | ------------------------------- |
|
||||
| | De complete oplossing wordt gepresenteerd | Gedeeltelijke oplossing wordt gepresenteerd | Oplossing met bugs wordt gepresenteerd |
|
||||
@ -0,0 +1,13 @@
|
||||
# Loop een Array
|
||||
|
||||
## Instructies
|
||||
|
||||
Maak een programma dat elk 3de nummer tussen 1 en 20 opsomt en het afdrukt naar de console.
|
||||
|
||||
> TIP: gebruik een for-loop en pas de iteratie-uitdrukking aan
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | --------------------------------------- | ------------------------ | ------------------------------ |
|
||||
| | Programma loopt correct en wordt becommentarieerd | Programma wordt niet becommentarieerd | Programma is onvolledig of bevat fouten |
|
||||
@ -0,0 +1,11 @@
|
||||
# Oefen je HTML: maak een blogmodel
|
||||
|
||||
## Instructies
|
||||
|
||||
Stel u voor dat u uw persoonlijke website ontwerpt of herontwerpt. Maak een grafische mockup van uw site en schrijf vervolgens de HTML-opmaak op die u zou gebruiken om de verschillende elementen van de site uit te bouwen. U kunt dit op papier doen en het scannen, of u kunt software van uw keuze gebruiken. Zorg ervoor dat u de HTML-opmaak met de hand codeert.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
||||
| | Een blog lay-out wordt visueel weergegeven met ten minste 10 weergegeven markeringselementen | Een blog lay-out wordt visueel weergegeven met ongeveer 5 weergegeven markeringselementen | Een blog lay-out wordt visueel weergegeven met maximaal 3 weergegeven markeringselementen |
|
||||
@ -0,0 +1,11 @@
|
||||
# CSS-Refactoring
|
||||
|
||||
## Instructies
|
||||
|
||||
Restyle het terrarium met Flexbox of CSS Grid en maak screenshots om te laten zien dat u het in verschillende browsers hebt getest. Mogelijk moet u de opmaak wijzigen, dus maak een nieuwe versie van de app met de kunst voor uw refactor. Maakt u geen zorgen over het versleepbaar maken van de elementen; alleen de HTML en CSS refactoren voor nu.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Presenteer een volledig gerestyled terrarium met Flexbox of CSS Grid | Restyle een paar van de elementen | Het terrarium helemaal niet restylen |
|
||||
@ -0,0 +1,11 @@
|
||||
# Werk wat meer met de DOM
|
||||
|
||||
## Instructies
|
||||
|
||||
Onderzoek de DOM een beetje meer door een DOM-element te 'adopteren'. Bezoek de [lijst met DOM-interfaces](https://developer.mozilla.org/nl/docs/Web/API/Document_Object_Model) van MSN en kies er een. Zoek dat het wordt gebruikt op een website op internet en schrijf een uitleg over hoe het wordt gebruikt.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | --------------------------------------------- | ------------------------------------------------ | ----------------------- |
|
||||
| | Er wordt een alinea-opsomming gegeven, met een voorbeeld | Paragraafopmaak wordt gepresenteerd, zonder voorbeeld | Er wordt geen beschrijving gepresenteerd |
|
||||
@ -0,0 +1,12 @@
|
||||
# Maak een nieuw toetsenbordspel
|
||||
|
||||
## Instructies
|
||||
|
||||
Maak een klein spel dat toetsenbordgebeurtenissen gebruikt om taken uit te voeren. Het kan een ander soort typespel zijn, of een kunstspel dat bij toetsaanslagen pixels op het scherm schildert. Wees creatief!
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ------------------------ | ------------------------ | ----------------- |
|
||||
| | Er wordt een volledig spel gepresenteerd | De game is erg minimaal | De game bevat bugs |
|
||||
| |
|
||||
@ -0,0 +1,11 @@
|
||||
# Restyle uw extensie
|
||||
|
||||
## Instructies
|
||||
|
||||
De codebase voor deze extensie wordt compleet geleverd met stijlen, maar u hoeft ze niet te gebruiken; maak uw extensie uw eigen door deze te restylen door het css-bestand te bewerken.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | -------------------------------------------- | --------------------- | ----------------- |
|
||||
| | Code wordt ingediend met functionele nieuwe stijlen | Styling is niet compleet | Stijlen zijn buggy |
|
||||
@ -0,0 +1,11 @@
|
||||
# Adopteer een API
|
||||
|
||||
## Instructies
|
||||
|
||||
API's kunnen erg leuk zijn om mee te spelen. Hier is een [lijst met vele gratis](https://github.com/public-apis/public-apis). Kies een API, en bouw een browserextensie die een probleem oplost. Het kan een zo klein probleem zijn als je niet genoeg foto's van huisdieren hebt (dus probeer de [dog CEO API](https://dog.ceo/dog-api/)) of iets groters - veel plezier!
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | -------------------------------------------------------------------------- | ---------------------------------------- | ----------------------- |
|
||||
| | Een volledige browserextensie wordt ingediend met behulp van een API uit de bovenstaande lijst | Er is een gedeeltelijke browserextensie ingediend | De inzending bevat bugs |
|
||||
@ -0,0 +1,9 @@
|
||||
# Analyseer een site op prestaties
|
||||
|
||||
Geef een gedetailleerd rapport van een website, met de gebieden waar de prestaties problematisch zijn. Analyseer waarom de site traag is en wat u zou kunnen doen om deze te versnellen. Vertrouw niet alleen op de browsertools, maar doe wat onderzoek naar andere tools die u kunnen helpen bij uw rapportage
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------- | --------------------------- | ----------------------------- |
|
||||
| | Er wordt een rapport gepresenteerd met details die niet alleen uit browsertools zijn gehaald, maar ook uit tools van derden, indien beschikbaar | Er wordt een basisrapport gepresenteerd | Er wordt een minimaal rapport gepresenteerd |
|
||||
@ -0,0 +1,11 @@
|
||||
# Maak een spel na
|
||||
|
||||
## Instructies
|
||||
|
||||
Gebruik de codevoorbeelden in de les om een weergave te maken van een spel dat u leuk vindt. Het zal een eenvoudig spel moeten zijn, maar het doel is om ofwel de klasse of het compositiepatroon en het pub/subpatroon te gebruiken om te laten zien hoe een spel zou kunnen starten. Wees creatief!
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ------------------------------------------------------- | ----------------------------------------------------- | --------------------------------------------------- |
|
||||
| | Drie elementen worden op het scherm geplaatst en gemanipuleerd | Twee elementen worden op het scherm geplaatst en gemanipuleerd | Een element wordt op het scherm geplaatst en gemanipuleerd |
|
||||
@ -0,0 +1,11 @@
|
||||
# Speel met de Canvas API
|
||||
|
||||
## Instructies
|
||||
|
||||
Kies een element van de Canvas API en maak er iets interessants omheen. Kunt u een kleine melkweg van herhaalde sterren creëren? Kunt u een interessante textuur van gekleurde lijnen maken? U kunt CodePen bekijken voor inspiratie (maar kopieer niet)
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | --------------------------------------------------------- | ----------------------------------- | --------------------- |
|
||||
| | Code wordt ingediend met een interessante textuur of vorm| Code is ingediend, maar wordt niet uitgevoerd | Code is niet verzonden |
|
||||
@ -0,0 +1,11 @@
|
||||
# Becommentarieer uw code
|
||||
|
||||
## Instructies
|
||||
|
||||
Bekijk uw huidige /app.js-bestand in je gamemap en zoek manieren om er commentaar op te geven en het op te ruimen. Het is heel gemakkelijk dat code uit de hand loopt, en dit is een goede kans om opmerkingen toe te voegen om ervoor te zorgen dat u leesbare code heeft, zodat u deze later kunt gebruiken.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ------------------------------------------------------------------ | ------------------------------------- | -------------------------------------------------------------- |
|
||||
| | `app.js` code is volledig becommentarieerd en georganiseerd in logische blokken | `app.js` code is voldoende becommentarieerd | De code `app.js` is enigszins ongeorganiseerd en er ontbreken goede commentaren |
|
||||
@ -0,0 +1,11 @@
|
||||
# Ontdek botsingen
|
||||
|
||||
## Instructies
|
||||
|
||||
Om beter te begrijpen hoe botsingen werken, bouw je een heel klein spel met een paar items die botsen. Laat ze bewegen door middel van toetsaanslagen of muisklikken, en zorg dat er iets gebeurt met een van de items wanneer deze wordt geraakt. Het kan zoiets zijn als een meteoor die de aarde raakt, of botsauto's. Wees creatief!
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden vebeterd |
|
||||
| -------- | ------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------------- |
|
||||
| | Er wordt een volledig werkend codevoorbeeld geproduceerd, met items op het canvas getekend, er vindt een fundamentele botsing plaats en er vinden reacties plaats | Code is op de een of andere manier onvolledig | Code storingen |
|
||||
@ -0,0 +1,11 @@
|
||||
# Bouw een scorespel
|
||||
|
||||
## Instructies
|
||||
|
||||
Creëer een spel waarin je leven en punten op een creatieve manier weergeeft. Een suggestie is om het leven te laten zien als harten en de punten als een groot getal in het midden onderaan het scherm. Kijk hier voor [gratis spelbronnen](https://www.kenney.nl/)
|
||||
|
||||
# Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | volledige game wordt gepresenteerd | game wordt gedeeltelijk gepresenteerd | gedeeltelijke game bevat bugs |
|
||||
@ -0,0 +1,19 @@
|
||||
# Bouw een voorbeeldspel
|
||||
|
||||
## Instructies
|
||||
|
||||
Probeer een klein spel te bouwen waarin u oefent op verschillende eindcondities. Varieer tussen het behalen van een aantal punten, de held verliest alle levens of alle monsters zijn verslagen. Bouw iets eenvoudigs, zoals een console-gebaseerd avonturenspel. Gebruik de onderstaande spelstroom als inspiratie:
|
||||
|
||||
```
|
||||
Held> slaat aan met slagzwaard - orc krijgt 3p schade
|
||||
Orc> Slaat met club - held krijgt 2p schade
|
||||
Held> Schopt - orc krijgt 1p schade
|
||||
Game> Orc is verslagen - Held verzamelt 2 munten
|
||||
Game> ****Geen monsters meer, je hebt het kwaadaardige fort veroverd****
|
||||
```
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ---------------------- | --------------------------- | -------------------------- |
|
||||
| | volledige game wordt gepresenteerd | game wordt gedeeltelijk gepresenteerd | gedeeltelijke game bevat bugs |
|
||||
@ -0,0 +1,14 @@
|
||||
# Verbeter de routing
|
||||
|
||||
## Instructies
|
||||
|
||||
De routes-declaratie bevat momenteel alleen de te gebruiken sjabloon-ID. Maar bij het tonen van een nieuwe pagina is soms iets meer nodig. Laten we onze routeringsimplementatie verbeteren met twee extra functies:
|
||||
|
||||
- Geef elk sjabloon een titel en werk de venstertitel bij met deze nieuwe titel wanneer de sjabloon verandert.
|
||||
- Voeg een optie toe om wat code uit te voeren nadat de sjabloon is gewijzigd. Elke keer dat de dashboardpagina wordt weergegeven willen we `'Dashboard wordt weergegeven'` in de ontwikkelaarsconsole afdrukken.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
|
||||
| | De twee functies zijn geïmplementeerd en werken. Titel en codetoevoeging werken ook voor een nieuwe route die is toegevoegd in de `routes`-aangifte. | De twee functies werken, maar het gedrag is hard gecodeerd en kan niet worden geconfigureerd via de `routes`-aangifte. Het toevoegen van een derde route met toevoeging van titel en code werkt niet of gedeeltelijk. | Een van de functies ontbreekt of werkt niet goed. |
|
||||
@ -0,0 +1,13 @@
|
||||
# Style uw bank-app
|
||||
|
||||
## Instructies
|
||||
|
||||
Maak een nieuw `styles.css`-bestand en voeg er een link naar toe in uw huidige `index.html`-bestand. Voeg in het CSS-bestand dat u zojuist hebt gemaakt wat stijl toe om de pagina *Login* en *Dashboard* er netjes en opgeruimd uit te laten zien. Probeer een kleurenthema te maken om uw app een eigen branding te geven.
|
||||
|
||||
> Tip: u kunt de HTML aanpassen en indien nodig nieuwe elementen en klassen toevoegen.
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ----------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------- |
|
||||
| | Alle pagina's zien er schoon en leesbaar uit, met een consistent kleurenthema en de verschillende secties vallen goed op. | Pagina's zijn opgemaakt maar zonder thema of met secties die niet duidelijk zijn afgebakend.| Pagina's missen stijl, de secties zien er ongeorganiseerd uit en de informatie is moeilijk te lezen. |
|
||||
@ -0,0 +1,15 @@
|
||||
# Refactoreer en becommentarieer uw code
|
||||
|
||||
## Instructies
|
||||
|
||||
Naarmate uw codebase groeit, is het belangrijk om uw code regelmatig te refactoren om deze in de loop van de tijd leesbaar en onderhoudbaar te houden. Voeg opmerkingen toe en refactoreer uw `app.js` om de kwaliteit van de code te verbeteren:
|
||||
|
||||
- Extraheer constanten, zoals de basis-URL van de server-API
|
||||
- Factoriseer vergelijkbare code: u kunt bijvoorbeeld een `sendRequest()` functie maken om de code die wordt gebruikt in zowel `createAccount()` als `getAccount()` groeperen
|
||||
- Reorganiseer de code zodat deze gemakkelijker leesbaar is en voeg opmerkingen toe
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- |
|
||||
| | Code is becommentarieerd, goed georganiseerd in verschillende secties en gemakkelijk te lezen. Constanten worden geëxtraheerd en er is een gefactoriseerde `sendRequest()`-functie gemaakt. | Code is schoon, maar kan nog worden verbeterd met meer opmerkingen, constante extractie of factorisatie. | Code is rommelig, er wordt geen commentaar op gegeven, constanten worden niet geëxtraheerd en code wordt niet in factoren verwerkt. |
|
||||
@ -0,0 +1,25 @@
|
||||
# Implementeer het dialoogvenster "Transactie toevoegen"
|
||||
|
||||
## Instructies
|
||||
|
||||
Onze bank-app mist nog één belangrijk kenmerk: de mogelijkheid om nieuwe transacties in te voeren.
|
||||
Gebruik alles wat u in de vier voorgaande lessen heeft geleerd en implementeer een dialoogvenster "Transactie toevoegen":
|
||||
|
||||
- Voeg een knop "Transactie toevoegen" toe op de dashboardpagina
|
||||
- Maak een nieuwe pagina met een HTML-sjabloon of gebruik JavaScript om de HTML-dialoog weer te geven/te verbergen zonder de dashboardpagina te verlaten (u kunt [`hidden`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden) eigenschap daarvoor gebruiken, of CSS-klassen)
|
||||
- Zorg ervoor dat u [toetsenbord en schermlezer toegankelijkheid](https://developer.paciellogroup.com/blog/2018/06/the-current-state-of-modal-dialog-accessibility/) afhandelt voor het dialoogvenster
|
||||
- Implementeer een HTML-formulier om invoergegevens te ontvangen
|
||||
- Maak JSON-gegevens van de formuliergegevens en stuur deze naar de API
|
||||
- Werk de dashboardpagina bij met de nieuwe gegevens
|
||||
|
||||
Kijk naar de [server API-specificaties](../api/README.md) om te zien welke API je moet aanroepen en wat het verwachte JSON-formaat is.
|
||||
|
||||
Hier is een voorbeeldresultaat na het voltooien van de opdracht:
|
||||
|
||||
|
||||
|
||||
## Rubriek
|
||||
|
||||
| Criteria | Voorbeeldig | Voldoende | Moet worden verbeterd |
|
||||
| -------- | ------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------|
|
||||
| | Het toevoegen van een transactie wordt volledig geïmplementeerd volgens alle best practices uit de lessen. | Het toevoegen van een transactie is geïmplementeerd, maar volgt niet de best practices uit de lessen, of werkt slechts gedeeltelijk. | Het toevoegen van een transactie werkt helemaal niet. |
|
||||
Loading…
Reference in new issue