Feature Creep 2026, 10 - A Mental Math Trainer - A little bit of front-end

30 Mar

I've been putting off making a user interface for a while now, but it's arguably what I need the most practice in. Low expectations for now, I do really only need a displaybox and an input-box for the math trainer. The former I'm guessing will have to go through some latex interpreter, before I can make it work, the latter could benefit from the same, but I can live with a plane old textbox for now, since as it is now, most of the problems will resolve to a number. I'm never going to love writing HTML, but I'm reasonably sure it's the most convenient starting place, so I'll give an overview structure for the input stuff.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
</head>

<body>
    <h1>a better name for a math trainer</h1>
    <form id="math_trainer_form">
        <div>
            <h3>Enter Solution</h3>
            <input type="text" 
                   name="solution"
                   id="solution_form">
        </div>
        <button type="submit">Add</button>
    </form>
    <div>
        <h3 id="solution_form"></h3>
    </div>
    <script src="math_trainer_input.js"></script>
</body>

</html>

The logic behind the HTML elements is a bit more my jam. It's been a while since I started from scratch.

// math_trainer_input.js
interface FormElements {
    solution: HTMLInputElement;
}

const form = document
    .getElementById('math_trainer_form') as HTMLFormElement;
const solution_form = document
    .getElementById('solution_form') as HTMLDivElement;

const elements: FormElements = {
    solution: document
        .getElementById('solution') as HTMLInputElement
};

form
    .addEventListener('submit', (event) => {
        event
            .preventDefault();


        const solutionValue = elements
            .solution.value.trim();

        solution_form.innerHTML = solutionValue;
    });

Again, on another note, I found myself in need of writing a batch script that's going to save a PDF from a software that borks it on export, but displays it fine. It's not on my device, unfortunately, otherwise I might have taken the time to find out what's going wrong and save the original file, but I don't think I will have the time to do that. Instead, I think I'll just deploy the big guns and make a script that will take a screenshot of every page of the thing and save them in an orderly filename, so I can zip the export directory and move the whole thing to a linux machine, where I can join them into a PDF format. As I see it, I basically need to simulate user input to turn the 200-or-so pages, and trigger a screenshot. I'll decide whether it's easier to apply a cropping script to all images in a directory, or whether I can crop the screenshot as it's being taken. I don't have any experience writing batch scripts, but I'd figure I'll start easy: I need the script to get a page-number of the pdf, or just kinda better: the user input, just in case someone wanted a portion.

@echo off
set /p page_number=Input number of pages to digitize

will read the input into the variable page_number, afterward referenced as %page_number%. Next is a for-loop structure, which is also still easy:

set /A page_num_int=%page_number%
FOR /L %%iterator IN (1, 1, %page_num_int%) DO (
  //Do Something
  timeout 0.5
)

Apparently calling screenshots or snipping tools is a whole production on windows, which - while unsurprising - is slightly frustrating. We have a 3-digit number situation, so I also need some string processing bullshit, which I might as well model in text, before trying my hand at implementation, so here's what I'd be shooting for:

set page=000%%iterator
set page=%page:~-3%

which is hacky, but saves me an IF case, which I can't be bothered to look up. I'm going to settle on a collection of full-screen images, because windows doesn't have most functions that make a good scripting environment. I also have to assume nircmd, which I'm not exactly happy about, but can probably be negotiated. In that case, I can screenshot with

nircmd.exe savescreenshot "%page%.png"

, and then I need a keypress simulation to turn the page, hoping that I don't need to simulate touchscreen input.

powershell -Command "Add-Type -AssemblyName System.Windows.Forms; [System.Windows.Forms.SendKeys]::SendWait('{RIGHT}')"

So a first, untested, entirely markdown-coded attempt would be

@echo off
set /p page_number=Input number of pages to digitize
timeout 5

set /A page_num_int=%page_number%
FOR /L %%iterator IN (1, 1, %page_num_int%) DO (
  set page=000%%iterator
  set page=%page:~-3%
  nircmd.exe savescreenshot "%page%.png"
  powershell -Command "Add-Type -AssemblyName System.Windows.Forms; [System.Windows.Forms.SendKeys]::SendWait('{RIGHT}')"
  timeout 0.5
)

I added another timeout function to fullscreen the application I want to actually apply this on.

pens & pixels

Feature Creep 2026, 10 - A Mental Math Trainer - A little bit of front-end

Feature Creep 2026, 09 - A Mental Math Trainer - Debugging the Frontend