GS Creator
W rozwoju

GS Creator

Interaktywne ćwiczenia: edytor + silnik

GS Creator to platforma do tworzenia i odtwarzania interaktywnych ćwiczeń edukacyjnych. Autor układa ćwiczenie w edytorze, a silnik odtwarza je w aplikacji — w przeglądarce, a docelowo także na urządzeniach mobilnych.

Otwórz edytorZobacz przykładyCo jest w której wersji

Z czego składa się GS Creator

GS Engine

v0.0.15

Silnik odtwarzający ćwiczenia z plików JSON. Docelowo biblioteka JS do osadzania w aplikacjach web oraz natywnie na iOS/Android.

Haxe 4.3 · OpenFL · target html5

GS Editor

v0.0.47

Wizualny edytor ćwiczeń: scena, paleta Componentów, inspektor właściwości, biblioteka zasobów, walidacja i eksport JSON dla silnika.

Angular 22

Jak to działa

  1. 1

    Projektujesz w edytorze

    W GS Editor układasz scenę z pięciu Componentów (Image, Text, Component, Container, Target), przypisujesz obrazki, napisy i dźwięki, ustawiasz opcje Componentów, regułę rozwiązania i akcje (np. dźwięk, ukrycie elementu albo zmianę jego wyglądu).

  2. 2

    Eksportujesz JSON

    Edytor zapisuje ćwiczenie jako plik projekt.json + folder zasobów. Format pliku to wspólny schemat między edytorem a silnikiem.

  3. 3

    Silnik odtwarza

    GS Engine wczytuje JSON, sprawdza wymagane funkcje, buduje scenę z Componentów i ocenia ruchy gracza według reguły rozwiązania (np. zaznaczanie).

  4. 4

    Osadzasz w aplikacji

    Docelowo silnik działa jako biblioteka w aplikacjach web (Angular, React) oraz natywnie na iOS i Androidzie.

Przykład: Posprzątaj pokój

Owoce do koszyka, zabawki do pudełka, pluszaki na poduszki. Kosze mieszczą wiele elementów (capacity: many), poduszki po jednym (capacity: 1); zły ruch wraca na miejsce, dobry zostaje zablokowany.

Wymagane funkcje: element.imageelement.textelement.componentelement.targetvisual.textcomponent.draggabletarget.capacitytarget.snaprule.placeaction.play-soundaction.lockaction.returnaction.emit-particles

Szczegóły i plik JSON

Schemat JSON

Edytor i silnik łączy jeden format pliku ćwiczenia (wersja 2.4). JSON ćwiczenia: schema (wersja schematu), requires (funkcje silnika użyte w ćwiczeniu), size, język, assets (pliki z paczki ćwiczenia albo zasoby wspólne z bibliotek libraries), elements (scena z pięciu Componentów: Image, Text, Component, Container, Target — z położeniem, warstwą, wyglądem ze stanami, opcjami Componentu, np. punktem zaczepienia linii anchor punktu łączonego, i akcjami w on), rule (reguła rozwiązania: select, place, connect — z kropką na końcach linii endDot — albo open) i on (akcje globalne). Od wersji 2.4 etykiety i opisy w katalogu silnika są tekstami wielojęzycznymi (pl, en). Przykład pliku z tłem, poleceniem i jednym elementem do zaznaczenia:

{
  "schema": "2.0",
  "requires": ["element.image", "element.text", "element.component", "visual.text", "component.clickable",
               "rule.select", "action.play-sound", "action.hide"],
  "id": "owoce",
  "size": { "width": 1200, "height": 675 },
  "languages": ["pl", "en"],
  "defaultLanguage": "pl",
  "assets": [
    { "id": "background", "kind": "image", "src": { "default": "images/background.png" } },
    { "id": "apple", "kind": "image", "src": { "default": "images/apple.png" } },
    { "id": "good", "kind": "audio", "src": { "default": "sounds/good.wav" } }
  ],
  "elements": [
    { "id": "background", "type": "image", "rect": [0, 0, 1200, 675], "layer": 0,
      "visual": { "type": "image", "asset": "background" } },
    { "id": "instruction", "type": "text", "rect": [60, 50, 1016, 70], "layer": 2,
      "visual": { "type": "text", "text": { "pl": "Zaznacz <b>owoce</b>.", "en": "Select the <b>fruit</b>." },
                  "size": 40, "align": "center" } },
    { "id": "apple-1", "type": "component", "rect": [60, 150, 220, 220], "layer": 1,
      "visual": { "type": "image", "asset": "apple" }, "clickable": true,
      "on": { "correct": [ { "do": "play-sound", "asset": "good" }, { "do": "hide", "target": "self" } ] } }
  ],
  "rule": { "kind": "select", "correct": ["apple-1"] }
}