Math Playground Resizer: What It Is and How I Use It
I run a small tutoring operation and one of the recurring headaches is getting mathplayground.com problems to actually display properly on my dual-screen classroom setup. The site's embedded games and worksheets are locked to specific aspect ratios, which means they either get clipped or render at unreadable sizes on anything other than a standard 16:9 monitor. That's where Math Playground Resizer comes in. The tool is a lightweight userscript/browser extension combo. You grab it from the usual sources — the developer's GitHub repo or their personal site — and install it as a Tampermonkey or Violentmonkey script. After installation, it adds a small control panel overlay when you're on any Math Playground page. The panel lets you force-width the game containers, adjust the viewport scale, and toggle full-window mode. I usually set mine to 1920x1080 normalized scaling, which means the games fill the screen without stretching. Most of these math site games are built on Canvas or Flash-era wrappers that assume a fixed document size. The resizer works by injecting CSS overrides into the host page's DOM, specifically targeting the iframe containers and the inner game divs. It recalculates the transform scale based on your chosen resolution. Simple enough in theory.
The real trick is handling the game's own internal coordinate system. If you just scale the outer container, the hit detection and clickable elements stay locked to the original dimensions. I learned this the hard way on a geometry puzzle module where clicking "submit" on an answer registered three clicks to the left of where my mouse actually was. The workaround was enabling the "remap input coordinates" checkbox in the resizer panel, which shifts the input mapping back to match the visual scale. Without that, the tool is mostly cosmetic.
Practical Configuration for Common Setups
Here's what works for the setups I've actually tested: For 1920x1080 monitors running Chrome, set the resizer to "fit width" with a scale of 1.0. Don't use "fit height" — the games have varying vertical heights and this will leave massive black bars at top and bottom. For laptop screens at 1366x768, switch to "centered narrow" mode and bump the scale to 0.85. Anything higher and the game canvas overflows the viewport horizontally. If you're projecting to a classroom smartboard, the resolution is usually some weird non-standard value like 1024x768 or 1280x800. Set the resizer to "custom" and enter your exact resolution. Save that profile and switch between profiles with a keyboard shortcut — I use Ctrl+Shift+1 through Ctrl+Shift+3. This cuts down switching time from about 30 seconds of menu diving to roughly two seconds.
Get the Full Details
What It Doesn't Fix (And Why That Matters)
Let me be blunt about the limitations so you don't waste time expecting otherwise. The resizer cannot fix games that are fundamentally broken at certain resolutions. I spent an afternoon debugging a fractions module that rendered fine at any scale but had a scrollbar that appeared and blocked the answer buttons at 1440p. No amount of CSS injection from the resizer would move that scrollbar without breaking the game's layout entirely. In cases like that, the only real fix is finding a different source for the problem set or using the site's mobile version, which sometimes renders differently. Another limitation is that updates to Math Playground's site can break the resizer's selectors. When they change a class name or restructure their HTML, the script stops injecting properly until the developer patches it. I keep a backup of the last working version on my USB drive. When an update hits, I pause the new version and run the old one until the patch lands. This has happened maybe twice a year over the past three years, but it always catches you off guard if you're not prepared. Performance is also worth mentioning. Running the resizer on older machines or Chrome with a lot of extensions open adds about 15 to 30 milliseconds of latency to game loads. Not deal-breaking, but noticeable if you're running several modules in a row during a session. Disabling other background scripts for the Math Playground domain helps — I keep the resizer as the only active script for that host in my Tampermonkey settings.
Where to Get It
The official source is the developer's GitHub repository, which you can find by searching "Math Playground Resizer" directly. There are mirror copies on various extension stores, but I've seen inconsistent versions floating around. Stick to the primary repo and check the commit history to make sure it's been updated within the last few months. An outdated version will likely break on the current site structure.
