> [!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.

# Interactive Crossword (Empty-Cell Variant)

[GitHub](https://github.com/HectorTablero/QED-Scripts/blob/main/Magazine%202/Puzzles/crossword.js) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/acertijos-4)

**Date:** June 2024
**Technologies:** JavaScript, Tailwind CSS

---

## Overview

This is a refinement of the crossword engine, adding an explicit `.crosswordemptycell` treatment for blocked cells (black background at 50% opacity) so the grid shape reads clearly regardless of surrounding content, alongside the placeholder-hint support (`"letter-hint"` cell format) used to number clues directly inside the grid. The file is unchanged from its introduction here through the later magazine editions — the same puzzles appearing under "The Mathematical Oak" crossword in the 2024-25 edition run on this exact implementation.

## Implementation Details

### Puzzle Structure

The element receives a 2D array as its primary parameter, where each cell is either a space (blocked, rendered as a shaded empty cell) or a letter, optionally suffixed with a superscript clue number using the `"letter-number"` format (e.g. `"G-¹"`).

```javascript
// Example element configuration
::: js Crossword
[[" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],[" ", " ", " ", "G-¹", "R", "A-²", "D", "I", "E", "N", "T", " ", " ", " ", " ", " ", " "],[" ", " ", " ", " ", " ", "R", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],[" ", " ", " ", " ", " ", "I", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],[" ", " ", " ", " ", " ", "T", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],[" ", " ", " ", " ", " ", "H", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],[" ", " ", " ", " ", " ", "M-³", "O", "D", "E", " ", " ", " ", " ", " ", " ", " ", " "],[" ", " ", " ", " ", " ", "E", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "],[" ", " ", " ", " ", " ", "T", " ", "P-⁴", " ", " ", " ", " ", " ", " ", " ", " ", " "],[" ", " ", " ", " ", " ", "I", " ", "R", " ", "I-⁵", " ", " ", " ", " ", " ", " ", " "],[" ", "I-⁶", "N", "D", "U", "C", "T", "I", "O", "N", " ", " ", " ", " ", " ", " ", " "]]
crossword1en
autoPlay, allowFullscreen, saveStates, h=175
:::
```

### Empty-Cell Styling

Blocked cells receive a dedicated `crosswordemptycell` class (black, 50% opacity) injected via a `<style>` block at initialization, rather than being left as bare unstyled divs. This makes the grid's usable shape immediately legible even before any letters are filled in — important for the irregular, illustration-driven grids used in puzzles such as "The Mathematical Oak," where the crossword traces the outline of a tree.

### State Management and Completion

As in the base engine, user input is tracked in a `grid` array separate from the `solution`, with `saveStates` persisting progress to localStorage. `checkSolution()` compares the two case-insensitively cell by cell and disables all inputs once the puzzle is fully and correctly filled, locking the crossword against further edits.

### Technical Considerations

Sizing and keyboard navigation (arrow keys moving focus between non-blocked cells) are unchanged from the base engine: `resize()` derives cell size from the smaller of the container's width and height, and `handleKeyDown` walks the grid in the pressed direction, skipping over nothing — blocked cells are simply excluded from having a focusable `input` element in the first place, so navigation naturally lands only on solvable cells.