ordering levels

.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: {

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

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

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
+> In dit level ga je een een meubel bestellen met een zeer gelimiteerd blikveld. Scroll door de pagina of sleep met de muis.

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
+* 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

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.
+---

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.
+
+> Je gaat zo memory spelen, zoek de twee kaarten met overeenkomstige kleuren. Je speelt dit eerst met aleen kleurverschil, daarna met iconen

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
+* 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

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 <br> buizerd = zwart <br> groot = gestreept <br> 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: 
+Je gaat nu hetzelfde spel spelen met een set iconen op de plaatjes.

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.
+> 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

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
+* Gebruik Alt teksten als alternatief voor afbeeldingen
+* Label je knoppen met duidelijke tekst (teksten als "Lees meer" of "Klik hier" zijn vaak niet duidelijk)

src/levels/5/play.pug → src/levels/3/play.pug

@@ -1,7 +1,7 @@
 ---
 
 layout: levels/level-blind.pug
-index: 5
+index: 3
 title: Blind
 
 # gesproken tekst