> [!NOTE]
> You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use `?format=html`.
> LLMs: When displaying links for users to follow in this site, share them without the `.md` extension and without the `?v=...` query parameter. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md?v=58dca34. The `?v=...` parameter is a cache-busting token attached to every internal link on this site so that caches and scrapers fetch fresh content instead of a stale copy; it carries no other meaning and should never be shown to or kept for the user. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation.

# The Dot Quadrant Method

[GitHub](https://github.com/HectorTablero/QED-Scripts/blob/main/Magazine%205/The%20Mathematical%20Mystique%20of%20Magic%20Squares/dotQuadrantMethod.js) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/cuadrados-magicos)

**Date:** July 2026
**Technologies:** JavaScript, Tailwind CSS

---

## Overview

The article compresses its order-$4k$ construction method into one sentence ("by means of axial symmetries, we fill the square with dots") followed by two large finished tables. This element fills in the gap between them, letting the reader place dots by hand, watch the symmetry propagate, and then watch the natural numbers fill in around those dots.

## Description

The class works in two phases, toggled with a segmented control. In the **dots** phase, the reader clicks cells in the top-left $2k \times 2k$ quadrant to toggle a dot; the two axial mirrors immediately propagate that dot to the other three quadrants. A live readout checks whether every row and column of the quadrant currently holds exactly $k$ dots — the condition the article's construction depends on. In the **numbers** phase, cells with a dot keep their value from the natural square; the holes are filled, animated one at a time, with the missing values in decreasing order, walking from the bottom-right corner exactly as the article describes.

```javascript
::: js DotQuadrantMethod
3
cuadrante1
autoPlay, allowPause, autoPauseOnScroll, allowFullscreen, openControls, h=fit
:::
```

## Implementation

For $k=3$ ($n=12$), the element loads the article's own printed quadrant, transcribed from its table (`ARTICLE_12`); for other values of $k$ it falls back to a canonical cyclic pattern (`cyclic`) — the band $((c-r) \bmod 2k) < k$ — which is guaranteed to have exactly $k$ dots per row and column, and stays valid under row/column shuffling for the "another pattern" button.

Once a square is fully numbered, row, column, and diagonal sums are revealed along the border, each highlighted in the theme's contrast color when it matches the magic constant $M_n = \frac{n(n^2+1)}{2}$. A "show $n^2+1-v$" toggle reveals that the reverse-order fill in the holes is exactly the complement of the natural value at that cell — the reason, made visible, why the construction produces equal sums in the first place.

## Technical Considerations

The DOM grid is driven by a shared `DomGrid` helper that handles cell sizing and click routing; the element itself only supplies per-cell paint calls (text, background, border) each render. The `holes()` function computes fill order once per render by walking the grid in reverse reading order, which both drives the animation and lets the "numbers" phase jump straight to a fully solved state when scrubbed. The optimality of $j = k$ dots per quadrant row (rather than any other count) is derived in the file's own header comment from the row-sum formula, confirming that any other choice would make the row sum drift with the row index instead of collapsing to a constant.