Rijksvoorlichtingsdienst
De Eerste Kamer (niet tijdens het Groot Dictee)

Het Groot Dictee als interactief artikel

Verdrietig nieuws vanmorgen: het Groot Dictee der Nederlandse Taal is niet meer. Blijkbaar is het Dictee niet hip genoeg. Dat lijkt me een open deur, maar ik geloof niet dat hipheid nou het doel van een spellingswedstrijd moet zijn.

Laat ik eerlijk zijn: de laatste (en eerste) keer dat ik keek was in 2011, waarna ik best wel trots was toen ik onder de 10 fouten uitkwam. Sindsdien neem ik me ieder jaar voor weer te kijken, al dan niet via Uitzending Gemist, maar het komt er niet van. Ik zal dus wel medeschuldig zijn aan de ondergang van het Groot Dictee. Sorry Philip 🙁

Het einde van het Groot Dictee zorgde wel voor een leuke werkdag: een collega kwam met het idee om een aantal fragmenten op de site te plaatsen zodat lezers nog een keertje hun spellingsvaardigheden konden testen. Dat moet natuurlijk wel interactief, dus ik haalde mijn Javascript-skills uit een stoffig hoekje van mijn brein en kon aan de slag.

Hoe dan?

Het resultaat kun je aanschouwen op de site van NRC. Lezers kunnen een audiofragment afspelen uit een oud Groot Dictee. In een tekstvak schrijven ze mee met de dicteetekst. Met een druk op de knop wordt hun tekst nagekeken en krijgen ze ook de correcte spelling te zien.

Hoe werkt het? De simpele versie: de correcte teksten staan in een Javascript-bestand, opgesplitst in losse woorden. Zodra de lezer op de controleer-knop drukt, wordt hun invoer woord voor woord vergeleken met  de correcte tekst. Komt een woord uit de invoer van de lezer niet voor in de correcte tekst, dan is het blijkbaar verkeerd gespeld en wordt het rood gemarkeerd.

Dit heeft wel wat beperkingen. Er wordt niet gekeken naar de volgorde van de woorden, alleen van de losse woorden wordt bepaald of ze goed gespeld zijn. De check is hoofdlettergevoelig, maar als een woord zowel met als zonder hoofdletter in de tekst voorkomt, worden ze allebei in alle gevallen goed gerekend. In dit geval is het allebei niet zo erg: als een lezer de tool gebruikt zoals het bedoeld is, doet het wat het moet doen.

En de moeilijke versie?

Wil je de moeilijke versie, dan krijg je de moeilijke versie. Sterker nog, dan krijg je gewoon code. Mét toelichting, dat dan weer wel. Eerst de html: de invoer is een vrij simpel formulier met een textarea en een submit-knop. Verzenden van het formulier activeert een Javascript-functie. Leuke ontdekking: je kan spellingscontrole in een tekstveld uitschakelen, met autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" . Geen idee wanneer je dat ooit nodig hebt behalve hier, maar ik was er blij mee.

De naam van het formulier, de parameter voor de functie en de namen van de divs voor het antwoord bevatten allemaal een 0. Dat is omdat dit het formulier is voor de eerste tekst. Bij de andere fragmenten werd de 0 een 1, 2 of 3. Er staan ook nog twee divs om de nagekeken invoer en de correcte spelling in weer te geven.

Dit tooltje vereist ook een stukje css (naar de mensen toe). Niet zoveel, eigenlijk maar twee regels. Eentje om de fout gespelde woorden rood te kunnen maken en eentje om de juiste spelling in eerste instantie verborgen te houden.

Dan Javascript! Eerst om de correcte zinnen in te lezen. In de regels als  var formname = "form"+tekst; zie je hoe die 0 in de html hierboven wordt gebruikt.

Dan de code om de invoer van de gebruiker op te halen. Die wordt in twee arrays gestopt: attemptwords bevat alle woorden zoals ze zijn ingevoerd, dus inclusief leestekens. attemptwordscor bevat de woorden zonder leestekens. Je wil de leestekens niet gebruiken bij de controle, maar wél weergeven in de uiteindelijke nagekeken tekst.

De woorden uit de invoer worden vervolgens één voor één gecheckt. Klopt het woord, dan mag-ie as is worden weergegeven in het nagekeken antwoord. Klopt het niet, dan moet-ie rood gemarkeerd worden door middel van een <span class="fout"> .

Tot slot mogen de goede antwoorden (die in de css verborgen werden) weer zichtbaar worden gemaakt. Een  return false;  zorgt ervoor dat het versturen van het formulier de pagina niet ververst.

Voor iets wat ik met grote haast gemaakt hebt, werkt het prima: het levert een (al zeg ik het zelf) heel leuk tooltje op waarmee mensen lekker nog een keertje nostalgisch kunnen doen over het Groot Dictee.

Kan mijn code beter, mooier, efficiënter? Vast. Weet jij hoe? Laat het me weten met een reactie hieronder of stuur me een mail of tweet.

2 reacties op “Het Groot Dictee als interactief artikel”

  • Nora schreef:

    Als je nu de woorden die mensen invoeren vergelijkt met de goede zin, kijk je alleen of de invoer voorkomt in de array van de goede zin. Dit kan problemen opleveren.

    Stel je hebt de zin:
    “Ik word boos, hij wordt verdrietig.”
    En iemand voert in:
    “Ik wordt boos, hij wordt verdrietig.”
    Dan zal deze zin geheel worden goed gerekend.

    Strings vergelijken in javascript kan heel gemakkelijk met de “===” operator. In je laatste if statement had:
    if(words[i]===attemptwordscor[i]) dus volstaan.
    Het enige probleem dat je hiermee creëert is het controleren van woorden met (of zonder) koppelteken. Hier zou je dan nog iets op moeten vinden. (Valt denk ik op te lossen met een bigrams-style oplossing).

    Alles goed met Suus?

    X

    • Wouter van Dijke schreef:

      Hmmm, die if-statement die jij suggereert geeft denk ik problemen als de index van een woord in een zin niet meer gelijk loopt. Bv als de zin is “Ik ben boos alsook verdrietig” en iemand typt “Ik ben boos als ook verdrietig” dan is words[4] ‘verdrietig’ en attemptwordscor[4] ‘ook’. Dan wordt dus elk woord daarna fout gerekend.

      In de uitgekozen zinnen kwam geloof ik hetzelfde woord in twee spellingen niet voor, waardoor dit voor de situatie wel werkte. Maar inderdaad zou hij eigenlijk ook naar de volgorde moeten kijken.

      (Suus doet de groeten!)

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *