Translation to English with english video

package.json

@@ -9,7 +9,8 @@
     },
     "dependencies": {
         "@11ty/eleventy": "^0.5.4",
-        "eleventy-plugin-sass": "^1.0.0"
+        "eleventy-plugin-sass": "^1.0.0",
+        "pug": "^3.0.0"
     },
     "license": "MIT"
 }

src/_includes/layouts/end-page.pug

@@ -1,11 +1,11 @@
 doctype html
-html(lang=lang?lang:'nl')
+html(lang=lang?lang:'en')
     include _includes/layouts/head.pug
     body
         main#swup
             .container.center
                 .logo-title
-                    img(src='/assets/images/acc_logo.svg' alt='Logo van Stichting Accessibility')
+                    img(src='/assets/images/acc_logo.svg' alt='Logo Stichting Accessibility')
                     h1= title
                 article
                     | !{content}

src/_includes/layouts/head.pug

@@ -5,7 +5,7 @@ head
 	meta(name = 'viewport' content = 'width=device-width, initial-scale=1')
 
 	title= (title !== 'Accessibility Game' ? title + '  |  Accessibility Game' : title)
-	meta(name = 'author' content = 'Bas de Bruin')
+	meta(name = 'author' content = 'Bas de Bruin - Translations Veron Wormeester')
 
 	//icons
 	link(rel="apple-touch-icon" sizes="180x180" href="/assets/favicons/apple-touch-icon.png")

src/_includes/layouts/index.pug

@@ -1,5 +1,5 @@
 doctype html
-html(lang=lang?lang:'nl')
+html(lang=lang?lang:'en')
     include _includes/layouts/head.pug
     body
         main#swup

src/_includes/layouts/level-intro.pug

@@ -1,12 +1,12 @@
 doctype html
-html(lang=lang?lang:'nl')
+html(lang=lang?lang:'en')
     include _includes/layouts/head.pug
     include _includes/mixins/level-mixins.pug
     body
         main#swup.container.large.padding
             .columns
                 .level-image.animate-left
-                    img(src=image alt=`Illustratie over ${title}`)
+                    img(src=image alt=`Illustration from ${title}`)
                 .level-container.animate-right
                     if icon
                         .spacer

src/_includes/layouts/level-outro.pug

@@ -1,12 +1,12 @@
 doctype html
-html(lang=lang?lang:'nl')
+html(lang=lang?lang:'en')
     include _includes/layouts/head.pug
     include _includes/mixins/level-mixins.pug
     body
         main#swup.container.large.padding
             .columns
                 .level-image.animate-left
-                    img(src=image alt=`Illustratie over ${title}`)
+                    img(src=image alt=`Illustratie from ${title}`)
                 .level-container.animate-right
                     h3= 'Level ' + index
                     h1= title
@@ -19,6 +19,6 @@ html(lang=lang?lang:'nl')
                     .spacer
 
                     if collections.levels[index]
-                        a(href=`/levels/${index+1}/intro/`).button Volgend level
+                        a(href=`/levels/${index+1}/intro/`).button Next level
                     else
-                        a(href=`/einde/`).button Ga verder
+                        a(href=`/einde/`).button Continue

src/_includes/layouts/level-play.pug

@@ -1,5 +1,5 @@
 doctype html
-html(lang=lang?lang:'nl')
+html(lang=lang?lang:'en')
     include _includes/layouts/head.pug
     include _includes/mixins/level-mixins.pug
     body
@@ -8,7 +8,7 @@ html(lang=lang?lang:'nl')
             header(aria-hidden="true")
                 a(href=`/levels/${index}/intro/` rel="prev" tabindex="-1").button.light.back Ga terug
                 a(href="/" tabindex="-1")#logo
-                    img(src='/assets/images/acc_logo.svg' alt='Logo van Stichting Accessibility')
+                    img(src='/assets/images/acc_logo.svg' alt='Logo Stichting Accessibility')
                     h2 Accessibility Game
 
             .spacer(style="height: 4.5rem") 

src/_includes/layouts/page.pug

@@ -1,5 +1,5 @@
 doctype html
