Xerte – tworzymy szablon quizu

Artykuł jest niejako odpowiedzią na rosnące zainteresowanie programem Xerte (a szczególnie dokumentacją do niego w języku polskim). Xerte to w pełni funkcjonalne środowisko open source do tworzenia interaktywnych kursów e-learningowych. Oprogramowanie posiada dosyć przystępny system tworzenia oraz dystrybucji szablonów.

Struktura szablonów opiera się na języku XML, więc pewne umiejętności programistyczne będą mile widziane. Plik szablonu można modyfikować ręcznie bądź skorzystać z kreatora szablonów (który należy wcześniej odpowiednio przygotować). Jakiekolwiek zmiany będziemy wprowadzać w późniejszym czasie, wystarczy jedynie modyfikować plik *.xml.

Całość artykułu powstała w oparciu o dokumentację, którą możesz ściągnąć z oficjalnej strony Xerte.

Za chwilę stworzymy od podstaw szablon Quizu, w skład którego będą wchodzić następujące elementy: logo (bądź dowolne tło graficzne), tekst wprowadzający (tzw. intro) oraz grupa pytań z różnymi opcjami do wyboru. Część opcji będzie błędna, a pozostałe będą poprawne, natomiast użytkownik będzie mógł zobaczyć wynik quizu. Wszystkie dane wymagane do utworzenia quizu będą zawarte w pliku xml. W trakcie projektowania szablonu nie wiemy dokładnie ile pytań w ostateczności będzie znajdować się w naszym quizie oraz jak dużo opcji im przypiszemy. Xerte pobiera dane z pliku xml i tworzy właściwą treść w oparciu o informacje, które znajdują się w tym pliku.

Kiedy już utworzysz gotowy szablon będziesz modyfikować jedynie plik xml. Jest to o wiele łatwiejsze niż tworzenie całego projektu od podstaw. Plik xml zawiera tylko te informacje, które mogą podlegać różnym modyfikacjom, zasada samego działania pozostaje niezmienna.

Każda ręczna modyfikacja pliku niesie za sobą pewien margines błędu, dlatego warto stworzyć kreatora, dzięki któremu nie będziemy się martwić czy w pliku zabrakło jakiejś linijki bądź brakuje np. tagu zamykającego. Xerte pozwala w prosty sposób edytować plik xml za pomocą kreatora szablonu (arkusza stylów).

Etap 1:  Tworzymy pliki projektu

Załóż katalog w którym będzie znajdował się cały projekt, np. C:\Program Files\Xerte\templates\mojquiz, a następnie stwórz 3 pliki: quiz.rlo, quiz.xml oraz quiz.xwd (arkusz stylu dla kreatora).

Etap 2: Tworzymy wpisy w pliku quiz.rlo

Otwórz plik quiz.rlo (plik projektu) w dowolnym edytorze i umieść w nim następujący fragment kodu:

	<LO name="Learning Object">
		<IFC name="Interface" title="My Learning Object" visuals="1">
			<PG name="[Untitled]" title="Page Title" help="Page Help" />
		</IFC>
		<BIN name="Deleted Items" />
	</LO>

Etap 3: Tworzymy wpisy w pliku quiz.xml

Otwórz plik quiz.xml w dowolnym edytorze i umieść w nim następujący fragment kodu xml (intro, pytania, opcje). Za pomocą atrybutu background podaliśmy ścieżkę do pliku z grafiką tła. Między tagami <intro></intro> znajduje się nasz tekst wprowadzający do quizu, natomiast pytanie z opcjami do wyboru będzie się znajdować w części <question></question>, przy czym dla każdej opcji należy ustawić właściwy atrybut correct (true/false) tak, aby wiadomo było, która odpowiedź jest prawidłowa.

	<quiz background="FileLocation + 'media/robinHood.png'">
		<intro>To jest mój pierwszy QUIZ</intro>
		<question>
			<prompt>Pytanie nr. 1</prompt>
			<option correct="true">Odpowiedź nr 1</option>
			<option correct="false">Odpowiedź nr 2</option>
		</question>
		<question>
			<prompt>Pytanie nr. 2></prompt>
			<option correct="true">Odpowiedź nr 1</option>
			<option correct="false">Odpowiedź nr 2</option>
		</question>
	</quiz>

Etap 4: Dołączenie szablonu

Otwórz plik quiz.rlo w programie Xerte. W oknie Properties wybierz templateData i przypisz jej wartość FileLocation + ‘quiz.xml’.

Zauważ, że po dodaniu atrybutu templateData ikonka z obiektem Learning Object zmieniła swój wygląd (dodatkowe kółko). Kiedy zbudujemy kreator, będziesz w stanie zmodyfikować plik xml poprzez dwukrotne kliknięcie na powyższą ikonkę.

Etap 5: Budowanie kreatora

Na tym etapie zbudujemy arkusz stylów, który będzie informował Xerte w jaki sposób będzie wyświetlał dane. Przechodzimy do edycji pliku quiz.xwd. Plik .xwd jest plikiem, który powinien posiadać strukturę xml, a jego nazwa powinna być identyczna z nazwą pliku xml. np. quiz.xml -> quiz.xwd. Wszystkie informacje zawierają się pomiędzy tagiem <wizard>. Plik quiz.xwd zawiera wpisy dla każdego węzła, znajdującego się w pliku quiz.xml.

<wizard>
  <quiz duplicate="false">
    <background type="media" label="Plik tła"/>
    <help>To jest przykładowy kreator szablonu quizu. Plik obrazu tła powinien mieścić się w granicach 300 x 450 pikseli</help>
 </quiz>

 <intro type="text" height="300" label="Tekst wprowadzający" duplicate="false">
    <help>Pomoc dla wprowadzenia</help>
  </intro>

  <question>
    <help>Pomoc odnośnie pytania</help>
  </question>

  <prompt type="text" height="300" label="Pytanie" duplicate="false">
    <help>Pomoc dla treści pytania</help>
  </prompt>

  <option type="text" height="100" label="opcja">
    <correct type="ComboBox" options="true,false" label="Odpowiedź" width="100"/>
    <help>Pomoc dla opcji</help>
  </option>
</wizard>

Dla każdego węzła znajdującego się w pliku quiz.xml utworzony został odpowiadający mu węzeł w pliku quiz.xwd. Węzeł definiuje następujące parametry:

• kontrola edycji pliku xml dla tego węzła lub jeden z jego atrybutów; można również określić takie właściwości wysokość lub szerokość,
• czy użytkownik może duplikować węzeł lub nie; w tym przykładzie niektóre elementy nie mogą być powielane – np. jest tylko jeden tekst wprowadzający, pozostałe elementy mogą być powielane co oznacza, że użytkownik może utworzyć dowolną ilość pytań i dowolną liczbę przypisanych mu opcji,
• pomoc dla każdego węzła xml.

W oknie po lewej stronie pojawiła się struktura naszego pliku quiz.xml. Kiedy zaznaczysz dany węzeł, po prawej stronie pojawi się (w zależności od typu węzła) określone pole do uzupełnienia – są to wcześniej wspomniane definicje, które zostały umieszczone w pliku quiz.xwd. Pomoc zdefiniowana w arkuszu stylów znajduje się pod niebieską ikonką z napisem “i”.

W ten sposób stworzyliśmy w pełni funkcjonalnego kreatora, który upraszcza proces edycji pliku quiz.xml. Możesz wybrać tło graficzne dla projektu, uzupełnić tekst wprowadzenia, powielać pytania oraz opcje dla każdego pytania, ustawić które odpowiedzi są błędne, a które prawidłowe, przypisywać tekst pomocy dla każdego węzła.

Etap 6: Tworzenie szablonu

Teraz zbudujemy dynamiczny szablon Xerte, który będzie bazował na pliku xml i utworzy nasz quiz. Zamykamy okno kreatora i przechodzimy do okna projektu Xerte. Wykonamy następujące czynności.

• załadujemy grafikę tła,
• utworzymy tekst wprowadzający,
• utworzymy właściwą liczbę pytań; każde pytanie będzie znajdować się na osobnej stronie oraz będzie posiadać określoną liczbę opcji do wyboru,
• zbudujemy algorytm decydowania o poprawności danej odpowiedzi oraz stworzymy tablicę do przechowywania wyników quizu,
• na koniec zrealizujemy interfejs, dzięki któremu użytkownik otrzyma informację zwrotną o wyniku quizu.

Zgodnie z powyższymi założeniami hierarchia będzie wyglądać w sposób następujący:

Tło projektu

Wystarczy dodać ikonę Graphic do ikony Entry frame (o nazwie tło) i uzupełnić wartość url, którą pobierzemy z pliku quiz.xml

{templateData.quiz[0].background}

Następnie podaj wartości x oraz y, które ustawią grafikę w odpowiednim miejscu.

Tekst wprowadzający

Podobnie postępujemy w przypadku ustawiania tekstu wprowadzającego.

Dodajemy ikonę Text do ikony Page o nazwie intro. W oknie Text podaj paramter, który zwróci nam wartość z tekstem wprowadzającym z pliku quiz.xml, natomiast w oknie Properties podaj położenie tekstu oraz wymiary okna.

Tworzymy określoną liczbę pytań

Zrealizujemy to za pomocą ikony Script. Aby dodać ikonę skryptu należy prawym przyciskiem myszy kliknąć na Learning Object i wybrać “Add Setup Script” albo bezpośrednio dodać ikonę z przybornika ikon. W oknie Script wpiszemy definicję, która sprawdzi ilość zdefiniowanych pytań:

