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.
Co powstało w ramach projektu generatora matematycznego?
Powstała samodzielna aplikacja oparta na HTML, CSS i JavaScript, przygotowana do wstawienia na stronę Wix przez element Embed Code / HTML iframe. Nie wymaga własnego serwera, bazy danych, konfiguracji Velo ani zewnętrznych skryptów. Uczeń wybiera komisję egzaminacyjną, poziom, temat, podtemat i trudność, a następnie losuje zadania, wpisuje odpowiedzi i notatki, otwiera podpowiedzi oraz rozwiązania. Aplikacja pokazuje także liczbę prób, poprawnych odpowiedzi, skuteczność, serię poprawnych rozwiązań i liczbę wygenerowanych zadań.
Jak przetestowano kod przed użyciem na stronie Wix?
Pierwszy etap obejmował kontrolę składni JavaScript i działania samodzielnego dokumentu HTML, dostępności elementów interfejsu, generowania pytań, wpisywania odpowiedzi i ich sprawdzania. Nie wykryto błędów wykonania ani błędów konsoli. Następnie przetestowano wszystkie kombinacje poziomu, tematu, podtematu i trudności: łącznie 380 przypadków. Wszystkie 380 testów zakończyło się powodzeniem, bez nieudanych kombinacji.
Dlaczego taki generator jest przydatny na stronach Wix?
Właściciel witryny edukacyjnej może wkleić gotowy dokument do elementu HTML iframe, bez budowania serwera, bazy danych czy systemu logowania. Uczniowie ćwiczą na tej samej stronie, sprawdzają odpowiedzi, korzystają z podpowiedzi i poznają rozwiązania krok po kroku. Aplikację przygotowano również z myślą o telefonach, walidacji odpowiedzi i zapisie postępów w przeglądarce.