Inspiration
- I wanted to make memorization fun and engaging, turning website layouts and text into a game
that helps kids and young adults strengthen focus and recall.
What it does
- LayoutLock challenges players to remember colors, text, and layouts, then recreate the website
from memory. Players can choose topics they care about, making practice interactive and
entertaining.
How we built it
- I started by prototyping LayoutLock in Figma, exploring different designs until I landed on one I
liked. After researching frameworks, I chose Vue.js for its flexibility and reactive components. To
make the game more dynamic and varied, I used the Google Gemini API to generate website
layouts and text automatically, giving players fresh challenges each time. I managed the project with
Git, tracking changes and iterating efficiently. From there, I implemented dynamic color- and text-
changing elements, tracked user interactions, and built the logic for recreating layouts from
memory.
Challenges we ran into
- I needed a method to evaluate how closely a player’s recreated layout matched the original. This
involved comparing positions, colors, and text content while allowing some flexibility so minor
misalignments wouldn’t feel punishing. I also wanted the game to be engaging for a wide range
of players. Making it too easy would remove the memorization challenge, but making it too hard
could frustrate players. I experimented with different layout complexities and scoring systems to
find the right balance. Since the game relies on players noticing changes in color and text, it was
important that these were distinct without being overwhelming. I had to consider color contrast,
readability, and how quickly changes occurred so players could focus and memorize effectively.
This also meant putting in restictions for the Gemini integration to make sure the website was
readable for the player as it was giving incoherent messes at times.
Accomplishments that we're proud of
- One of the biggest things was definitely learning Vue in such a short time to implement the program.
I have used JavaScript, HTML, and CSS before, but it was my first time working in a framework and
I'm proud I was able to learn enough to make this. Overall I was happy that I was able to create an
engaging game that strengthens memory through repetition and active recall, allowing players to
choose their own topics to increase focus and engagement. By implementing dynamic layouts and
using the Gemini API to generate text automatically, I was able to keep challenges fresh,
successfully combining entertainment and learning into one interactive experience.
What we learned
- I learned that gamifying memory exercises can greatly boost engagement and retention, and letting
players control content and difficulty improves motivation and focus. Iterating on the design based
on testing and feedback was essential to make the game intuitive and enjoyable, and using tools like
the Gemini API thoughtfully enhanced the project creatively rather than serving as a shortcut.
What's next for LayoutLock
- I plan to add more layout designs to increase complexity and challenge, and introduce multiple
difficulty levels so players can progress gradually. I also want to implement a gamified mode where
players drag and move components to match the original layout, and allow full customization of
subjects and topics to make memorization more personal and engaging.
Log in or sign up for Devpost to join the conversation.