Interaktywny generator ćwiczeń matematycznych dla Wix
Przegląd projektu
To case study przedstawia opracowanie i testowanie interaktywnego generatora ćwiczeń matematycznych przeznaczonego do działania wewnątrz elementu HTML iframe na stronie Wix. Celem było stworzenie narzędzia działającego bezpośrednio w przeglądarce, które pozwala uczniom generować zadania, zapisywać własne obliczenia, sprawdzać odpowiedzi, korzystać ze wskazówek i analizować pełne rozwiązania krok po kroku.
Końcowe rozwiązanie zostało przygotowane jako jeden samodzielny dokument zawierający HTML, CSS i JavaScript. Kod można wkleić do elementu Embed Code / HTML iframe w Wix i opublikować jako interaktywne narzędzie na stronie szkoły, korepetytora, nauczyciela lub platformy edukacyjnej. Aplikacja nie wymaga backendu, zewnętrznych skryptów, systemu logowania ani konfiguracji Wix Velo.
Cel projektu
Głównym celem było stworzenie praktycznego narzędzia matematycznego, które można szybko i bezpiecznie dodać do strony Wix. Generator miał obsługiwać różne poziomy edukacyjne, komisje egzaminacyjne, tematy, podtematy i poziomy trudności, a jednocześnie pozostać prosty dla ucznia. Interfejs musiał być czytelny zarówno na komputerze, jak i na telefonie.
Zastosowane rozwiązanie
Użytkownik wybiera poziom, temat, podtemat i trudność, a następnie generuje losowy wariant zadania. Każde ćwiczenie może zawierać treść pytania, potrzebny wzór lub metodę, diagram, miejsce na notatki, pole odpowiedzi, przycisk sprawdzania, podpowiedź oraz rozwiązanie krok po kroku. Panel postępów pokazuje liczbę prób, poprawne odpowiedzi, skuteczność, serię poprawnych wyników, liczbę wygenerowanych pytań, aktualny temat, trudność, identyfikator ćwiczenia i wariantu.
Najważniejsze funkcje
Losowe generowanie pytań według wybranego poziomu, tematu i trudności.
Sprawdzanie odpowiedzi liczbowych, algebraicznych, procentowych, współrzędnych, walut i odpowiedzi wieloelementowych.
Obsługa jednostek, między innymi cm, cm², cm³, km/h, m/s, kg, N, Nm, stopni i walut.
Wskazówki, diagramy, miejsce na notatki i pełne rozwiązania krok po kroku.
Responsywny interfejs i lokalne zapisywanie postępów przez localStorage.
Ulepszenia wprowadzone podczas przeglądu
Obszar | Wykryty problem | Wprowadzone rozwiązanie |
Sprawdzanie odpowiedzi | Niektóre poprawne odpowiedzi z jednostkami były odrzucane. | Rozszerzono parser o popularne jednostki i naturalne formaty odpowiedzi. |
Klawiatura mobilna | Pole odpowiedzi zawsze otwierało klawiaturę dziesiętną. | Dodano dynamiczny typ pola: liczby używają klawiatury numerycznej, a algebra i tekst zwykłej. |
Postępy | Wyniki znikały po odświeżeniu strony lub iframe. | Dodano localStorage dla prób, poprawnych odpowiedzi, serii i liczby wygenerowanych zadań. |
Wyniki testów kodu
Pierwszy test obejmował składnię JavaScript, poprawne uruchomienie dokumentu HTML, obecność wymaganych elementów DOM, generowanie pytania, otwieranie panelu zadania, sprawdzanie odpowiedzi i kontrolę błędów wykonania. Wszystkie elementy przeszły test, a w konsoli nie wykryto błędów blokujących działanie.
Drugi test sprawdzał generator we wszystkich dostępnych kombinacjach poziomu, tematu, podtematu i trudności. Przetestowano 380 kombinacji. Wszystkie 380 zakończyły się powodzeniem, a liczba nieudanych kombinacji wyniosła 0.
Test | Wynik |
Ładowanie dokumentu i podstawowy przepływ użytkownika | Zaliczony |
Pełny test kombinacji generatora | 380 z 380 zaliczonych, 0 błędów |
Wdrożenie w Wix
Kod należy umieścić w elemencie Embed Code / HTML iframe. Zalecana szerokość to 100%. Wysokość powinna być dopasowana do zawartości: około 900–1100 px na komputerze i 1200–1500 px na urządzeniach mobilnych, jeżeli widoczne jest pole notatek. W razie potrzeby należy włączyć przewijanie, aby żadna część aplikacji nie została przycięta.
Oryginalny dokument techniczny pozostaje samodzielnym kodem HTML, CSS i JavaScript. Elementy programistyczne, nazwy funkcji, identyfikatory i składnia nie powinny być tłumaczone, ponieważ mogłoby to uszkodzić działanie aplikacji. Tłumaczeniu podlega opis projektu i tekst interfejsu przeznaczony dla użytkowników.
Rezultat
Rezultatem jest kompletne, responsywne narzędzie do ćwiczeń matematycznych, które można osadzić na stronie Wix i uruchomić bez dodatkowej infrastruktury. Generator wspiera wiele typów odpowiedzi, działa na urządzeniach mobilnych, zapisuje postępy w przeglądarce i przeszedł pełne testy 380 kombinacji bez błędów. Projekt pokazuje, że rozbudowana aplikacja edukacyjna może działać w Wix bez backendu, zewnętrznych bibliotek i Wix Velo.
Czym jest generator ćwiczeń matematycznych dla Wix?
Jest to samodzielna aplikacja HTML, CSS i JavaScript do generowania ćwiczeń matematycznych, sprawdzania odpowiedzi, wyświetlania wskazówek i prezentowania rozwiązań krok po kroku bezpośrednio na stronie Wix.
Jak przetestowano generator?
Kod został sprawdzony pod kątem składni, ładowania strony, działania interfejsu, generowania pytań, sprawdzania odpowiedzi i błędów wykonania. Dodatkowo przetestowano 380 kombinacji poziomu, tematu, podtematu i trudności; wszystkie zakończyły się powodzeniem.
Dlaczego to rozwiązanie jest przydatne dla stron Wix?
Rozwiązanie jest przydatne dla stron Wix, ponieważ można je wdrożyć jako samodzielny dokument HTML w elemencie Embed Code. Nie wymaga serwera, bazy danych, logowania, zewnętrznych bibliotek ani Wix Velo. Uczniowie ćwiczą bezpośrednio na stronie, a postępy mogą być zapisywane lokalnie w przeglądarce.