Embed the number games
Free number practice games for your own site: 5 games in 6 languages, 30 ready-to-embed combinations. They are practice, not a test: no score, no result. The embedded game page loads no analytics and sets no cookies. Three ways to add one: a script tag, a web component or a React component.
A code builder with a live sample page is on dyscalculia.io/embed: pick a game and see the result before you paste anything.
Script tag
<div data-dysc-game="dots"></div>
<script async src="https://dyscalculia.io/embed.js"></script>The script builds the iframe, keeps its height equal to its content and writes a visible credit line under the game into your page, in the game's language.
npm: web component
npm install dyscalculia-embed<script type="module">import "dyscalculia-embed";</script>
<dyscalculia-game game="dots" lang="en" size="standard"></dyscalculia-game>npm: React
import { Game } from "dyscalculia-embed/react";
<Game game="numberline" size="wide" />
<Game game="compare" lang="de" />The wrapper registers the web component on the client only, so it is safe in server-rendered apps.
Plain iframe
For pages that block scripts. Add the credit line yourself.
<iframe src="https://dyscalculia.io/embed/en/dots" title="Number game by Dyscalculia.io" width="480" height="560" style="border:0;width:100%;max-width:480px" loading="lazy"></iframe>
<p style="text-align:center;font:12px system-ui,sans-serif">Free number games by <a href="https://dyscalculia.io/" target="_blank">Dyscalculia.io</a></p>Options
| Script | Component / React | Values |
|---|---|---|
data-dysc-game | game | dots, symbolic, compare, numberline, digitspan |
data-lang | lang | en (default), de, fr, es, nl, pt-br |
data-size | size | compact (360 px wide), standard (480 px wide), wide (720 px wide); standard is the default. The frame starts at 605 px tall and follows the game |
Games
game | Name | What the player does | Languages |
|---|---|---|---|
dots | Count the Dots | Dot patterns flash on the screen and the player taps how many there are, from 1 to 9. Five short rounds. | en, de, fr, es, nl, pt-br |
symbolic | Which is Bigger? | Two numbers side by side and the player taps the bigger one. Five short rounds, from single digits to two-digit numbers. | en, de, fr, es, nl, pt-br |
compare | Which Group Has More? | Two groups of dots and the player taps the side with more. No counting needed: it is about a feel for quantity. | en, de, fr, es, nl, pt-br |
numberline | Place the Number | A number appears and the player slides a marker to where it belongs on a line from 0 to 100. Three rounds. | en, de, fr, es, nl, pt-br |
digitspan | Remember the Digits | A few digits appear one at a time, then disappear, and the player types them back in order. Three rounds that get longer. | en, de, fr, es, nl, pt-br |
Every game exists in every language. The full catalog, with the name of each game in each language, example code and frame addresses, is machine-readable: embed-catalog.json (the catalog.json of the npm package).
Examples that exist today
| What you want | Code |
|---|---|
| Dot counting, English | data-dysc-game="dots" |
| Number comparison in German | data-dysc-game="symbolic" data-lang="de" |
| Number line in Brazilian Portuguese, wide | data-dysc-game="numberline" data-lang="pt-br" data-size="wide" |
| Digit memory in Dutch | data-dysc-game="digitspan" data-lang="nl" |
Chart embeds
The statistics page also offers embed code for its 4 charts: a standalone SVG (CC BY 4.0) in a figure whose caption links back to the page. Copy the code below or open "Embed" under a chart on the page.
| Chart | Image |
|---|---|
| Dyscalculia prevalence in population studies | https://dyscalculia.io/data/dyscalculia-statistics-chart-1.svg |
| Children with dyscalculia, years after identification | https://dyscalculia.io/data/dyscalculia-statistics-chart-6.svg |
| 15-year-olds reporting maths anxiety, OECD average (PISA 2012) | https://dyscalculia.io/data/dyscalculia-statistics-chart-8.svg |
| Average effect of maths interventions in three meta-analyses | https://dyscalculia.io/data/dyscalculia-statistics-chart-9.svg |
<figure style="margin:0;max-width:800px"><a href="https://dyscalculia.io/dyscalculia-statistics#s-how-common-is-dyscalculia-chart"><img src="https://dyscalculia.io/data/dyscalculia-statistics-chart-1.svg" alt="Dyscalculia prevalence in population studies" width="800" style="width:100%;height:auto" loading="lazy"></a><figcaption style="font-size:13px">Source: <a href="https://dyscalculia.io/dyscalculia-statistics">Dyscalculia statistics 2026: how common is dyscalculia?</a>, Dyscalculia.io (CC BY 4.0)</figcaption></figure>The other charts use the same pattern with their own image address; their ready-made code is in CATALOG.md. Keep the caption: it is the credit and the link.
Add it on your platform
Steps taken from each platform's own help pages (read 18 October 2026). Menus and plan limits change; if a platform removes scripts, use the plain iframe and add the credit line by hand.
| Platform | Paste | Steps | Good to know |
|---|---|---|---|
| WordPress.com | Paste the script code | 1. Open the post or page you want the game on and select the block inserter (+). 2. Search for HTML and choose the Custom HTML block. 3. Select Edit HTML if the block shows a preview, paste the code and select Update (or Publish). 4. Open the live page, not the editor preview, to check the game and the credit line under it. 5. If the code is gone after saving, your plan strips scripts: see the note below, then use the plain frame code or a link to the game page. | Scripts and frames are kept only on a paid plan with hosting features active (the help page says a paid plan alone is not enough). On the free plan they are removed when you save, so link to the game page with a normal link instead. Self-hosted WordPress.org uses the same block name, but its rules were not verified from official documentation: check in your editor. |
| Wix | Paste the plain frame code | 1. In the editor choose Add Elements → Embed Code → Embed HTML. 2. Click Enter Code, paste the code and press Apply. 3. Set the element width and height to 100% so the game is not cropped. 4. Publish the site and open it over https to see the game. | Only HTTPS addresses show once published. |
| Squarespace | Paste the script code | 1. Edit the page and add a Code block (or an Embed block with a code snippet). 2. In the Code block set the mode to HTML and paste the code. 3. Save, then open the page in a private window to check it. | Code blocks need a Core, Plus or Advanced plan; Embed blocks are on all plans. Code can be hidden while you are logged in, so test in a private window. |
| Google Sites | Paste the plain frame code | 1. Open the page in the desktop editor. 2. Choose Insert → Embed → Embed code. 3. Paste the code, press Next, then Insert. 4. Click Publish: the game only shows on the published site. | JavaScript must sit inside script tags. Desktop editor only. |
| Carrd | Paste the script code | 1. Add an Embed element to the page. 2. Set Type to Code and Style to Inline. 3. Paste the code and publish the site. | Needs Pro Standard or higher. Nothing shows in the builder; publish to see it. |
| Notion | Paste the game address only | 1. On your Notion page type /embed and pick Embed. 2. Paste the game address (the https://… link from the builder's frame code, the src value). 3. Press Embed link and drag the corner to resize. | Notion takes an address only: no script, no pasted frame code, so no credit line is written. Add a normal link to the game page as a fallback. |
| Webflow | Paste the script code | 1. Add a Code Embed element inside a container. 2. Paste the code (leave out html, body and head tags). 3. Preview, then publish. | Needs a paid site plan. Read from help-center snippets: check in your editor. (Not fully confirmed from the official page.) |
| Ghost | Paste the plain frame code | 1. In the post editor type /html or add an HTML card. 2. Paste the code. 3. Publish and check the live page: the editor only shows a placeholder. | Whether scripts run is not stated on the official page: check in your editor, and use the plain frame if the script is removed. (Not fully confirmed from the official page.) |
| Shopify, Blogger, Weebly | Paste the plain frame code | 1. Shopify: add a Custom Liquid or Custom HTML section. 2. Blogger: add an HTML/JavaScript gadget. 3. Weebly: drag in an Embed Code element. 4. Paste the code and publish. | Steps and limits could not be confirmed from the official pages: check in your editor. (Not fully confirmed from the official page.) |
Height
The game posts its content height to the parent window and the iframe follows. The script and the web component handle it; with a plain iframe you can listen yourself.
window.addEventListener("message", (e) => {
if (e.origin !== "https://dyscalculia.io") return;
const m = e.data;
if (m && m.source === "dysc-embed" && m.type === "resize") {
iframe.style.height = Math.ceil(m.height) + "px";
}
});The credit link
The script and the component write one small line under the game into your page, in the game's language: “Free number games by Dyscalculia.io” (en), “Kostenlose Zahlenspiele von Dyscalculia.io” (de), “Jeux de nombres gratuits de Dyscalculia.io” (fr), “Juegos de números gratis de Dyscalculia.io” (es), “Gratis getallenspelletjes van Dyscalculia.io” (nl), “Jogos de números grátis de Dyscalculia.io” (pt-br). The name links to the Dyscalculia.io home page in that language. We ask that it stays visible. A link inside the frame would belong to the game's own document, which is why the line is written into your page.
Privacy
The embedded game page loads no analytics and sets no cookies, and has no sign-up or account. Nothing the player does is sent anywhere: there is no score to send. The page loads from dyscalculia.io like any embedded file, so ordinary server request logs exist. The credit link on your page is only a link.
Terms
- Free to use on any website, including schools, tutoring businesses and commercial sites.
- Keep the credit line under the game visible. Do not hide it or restyle it to invisibility.
- Do not change the game or present it as your own. The games are practice with numbers: not a test, and not an assessment of anyone.
Source: dyscalculia-embed.