About Sort It Out!

Inspiration

Sort It Out! was inspired by a simple idea:

What if learning complex concepts felt like solving a fast, competitive puzzle?

Ranking problems appear across science, technology, physics, and everyday reasoning. From algorithm efficiency to network latency, understanding relative order is often more important than memorizing isolated facts.

We wanted to create a game that transforms that reasoning process into something interactive, timed, and rewarding.

Instead of multiple-choice questions or passive trivia, players actively organize information — reinforcing deeper conceptual understanding through interaction.

What We Learned

This project strengthened our understanding of both technical architecture and design workflow.

Game Architecture in GML

We designed a fully reusable ranking engine using:

A dynamic topic system
Global state management across rooms
Slot-based validation logic
Drag-and-drop mechanics built from scratch in GML
A modular scoring system with partial credit

Each topic defines:

Question text
Elements to rank
Correct order array
Extreme labels (e.g., “Fastest” → “Slowest”)

This structure ensures scalability without rewriting room logic.

Time-Based Scoring Model

We implemented a hybrid scoring system:

+25 points per correctly placed element
A time bonus calculated as:

$$ \text{Time Bonus} = \max\left(0,\; (T_{\text{limit}} - T_{\text{elapsed}}) \times k \right) $$

Where:

$T_{\text{limit}}$ = allowed time
$T_{\text{elapsed}}$ = time taken
$k$ = scaling constant

This balances accuracy and speed.

UI & Visual Design with Figma

We used Figma to:

Prototype layout structure
Define visual hierarchy
Design button states and UI spacing
Plan typography and alignment
Iterate rapidly before implementing in GameMaker

Using Figma significantly reduced UI rework and helped maintain consistent spacing, typography, and interaction clarity.

How We Built It

Tools & Stack

GameMaker Studio
Pure GML (no extensions)
HTML5 export
Figma for UI prototyping
Hosted externally for Reddit/Devvit integration

System Design

The game architecture includes:

A persistent global timer
Topic selection logic with completion tracking
Slot-index validation system
Drag-and-drop interaction engine
Results screen with score breakdown and time bonus

The same game room logic dynamically handles all topics, ensuring clean separation between content and mechanics.

Challenges We Faced

Data Alignment & Validation

Ensuring that:

Slot indices
Element identity (correct_index)
Topic order arrays
Visual positioning

all aligned correctly required careful debugging and restructuring.

HTML5 Audio Restrictions

Modern browsers block autoplayed background audio.
We refactored audio logic to trigger only after user interaction, ensuring compatibility across desktop and mobile browsers.