quizData = templateData.quiz[0];
quesCount = templateData.quiz[0].question.length;

Kolejny wpis pozwoli na utworzenie tylu stron ile jest pytań

icon.nextSibling.childNodes[2].duplicate(quesCount-1);

Potrzebujemy również tablicę gdzie zapiszemy wyniki quizu:

tracking = new Array();

.. a także umożliwimy śledzenie generowania strony z pytaniami:

built = new Array();

Na koniec musimy jeszcze gdzieś przechowywać informacje o tym, które odpowiedzi zostały zaznaczone przez użytkownika:

answers = new Array();

Powyższy kod wykonywany jest tylko raz. Należy pamiętać o tym, że plik Xerte jest plikiem xml. Kiedy uruchamiany jest powyższy skrypt, reszta poleceń w pliku quiz.rlo nie jest jeszcze przetwarzana. Oznacza to, że istnieje możliwość budowania struktury, która będzie poddawana przetworzeniu. Powyższy kod duplikuje stronę z pytaniem tyle razy, ile jest pytań w pliku -1 (ponieważ na wstępie dołączyliśmy już pytanie wzorcowe).

Tworzenie strony z pytaniami

Przejdziemy teraz do najtrudniejszej części tworzenia tego projektu. Na stronie z pytaniem (która będzie wielokrotnie powielana) umieścimy treść pytania oraz odpowiednią liczbę opcji do wyboru. Będziemy również potrzebować algorytmu, który sprawdzi czy na pytanie została udzielona właściwa odpowiedź.

W oknie Script umieszczamy kod, który sprawdza bieżący numer pytania (informacja ta będzie wykorzystywana w dalszych etapach budowania projektu).

quesIndex = icon.parentNode.index() - 2;

Następnie konfigurujemy już samo pytanie – do tego celu wykorzystujemy wyrażenie, które odczyta tekst znajdujący się we właściwej części pliku xml.

{templateData.quiz[0].question[quesIndex].prompt}

W kolejnym kroku będziemy budować interakcje w sposób bardzo podobny do wcześniejszych kombinacji z tworzeniem stron pytań.

optCount = quizData.question[quesIndex].option.length;

if (built[quesIndex] != 'true'){
  icon.nextSibling.firstChild.duplicate(optCount - 1);
}
built[quesIndex] = 'true';

Powyższy algorytm ma działać w taki sposób, abyśmy mieli pewność, że dana operacja będzie wykonana tylko raz. Jeśli użytkownik cofnie się do strony, nie możemy pozwolić na to, aby kolejne odpowiedzi na pytanie zostały wysłane. Następnie zbudujemy skrypt, który będzie sprawdzał czy odpowiedź użytkownika jest prawidłowa.

// czy odpowiedź jest prawidłowa?
if (quizData.question[quesIndex].option[icon.parentNode.index()].correct == 'true'){
tracking[quesIndex] = 1;
} else {
tracking[quesIndex] = 0;
}
//przechowaj wynik odpowiedzi
answers[quesIndex] = icon.parentNode.index();

Pokażemy również użytkownikowi, które odpowiedzi zostały wybrane, jeśli powrócił na stronę z pytaniem, na które już została udzielona odpowiedź.

if (answers[quesIndex] != undefined){
  tempIndex = answers[quesIndex];
  icon.previousSibling.childNodes[tempIndex].clip().setValue(true);
}

Tworzenie strony z informacją zwrotną

W celu stworzenia strony z informacją zwrotną do użytkownika użyjemy ikony Text. We właściwościach Text wpiszemy następujące wyrażenie:

{"To jest wynik testu. Udzieliłeś " + tracking.sum() + " prawidłowych odpowiedzi."}

Szablon mamy gotowy. Sprawdźmy wynik naszych działań:

Dystrybucja szablonu

Skoro mamy już gotowy szablon, możemy stworzyć funkcjonalny plik w postaci binarnej, który można przenosić między innych użytkowników Xerte. Wykonaj następujące czynności:

• zmień nazwę pliku z quiz.rlo na quiz.rlt. Rozszerzenie .rlt jest dla Xerte informacją, że do pliku dołączony jest kreator szablonu. W momencie otwarcia pliku Xerte zostaje automatycznie otwarte okno kreatora,
• z menu Templates wybierz Create Template i podaj nazwę dla tworzonego pakietu, np. mojquiz.xtp.

Tak utworzony plik mojquiz.xtp można przenosić pomiędzy innych użytkowników Xerte. Plik mojquiz.xtp po wczytaniu do programu Xerte wygeneruje nam wszystkie pliki szablonu – *.rlt, *.xml,*.xwd oraz pozostałe pliki wchodzące w skład struktury katalogu.

[wpfilebase tag=’file’ id=’2′ tpl=’moj’]