Vibe-coding page #4: Time progress bar

If your Loquiz game is designed to be completed as fast as possible, such as the “Dark Manor Escape“, then this kind of page is for you: It will only show the players’ progress time and rank them based on this variable. We used Vibe Coding to generate this page, and it’s surprisingly easy. So in this article, we explain how you can make it yourself too!

You can try it with game ID F3XDTC3DJJ, or you can use your own Loquiz game ID.

How to make it yourself?

In fact, it’s easy to recreate such a result page using Vibe-Coding. Just go to your favorite LLM (e.g. ChatGPT, Copilot, or Gemini), then copy and paste the following prompt and attach this .txt file:

Use the attached api-for-llms.txt file to get instruction on how to fetch Loquiz results data
build me a HTML result page that: 
One field field to put game ID 
One field for the Max playtime (min) 
(default time is 60)
and confirm. 

Once confirmed, we see : 
A simple leaderboard that shows all team name, time of completion
Time of completion is shown as a progress bar
They are ranked from the fastest to the longest
The progress bar max time is defined by the max playtime (min)

If you want something a bit more specific, you can add instructions at the end of the prompt. For example: “Include a dark/light mode” or “Show the number of hints used”. Be as specific as possible. You can also ask to edit different elements after the AI has generated the code.

Let me know what you think of it! If you have any idea of a custom results page, feel free to send me an email.