DEV Community

Cover image for From a Random Wheel to Reaction Time Tests: How I Ended Up Building Two Small Websites
Funny
Funny

Posted on

From a Random Wheel to Reaction Time Tests: How I Ended Up Building Two Small Websites

I spent quite a while trying to fix a twelve-sided die.

The other dice worked fine. They rolled, bounced around, and eventually settled. But the D12 had a strange habit of stopping at an awkward angle, almost as if it couldn't stand up straight.

Nothing was crashing. The result was correct. It just looked wrong.

I probably could have left it alone, but once I'd noticed it, I couldn't really ignore it. So I went back to the code and kept adjusting things until the die finally behaved.

That little problem came from a website I've been working on called WheelPage.

I've also been building another site, PickTests, with small games that challenge your reaction time, memory, and attention.

Both started as pretty simple ideas. I didn't really plan to build two websites with so many different things on them.

It just happened one feature at a time.

It started with a random wheel

WheelPage began with a random wheel.

You know those small decisions that aren't important enough to spend much time on, but somehow still take forever? What to eat for lunch, where to go with friends, or which name to pick from a list.

I thought it would be fun to make a wheel that could handle those decisions.

The first version of Spin the Wheel was straightforward. Type in a few options, click a button, watch the wheel spin, and get a result.

It worked, which was enough to make me happy at first.

But after using it a few times, I started noticing little things that were missing.

If I entered a long list of names, I didn't want to type them all again the next day. And if I spun the wheel several times, it would be nice to look back at the previous results.

So I added history, import and export options, sounds, animations, and a few ready-made lists.

Then there was the mobile layout.

Something that looked perfectly fine on my computer could feel cramped on a phone. The wheel needed enough space, but so did the buttons and the list of options. I'd adjust one part, check it on my phone, and end up changing something else.

Eventually, I started thinking about other small random tools.

Flip a Coin was an obvious one. When there are only two choices, a coin toss is simpler than setting up a wheel.

I also made Rock Paper Scissors, where you can play a few rounds against the computer and keep track of your wins and losses.

Then came the 3D Dice Roller.

I didn't want it to be just a button that produced a random number. I wanted to see the dice actually roll.

I used Three.js and Cannon-ES to handle the 3D graphics and physics. The tool now supports six types of dice, from D4 to D20, and lets you roll up to three at once.

That's where the stubborn twelve-sided die from the beginning of this story came in.

Getting the dice moving was one thing. Making sure they settled naturally was another. The code could run without errors and still produce something that looked a little strange.

I use AI quite a bit while building these tools, and it helps me get things working faster. But I still have to open the page, try things out, and decide whether the result actually feels right.

Later, I added a Random Number Generator and a Counter. They're more practical than the little games, but I liked having them in the same place.

By then, WheelPage had grown from one wheel into six tools.

I also made English, Chinese, Spanish, and Russian versions. I initially thought that would mostly involve translating the text. Turns out, a button that fits perfectly in one language can suddenly become too narrow in another.

There are always little things like that.

Then I made a reaction time test

At some point, I wanted to try building something different.

I've always liked those tiny browser games that take almost no time to understand but make you want to try again.

A Reaction Time Test seemed like a good place to start.

The idea is simple: wait for the screen to turn green, click as quickly as possible, and see how many milliseconds it took you to react.

Maybe you get 280 ms on your first try and 250 ms on the next. Suddenly, you want to see if you can do better.

I thought it would be an easy feature to build. Show a green screen, measure the time until the user clicks, and display the result.

Of course, people don't always click exactly when they're supposed to.

Someone might click before the screen turns green. Someone else might click several times in a row. And the whole thing needs to work with a mouse, keyboard, or touchscreen.

None of these are huge problems on their own, but they still need to be handled.

Once I had the basic test working, I noticed something else.

Every time I took the test, I could only see my latest score. I couldn't easily remember what I'd scored earlier, let alone compare it with a previous session.

So I added a five-round mode, along with average and best results. The site also keeps the most recent 20 completed tests in the browser.

I decided not to add user accounts just for that.

There is a downside, of course. If you clear your browser data or switch devices, your saved scores won't follow you. But for something you might play for a minute or two, I prefer letting people get straight into it without signing up.

That reaction time test eventually became the starting point for my second website, PickTests.

One small test turned into ten

After finishing the reaction time test, I started experimenting with other ideas.

First came Aim Trainer, where you try to hit targets as quickly and accurately as possible.

Then I worked on a couple of memory games.

In Sequence Memory, squares light up in a particular order, and you have to repeat the pattern. Number Memory asks you to remember a number and type it back after it disappears.

They both involve memory, but they feel quite different to play.

I also made Multiple Object Tracking. A few objects are marked, everything starts moving, and you have to keep track of the right ones. It's surprisingly easy to lose track when several objects cross paths.

There are a few others too.

The Stroop Test plays with the conflict between a word and the color it's displayed in. Time Perception lets you see how well you can judge time without watching a clock, while Mental Rotation is about recognizing shapes from different angles.

I also added a Color Blind Test for a basic color-vision check. It's only an online screening activity, not a substitute for a professional eye examination.

I built these pages using plain HTML, CSS, and JavaScript.

I like keeping things fairly simple, although having more tests also means more things to look after.

Each game has its own rules. Some measure time, some measure accuracy, and others track how far you manage to get. Even when two tests look similar, I can't always reuse the same approach.

Still, it's been fun watching the collection grow.

The tenth test was another small headache

The latest addition is Schulte Table.

If you haven't heard of it, the idea is pretty simple. You're given a grid of randomly arranged numbers, and you have to find them in order as quickly as you can.

The usual version is a 5×5 grid with 25 numbers. I added different sizes, from 4×4 all the way to 9×9, along with a few different layouts.

At first, I thought this one would be especially straightforward.

Generate some numbers, shuffle them, let the user click in order, and measure the time.

Then I got stuck on a small decision: what should happen if someone taps the wrong number?

I could end the round immediately. That would be easy to understand, but it felt a bit harsh, especially on a phone where your finger might land on the wrong square.

Ignoring mistakes entirely didn't seem quite right either.

In the end, I decided to let the player continue while keeping a separate count of mistakes. The timer keeps running, and the final result shows both the completion time and the number of incorrect taps.

I also had to keep records for different settings separate. Finding 16 numbers on a 4×4 grid isn't really comparable to finding 81 numbers on a 9×9 grid.

And 81 numbers on a phone screen? That's another thing I still want to spend more time testing.

The game is now live, and PickTests has reached ten tests.

I'm still figuring out what to work on next

Both websites are still small personal projects, and I'm still making changes.

AI has definitely made it easier for me to try new ideas. If there's something I haven't built before, I can get a working version together much faster than I used to.

But I also keep finding things I want to go back and improve.

The D12 dice issue is fixed now. The reaction time test has better score history. Schulte Table is up and running, though I still want to spend more time checking how it feels on different devices.

Sometimes I get an idea for another game and want to start building it right away. Then I open one of the existing pages and notice something I could make a little better.

It's hard to choose between the two.

For now, I haven't decided what the next test will be.

I might just go back and work on the ones I've already made.

Top comments (0)