Learn computational thinking and programming in JavaScript

JavaScript in the Classroom is a browser environment where students write, run and test code alongside each exercise.

How does it work?

Assignment, editor and output side by side.

Students write code, run it and immediately see what happens in the console or on the canvas. The environment is designed for short practice moments, study periods and lessons where programming takes up only part of the available time.

1

Read the assignment

Each exercise contains starter code and a clearly defined assignment. Students can begin directly in the browser.

2

Run the code

The output appears on the same page. It can be console output, a turtle graphics drawing or a simple canvas task.

3

Improve

Status icons, test cases and error messages help students improve their solution without syntax immediately taking all the attention.

Components

Light and nimble

01

Browser environment

The tool runs as a regular website. GitHub Pages or a simple local web server is sufficient. Opening it via file:// is unsuitable because the app loads content files.

02

Turtle and canvas

Students can make algorithms visible on a drawing grid. This especially helps with loops, order, angles and patterns.

03

Reference sheet

A built-in reference sheet with commands and colour options makes syntax easier, leaving more room to focus on reasoning.

04

Automatic checks

Exercises can check ordinary output, input via ask() and canvas results. Open-ended assignments can still be assessed manually.

05

Storage in the browser

Progress is stored locally in the browser. That works well for separate practice moments and independent work.

06

PDF export

Students can export their work with code, console output, canvas image, attempts and space for feedback.

For teachers

For limited lesson time, extra practice and study.

This project is intended as a lightweight supplement for lessons, study periods and independent practice. Specialised platforms such as Dodona are better suited to extensive progress tracking, dashboards and class management.

  • Suitable for programmes where programming is a small part of the curriculum.
  • Useful for extra practice outside lessons or during study periods.
  • Works on school devices without installation or student accounts.
  • Can be adapted by teachers comfortable working with files and GitHub.

Evaluation in the PDF report

The PDF export combines code, output and a compact feedback rubric. This lets you assess whether the solution works, how readable the code is and which thinking concept the student uses.

Functionality Readability Core programming concept Subject knowledge / mathematics Creativity
7
chapters
81
exercises
5
concepts
2
plotting shapes
Workspace
Exercise, editor and output on one screen
Output
Console, turtle and canvas
Export
PDF with code and output

Place in the learning path

From platforms to projects.

The platforms build computational thinking. The projects use that thinking in a cross-curricular assignment in which students build, measure, test and conclude.

Adapting exercises

Comfortable with GitHub? Create your own exercises.

All exercises are stored as separate files in content/. This avoids working in one large exercise list. The exercise creator helps prepare new exercises in the right structure.

Content structure

Chapters, assignments, starter code and test cases follow a consistent folder structure, making them easier to adapt and extend.

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

Exercise builder

The exercise creator lets you prepare and preview an assignment and download it as an upload package for your GitHub fork.

  • Output tests for regular console output.
  • Input tests.
  • Canvas checks for drawing assignments.
  • Manual exercises for open-ended assignments.

Open exercise builder

Test the web tool in your browser.

Start the learning environment or open the exercise creator to prepare your own assignments for your fork.

Privacy and licence

Privacy

This project does not use its own analytics or advertising cookies. Input, progress and results are processed in the browser and may be stored locally on the device. A download or export occurs only when the user initiates it. GitHub Pages logs visitors’ IP addresses for security purposes; external services are governed by their provider’s privacy policy.

Read how GitHub Pages processes technical visitor data.

License

Original project material by Robbe Wulgaert may be used, copied and adapted free of charge for education, provided that ‘Robbe Wulgaert – AI in de Klas’ is clearly displayed, where reasonably practical with a link to the original project. Commercial sale, paid distribution, sublicensing or repackaging as a commercial product is not permitted without prior written permission. Other uses outside education also require prior written permission. Third-party components remain subject to their own licences.

Read the full licence terms.