Checking the answer on the student's own device
When you press the button, your browser checks your code in its own isolated space. We saw it could be done, built our own test engine, and rebuilt it when we found it marked right answers wrong.
6 min read
We built Shapi-Lumda so that no server is needed to check an answer. Everything happens on the student’s own computer, even if the internet connection drops. Loading the page again does need the internet.
What is a server?
A server is a computer, usually far away, that answers requests from your browser: it keeps web pages and data and does work on your behalf. A site can ask a server to check your answer, or your own browser can do it. Here it is the browser, so no server has to receive your answer.
Press Run Tests on a Shapi-Lumda lesson and the result is listed on the page.
Key points
- The checking happens on the student’s own device, not on a server.
- We understood the approach from the start, after seeing an existing JavaScript course do it.
- We found that our first test engine, the program that runs the checks, marked some correct answers wrong. On 19 July 2026 we rebuilt it and put all the JavaScript checks in one shared place.
- The check runs when you press the button, not while you type.
What a check is
A check is a small question about your answer. Does this function give 4 when you give it 2? Does this page have a heading? Does this paragraph have a style? A lesson has a handful of these, and the result lists each one in plain words.
Where it runs
Different lessons need different ways of running your code, so our test engine has three.
- Plain JavaScript Runs in a background helper (a worker)
- HTML and CSS The browser itself reads the page you wrote and the checks look at what it found
- Pages and React Runs in a hidden frame inside the page
In all three, the student’s code runs on the student’s own device, inside the browser’s sandbox, its own isolated space for web pages, apart from the rest of the computer. This is not a vault. The point is that nothing needs a server to be graded.
What is a hidden frame?
A frame is a window inside a web page that holds another page, like a picture frame on a wall that shows a different picture. A hidden frame is one you cannot see. The lesson’s code runs inside it, apart from the lesson page around it, and it is removed when the check is done.
What is a sandbox?
A sandbox is a fenced-off area where a program can run, but cannot reach anything outside the fence. The name comes from a child’s sandbox: you can build and knock things down as much as you like, and the mess stays inside. Your browser puts every web page in a sandbox like this, so the code on a page cannot, by itself, read your files or change your settings. The student’s code runs inside it.
What is a worker?
A worker, which we also call a background helper, is a small program that the browser runs separately from the page you are looking at, so that heavy work does not freeze the page. It cannot touch the page itself.
Where the idea came from
JS Hero (opens in a new tab), a free JavaScript course from Germany, checks answers in the browser with a background helper and small test functions. We understood how that works from the start, and it showed us the idea was practical. We wrote our own test engine, and the HTML, CSS and React checks are ours too, because that course teaches only JavaScript.
Our first test engine got some answers wrong
Our first test engine compared answers in a way that works for numbers and words but not for arrays, which are ordered lists of values. A lesson whose answer is an array could be marked wrong even when it was right, because two arrays that look the same are not the same thing to the computer. On 19 July 2026 we rebuilt the checking code. We put all the JavaScript checks in one shared place, used by both the background helper and the JavaScript lessons that work with a web page itself (the ones that change a page). We also fixed a bug that stopped some of those lessons from starting at all.
What is an array?
An array is a row of values kept together under one name, like a shelf with numbered slots where each slot holds one item: three words, five numbers, anything. Programmers use them all the time. Two shelves stocked with exactly the same items are still two different shelves, and that is how a computer sees two arrays that look alike, unless it is told to compare what is inside.
Not as you type
The check runs when you press the button, not on every key you type. That is on purpose. A check starts a small background job, and if every key press started one, the browser tab would stay busy and use more and more memory. So a check runs only on request, and the JavaScript lessons reuse one background helper instead of starting a new one each time. The lessons about web pages and React use a hidden frame, which is removed again as soon as the check is done.
What does happen as you type is small. Your draft is saved in the browser on your device, so nothing is lost. If you are signed in and have chosen to sync, your progress is also saved in the cloud, so you can continue on another device. It is not sent on every key press: the app waits until you pause typing for a moment and then sends everything in one go.
What is throttling?
Throttling means limiting how often something may happen, so that busy work does not swamp the browser. Our cloud sync uses a close relative called debouncing: it waits until you stop typing for a moment and then sends everything once, instead of sending on every key.
What it means for the student
A student’s attempts are not sent anywhere to be graded. One thing is separate: if a student signs in and chooses to sync, their saved progress, which includes their solutions, can be kept in the cloud. That is a choice, and it has nothing to do with the checking itself.
Nothing in this story matches your search.
Read next
Writing 306 lessons for Hebrew and English readersThe first JavaScript lessons were too close to the course that gave us the idea, so we threw them away and wrote our own, in Hebrew and English, with examples from everyday life.
A text box that feels like a real code editorA student types code into a plain box. We made it a small code editor, so that Visual Studio Code or any other editor is not new when they get there.