DEV Community

Cover image for 🎙️VoiceMath➕: Speak, Solve, Master Math! 🧠
ANIRUDDHA  ADAK
ANIRUDDHA ADAK

Posted on

10 7 6 8 7

🎙️VoiceMath➕: Speak, Solve, Master Math! 🧠

This is a submission for the AssemblyAI Challenge: Really Rad Real-Time.

🎙️VoiceMath ➕✖️ ➖➗

What I Built 🚀

🎉 VoiceMath is an interactive voice-based math quiz application that enhances learning through speech recognition.

🎙️ It uses the AssemblyAI Real-Time Speech-to-Text API to transcribe user responses and creates a dynamic quiz experience.

✨ With glowing animations, score tracking, and seamless voice interaction, it’s a fun way to practice math skills!


Demo 🌟

🚀 Live App: VoiceMath Live Demo

📂 GitHub Repository: VoiceMath Source Code

Screenshots 📸

🎮 Quiz Section

Starting of Quiz Screenshot page
Description: Interactive Quiz Interface

Ongoing Quiz Screenshot
Description: Ongoing quiz interface with real-time voice inputs.

Result Page Screenshot
Description: Results Page of Math Quiz

🧠 Logical Reasoning Quiz Section

Logical Reasoning Quiz Interface
Description: Interactive Logical Reasoning Quiz Interface

Ongoing Logical Reasoning Quiz
Description: Ongoing Logical Reasoning Quiz interface with real-time voice inputs

Result Page of Logical Reasoning Quiz
Description: Results Page of Logical Reasoning Quiz

📚 Practice Section

Practice Screenshot
Description: Practice mode for users to improve their math skills.

🌟 Leaderboard

Leaderboard Screenshot
Description: A detailed leaderboard showcasing user rankings.

👤 Profile Page

Profile Screenshot
Description: User profile section displaying personalized stats


Journey ✨

Implementation Highlights 💡

🎙️ Real-Time Speech Recognition:

Leveraged AssemblyAI's Streaming API for real-time transcription of user answers during the quiz.

💫 Interactive Animations:

Used Framer Motion for dynamic button animations and transitions, and React Confetti for celebration effects.

🧠 Quiz Logic:

Designed a 10-question dynamic math quiz where questions are generated on the fly.

👍 Enhanced User Feedback:

Utilized sonner library for instant feedback with toasts on correct/incorrect answers.

🔊 Voice Features:

Added text-to-speech functionality for reading out quiz questions.

Tools Used 🛠️

🎨 Frontend: React.js, TypeScript, Tailwind CSS

🌐 APIs: AssemblyAI Real-Time Speech-to-Text

🎉 Animation: Framer Motion, React Confetti

🔔 Feedback: Sonner (toast notifications)


Demo Features 🎯

🎤 Real-time voice input for answering quiz questions.

Beautiful UI with glowing animations and transitions.

🎉 Celebratory effects upon quiz completion.

🔊 Question narration via browser's speech synthesis.

📊 Score and high-score tracking to keep users engaged.

🏆 Leaderboard to compete with friends and other users.

👤 Personalized profile with user stats and achievements.

📚 Practice mode for honing skills in a relaxed setting.


Journey 🌍

🎉 The development of VoiceMath was an exciting challenge!

🎙️ Integrating AssemblyAI’s Streaming API was straightforward with detailed documentation. I used the API to capture real-time audio input and transcribe it into text for evaluating quiz answers.

💫 A focus on user interactivity led to implementing Framer Motion for smooth animations and creating an engaging visual design.

🔊 Adding voice narration via the browser's Speech Synthesis API enriched accessibility and created a delightful experience.

🌟 This project qualifies for additional prompts as it uses AssemblyAI’s Streaming API for its core functionality, creating a truly interactive real-time application.


Thanks for Reading! 💡

❤️ Made with love by Aniruddha Adak

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay