diff --git a/.eleventy.js b/.eleventy.js index 7679eeb..1c52bf3 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -13,6 +13,13 @@ module.exports = function (eleventyConfig) { cleanCSS: false }); + // sort levels by index number + // creates 'levels' collection + eleventyConfig.addCollection('levels', function(collectionApi) { + return collectionApi.getFilteredByTag('level').sort( + (a, b) => a.data.index - b.data.index + ); + }); return { dir: { diff --git a/_data/level-data.json b/_data/level-data.json deleted file mode 100644 index cd822d4..0000000 --- a/_data/level-data.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "numberOfLevels": 2, - "levels": [ - - ] -} \ No newline at end of file diff --git a/src/_includes/layouts/level-outro.pug b/src/_includes/layouts/level-outro.pug index 4302228..05268da 100644 --- a/src/_includes/layouts/level-outro.pug +++ b/src/_includes/layouts/level-outro.pug @@ -18,7 +18,7 @@ html(lang=lang?lang:'nl') .spacer - if collections.level[index] + if collections.levels[index] a(href=`/levels/${index+1}/intro/`).button Volgend level else a(href=`/einde/`).button Ga verder \ No newline at end of file diff --git a/src/_includes/mixins/level-mixins.pug b/src/_includes/mixins/level-mixins.pug index e09ca55..d20a5b6 100644 --- a/src/_includes/mixins/level-mixins.pug +++ b/src/_includes/mixins/level-mixins.pug @@ -2,10 +2,10 @@ mixin level-bar(currentIndex) - currentIndex-- - - var nLevels = collections.level.length + - var nLevels = collections.levels.length #level-bar-gradient #level-bar(style=`margin-left: ${((nLevels/2) - (currentIndex+1)) * 4}rem`) - each level, i in collections.level + each level, i in collections.levels if i < currentIndex a(href=level.url).level-number= i+1 .level-dash diff --git a/src/levels/1/intro.md b/src/levels/1/intro.md index 97f8f5a..27c62bf 100644 --- a/src/levels/1/intro.md +++ b/src/levels/1/intro.md @@ -2,12 +2,11 @@ layout: layouts/level-intro.pug tags: level index: 1 -title: Kleurenblind -image: /assets/images/levels/kleurenblind.svg -icon: /assets/images/levels/icon_eye_blue.svg +title: Kokervisie +image: /assets/images/levels/kokervisie.svg +icon: /assets/images/levels/icon_visie_blue.svg --- -Kleur kan gebruikt worden om dingen van elkaar te onderscheiden. Maar stel je nu voor dat je kleurenblind bent. Mensen met groen-rood kleurenblindheid hebben moeite om de kleuren rood en groen van elkaar te kunnen onderscheiden. Hoe kun jij nu goed zien wat er belangrijk is wanneer er enkel met kleur iets duidelijk wordt gemaakt? +Mensen met kokervisie zien maar een klein deel van hun blikveld, alsof ze door een koker kijken. - -> Je gaat zo memory spelen, zoek de twee kaarten met overeenkomstige kleuren. Je speelt dit eerst met aleen kleurverschil, daarna met iconen \ No newline at end of file +> In dit level ga je een een meubel bestellen met een zeer gelimiteerd blikveld. Scroll door de pagina of sleep met de muis. \ No newline at end of file diff --git a/src/levels/1/outro.md b/src/levels/1/outro.md index a8864fe..b07ca61 100644 --- a/src/levels/1/outro.md +++ b/src/levels/1/outro.md @@ -1,12 +1,13 @@ --- layout: layouts/level-outro.pug index: 1 -title: Kleurenblind -image: /assets/images/levels/kleurenblind_uitro.svg +title: Kokervisie +image: /assets/images/levels/kokervisie_uitro.svg --- -Zoals je misschien gemerkt hebt, is het veel makkelijker om duidelijkheid te krijgen wanneer je op meer manieren het verschil kan zien. Wanneer je kleur wilt gebruiken om te verduidelijken, zorg dan dat je ook een alternatief hebt, zoals bijvoorbeeld een icoontje. +Wanneer je ontwerpt voor mensen met kokervisie is het belangrijk om te zorgen dat elementen niet te ver uit elkaar staan. Zorg er ook voor dat elementen niet tijdelijk op het scherm staan, het duurt voor iemand met kokervisie langer om een pagina te "scannen". -[Lees meer over kleurgebruik](https://www.accessibility.nl/blog/zorg-voor-voldoende-kleurcontrast) -* Het is belangrijk om te zorgen dat je genoeg contrast aanbrengt in je app of website, zodat alle gebruikers de tekst kunnen lezen en zonder probleem kunnen navigeren \ No newline at end of file +* Zorg dat bijbehorende elementen dicht bij elkaar staan +* Zet elementen op een voorspelbare plek, bijvoorbeeld het logo linksboven en navigatie rechtsbovenaan de pagina +* Zorg voor voldoende contrast tussen tekst en achtergrond en tussen verschillende secties van de pagina \ No newline at end of file diff --git a/src/levels/1/play.md b/src/levels/1/play.md index 9283b20..8f1f4f2 100644 --- a/src/levels/1/play.md +++ b/src/levels/1/play.md @@ -1,12 +1,66 @@ --- -layout: levels/level-kleurenblind.pug + +layout: levels/level-kokervisie.pug index: 1 -title: Kleurenblind +title: Kokervisie + +# tekst + +brand_title: Janssen Furniture +brand_subtitle: Live in Luxury + +button_text_next: Lees meer +button_text_back: Terug -stage_1_title: Alleen kleuren -stage_2_title: Met iconen +order_text: Bestellen +order_confirm_text: Plaats bestelling -stage_2_intro_button: Begin +# meubulair lijst: +furniture: + - title: Övrigt + subtitle: Verlichtend + image: lamp.jpg + options: + - label: Kleur + choices: + - label: Kiezel + color: '#CECED7' + - label: Basalt + color: '#303038' + - title: Störtade + subtitle: Ontspanning na een drukke dag + image: leather-sofa.jpg + options: + - label: Maat + choices: + - label: 'Groots: 1.75m' + - label: 'Royaal: 2.5m' + - title: Fjorgen + subtitle: De active stoel voor elke eetkamer + image: interior.jpg + options: + - label: Kleur + choices: + - label: Zee + color: '#8FAEC2' + - label: Zand + color: '#D9D0CB' + - label: Lucht + color: '#A8D6E3' + - label: Kiezel + color: '#CECED7' + - label: Maat + choices: + - label: 'M: 35cm' + - label: 'L: 45cm' + +#correct: +correct_options: {Kleur: 'Lucht', Maat: 'M: 35cm'} + +#popup +popup_title: 'Boodschappenlijstje:' +popup_text: Een lichtblauwe stoel die niet te groot is. +popup_button_text: Begin # score popup tekst en knoppen level_score_win: Level behaald! @@ -17,8 +71,5 @@ level_score_perfect: Perfect! Heel goed. level_score_retry: Probeer opnieuw level_score_next: Ga verder ---- - -Je hebt vast gemerkt dat veel kleuren op elkaar leken. Kleurenblinden lopen hier vaak tegenaan omdat zij het verschil tussen kleuren niet goed kunnen zien. Dit valt op te lossen door kleuren te gebruiken die een groter contrast met elkaar hebben maar ook door het toevoegen van een icoon of een ander visueel kenmerk waardoor je op twee manieren kan zien wat bij elkaar hoort. -Je gaat nu hetzelfde spel spelen met een set iconen op de plaatjes. \ No newline at end of file +--- \ No newline at end of file diff --git a/src/levels/2/intro.md b/src/levels/2/intro.md index e2fac80..a08c662 100644 --- a/src/levels/2/intro.md +++ b/src/levels/2/intro.md @@ -2,11 +2,12 @@ layout: layouts/level-intro.pug tags: level index: 2 -title: ADHD -image: /assets/images/levels/adhd.svg -icon: /assets/images/levels/icon_stars_blue.svg +title: Kleurenblind +image: /assets/images/levels/kleurenblind.svg +icon: /assets/images/levels/icon_eye_blue.svg --- -Mensen met ADHD hebben vaak moeite met concentreren en raken snel afgeleid. +Kleur kan gebruikt worden om dingen van elkaar te onderscheiden. Maar stel je nu voor dat je kleurenblind bent. Mensen met groen-rood kleurenblindheid hebben moeite om de kleuren rood en groen van elkaar te kunnen onderscheiden. Hoe kun jij nu goed zien wat er belangrijk is wanneer er enkel met kleur iets duidelijk wordt gemaakt? -> In dit level ga je een bom ontmantelen! Ontcijfer de code en knip de draden door voor het te laat is. \ No newline at end of file + +> Je gaat zo memory spelen, zoek de twee kaarten met overeenkomstige kleuren. Je speelt dit eerst met aleen kleurverschil, daarna met iconen \ No newline at end of file diff --git a/src/levels/2/outro.md b/src/levels/2/outro.md index 8bd14b4..62bd4d0 100644 --- a/src/levels/2/outro.md +++ b/src/levels/2/outro.md @@ -1,16 +1,12 @@ --- layout: layouts/level-outro.pug index: 2 -title: ADHD -image: /assets/images/levels/adhd_uitro.svg +title: Kleurenblind +image: /assets/images/levels/kleurenblind_uitro.svg --- -Mensen met ADHD zijn makkelijk afgeleid. Drukke website designs en overvolle navigatiemogelijkheden zijn daarom heel vervelend. +Zoals je misschien gemerkt hebt, is het veel makkelijker om duidelijkheid te krijgen wanneer je op meer manieren het verschil kan zien. Wanneer je kleur wilt gebruiken om te verduidelijken, zorg dan dat je ook een alternatief hebt, zoals bijvoorbeeld een icoontje. -Deze verbeteringen zijn niet alleen prettig voor mensen met ADHD; gewone gebruikers profiteren hier ook van. +[Lees meer over kleurgebruik](https://www.accessibility.nl/blog/zorg-voor-voldoende-kleurcontrast) -## Tips - -* Vermijd complexe menu's en zorg voor een lineaire, logische vormgeving -* Vermijd afleidende afbeeldingen en video's naast de inhoud van de pagina -* Vermijd tijdslimieten, zorg dat iedereen genoeg tijd heeft om alles rustig in te vullen \ No newline at end of file +* Het is belangrijk om te zorgen dat je genoeg contrast aanbrengt in je app of website, zodat alle gebruikers de tekst kunnen lezen en zonder probleem kunnen navigeren \ No newline at end of file diff --git a/src/levels/2/play.md b/src/levels/2/play.md index 1e5e839..11f57f7 100644 --- a/src/levels/2/play.md +++ b/src/levels/2/play.md @@ -1,63 +1,24 @@ --- -layout: levels/level-adhd.pug +layout: levels/level-kleurenblind.pug index: 2 -title: ADHD +title: Kleurenblind -note_title: super geheime code -note_text: adelaar = rood
buizerd = zwart
groot = gestreept
die groene is de kleinste +stage_1_title: Alleen kleuren +stage_2_title: Met iconen -popup_intro: Je hebt nog maar -popup_text: Wil je stoppen? Het kan nu nog. Loop gewoon weg en blijf gespaard. -button_continue_text: Ga verder -button_stop_text: Stop level - -wires: - - { color: 'rood', style: 'egaal', image: 'wire1.png' } - - { color: 'zwart', style: 'egaal', image: 'wire2.png' } - - { color: 'zwart', style: 'gestreept', image: 'wire3.png' } - - { color: 'groen', style: 'lichtgevend', image: 'wire4.png' } - - { color: 'rood', style: 'gestreept', image: 'wire5.png' } - -code: - rood: adelaar - zwart: buizerd - groen: - egaal: - gestreept: grote - lichtgevend: kleinste - -fail_title: Je hebt gefaald! -fail_text: De bom is geëxplodeerd :(, probeer het nog een keer -fail_button_text: Probeer opnieuw +stage_2_intro_button: Begin # score popup tekst en knoppen level_score_win: Level behaald! level_score_fail: Level gefaald... level_score_bad: Helaas, probeer het nog een keer. -level_score_good: Goed gedaan, maar het kan sneller! +level_score_good: Goed gedaan, maar het kan beter! level_score_perfect: Perfect! Heel goed. level_score_retry: Probeer opnieuw level_score_next: Ga verder --- -### HAVEN 21:20 - -### BERICHT TUSSEN “BOZE BERTUS” EN “SNELLE HENKIE”: - -Henk: "Hé Bertus, lang niet gezien" -Bertus: "Henk, makker, hoe gaat het?" - -Bertus: "Henk, voor de zekerheid, als er wat mis gaat, wat is ook al weer de volgorde om de bom te ontmantelen?" - -Henk: "Bertus, je klinkt als een informant, de code krijg je later te horen...maar vergeet niet A op uit te zetten en B op aan, tenzij je een poel van bloed wil worden." - -Bertus: "Ja ja Henk, laten we dit gewoon doen." - -### VRACHTWAGEN, A23 21:34 - -Telefoon: "Oke Bertus, maak de bom klaar. Verbind de kabels in de goede volgorde, om de bom te ontmantelen moet je de draden knippen in dezelfde volgorde." - -Bertus: "Klaar!" +Je hebt vast gemerkt dat veel kleuren op elkaar leken. Kleurenblinden lopen hier vaak tegenaan omdat zij het verschil tussen kleuren niet goed kunnen zien. Dit valt op te lossen door kleuren te gebruiken die een groter contrast met elkaar hebben maar ook door het toevoegen van een icoon of een ander visueel kenmerk waardoor je op twee manieren kan zien wat bij elkaar hoort. -Telefoon: "Oke! De volgorde: \ No newline at end of file +Je gaat nu hetzelfde spel spelen met een set iconen op de plaatjes. \ No newline at end of file diff --git a/src/levels/3/intro.md b/src/levels/3/intro.md index d0eb6d8..5dda3b2 100644 --- a/src/levels/3/intro.md +++ b/src/levels/3/intro.md @@ -2,11 +2,12 @@ layout: layouts/level-intro.pug tags: level index: 3 -title: Dyslexie -image: /assets/images/levels/dyslexie.svg -icon: /assets/images/levels/icon_dislexia_blue.svg +title: Blind +image: /assets/images/levels/blind.svg +icon: /assets/images/levels/icon_blind_blue.svg --- -Mensen met Dyslexie hebben vaak moeite met lezen, letters lijken soms in de verkeerde volgorde te staan of lijken omgekeerd. +Mensen die blind of slechtziend zijn, moeten met een toetsenbord door een website navigeren. Een screenreader wordt gebruikt om voor te lezen wat op het scherm staat. Bij het maken van websites en apps kan hier rekening mee worden gehouden door tekst-alternatieven te bieden voor afbeeldingen en andere elementen. -> In dit level ga je een stuk tekst lezen, de letters van deze tekst zijn onstabiel om dyslexie te simuleren. Als je het gelezen hebt druk je op "Volgende pagina" en beantwoord je een aantal vragen over de tekst. \ No newline at end of file +> Je gaat je door een pagina navigeren met alleen toetsenbord. +> Gebuik de Tab toets om door elementen te navigeren en de pijltjes om keuzes te selecteren \ No newline at end of file diff --git a/src/levels/3/outro.md b/src/levels/3/outro.md index f2b9202..d31d3fd 100644 --- a/src/levels/3/outro.md +++ b/src/levels/3/outro.md @@ -1,14 +1,17 @@ --- layout: layouts/level-outro.pug index: 3 -title: Dyslexie -image: /assets/images/levels/dyslexie_uitro.svg +title: Blind +image: /assets/images/levels/blind_uitro.svg --- -Wanneer je ontwerpt voor mensen met dyslexie is het belangrijk om de tekst zo simpel mogelijk te houden en een duidelijke structuur te hanteren. Dit maakt de tekst daarnaast prettiger leesbaar voor iedereen. +Zoals je gemerkt heb is niet makkelijk om door een pagina te navigeren zonder hem te kunnen zien. + +In de eerste pagina waren er 4 afbeeldingen zonder "Alt Text", zonder tekst alternatieven kan een blind persoon deze vraag niet beantwoorden. + +In de tweede pagina waren de invoervelden slecht gelabeld, hierdoor is het moeilijker om uit te vogelen waar je je info moet schrijven. Doordat de knoppen ook geen label hebben weet je niet wat de knoppen doen voor ze geactiveerd worden. ## Tips -* Voeg afbeeldingen of diagrammen toe om de tekst te ondersteunen -* Vermijd lange blokken tekst en zorg voor een simpele, duidelijke structuur -* Biedt alternatieven in de vorm van video's of gesproken tekst \ No newline at end of file +* Gebruik Alt teksten als alternatief voor afbeeldingen +* Label je knoppen met duidelijke tekst (teksten als "Lees meer" of "Klik hier" zijn vaak niet duidelijk) \ No newline at end of file diff --git a/src/levels/3/play.md b/src/levels/3/play.md deleted file mode 100644 index 9f73642..0000000 --- a/src/levels/3/play.md +++ /dev/null @@ -1,41 +0,0 @@ ---- - -layout: levels/level-dyslexie.pug -index: 3 -title: Dyslexie - -question: - title: Beantwoordt nu de vragen over dyslexie - button_text: Volgende pagina - button_back_text: Vorige pagina - button_send_text: Verzenden - -questions: - - Q: Wanneer is de term dyslexie bedacht? - A: 1887 - - Q: Waar heeft dyslexie voornamelijk invloed op? - A: leesvaardigheid, spelling en woordenschat - - Q: 'Vul in: Dyslexie heeft een __ oorzaak.' - A: neurologische - -# score popup tekst en knoppen -level_score_win: Level behaald! -level_score_fail: Level gefaald... -level_score_bad: Helaas, probeer het nog een keer. -level_score_good: Goed gedaan, maar het kan beter! -level_score_perfect: Perfect! Heel goed. - -level_score_retry: Probeer opnieuw -level_score_next: Ga verder - ---- - -# Dyslexie - -Al in 1881 werd de aandoening door Oswald Berkhan beschreven, maar het was Rudolf Berlin die in 1887 hiervoor de term 'dyslexie' bedacht. De term werd gebruikt om het geval van een jongen te beschrijven die ernstige moeite had met het leren lezen en schrijven, terwijl hij buiten deze gebieden wel over een normale intelligentie leek te beschikken. - -## Oorzaak - -Onderzoek heeft uitgewezen dat dyslexie een neurologische oorzaak heeft. Ook al zijn er talrijke varianten en oorzaken voor dyslexie, in veel gevallen zijn de hersenen niet goed in staat visuele of auditieve informatie te interpreteren. De hersenen kunnen dit op verschillende manieren deels, of in het geval van een milde vorm volledig compenseren door andere hersenfuncties te gebruiken. - -Dit is afhankelijk van de omvang van de aandoening. Op jonge leeftijd kan stimulering en training van de hersenen tot betere compensatie leiden. Dyslexie heeft voornamelijk invloed op de leesvaardigheid, spelling en woordenschat. \ No newline at end of file diff --git a/src/levels/5/play.pug b/src/levels/3/play.pug similarity index 99% rename from src/levels/5/play.pug rename to src/levels/3/play.pug index 0784849..b5c1a9c 100644 --- a/src/levels/5/play.pug +++ b/src/levels/3/play.pug @@ -1,7 +1,7 @@ --- layout: levels/level-blind.pug -index: 5 +index: 3 title: Blind # gesproken tekst diff --git a/src/levels/4/intro.md b/src/levels/4/intro.md index 4b9e4be..db2c04b 100644 --- a/src/levels/4/intro.md +++ b/src/levels/4/intro.md @@ -2,11 +2,11 @@ layout: layouts/level-intro.pug tags: level index: 4 -title: Kokervisie -image: /assets/images/levels/kokervisie.svg -icon: /assets/images/levels/icon_visie_blue.svg +title: Slechthorend +image: /assets/images/levels/doof.svg +icon: /assets/images/levels/icon_no_sound_blue.svg --- -Mensen met kokervisie zien maar een klein deel van hun blikveld, alsof ze door een koker kijken. +Mensen die slechthorend of doof zijn kunnen video of audio niet begrijpen als er geen ondertiteling of tekst aanwezig is. In dit level ga je ervaren hoe het is om een video te kijken die moeilijk te begrijpen is. -> In dit level ga je een een meubel bestellen met een zeer gelimiteerd blikveld. Scroll door de pagina of sleep met de muis. \ No newline at end of file +> Je gaat een video kijken waar de verteller moeilijk te verstaan is. Er is automatisch gegenereerde ondertiteling maar die is niet heel betrouwbaar... \ No newline at end of file diff --git a/src/levels/4/outro.md b/src/levels/4/outro.md index 82603e2..c10de8d 100644 --- a/src/levels/4/outro.md +++ b/src/levels/4/outro.md @@ -1,13 +1,13 @@ --- layout: layouts/level-outro.pug index: 4 -title: Kokervisie -image: /assets/images/levels/kokervisie_uitro.svg +title: Slechthorend +image: /assets/images/levels/doof_uitro.svg --- -Wanneer je ontwerpt voor mensen met kokervisie is het belangrijk om te zorgen dat elementen niet te ver uit elkaar staan. Zorg er ook voor dat elementen niet tijdelijk op het scherm staan, het duurt voor iemand met kokervisie langer om een pagina te "scannen". +Bij een auditieve beperking is het gehoor in enige mate beperkt. Onder meer slechthorendheid en doofheid zijn auditieve beperkingen. Sommige mensen met een auditieve beperking kunnen geluid horen, maar zij horen niet altijd genoeg om spraak te begrijpen. Vooral wanneer er (veel) achtergrondgeluid is, kan dit voor problemen zorgen. +Hulpmiddelen als ondertiteling kunnen ook nuttig zijn voor mensen met een normaal gehoor, als je bijvoorbeeld in een drukke trein zit en de speaker van je telefoon niet kan horen. -* Zorg dat bijbehorende elementen dicht bij elkaar staan -* Zet elementen op een voorspelbare plek, bijvoorbeeld het logo linksboven en navigatie rechtsbovenaan de pagina -* Zorg voor voldoende contrast tussen tekst en achtergrond en tussen verschillende secties van de pagina \ No newline at end of file +* Zorg altijd voor kloppende ondertiteling of transcriptie bij video of audio +* Zorg dat video/audio spelers functies hebben om te pauzeren en om het volume harder of zachter te zetten \ No newline at end of file diff --git a/src/levels/4/play.md b/src/levels/4/play.md index f0bc8d3..bcbb74e 100644 --- a/src/levels/4/play.md +++ b/src/levels/4/play.md @@ -1,66 +1,8 @@ --- -layout: levels/level-kokervisie.pug +layout: levels/level-slechthorend.pug index: 4 -title: Kokervisie - -# tekst - -brand_title: Janssen Furniture -brand_subtitle: Live in Luxury - -button_text_next: Lees meer -button_text_back: Terug - -order_text: Bestellen -order_confirm_text: Plaats bestelling - -# meubulair lijst: -furniture: - - title: Övrigt - subtitle: Verlichtend - image: lamp.jpg - options: - - label: Kleur - choices: - - label: Kiezel - color: '#CECED7' - - label: Basalt - color: '#303038' - - title: Störtade - subtitle: Ontspanning na een drukke dag - image: leather-sofa.jpg - options: - - label: Maat - choices: - - label: 'Groots: 1.75m' - - label: 'Royaal: 2.5m' - - title: Fjorgen - subtitle: De active stoel voor elke eetkamer - image: interior.jpg - options: - - label: Kleur - choices: - - label: Zee - color: '#8FAEC2' - - label: Zand - color: '#D9D0CB' - - label: Lucht - color: '#A8D6E3' - - label: Kiezel - color: '#CECED7' - - label: Maat - choices: - - label: 'M: 35cm' - - label: 'L: 45cm' - -#correct: -correct_options: {Kleur: 'Lucht', Maat: 'M: 35cm'} - -#popup -popup_title: 'Boodschappenlijstje:' -popup_text: Een lichtblauwe stoel die niet te groot is. -popup_button_text: Begin +title: Slechthorend # score popup tekst en knoppen level_score_win: Level behaald! @@ -72,4 +14,17 @@ level_score_perfect: Perfect! Heel goed. level_score_retry: Probeer opnieuw level_score_next: Ga verder ---- \ No newline at end of file +questions: + - Q: Wat moet Marco doen om naar de apotheek te kunnen? + A: Zijn reis voorbereiden + choices: ['Zijn reis voorbereiden', 'De apotheek bellen', 'Een online afspraak maken'] + - Q: Welke vervoersmiddelen gebruikt Marco om bij de apotheek te komen? + A: Lopen, Bus, Trein, Lopen + choices: ['Lopen, Bus, Trein, Lopen', 'Bus, Lopen, Trein, Lopen', 'Lopen, Trein, Bus, Lopen'] + +button_submit_questions: Ga verder +button_give_up: Ik geef het op :( + +--- + +Bekijk de video en beantwoord de vragen: \ No newline at end of file diff --git a/src/levels/5/intro.md b/src/levels/5/intro.md index f9aef9c..71a167a 100644 --- a/src/levels/5/intro.md +++ b/src/levels/5/intro.md @@ -2,12 +2,11 @@ layout: layouts/level-intro.pug tags: level index: 5 -title: Blind -image: /assets/images/levels/blind.svg -icon: /assets/images/levels/icon_blind_blue.svg +title: ADHD +image: /assets/images/levels/adhd.svg +icon: /assets/images/levels/icon_stars_blue.svg --- -Mensen die blind of slechtziend zijn, moeten met een toetsenbord door een website navigeren. Een screenreader wordt gebruikt om voor te lezen wat op het scherm staat. Bij het maken van websites en apps kan hier rekening mee worden gehouden door tekst-alternatieven te bieden voor afbeeldingen en andere elementen. +Mensen met ADHD hebben vaak moeite met concentreren en raken snel afgeleid. -> Je gaat je door een pagina navigeren met alleen toetsenbord. -> Gebuik de Tab toets om door elementen te navigeren en de pijltjes om keuzes te selecteren \ No newline at end of file +> In dit level ga je een bom ontmantelen! Ontcijfer de code en knip de draden door voor het te laat is. \ No newline at end of file diff --git a/src/levels/5/outro.md b/src/levels/5/outro.md index d0f4e5c..19e716c 100644 --- a/src/levels/5/outro.md +++ b/src/levels/5/outro.md @@ -1,17 +1,16 @@ --- layout: layouts/level-outro.pug index: 5 -title: Blind -image: /assets/images/levels/blind_uitro.svg +title: ADHD +image: /assets/images/levels/adhd_uitro.svg --- -Zoals je gemerkt heb is niet makkelijk om door een pagina te navigeren zonder hem te kunnen zien. +Mensen met ADHD zijn makkelijk afgeleid. Drukke website designs en overvolle navigatiemogelijkheden zijn daarom heel vervelend. -In de eerste pagina waren er 4 afbeeldingen zonder "Alt Text", zonder tekst alternatieven kan een blind persoon deze vraag niet beantwoorden. - -In de tweede pagina waren de invoervelden slecht gelabeld, hierdoor is het moeilijker om uit te vogelen waar je je info moet schrijven. Doordat de knoppen ook geen label hebben weet je niet wat de knoppen doen voor ze geactiveerd worden. +Deze verbeteringen zijn niet alleen prettig voor mensen met ADHD; gewone gebruikers profiteren hier ook van. ## Tips -* Gebruik Alt teksten als alternatief voor afbeeldingen -* Label je knoppen met duidelijke tekst (teksten als "Lees meer" of "Klik hier" zijn vaak niet duidelijk) \ No newline at end of file +* Vermijd complexe menu's en zorg voor een lineaire, logische vormgeving +* Vermijd afleidende afbeeldingen en video's naast de inhoud van de pagina +* Vermijd tijdslimieten, zorg dat iedereen genoeg tijd heeft om alles rustig in te vullen \ No newline at end of file diff --git a/src/levels/5/play.md b/src/levels/5/play.md new file mode 100644 index 0000000..41d3296 --- /dev/null +++ b/src/levels/5/play.md @@ -0,0 +1,63 @@ +--- +layout: levels/level-adhd.pug +index: 5 +title: ADHD + +note_title: super geheime code +note_text: adelaar = rood
buizerd = zwart
groot = gestreept
die groene is de kleinste + +popup_intro: Je hebt nog maar +popup_text: Wil je stoppen? Het kan nu nog. Loop gewoon weg en blijf gespaard. +button_continue_text: Ga verder +button_stop_text: Stop level + +wires: + - { color: 'rood', style: 'egaal', image: 'wire1.png' } + - { color: 'zwart', style: 'egaal', image: 'wire2.png' } + - { color: 'zwart', style: 'gestreept', image: 'wire3.png' } + - { color: 'groen', style: 'lichtgevend', image: 'wire4.png' } + - { color: 'rood', style: 'gestreept', image: 'wire5.png' } + +code: + rood: adelaar + zwart: buizerd + groen: + egaal: + gestreept: grote + lichtgevend: kleinste + +fail_title: Je hebt gefaald! +fail_text: De bom is geëxplodeerd :(, probeer het nog een keer +fail_button_text: Probeer opnieuw + +# score popup tekst en knoppen +level_score_win: Level behaald! +level_score_fail: Level gefaald... +level_score_bad: Helaas, probeer het nog een keer. +level_score_good: Goed gedaan, maar het kan sneller! +level_score_perfect: Perfect! Heel goed. + +level_score_retry: Probeer opnieuw +level_score_next: Ga verder +--- + +### HAVEN 21:20 + +### BERICHT TUSSEN “BOZE BERTUS” EN “SNELLE HENKIE”: + +Henk: "Hé Bertus, lang niet gezien" +Bertus: "Henk, makker, hoe gaat het?" + +Bertus: "Henk, voor de zekerheid, als er wat mis gaat, wat is ook al weer de volgorde om de bom te ontmantelen?" + +Henk: "Bertus, je klinkt als een informant, de code krijg je later te horen...maar vergeet niet A op uit te zetten en B op aan, tenzij je een poel van bloed wil worden." + +Bertus: "Ja ja Henk, laten we dit gewoon doen." + +### VRACHTWAGEN, A23 21:34 + +Telefoon: "Oke Bertus, maak de bom klaar. Verbind de kabels in de goede volgorde, om de bom te ontmantelen moet je de draden knippen in dezelfde volgorde." + +Bertus: "Klaar!" + +Telefoon: "Oke! De volgorde: \ No newline at end of file diff --git a/src/levels/6/intro.md b/src/levels/6/intro.md index 507033e..e6e0191 100644 --- a/src/levels/6/intro.md +++ b/src/levels/6/intro.md @@ -2,11 +2,11 @@ layout: layouts/level-intro.pug tags: level index: 6 -title: Slechthorend -image: /assets/images/levels/doof.svg -icon: /assets/images/levels/icon_no_sound_blue.svg +title: Dyslexie +image: /assets/images/levels/dyslexie.svg +icon: /assets/images/levels/icon_dislexia_blue.svg --- -Mensen die slechthorend of doof zijn kunnen video of audio niet begrijpen als er geen ondertiteling of tekst aanwezig is. In dit level ga je ervaren hoe het is om een video te kijken die moeilijk te begrijpen is. +Mensen met Dyslexie hebben vaak moeite met lezen, letters lijken soms in de verkeerde volgorde te staan of lijken omgekeerd. -> Je gaat een video kijken waar de verteller moeilijk te verstaan is. Er is automatisch gegenereerde ondertiteling maar die is niet heel betrouwbaar... \ No newline at end of file +> In dit level ga je een stuk tekst lezen, de letters van deze tekst zijn onstabiel om dyslexie te simuleren. Als je het gelezen hebt druk je op "Volgende pagina" en beantwoord je een aantal vragen over de tekst. \ No newline at end of file diff --git a/src/levels/6/outro.md b/src/levels/6/outro.md index 634895b..b2a5676 100644 --- a/src/levels/6/outro.md +++ b/src/levels/6/outro.md @@ -1,13 +1,14 @@ --- layout: layouts/level-outro.pug index: 6 -title: Slechthorend -image: /assets/images/levels/doof_uitro.svg +title: Dyslexie +image: /assets/images/levels/dyslexie_uitro.svg --- -Bij een auditieve beperking is het gehoor in enige mate beperkt. Onder meer slechthorendheid en doofheid zijn auditieve beperkingen. Sommige mensen met een auditieve beperking kunnen geluid horen, maar zij horen niet altijd genoeg om spraak te begrijpen. Vooral wanneer er (veel) achtergrondgeluid is, kan dit voor problemen zorgen. +Wanneer je ontwerpt voor mensen met dyslexie is het belangrijk om de tekst zo simpel mogelijk te houden en een duidelijke structuur te hanteren. Dit maakt de tekst daarnaast prettiger leesbaar voor iedereen. -Hulpmiddelen als ondertiteling kunnen ook nuttig zijn voor mensen met een normaal gehoor, als je bijvoorbeeld in een drukke trein zit en de speaker van je telefoon niet kan horen. +## Tips -* Zorg altijd voor kloppende ondertiteling of transcriptie bij video of audio -* Zorg dat video/audio spelers functies hebben om te pauzeren en om het volume harder of zachter te zetten \ No newline at end of file +* Voeg afbeeldingen of diagrammen toe om de tekst te ondersteunen +* Vermijd lange blokken tekst en zorg voor een simpele, duidelijke structuur +* Biedt alternatieven in de vorm van video's of gesproken tekst \ No newline at end of file diff --git a/src/levels/6/play.md b/src/levels/6/play.md index 4ba99f3..ab5135a 100644 --- a/src/levels/6/play.md +++ b/src/levels/6/play.md @@ -1,8 +1,22 @@ --- -layout: levels/level-slechthorend.pug +layout: levels/level-dyslexie.pug index: 6 -title: Slechthorend +title: Dyslexie + +question: + title: Beantwoordt nu de vragen over dyslexie + button_text: Volgende pagina + button_back_text: Vorige pagina + button_send_text: Verzenden + +questions: + - Q: Wanneer is de term dyslexie bedacht? + A: 1887 + - Q: Waar heeft dyslexie voornamelijk invloed op? + A: leesvaardigheid, spelling en woordenschat + - Q: 'Vul in: Dyslexie heeft een __ oorzaak.' + A: neurologische # score popup tekst en knoppen level_score_win: Level behaald! @@ -14,17 +28,14 @@ level_score_perfect: Perfect! Heel goed. level_score_retry: Probeer opnieuw level_score_next: Ga verder -questions: - - Q: Wat moet Marco doen om naar de apotheek te kunnen? - A: Zijn reis voorbereiden - choices: ['Zijn reis voorbereiden', 'De apotheek bellen', 'Een online afspraak maken'] - - Q: Welke vervoersmiddelen gebruikt Marco om bij de apotheek te komen? - A: Lopen, Bus, Trein, Lopen - choices: ['Lopen, Bus, Trein, Lopen', 'Bus, Lopen, Trein, Lopen', 'Lopen, Trein, Bus, Lopen'] +--- -button_submit_questions: Ga verder -button_give_up: Ik geef het op :( +# Dyslexie ---- +Al in 1881 werd de aandoening door Oswald Berkhan beschreven, maar het was Rudolf Berlin die in 1887 hiervoor de term 'dyslexie' bedacht. De term werd gebruikt om het geval van een jongen te beschrijven die ernstige moeite had met het leren lezen en schrijven, terwijl hij buiten deze gebieden wel over een normale intelligentie leek te beschikken. + +## Oorzaak + +Onderzoek heeft uitgewezen dat dyslexie een neurologische oorzaak heeft. Ook al zijn er talrijke varianten en oorzaken voor dyslexie, in veel gevallen zijn de hersenen niet goed in staat visuele of auditieve informatie te interpreteren. De hersenen kunnen dit op verschillende manieren deels, of in het geval van een milde vorm volledig compenseren door andere hersenfuncties te gebruiken. -Bekijk de video en beantwoord de vragen: \ No newline at end of file +Dit is afhankelijk van de omvang van de aandoening. Op jonge leeftijd kan stimulering en training van de hersenen tot betere compensatie leiden. Dyslexie heeft voornamelijk invloed op de leesvaardigheid, spelling en woordenschat. \ No newline at end of file diff --git a/src/levels/index.pug b/src/levels/index.pug index 0a857da..e862563 100644 --- a/src/levels/index.pug +++ b/src/levels/index.pug @@ -7,7 +7,7 @@ title: Level select .logo-title h1 Level select - each level in collections.level + each level in collections.levels a(href=level.url title=level.data.title).level-list .level-icon img(src=level.data.icon alt=`Icoon voor ${level.data.title} level.`) diff --git a/styles/main.scss b/styles/main.scss index f7c782f..445f25a 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -517,8 +517,11 @@ header { border-radius: 0.3rem; background: $light-accent; } - - &::-webkit-progress-value, &::-moz-progress-bar { + &::-webkit-progress-value { + border-radius: 0.3rem; + background: $accent; + } + &::-moz-progress-bar { border-radius: 0.3rem; background: $accent; }