Perceptron

Inspiration

Learning mathematics can be frustrating for students who struggle with traditional teaching methods. Long explanations, confusing instructions, and the fear of making mistakes can make learning less enjoyable.

We wanted to explore a different approach: a learning experience that adapts to the learner's pace, encourages them to keep trying, and makes mistakes feel like part of the learning process rather than failure.

This inspired us to build Perceptron, a gamified mathematics learning application designed with accessibility and learner confidence in mind. Our goal is to make mathematics practice more engaging and supportive, particularly for learners who benefit from dyslexia-friendly features.

What it does

Perceptron makes mathematics practice interactive, supportive, and rewarding. Its initial proof of concept focuses on learning fractions.

Key features include:

• Interactive practice: Learn fractions through multiple-choice questions.
• Read-aloud support: Listen to questions while following word-by-word highlighting.
• Progressive hints: Receive step-by-step guidance when struggling with a question.
• Supportive feedback: Try again without losing rewards for incorrect answers.
• Honey rewards: Earn honey drops for answering questions correctly.
• Accessible design: Use a clean, high-contrast interface with readable text and clear visual feedback.
• Planned accessibility tools: Dyslexia-friendly display settings and a calming break experience.

The aim is to help learners build understanding and confidence at their own pace.

How we built it

We built Perceptron using a simple frontend-backend architecture.

• Vue 3 and Vite: Build the interactive user interface and provide a fast development experience.
• Python and Flask: Handle question delivery, answer checking, hints, and reward calculations.
• JavaScript Fetch API: Connect the frontend and backend through JSON-based HTTP requests.
• CSS: Create a colourful, neubrutalist interface with bold outlines, rounded cards, and clear visual feedback.
• Web Speech API: Provide browser-based speech synthesis and word-highlighting functionality.
• SQLite: Planned for persistent storage of learner progress and preferences.

We developed the application incrementally, starting with a working question-and-answer flow. We then added read-aloud support, progressive hints, answer explanations, and reward logic. Each development stage includes testing to verify that the individual features work as intended.

Challenges we ran into

One of our main challenges was designing an experience that feels rewarding without making learners feel punished for getting an answer wrong.

We addressed this by using gentle feedback, progressive hints, and a reward system that never removes earned honey for incorrect answers.

Another challenge was synchronising spoken words with their visual highlights. Browser speech-synthesis implementations do not always provide consistent word-boundary events, so we designed a fallback that speaks one word at a time when reliable highlighting is unavailable.

We also had to decide how to divide responsibilities between the frontend and backend. The frontend handles the interface and user interactions, while Flask controls answer checking and reward calculations. This separation helps prevent the interface from revealing correct answers before a student submits a response.

Accomplishments that we're proud of

We are proud to have turned the initial idea into a working application with a clear technical foundation.

Our accomplishments include:

• Building a working Vue-to-Flask question-and-answer flow.
• Keeping answer checking and honey reward calculations on the server.
• Implementing read-aloud functionality with a word-highlighting strategy and fallback.
• Creating a progressive hint system that leads to an explanation rather than endless retries.
• Designing a feedback system that encourages learners to keep trying without losing earned rewards.
• Establishing an incremental development and testing workflow.

Most importantly, we have focused on building an experience around the learner's needs rather than simply adding game mechanics to a mathematics quiz.

What we learned

This project helped us understand that educational technology involves more than presenting questions and calculating scores.

We learned how to connect a Vue frontend to a Flask backend using HTTP requests and JSON, organise application responsibilities, and test individual features during development.

We also learned that accessibility needs to influence the design from the beginning. Readability, predictable interactions, clear feedback, and alternatives when browser features fail are important parts of the learning experience.

Finally, we learned the value of building software in small, verifiable steps instead of attempting to implement every feature at once.

What's next for Perceptron

Our next steps are to complete the remaining features and make the application more useful for learners.

Our roadmap includes:

• Persistent progress: Save honey rewards, learning levels, and preferences using SQLite.
• Placement assessment: Help learners begin at an appropriate fraction-learning level.
• Complete question banks: Add carefully written questions and hints across all three difficulty levels.
• Dyslexia-friendly settings: Provide adjustable font, spacing, text size, and motion preferences.
• Calming break experience: Allow learners to pause and return to their question without losing progress.
• Accessibility and usability testing: Test keyboard navigation, responsive layouts, speech behaviour, and readability.
• Future expansion: Explore additional mathematics topics, including percentages and algebra.

Our long-term vision is to make Perceptron a more accessible and encouraging way to practise mathematics, helping learners progress at their own pace and approach difficult questions with greater confidence.

Live Demo: Open Perceptron

Built With

• flask
• vue