rechenkistev0.1.2

CASOON Open Source · App

Math practice for primary school, rendered on the server.

Rechenkiste generates maths tasks for grades 1 to 5, checks every answer on the server and swaps tasks and feedback in as HTML fragments. It is the demo app for the AHA stack and @casoon/fragment-renderer.

Open the live appRead the docs
MITv0.1.2Astro 7htmx 2Alpine.js 3Cloudflare Workers
Task 1 of 10 in the category Measurements: “How much is 2 cm in mm?” with an answer field, an on-screen number pad and a Check Answer button.
Captured from rechenkiste.casoon.dev
task types in the registry
105
grades, from 1 to 5
5
languages: German, English, Ukrainian
3
Astro components behind the htmx fragments
12

What it does

  1. Tasks that check themselves

    Every task type implements one interface: it generates a question, validates the answer and returns a hint. Equivalent fractions like 6/8 and 3/4 count as correct.

  2. Fragments instead of page loads

    htmx posts the answer, the server renders the feedback component with @casoon/fragment-renderer and returns HTML. The next task arrives the same way.

  3. Adaptive and forgiving

    Optional adaptive difficulty moves up a grade after three correct answers in a row and down after three incorrect ones, and incorrect tasks can be repeated at the end of a run.

  4. Built for children

    Number pad for whole-number answers, SVG drawings for geometry, fractions and clocks, multiple choice and drag and drop, and read-aloud via the browser’s speech synthesis.

From the live app

Try it yourself →
Start page of the English version: grade buttons 1 to 5, task count 10, 20 or 30, checkboxes for adaptive difficulty and retrying incorrect answers, and a Start button.
Start: pick a grade and how many tasks.
Task 1 of 10 in the category Measurements: “How much is 2 cm in mm?” with an answer field showing the unit mm, an on-screen number pad and a Check Answer button.
A task with the number pad for whole-number answers.
A fraction task showing a bar of four parts with three coloured, followed by the feedback “That was incorrect”, the correct answer 3/4, a hint and a Next Task button.
Feedback fragment after a wrong answer, with hint.

Run it locally

Node and pnpm are all you need. The Cloudflare adapter runs the app in workerd locally, sessions included.

  1. Clone the repository and install the dependencies with pnpm install.
  2. Start the dev server with pnpm dev and open the printed URL.
  3. Run pnpm test, pnpm check and pnpm lint before a change goes in.
Read the documentation
Local
git clone https://github.com/casoon/rechenkiste.git
cd rechenkiste
pnpm install
pnpm dev
task-renderer.tsRenderer
const runtime = createAstroRuntime({
  ...ahaStackPreset({ locale, htmxHeaders: true }),
  components: [
    { id: "feedback-correct", loader: () => import("@fragments/FeedbackCorrect.astro") },
    { id: "feedback-incorrect", loader: () => import("@fragments/FeedbackIncorrect.astro") },
    // … task and result fragments
  ],
});

const html = await runtime.renderToString({ componentId, props });
AnswerForm.astrohtmx
<form
  id="answer-form"
  hx-post="/api/test/answer"
  hx-target="#feedback-container"
  hx-swap="innerHTML"
  hx-disabled-elt="find button[type='submit']"
>