-html(lang=lang?lang:'nl')
+html(lang=lang?lang:'en')
     include _includes/layouts/head.pug
     body
         main#swup

src/_includes/levels/level-adhd.pug

@@ -36,7 +36,7 @@ style.
             )
 
     #bomb
-        img#bomb-background(src="/assets/images/levels/bomb_body.png" alt="De Bom")
+        img#bomb-background(src="/assets/images/levels/bomb_body.png" alt="The Bomb")
         #wires
             each wire, index in wires
                 button(

src/_includes/levels/level-slechthorend.pug

@@ -36,7 +36,7 @@ style.
     .container.large
         video#video(controls)
             source(src="/assets/videos/doof-video.mp4")
-            img(src='/assets/images/index/media.svg' alt="video icoon, loading video")
+            img(src='/assets/images/index/media.svg' alt="video icon, loading video")
 
     .container.center
         | !{content}

src/_includes/mixins/level-mixins.pug

@@ -7,14 +7,14 @@ mixin level-bar(currentIndex)
     #level-bar(style=`margin-left: ${((nLevels/2) - (currentIndex+1)) * 4}rem`)
         each level, i in collections.levels
             if i < currentIndex
-                a(href=level.url title=`Ga naar het ${level.data.title} level`).level-number= i+1
+                a(href=level.url title=`Go to the ${level.data.title} level`).level-number= i+1
                 .level-dash
             else if i == currentIndex
                 .level-icon
-                    img(src=level.data.icon alt=`Icoon voor het ${level.data.title} level.`)
+                    img(src=level.data.icon alt=`Icoon for the ${level.data.title} level.`)
             else if i > currentIndex
                 .level-dash
-                a(href=level.url title=`Ga naar het ${level.data.title} level`).level-number= i+1
+                a(href=level.url title=`Ga to the ${level.data.title} level`).level-number= i+1
 
 
 
@@ -45,5 +45,5 @@ mixin level-score(score)
             h3#score-label score
 
             .container.buttons
-                button(onclick="reloadPage()").button.light.back= level_score_retry ? level_score_retry : 'Probeer Opnieuw'
-                button(onclick="loadNextPage()").button#score-next-button= level_score_next ? level_score_next : 'Ga verder'
+                button(onclick="reloadPage()").button.light.back= level_score_retry ? level_score_retry : 'Try again'
+                button(onclick="loadNextPage()").button#score-next-button= level_score_next ? level_score_next : 'Continue'

src/einde.md

@@ -1,29 +1,29 @@
 ---
 layout: layouts/end-page.pug
-title: Bedankt voor het spelen!
+title: Thanks for playing the Accessibility Game!
 ---
 
 ## Feedback
 
-We willen je vragen om een korte vragenlijst in te vullen zodat we de game nog beter kunnen maken:
+We would like to ask you to give us feedback on our game. This can be done by e-mail: [email protected] or through the evaluation form:
 
-<a href="https://forms.gle/YC11TNgGhKoPNw868" class="button" target="_blank">Feedback formulier</a>
+<a href="https://forms.gle/YC11TNgGhKoPNw868" class="button" target="_blank">Evaluation form (Dutch)</a>
 
 
 <hr>
 
 
-Mocht je meer willen weten over digitale toegankelijkheid en hoe dit het beste toe te passen is in de praktijk. Dan kan je terecht op de website van Accessibility. Naast informatie bieden wij ook trainingen en e-learning modules aan om jou verder te helpen met het toegankelijk maken van je site. Ook kan Accessibility jou helpen door middel van consultancy, audits of gebruikersonderzoek.
+If you want to know more about digital accessibility and how it can best be applied in practice. Then you can visit the Accessibility website (Dutch). In addition to information, we also offer training and e-learning modules in both Dutch and English to help you further make your site accessible. Accessibility can also help you through consultancy, audits or user research.
 
 <a href="https://www.accessibility.nl" class="button" target="_blank">Stichting Accessibility</a>
 
 
 <hr>
 
 
-De Accessibility Game is tot stand gekomen uit een samenwerking tussen Stichting Accessibility en Hogeschool Windesheim en is verder ontwikkeld door Bas de Bruin van de Hogeschool van de Kunsten Utrecht.
+De Accessibility Game was developed through a collaboration between Stichting Accessibility and Hogeschool Windesheim and is further developed by Bas de Bruin from Hogeschool van de Kunsten Utrecht.
 
-<a href="/index.html" class="button light back">Ga terug naar home</a>
+<a href="/index.html" class="button light back">Go back to home</a>
 
 
 

src/index.pug

@@ -9,22 +9,22 @@ title: Accessibility Game
         h1 Accessibility Game
 
     p.
-        Welkom bij de Accessibility Game, waarbij je gaat ervaren hoe het is om een computer, tablet of telefoon te gebruiken voor mensen met een beperking.
+        Welcome to the Accessibility Game, in this game you will experience what it is like to use a computer, tablet or telephone when you live with a disability. 
 
     p.
-        In ieder level wordt er een andere beperking gesimuleerd. Zo ervaar je bijvoorbeeld een visuele of een cognitieve  beperking. Elk level bevat ook een korte uitleg over wat ontwerpers en programmeurs kunnen doen om de ervaring voor mensen met deze beperking beter te maken
+        Each level a disability is simulated. For example, you experience a visual or a cognitive impairment. Each level also includes a brief explanation of what designers and programmers can do to improve the experience for people with this disability. 
 
     .spacer
 
-    a(href="/levels/1/intro/" title="Speel de game").button Speel
+    a(href="/levels/1/intro/" title="Play the game").button Play
     br
-    a(href="/levels/" title="Ga naar lijst met levels").button.light Levels
+    a(href="/levels/" title="Go to the level-list").button.light Levels
 
     .spacer(style="height: 8rem")
 
 
     h3.
-        Gemaakt door Stichting Accessibility
+        Made by Stichting Accessibility
 
 
     .background-images(aria-hidden="true")

src/levels/1/intro.md

@@ -2,11 +2,11 @@
 layout: layouts/level-intro.pug
 tags: level
 index: 1
-title: Dyslexie
+title: Dyslexia
 image: /assets/images/levels/dyslexie.svg
 icon: /assets/images/levels/icon_dislexia_blue.svg
 ---
 
-Mensen met Dyslexie hebben vaak moeite met lezen, letters lijken soms in de verkeerde volgorde te staan of lijken omgekeerd.
+People with Dyslexia often have trouble reading, letters sometimes appear to be in the wrong order or appear reversed.
 
-> 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.
+> In this level you will read a piece of text, the letters of this text are unstable to simulate dyslexia. When you have read it, press "Next page" and answer a number of questions about the text. 

src/levels/1/outro.md

@@ -1,14 +1,14 @@
 ---
 layout: layouts/level-outro.pug
 index: 1
-title: Dyslexie
+title: Dyslexia
 image: /assets/images/levels/dyslexie_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.
+When designing for people with dyslexia, it is important to keep the text as simple as possible and to use a clear structure. This also makes the text more pleasant to read for everyone. 
 
 ## 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
+* Add images or diagrams to support the text
+* Avoid long blocks of text and ensure a simple, clear structure
+* Offer alternatives in the form of videos or narration 

src/levels/1/play.md

@@ -2,40 +2,40 @@
 
 layout: levels/level-dyslexie.pug
 index: 1
-title: Dyslexie
+title: Dyslexia
 
 question:
-  title: Beantwoordt nu de vragen over dyslexie
-  button_text: Ga naar de vragen
-  button_back_text: Terug naar de tekst
-  button_send_text: Verzenden
+  title: Now answer the questions about dyslexia 
+  button_text: Go to the questions
+  button_back_text: Back to the tekst
+  button_send_text: Send
 
 questions:
-  - Q: Wanneer is de term dyslexie bedacht?
+  - Q: When was the term dyslexia first used? 
     A: 1887
-  - Q: Waar heeft dyslexie voornamelijk invloed op?
-    A: leesvaardigheid, spelling en woordenschat
-  - Q: 'Vul in: Dyslexie heeft een __ oorzaak.'
-    A: neurologische
+  - Q: What does dyslexia mainly affect? 
+    A: reading skills, spelling and vocabulary 
+  - Q: 'Fill in: dyslexia has a ___ cause'
+    A: neurological
 
 # 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_win: Level passed!
+level_score_fail: Level failed...
+level_score_bad: Too bad, please try again.
+level_score_good: Well done, but you can do better!
+level_score_perfect: Perfect! Very good.
 
-level_score_retry: Probeer opnieuw
-level_score_next: Ga verder
+level_score_retry: Try again
+level_score_next: Continue
 
 ---
 
-# Dyslexie
+# Dyslexia
 
-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.
+The condition was described by Oswald Berkhan as early as 1881, but it was Rudolf Berlin who coined the term 'dyslexia' in 1887. The term was used to describe the case of a boy who had severe difficulty learning to read and write when he appeared to have normal intelligence outside these areas. 
 
-## Oorzaak
+## Cause
 
-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. 
+Research has shown that dyslexia has a neurological cause. Although there are many variants and causes for dyslexia, in many cases the brain is unable to properly interpret visual or auditory information. The brain can partly compensate for this, or in the case of a mild form, completely by using other brain functions.
 
-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.
+This depends on the extent of the condition. At a young age, stimulation and training of the brain can lead to better compensation. Dyslexia mainly affects reading skills, spelling and vocabulary. 

src/levels/2/intro.md

@@ -2,12 +2,12 @@
 layout: layouts/level-intro.pug
 tags: level
 index: 2
-title: Kleurenblind
+title: Colourblind
 image: /assets/images/levels/kleurenblind.svg
 icon: /assets/images/levels/icon_eye_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?
+Colour can be used to distinguish things from each other. But now imagine that you are colourblind. People with green-red colourblindness have difficulty distinguishing the colours red and green from each other. How can you clearly see what is important when something is only made clear with colour? 
 
 
-> Je gaat zo memory spelen, zoek de twee kaarten met overeenkomstige kleuren. Je speelt dit eerst met aleen kleurverschil, daarna met iconen
+> You are about to play memory, find the two cards with corresponding colours. The first game is with colour difference only, the second game with icons on the cards

src/levels/2/outro.md

@@ -1,12 +1,12 @@
 ---
 layout: layouts/level-outro.pug
 index: 2
-title: Kleurenblind
+title: Colourblind
 image: /assets/images/levels/kleurenblind_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.
+As you may have noticed, it is much easier to distinguish the icons when you have more cues to work with. If you want to use colour to clarify, make sure you also have an alternative, such as an icon. 
 
-[Lees meer over kleurgebruik](https://www.accessibility.nl/blog/zorg-voor-voldoende-kleurcontrast)
+[Read more about colour usage (Dutch)](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
+* It's important to make sure you add enough contrast in your app or website so that all users can read the text and navigate without problems

src/levels/2/play.md

@@ -1,24 +1,24 @@
 ---
 layout: levels/level-kleurenblind.pug
 index: 2
-title: Kleurenblind
+title: Colourblind
 
-stage_1_title: Alleen kleuren
-stage_2_title: Met iconen
+stage_1_title: Only colours
+stage_2_title: With icons
 
-stage_2_intro_button: Begin
+stage_2_intro_button: Start
 
 # 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_win: Level passed!
+level_score_fail: Level failed...
+level_score_bad: Too bad, please try again.
+level_score_good: Well done, but you can do better!
+level_score_perfect: Perfect! Very good.
 
-level_score_retry: Probeer opnieuw
-level_score_next: Ga verder
+level_score_retry: Try again
+level_score_next: Continue
 ---
 
-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.
+You must have noticed that many colours looked very similar. Colourblind people often run into this because they cannot properly see the difference between colours. This can be solved by using coulors that have a greater contrast with each other, but also by adding an icon or other visual feature to help distinguish what belongs together and what not.
 
-Je gaat nu hetzelfde spel spelen met een set iconen op de plaatjes.
+You are now going to play the same game with a set of icons on the pictures.