Discovering numbers and place values interactively: A web app

Understanding numbers and their place values is one of the most important foundations in elementary school mathematics. A small weekend programming project has a free web app result, which under www.lernsoftware-mathematik.de/zahlen can be accessed. Here, children can interactively explore the decimal number system, lay out numbers, and bundle and unbundle them. The free web app works on all devices directly in the browser – without installation.

Video: The app in action

The Place Values web app is an interactive experimentation environment for numbers up to 9999. Children can create place value representations using simple touch or mouse gestures:

  • Tap produces a single (blue dot)
  • Draw a line creates a ten (green line)
  • Draw a rectangle creates a hundred (red square)
  • thousands are represented as a purple row of 10 hundreds

The special: Using multiple fingers simultaneously Multiple shapes can be created at once – ideal for the clever, bundled placement of quantities.

The most important functions
Automatic and manual bundling

A central concept in understanding place value is the Bundling principle: 10 ones become 1 tens, 10 tens become 1 hundred, etc.

The app offers two modes:

  • AutomaticallyAs soon as 10 elements of a place value are present, they are automatically bundled into the next higher place value. The child can observe the bundling principle directly while placing the items and be encouraged to reflect through targeted analytical questions.
  • ManuallyThe child decides when to bundle. Non-canonical representations (e.g., 13 lines) are also possible. Driving over 10 identical elements These are gathered together with the finger. long press When an element is grouped into a single smaller unit, it is unbundled into the next smaller unit. Thus, bundling and unbundling become a conscious action.
Partial disassembly

The decomposed number can be displayed in place value representations – in three different modes:

  • NoNo ad
  • Numerical values (30): Shows the values spelled out, e.g., „2000“, „400“, „80“, „3“
  • Place value notation (3Z): Shows the short form, e.g., „2D“, „4H“, „8Z“, „3E“

The colors correspond to the place value colors of the representation – thousands in purple, hundreds in red, tens in green, ones in blue.

Two representations

Users can choose between a standard representation and a representation as place value material (Dienes):

Place value number picker

At the top of the screen is a number picker that allows numbers to be set directly. By swiping up or down anywhere, the number or individual digit values can be changed – the display adjusts automatically. This makes it directly possible to experiment and observe the effects of changes from the symbolic to the iconic level. Ideally, this should also be accompanied by appropriate exploratory tasks.

Speech output and AI tutor
  • The Talk button reads out the current number – including its partial breakdown into thousands, hundreds, tens and ones.
  • An optional AI voice assistant It can be activated to accompany children as they explore, ask questions, and encourage experimentation. This voice assistant is experimental and subject to change – it is being used for testing within the PRIMA-AI project and is welcome to try it out. When requested, it has access to background information and the current app configuration and is designed to provide relevant help and suggestions for exploration. It works best via voice dialogue.
Technical details
  • platformWeb app (HTML5, CSS, JavaScript)
  • DevicesWorks on tablets, smartphones and desktop computers.
  • installationNone – runs directly in the browser
  • Cost: Free (currently as part of the trial), especially the AI tutor incurs costs that may not be permanently available free of charge.
  • Data protectionNo registration, no data collection