When HVTEQ set out to build DecimalHero, we wanted to create something different: free, unlimited math practice tools that students could actually use every day. But we also recognized that educators needed a way to integrate these tools directly into their school websites and learning platforms. That vision became the foundation for our embeddable math widgets, a story of solving real problems for real educators.
Today, educators can embed interactive math widgets from DecimalHero's embed page directly into their websites with just a few lines of code. This case study explains how we built this system, the technical challenges we solved, and why it matters for education.
The Problem: Educators Needed Better Integration Options
Math teachers and school website administrators face a common challenge: finding interactive math tools that can be seamlessly integrated into their existing websites. Most educational tools require:
- Complex API integrations
- User accounts and authentication systems
- Heavy JavaScript libraries that slow down page loads
- Expensive licensing fees
- Limited customization options
At HVTEQ, we saw an opportunity to build something better. We wanted to create embeddable widgets that would be:
- Free forever: no payment, no signup, no barriers
- Lightweight: fast loading, minimal impact on page performance
- Easy to embed: simple iframe code that works anywhere
- Mobile-responsive: works perfectly on all devices
- Interactive: engaging practice tools that students actually want to use
The Solution: Iframe-Based Embedding System
We chose an iframe-based approach for several key reasons:
1. Universal Compatibility
Iframes work on virtually every website platform: WordPress, Wix, Squarespace, custom HTML sites, and more. Unlike JavaScript SDKs that require specific frameworks, iframes are supported everywhere. This means educators can embed DecimalHero widgets regardless of their website platform.
2. Isolation and Security
Iframes provide natural isolation between the embedded widget and the host website. This means:
- No conflicts with existing JavaScript or CSS on the host site
- Enhanced security through sandboxing
- Independent styling that doesn't interfere with the parent page
3. Performance Benefits
By loading widgets in iframes, we can:
- Lazy load widgets only when needed
- Cache widget content independently
- Optimize widget performance without affecting the host site
Technical Implementation: Building the Embed System
Building a robust embeddable widget system required solving several technical challenges:
Widget Architecture
Each embeddable widget is a self-contained web application that:
- Runs entirely client-side for instant performance
- Generates problems dynamically using JavaScript algorithms
- Validates answers using symbolic math comparison
- Stores progress locally using browser localStorage
- Adapts to different screen sizes automatically
Responsive Design
We built each widget with a mobile-first approach, ensuring they work perfectly on:
- Desktop computers
- Tablets
- Smartphones
- Interactive whiteboards
The widgets automatically adjust their layout, font sizes, and interaction elements based on the available screen space.
Key Features of Embeddable Widgets
1. Zero Configuration Required
Educators can embed widgets with just a few lines of HTML. No API keys, no authentication, no complex setup. Copy the iframe code from DecimalHero's embed page, paste it into their website, and it works immediately.
2. Unlimited Practice Problems
Unlike static worksheets or limited practice sites, each widget generates unlimited unique problems. Students can practice as much as they need without ever running out of content.
3. Instant Feedback
Every answer gets immediate feedback, helping students learn from mistakes in real-time. This instant feedback loop is crucial for effective learning.
4. Progress Tracking
Widgets track student progress locally, showing metrics like:
- Problems attempted
- Correct answers
- Accuracy percentage
- Practice streaks
5. Multiple Widget Types
We've built widgets covering various math topics, from basic arithmetic to advanced calculus. Each widget is optimized for its specific domain, ensuring accurate problem generation and validation.
How to Embed DecimalHero Widgets
Embedding a DecimalHero widget is incredibly simple:
- Visit https://decimalhero.com/embed to browse available widgets
- Select the widget you want to embed
- Copy the provided iframe code
- Paste it into your website's HTML where you want the widget to appear
- Done! The widget will appear on your page
The embed code looks like this:
<iframe
src="https://decimalhero.com/embed/exponent-laws-product-rule"
width="100%"
height="600"
style="border:none; display: block;"
loading="lazy">
</iframe>
<p style="text-align: center; margin-top: 4px;">
<a href="https://decimalhero.com" target="_blank" style="font-size: 11px; color: #64748b; text-decoration: none;">
Powered by <span style="color: #2563eb; font-weight: 500;">DecimalHero</span>
</a>
</p>That's it! No additional configuration needed. The widget will automatically adapt to your page layout and work on all devices.
The Partnership: HVTEQ and DecimalHero
HVTEQ specializes in building educational technology solutions and automation tools. When we decided to create DecimalHero, we wanted to build a platform that would provide free, high-quality math practice tools for students worldwide.
The embeddable widgets represent our commitment to making quality education accessible. By building them completely free (no signup, no payment, no barriers), we're helping educators integrate interactive math tools into their websites without financial constraints.
HVTEQ maintains and hosts the DecimalHero platform, ensuring it remains fast, reliable, and free for all educators and students. The embeddable widgets are just one part of our broader mission to make quality math education accessible to everyone.
Key Lessons Learned
Building embeddable widgets taught us several important lessons:
- Simplicity wins: The easier something is to use, the more people will use it
- Performance matters: Fast-loading widgets get embedded more often
- Free is powerful: Removing barriers increases adoption dramatically
- Mobile-first is essential: Many students access content on mobile devices
What's Next for DecimalHero Widgets
The embeddable widgets are just the beginning. HVTEQ continues to develop new widgets and features, including:
- More widget types covering additional math topics
- Enhanced customization options for educators
- Analytics and usage tracking (privacy-preserving)
- Integration with popular learning management systems
Our goal remains the same: provide free, high-quality educational tools that help students learn and practice mathematics effectively.
Try It Yourself
Ready to embed a widget on your website? Visit DecimalHero's embed page to browse available widgets and get your embed code.
Learn more about our work at HVTEQ.
Frequently Asked Questions
Q: Are DecimalHero widgets really free?
A: Yes, completely free forever. No signup, no registration, no payment required. Educators can embed widgets on their websites without any cost or restrictions.
Q: Do I need to create an account to embed widgets?
A: No account needed. Simply visit https://decimalhero.com/embed, copy the iframe code, and paste it into your website.
Q: Will widgets work on my website platform?
A: Yes! Iframes work on virtually every platform: WordPress, Wix, Squarespace, custom HTML, and more. If your platform supports HTML, it supports DecimalHero widgets.
Q: Are widgets mobile-responsive?
A: Absolutely! All DecimalHero widgets are built with a mobile-first approach and work perfectly on desktop, tablet, and smartphone devices.
Q: Who built the DecimalHero embeddable widgets?
A: The widgets were developed by HVTEQ, a technology company specializing in educational tools and automation solutions. HVTEQ maintains and hosts the DecimalHero platform.
Conclusion
Building embeddable math widgets taught us that great educational technology doesn't need to be complicated or expensive. By focusing on core functionality (easy embedding, unlimited problems, instant feedback, and progress tracking), we created widgets that educators actually use and students benefit from.
At HVTEQ, we're committed to building more free educational tools through DecimalHero. The embeddable widgets are just one part of our mission to make quality math education accessible to everyone, everywhere.
If you're an educator looking to add interactive math practice to your website, visit DecimalHero's embed page to get started. It takes less than a minute to embed your first widget.