MerixStudio

Jak zbudowaliśmy interaktywne narzędzia e-learningowe w HTML5 dla wydawnictwa edukacyjnego z Irlandii?

Dla Educational Company of Ireland – jednego z największych wydawców i dystrybutorów podręczników oraz materiałów edukacyjnych w Irlandii, przygotowaliśmy zestaw interaktywnych narzędzi, będących uzupełnieniem nowowydanego podręcznika z matematyki.

Przygotowane przez nas projekty działają na zasadzie elearningu – dzięki nim, uczeń wraz z rodzicami, może w domu ćwiczyć zagadnienia z matematyki, pogłębiać ich rozumienie, sprawdzać swoją wiedzę, a także bawić się – gdyż zrealizowane ćwiczenia przeznaczone zostały dla uczniów szkół podstawowych, tak by uczyć poprzez zabawę.

HTML5 vs Flash

Poprzednie realizacje dla EDCO przygotowane zostały z wykorzystaniem technologii Adobe Flash. W przypadku tego projektu zależało nam jednak na nowoczesnym produkcie, który będzie responsywny w pewnym zakresie (tablet -> laptop -> desktop) i możliwy do uruchomienia na wielu urządzeniach. Był to główny powód, dla którego zrezygnowaliśmy z Adobe Flash – w chwili obecnej plug-in nie jest obsługiwany przez niemal żadne przeglądarki internetowe dostępne na urządzeniach mobilnych.

Poza tym, nasz zespół zdecydowanie lepiej potrafi wykorzystać nowoczesne techniki realizacji projektów internetowych, które opierają się na HTML5, CSS3 i Canvas. Jeśli chcesz sprawdzić, co potrafimy, zapraszamy na stronę naszej marki MerixGames.

Zrezygnowaliśmy z technologii Flash, ponieważ zależało nam na dostępności na wielu urządzeniach, przede wszystkim tablet -> laptop -> desktop

SVG

Jednym z założeń projektowych było sprawne i estetyczne działanie przygotowanych ćwiczeń na ekranach o różnych rozdzielczościach – od 1024x768 do 1920x1080. W tym celu postanowiliśmy wykorzystać elementy graficzne w formacie SVG (ang. Scalable Vector Graphics). Użycie wektorów pozwala na skalowanie grafiki bez starty jakości na każdej rozdzielczości, dzięki temu mamy pewność, że dany element graficzny będzie estetyczny, niezależnie od rozdzielczości, na której się wyświetla. Co więcej, struktura plików SVG pozwala na ich łatwą edycję, co pozwoliło nam osiągnąć wymagany poziom interakcji w każdym z ćwiczeń.

Animacje

Realizacja został podzielony na dwa podprojekty. W ramach pierwszego z nich przygotowaliśmy 22 interaktywne animacje, których zadaniem było pokazanie:

Każda z animacji składa się z poszczególnych kroków, użytkownik może animacje w dowolnej chwili zatrzymać, uruchomić ponownie i przeskoczyć do dowolnego kroku. Zagadnieniem niełatwym do zrealizowania była synchronizacja animacji poszczególnych kroków z możliwością przełączania się miedzy nimi. W tym celu przygotowaliśmy system zarządzania animacjami – poszczególne sceny i elementarne ruchy animowanych obiektów zapisywane są w formacie JSON – co pozwala na szybkie i efektywne przełączanie się między nimi.

Konstrukcje geometrycznie nieraz wymagały użycia konkretnego kąta, np. 70 stopni. Z racji responsywności całego systemu nie było to łatwe zadanie i wymagało od nas skrajnie matematycznego podejścia do problemu. Przygotowaliśmy dodatkowy mechanizm, który obliczał pozycje, kąty i wartości obrotu poszczególnych animowanych elementów, a następnie wykonywał odpowiednio zaplanowaną animację.

Z uwagi na wymaganą responsywność zadanie wymagało od nas skrajnie matematycznego podejścia do projektowania aplikacji.

Konstrukcje są rysowane za pomocą standardowych narzędzi typu linijka, ekierka i kątomierz. Najbardziej problematycznym okazał się cyrkiel, który składa się z trzech niezależnych elementów – dwóch ramion i łączącego je korpusu. W ten sposób, zamiast jednego obiektu otrzymaliśmy trzy zupełnie niezależne. Animowanie cyrkla wymagało nieustannego sprawdzania pozycji ramion cyrkla względem łączącego je korpusu oraz synchronicznego ruchu trzech elementów jednocześnie gdy cyrkiel jako narzędzie zmieniał swoją pozycję.

