Overview
This case study presents the development and testing of a fully embeddable interactive Maths Practice Generator designed to run inside a Wix HTML iframe. The aim was to create a browser-based learning tool that allows students to generate maths questions, practise working methods, check answers, view hints, and study worked solutions without needing a backend system, external scripts, or third-party tracking.
The final solution was built as a single self-contained HTML file containing HTML, CSS, and JavaScript. It can be pasted directly into a Wix Embed Code / HTML iframe element and used as an interactive educational widget on a Wix website.
Project Goal
The main objective was to create a practical maths learning tool that could be added to a Wix website quickly and safely. The tool needed to support multiple exam boards, education levels, topics, subtopics, and difficulty options, while remaining simple for students to use.
The solution was designed for students, teachers, tutors, and Wix website owners who want an interactive educational tool without complex setup.
Solution
The final code delivers an interactive maths practice experience directly inside the browser. Users can select an exam board, level, topic, subtopic, and difficulty, then generate a randomised maths question. Each question includes a clear question prompt, formula or method guidance, an optional diagram, a working notes area, answer checking, hints, and a worked solution.
The app also includes a progress panel showing attempts, correct answers, accuracy, streak, generated questions, current topic, current difficulty, exercise ID, and variant ID.
Because the solution is self-contained, it does not require a database, server, login system, external JavaScript library, or Wix Velo setup. This makes it suitable for simple Wix embedding and fast deployment.
Key Features
The Maths Practice Generator includes interactive question generation, exam board and topic filters, randomised exercise and variant IDs, answer checking, hints, worked solutions, diagrams, student working notes, responsive design, and browser-based progress tracking.
It supports several answer types, including numerical answers, money, percentages, probability, algebra, coordinates, and multi-number answers. It also recognises common units such as cm, cm², cm³, km/h, m/s, kg, N, Nm, degrees, and currency.
Improvements Made During Review
During testing, several improvements were identified and applied to make the code more suitable for Wix embedding and real student use.
Improvement Area | Issue Found | Solution Applied |
Answer checking | Some natural answers with units were rejected. | Expanded answer parsing to accept units such as km/h, m/s, cm³, Nm, kg, degrees, and currency. |
Answer prefixes | Some valid answers with prefixes were rejected, such as k = 24 or Example: 2. | Added support for common prefixes including answer =, k =, and example:. |
Mobile input | The answer box used a decimal keyboard even for algebra or text answers. | Added dynamic input mode so numerical answers use a decimal keyboard and algebra/text answers use a normal text keyboard. |
Progress tracking | Progress reset after an iframe or page refresh. | Added browser local storage for attempts, correct answers, streak, and generated question count. |
Public wording | The phrase “1,000 seed exercises” could be misleading. | Updated wording to “1,000 exercise IDs” for clearer and more accurate presentation. |
Code Test Results
Two main tests were carried out to check the reliability of the code before using it in Wix.
Test 1: Syntax, Page Load, and Basic User Flow Test
This test checked whether the HTML file loaded correctly and whether the main user journey worked as expected.
Test Area | What Was Checked | Result |
JavaScript syntax | Checked that the script had no syntax-breaking errors. | Passed |
Page load | Opened the HTML file as a standalone app. | Passed |
DOM elements | Checked for missing required element IDs. | Passed |
Question generation | Generated a maths question from the interface. | Passed |
Question panel | Confirmed that the question panel opened correctly. | Passed |
Answer checking | Entered an answer and ran the check-answer function. | Passed |
Console/runtime errors | Checked for visible JavaScript runtime errors. | 0 errors found |
Test 2: Full Generator Combination Test
This test checked the question generator across all available combinations of level, topic, subtopic, and difficulty. This was important because some bugs only appear in specific topic combinations.
Test Area | Result |
Total combinations tested | 380 |
Passed combinations | 380 |
Failed combinations | 0 |
Overall result | Passed |
Wix Embed Suitability
The final code is suitable for Wix because it is packaged as one complete HTML document. It can be placed inside a Wix HTML iframe using the Embed Code element. The app is responsive inside its own layout, but the Wix iframe height should be set large enough to avoid cropping.
Wix Setting | Recommendation |
Embed type | Embed Code / HTML iframe |
Width | 100% |
Desktop height | 900–1100px |
Mobile height | 1200–1500px |
Scrolling | Enable if content is taller than the iframe |
Backend required | No |
Wix Velo required | No |
External scripts required | No |
Outcome
The final result is a complete interactive maths practice tool that can be embedded into a Wix website and used immediately. It provides a smooth student experience, supports a wide range of maths topics, and keeps all functionality inside the browser.
Outcome Area | Result |
Standalone HTML app | Working |
Wix iframe suitability | Suitable |
Question generation | Working across tested combinations |
Answer checking | Improved and working |
Mobile usability | Improved |
Progress tracking | Added through local storage |
Backend dependency | None |
Final technical result | Passed testing |
Code after Correction - DEMO
Conclusion
This project shows how a single self-contained HTML file can be used to create a powerful interactive learning experience inside Wix. The Maths Practice Generator combines question generation, answer checking, hints, worked solutions, diagrams, progress tracking, and responsive design into one embeddable solution.
By keeping the tool lightweight, browser-based, and independent from external services, the final code is easy to deploy, simple to maintain, and suitable for educational websites built with Wix.
What was created in this Wix case study?
This case study focuses on the creation of an interactive Maths Practice Generator designed specifically for Wix websites. The tool was built as a complete self-contained HTML file using HTML, CSS and JavaScript. It can be placed inside a Wix Embed Code / HTML iframe element and used directly on a website without requiring a backend, database, Wix Velo setup or external scripts.
The generator allows students to select an exam board, level, topic, subtopic and difficulty. After selecting the filters, students can generate randomised maths questions, enter answers, write working notes, view hints and open worked solutions. The app also includes progress tracking, showing attempts, correct answers, accuracy, streak and generated question count.
How was the code tested before being used in Wix?
The code was tested through two main checks. The first test focused on the basic technical flow of the app. This included checking the JavaScript syntax, loading the page as a standalone HTML file, confirming that all required DOM elements were available, generating a question, opening the question panel, entering an answer and using the answer-checking feature. No runtime or console errors were found during this test.
The second test checked the full question generation system across all available level, topic, subtopic and difficulty combinations. A total of 380 combinations were tested, and all 380 passed successfully with zero failed combinations. This confirmed that the generator worked reliably across the available practice categories.
Why is this solution useful for Wix websites?
This solution is useful for Wix websites because it provides an interactive learning tool that can be embedded without complex setup. Website owners can add the app using a Wix HTML iframe, paste the complete code and publish it as part of an educational, tutoring or school website.
The tool is also practical because everything runs in the browser. It does not need a server, database, login system or external software. Students can practise maths directly on the page, check their answers, view hints and learn from worked solutions. The final code was also improved for mobile usability, answer validation and progress saving, making it suitable for real users on both desktop and mobile devices.