Leer computationeel denken en programmeren in JavaScript

JavaScript in de Klas is een kleine webomgeving voor leerlingen die computationeel denken en JavaScript willen oefenen. De focus ligt op snelle inzetbaarheid: opgave, editor en uitvoer in één scherm, met opdrachten rond selectie, herhaling, turtle graphics en eenvoudige grafieken.

Hoe werkt het?

Opgave, editor en uitvoer naast elkaar.

Leerlingen schrijven code, voeren die uit en zien meteen wat er gebeurt in de console of op het canvas. De omgeving is bedoeld voor korte oefenmomenten, studie-uren en lessen waarin programmeren een beperkt deel van de beschikbare tijd inneemt.

1

Lees de opdracht

Elke oefening bevat startcode en een afgebakende opdracht. Leerlingen kunnen meteen in de browser beginnen.

2

Voer de code uit

De uitvoer verschijnt in dezelfde pagina. Dat kan console-output zijn, een tekening met turtle graphics of een eenvoudige canvasopdracht.

3

Stuur bij

Statusicoontjes, testcases en foutmeldingen helpen leerlingen hun oplossing te verbeteren zonder dat syntax meteen de volledige aandacht opeist.

Onderdelen

Light and nimble

01

Browseromgeving

De tool draait als gewone website. GitHub Pages of een eenvoudige lokale webserver volstaat. Openen via file:// is niet geschikt omdat de app contentbestanden inlaadt.

02

Turtle en canvas

Leerlingen kunnen algoritmes zichtbaar maken via een tekenraster. Dat helpt vooral bij herhaling, volgorde, hoeken en patronen.

03

Formularium

Een ingebouwde spiekkaart met commando’s en kleurmogelijkheden verlaagt de syntaxdrempel. De focus kan zo meer op redeneren blijven liggen.

04

Automatische checks

Oefeningen kunnen gewone output, input via ask() en canvasresultaten controleren. Open opdrachten kunnen manueel blijven.

05

Opslag in de browser

Voortgang wordt lokaal bewaard via de browser. Dat werkt vlot voor losse oefenmomenten en zelfstandig oefenen.

06

PDF-export

Leerlingen kunnen hun werk exporteren met code, console-uitvoer, canvasbeeld, pogingen en ruimte voor feedback.

Voor leerkrachten

Voor beperkte lestijd, extra oefening en studie.

Dit project is bedoeld als lichte aanvulling voor lessen, studie-uren en zelfstandig oefenen. Voor uitgebreide opvolging, dashboards en klassenbeheer blijven gespecialiseerde platformen zoals Dodona geschikter.

  • Geschikt voor richtingen waar programmeren een beperkt deel van het curriculum is.
  • Bruikbaar voor extra oefening naast de les of tijdens studie.
  • Werkt op schooltoestellen zonder installatie of leerlingenaccounts.
  • Aanpasbaar door leerkrachten die vlot met bestanden en GitHub kunnen werken.

Evaluatie in het PDF-rapport

De PDF-export bundelt code, uitvoer en een compacte rubriek voor feedback. Zo beoordeel je niet alleen of de oplossing werkt, maar ook hoe leesbaar de code is en welk denkconcept de leerling gebruikt.

Functionaliteit Leesbaarheid Programmeerkernconcept Vakkennis / wiskunde Creativiteit
7
hoofdstukken
81
oefeningen
5
concepten
2
figuren plotten

Plaats in de familie

JavaScript is de brug tussen web en programmeren.

JavaScript in de Klas sluit aan op HTML omdat het webpagina's interactief maakt. Tegelijk bouwt het verder op de programmeerconcepten uit Blockly: sequentie, selectie, herhaling, variabelen en functies.

Oefeningen aanpassen

Ervaren met GitHub? Maak je eigen oefeningen.

Alle oefeningen staan als losse bestanden in de map jsindeklas_new/content/. Daardoor hoef je niet in één grote oefenlijst te werken. De oefeningmaker helpt om nieuwe oefeningen in de juiste structuur klaar te zetten.

Contentstructuur

Hoofdstukken, opdrachten, startcode en testcases volgen een vaste mappenstructuur. Dat maakt aanpassen en uitbreiden overzichtelijker.

jsindeklas_new/content/catalog.json
jsindeklas_new/content/chapters/chXX/chapter.json
jsindeklas_new/content/chapters/chXX/exNN/exercise.json
jsindeklas_new/content/chapters/chXX/exNN/starter.js
jsindeklas_new/content/chapters/chXX/exNN/tests.json

Oefeningmaker

Via de oefeningmaker kan je een opdracht voorbereiden, previewen en downloaden als uploadpakket voor je GitHub-fork.

  • Outputtests voor gewone console-uitvoer.
  • Inputtests.
  • Canvascontroles voor tekenopdrachten.
  • Manuele oefeningen voor open opdrachten.

Open oefeningmaker

Test de webtool in je browser.

Start de leeromgeving of open de oefeningmaker om eigen opdrachten voor je fork voor te bereiden.