Ćwiczenia

Druga część projektu polegała na stworzeniu 8 ćwiczeń interaktywnych. Każde z nich dotyczyło innego zagadnienia.

1. Prawdopodobieństwo

Celem ćwiczenia jest przybliżenie pojęcia prawdopodobieństwa. Na przykładzie czterech rodzajów obiektów (moneta, kość, koło z kolorami oraz karty do gry) użytkownik może sprawdzić jak prawdopodobne jest wylosowanie np.: 6 oczek na jednej kości i jak to prawdopodobieństwo rośnie gdy kości jest więcej. Można też symulować losowanie karty z tali kart, przy czym talię można konfigurować tak, by użytkownik mógł sprawdzić jak prawdopodobne jest wylosowanie damy kier, gdy talia składa się z samych dam lub jak często uda nam się wyciągnąć asa pik – gdy losujemy z pełnej talii składającej się z 52 kart.

2. Częstotliwość

Narzędzie to jest naturalną kontynuującą poprzedniego. Korzystając z tych samych obiektów (moneta, kość, koło z kolorami oraz karty do gry) użytkownik może zobaczyć rozkład wyników w zależności od ilości prób (np.: 100000 rzutów kością do gry). Dzięki temu może lepiej zrozumieć pojęcie statystyki i częstotliwości.

3. Zbiory

Wykorzystując kilka przygotowanych szablonów oraz pięć rodzajów elementów (zwierzęta, owoce, litery, liczby oraz kształty), użytkownik może dowolnie ćwiczyć operacje na zbiorach. Najpierw odpowiednio zbiory przygotowując (lub korzystając z przykładów predefiniowanych) i następnie realizując operacje na zbiorach (typu suma, iloczyn i iloraz).

Użytkownik ma za pomocą prostego mechanizmu drag&drop może przeciągać elementy z listy bocznej na odpowiednią pozycję w danym zbiorze. Niełatwym zadaniem było przekształcenie pozycji z elementu SVG na pozycję ekranu, aby to rozwiązać wdrożyliśmy mechanizm zmiany pozycji wg aktualnej skali elementu SVG.

4. Oś liczbowa

Proste ćwiczenie wizualizujące faktyczną różnicę (odległość) między poszczególnymi liczbami na osi liczbowej. Pozwala lepiej zrozumieć przemienność dodawania i mnożenia, liczby niecałkowite oraz ułamki zwykłe. Wdrożyliśmy tu mechanizm drag&drop , który w wygodny sposób pozwala na wprowadzanie zmian w danej osi liczbowej.

5. Ułamki

W ramach tego narzędzia zapoznajemy użytkownika z konceptem liczby niecałkowitej. Przede wszystkim prezentujemy ułamki w formie łatwiej do zrozumienia np.: pizzy podzielonej na kilka kawałków. Co więcej, wyświetlamy kilka form danej liczby – ułamek zwykły, dziesiętny oraz wartość procentowa. Użytkownik może dowolnie modyfikować wartości ułamków, wygodnie je ze sobą porównywać oraz zdecydować o wyświetleniu wartości losowych.

W tym ćwiczeniu również natrafiliśmy na problem z skalowaniem wizualizacji danego ułamka (np.: pizzy) w różnych rozdzielczościach i zachowaniem przy tym odpowiedniej pozycji. Aby go rozwiązać wdrożyliśmy rozwiązanie znane już z ćwiczenia o zbiorach.

6. Diagram kołowy

Wachlarz predefiniowanych przykładów pozwala na zapoznanie się z konceptem i użytecznością diagramu kołowego. Ponadto użytkownik może tworzyć własny diagram, korzystając z dowolnych wartości, które automatycznie sumujemy do 100 procent. Może własnoręcznie decydować o kolorach poszczególnych sekcji oraz opisywać je w wygodny dla siebie sposób.

