FractiForge: Interactive Fraction Workshop

A browser‐based sandbox where middle‐schoolers drag & combine “fraction tiles” to solve real-world puzzles (pizza slicing, recipe scaling), with instant visual feedback.

Comment

FractiForge

Division: Hackathon

Project Description

FractiForge is an interactive web application that transforms fraction and decimal practice into a dynamic, puzzle-based adventure for middle‐school learners. Students enter a vibrant “workshop” theme, where each level presents a unique real‐world scenario (e.g. slicing a birthday cake, mixing smoothie ingredients) and a target value expressed as a fraction, decimal, or percentage. To solve a puzzle, learners simply drag-and-drop a selection of colorful fraction tiles onto the workspace until their combined value matches the target. As they stack and rearrange pieces, the app provides real-time feedback, updating both fraction and percentage representations side-by-side to reinforce the connection between formats. Each problem even has more than one solution because not all children think in the same way and the platform is able to handle that.

How It Works

  1. Responsive Interface

    • React + TypeScript front-end
    • HTML5 Canvas engine for smooth drag-and-drop
    • Adaptive layouts for desktop and mobile

  2. Fraction Arithmetic & Feedback

    • Math.js handles all fraction operations and simplification
    • Workspace continually recalculates the sum of tile values
    • Simultaneous display of fraction and percentage

  3. Puzzle Mechanics & Motivation

    • Randomized tile order to promote critical thinking
    • “Distractor” tiles add conceptual depth
    • Instant-reset button for each puzzle

  4. Psychology & Engagement

    • Celebratory confetti and a “Fantastic!” banner on success
    • Positive feedback loop taps into reward-based learning
    • Progress badges and stage unlocks maintain motivation

Key Features

  • Drag-and-Drop Tiles: Intuitive snapping, hover glows, and snap-to-grid feedback
  • Multi-Format Feedback: Fraction and percentage values update in real time
  • Adaptive Progression: Unlock new stages and earn badges as you master challenges
  • Visual Appeal: Vibrant workshop theme, clear iconography, and subtle animations

STEM & UX Impact

  • Mathematical Foundations: Builds strong understanding of fractions, decimals, and percentage conversions
  • Cognitive Benefits: Randomization and distractor tiles encourage deeper reasoning
  • Emotional Engagement: Confetti and positive reinforcement boost confidence and willingness to try harder
  • Accessibility: Mobile-friendly design ensures learning anywhere, anytime

FractiForge makes fractions and decimals not just understandable, but genuinely fun—empowering middle‐schoolers to build both skill and confidence in math!

Built With

Share this project:

Updates