tosane932

Posted on Jul 27

Why Did I Spend So Much Time Building a “Driving Personality Test”?

#javascript #webdev #beginners #html

Updated on July 7, 2026

A truck driver with 120 hours of programming study turned more than seven years of field experience into a fully browser-based application using sql.js.

🛻 Introduction

Hello from Japan! 🇯🇵

“Seven hours to build one quiz?”

Some people may think exactly that after reading the title.

If the goal were simply to display a few choices and let users click them, the project could probably have been completed in one or two hours.

However, what I built was not a simple multiple-choice quiz.

I am an active truck driver who operates both:

Large 20-ton trucks
Medium 7-ton trucks

During more than seven years of professional driving, I have repeatedly encountered situations that made me think:

This is the kind of behavior that leads to an accident.

I converted those real-world observations into a Driving Personality Test consisting of:

50 questions
Five categories
Five answer levels
Scores ranging from 0.0 to 2.0 points per question

In this article, I will explain why designing this test took so much time, using actual code from the project.

You can try the application here:

https://tosane932.github.io/driver-personality-test/

⚠️ Estimated completion time: approximately 20 minutes

The application itself is lightweight and responds quickly.

The estimate includes the time required to carefully read the questions and answers.

Please complete it at your own pace.

🌐 Deployment and Cache Busting

This application is a serverless single-page application built entirely with frontend technologies.

Because there is no backend server, an old JavaScript asset such as app.js may remain cached in a returning user's browser.

This creates a risk that a newly deployed version will not appear immediately.

To solve this problem, I introduced cache busting through the HTML file.

Cache Behavior: Before and After

Whenever I update app.js, which contains the result logic and UI text, I also update the version query parameter in index.html.

<!-- Before:
The browser may keep using the old cached file. -->
<script src="app.js"></script>

<!-- After:
Changing the query parameter forces the browser
to request the updated file. -->
<script src="app.js?v=20260707"></script>

This simple version parameter reduces the risk of users continuing to run outdated JavaScript after a deployment.

💡 Design Focus: Fully Randomized Questions and Safe Data Handling

1. Reproducing the Unpredictability of Real Roads

Real roads contain unpredictable situations.

To recreate that uncertainty, I designed the application to completely shuffle all 50 questions whenever the page is reloaded.

This reduces order bias and prevents users from memorizing the sequence.

The goal is to make each session feel closer to a first-time reaction test.

2. Randomization with the Fisher–Yates Algorithm

I implemented my own shuffle function in app.js using the Fisher–Yates algorithm.

The algorithm is widely used because it can shuffle an array efficiently and fairly.

Its time complexity is:

O(n)

This means the operation remains efficient even if the number of questions grows.

I also used the spread operator to create a copy of the original data before shuffling it.

function shuffleQuestions(questions) {
    const shuffled = [...questions];

    for (let i = shuffled.length - 1; i > 0; i--) {
        const randomIndex = Math.floor(Math.random() * (i + 1));

        [shuffled[i], shuffled[randomIndex]] = [
            shuffled[randomIndex],
            shuffled[i]
        ];
    }

    return shuffled;
}

This prevents the original data in testData.js from being modified.

In logistics terms:

I do not damage the warehouse master data.

I create a safe copy for delivery and sort only that copy.

This was my way of applying risk management to data handling.

3. Ripple Effects for Clear User Feedback

When a user taps an answer, a ripple animation spreads outward from the tapped position.

I created this effect using CSS animations and JavaScript.

The button executes both:

createRipple
handleAnswer

These responsibilities are kept separate so that visual feedback does not interfere with the answer-processing logic.

button.addEventListener("click", (event) => {
    createRipple(event);
    handleAnswer(option);
});

The ripple effect gives users immediate feedback:

The tap was received successfully.

Because the test is designed around quick judgment, I wanted the interface to reduce accidental input and avoid interrupting concentration.

⛑️ What Inspired the Project

The previous day, I was discussing an idea with AI:

What if I collected and analyzed daily work reports?

After sleeping on it, I had a concern the next morning.

Daily reports are company documents.

Would collecting and analyzing them create copyright or information-management risks?

I had already encountered a similar structural obstacle while building my previous application, puoppo.

The original flow was:

Scrape a specific website
        ↓
Repeatedly blocked by the website
        ↓
Change route and use RSS feeds
        ↓
Collect approximately 100 summaries
        ↓
Send them to Gemini
        ↓
Visualize public trends and frustrations

Instead of continuing toward a blocked or risky route, I found an alternative route that achieved the same objective.

That same thinking applied here.

Rather than using internal company reports, I decided to create fictional driving scenarios.

This allowed me to explore professional judgment without using private or copyrighted company documents.

My conclusion was:

If one route is legally or ethically unclear, it is better to reach the same objective using an open and original subject.

That idea became the Driving Personality Test.

Instead of analyzing individual reports, I created fictional situations based on my own field experience.

This avoided the copyright and information-management problem at the structural level.

📋 Development Records

The complete development history is available here:

https://github.com/tosane932/driver-personality-test