Diagram kołowy możemy być podzielony na dowolną ilość sekcji o różnej wielkości. Każda część posiada swoją etykietę. Problemem było znalezienie optymalnego punktu łączenia etykiety z odpowiednią częścią wykresu. W tym celu każda etykieta posiada 8 punktów zaczepienia dookoła swojego obszaru. Dla każdego z punktów liczona jest odległość do odpowiedniej sekcji wykresu. Linia łącząca rysowana jest dla punktu, dla którego odległość ta była najkrótsza.

7. Funkcje

Bardzo proste narzędzie, które pokazujące na predefiniowanych przykładach w jaki sposób można zobrazować najprostsze czynności (wzrost kwiatka, oszczędności, etc.) jako proste wykresy funkcji matematycznych. Co więcej użytkownik może tworzyć własne wykresy, wykorzystując szeroki wachlarz przygotowanych szablonów oraz korzystając z interfejsu drag&drop do tworzenia i modyfikacji istniejących punktów.

Użytkownik może dodawać punkty na wykresie na dwa sposoby – albo klikając w miejscu gdzie dany punkt ma być dodany albo wpisując wartość X i Y w tabeli z danymi. Aby odpowiednio synchronizować rysowane punkty z ich wartościami na wykresie, stworzyliśmy względny układu współrzędnych w skali, dzięki której mogliśmy przeliczać wartość pikselową na wartość jednostkową i tym samym odpowiednio pozycjonować dany punkt na wykresie.

8. Geometria

Zdecydowanie najbardziej rozbudowane narzędzie, zasadą działania przypomina wektorowy edytor graficzny. Użytkownik może rysować dowolne kształty, linie proste, prostokąty oraz elipsy. W przestrzeni rysowania może wprowadzać dowolny teksty oraz korzystać z dodatkowej tabeli symboli matematycznych. Aby lepiej zobrazować relacje między geometrią a rzeczywistością wprowadziliśmy bank kilkudziesięciu obrazków (drzewo, most, plan mieszkania, boisko, etc.), na których użytkownik może pokazać różne zagadnienia geometryczne, np.: twierdzenie pitagorasa, różnice między polem a obwodem oraz zagadnienie trójkątów przystających.

W przypadku tego ćwiczenia natrafiliśmy na naprawdę trudny problem. Gdy użytkownik obrócił dany obraz SVG o dowolny kąt i zmienił jego rozmiary, ten w niekontrolowany sposób przeskakiwał na inną pozycje w przestrzeni rysowania. Okazało się, że każdy element SVG używa swojego lokalnego układu współrzędnych i w momencie obrócenia obiektu, obracany również jest układ współrzędnych danego obrazka. Aby rozwiązać ten problem, zdecydowaliśmy zmienić punkt wg którego obiekt jest skalowany - z punktu w górnej prawej krawędzi obiektu na punkt znajdujący się na środku obiektu. Skalowanie względem punktu środka rozwiązuje problem, gdyż pozycja obiektu przy skalowaniu się nie zmienia.

Gdy implementowaliśmy obsługę urządzeń dotykowych, okazało się, że punkty pozwalające na skalowanie i zmianę rozmiaru danego elementu nie przechwytywały zdarzeń dotykowych. Aby rozwiązać ten problem, poza standardowymi instrukcjami dotykowymi przygotowanymi dla przestrzeni rysowania, wdrożyliśmy dodatkowe przechwytywanie zdarzań dokładnie na tych punktach.

Podsumowanie

E-learning, czyli nauka z wykorzystaniem narzędzi multimedialnych i dostępu do Internetu doskonale uzupełnia tradycyjny proces nauczania. Do zalet e-learningu często zalicza się:

Dzięki najnowszym technologiom HTML5, CSS3, SVG i Canvas, aplikacja elearningowa może zostać dostosowana do wielu urządzeń – pozwalać na naukę, przy komputerze stacjonarnym, na tablecie, a nawet na telefonie

Rozwój tych technologii zdejmuje kolejne ograniczenia i pozwala na coraz większą kreatywność w tworzeniu takich narzędzi.

Co najważniejsze jednak – ta metoda pozyskiwania i uzupełniania wiedzy, cieszy się coraz większym uznaniem i popularnością wśród odbiorców i to z bardzo różnych grup od dzieci i młodzieży szkolnej, przez pracujących dorosłych (poszerzanie kompetencji pracowniczych) do osób starszych, które stawiają pierwsze kroki w Internecie.