Kódrészletek egyszerű beillesztése a Canvas LMS oldalaiba

Korábbi cikkünkben (Oldal szerkesztése HTML nézetben: előnyök és korlátok c.) bemutattuk, hogy az LMS rendszerek lehetőséget adnak arra, hogy az oldalak tartalmát akár kódnézetben, a HTML és CSS nyelv segítségével is megadjuk.

Ennek előnye, hogy akár egyedi megjelenésű és/vagy felépítésű tartalmi blokkokat is kialakíthatunk, és azokat beilleszthetjük az oldalba.

Lássunk erre egy példát! Tegyük fel, hogy különböző idézeteket és azok szerzőit egységesen az alábbi formában szeretnénk megjeleníteni a Canvas kurzusunk/kurzusaink oldalaiban.

Ezen blokkot például az alábbi HTML kódrészlettel valósíthatnánk meg:

<figure>
<blockquote>
<p>A szavak olyanok, mint a röntgensugár. Ha megfelelőképpen használja őket az ember, bármin keresztülhatolnak.</p>
</blockquote>

<figcaption>&mdash;Aldous Huxley, <cite>Szép új világ</cite></figcaption>
</figure>

A kód magyarázata: A teljes blokk egy figure elemben kerül elhelyezésre, amely a HTML nyelvben az illusztrációnak felel meg. Ezen belül az idézet szövege a szemantikailag neki megfelelő blockquote elemben kerül elhelyezésre. Az illusztráció felirata (figcaption) egy közepes méretű kötőjellel (mdash) indul, majd a szerző nevével folytatódik, a mű címe pedig a cite tagben kerül elhelyezésre. A fenti kód nem tartalmaz stílusbeállításokat, minden elem azzal a stílussal jelenik most meg, amely a Canvas LMS-ben be van állítva.

Ha a fenti kódrészletet el tudnánk menteni és egy gombnyomással a szerkesztőablakba tudnánk beilleszteni, akkor nagymértékben egyszerűsödne a munkánk, amikor a tartalomoldalakat szerkesztjük. A jó hírünk az, hogy ezt meg is tudjuk tenni egy egyszerű kiegészítő (LTI kiterjesztés) telepítésével. De mi az az LTI?

Az LTI modulok használata

Az LMS rendszerek funkciói bővíthetők az úgynevezett LTI (Learning Tools Interoperability) modulok segítségével. Az https://www.eduappcenter.com/ oldalon számos ilyen modult találunk, de figyelembe kell vennünk, hogy ezek közül csak néhányat használhatunk ingyenesen, sok esetben előfizetés szükséges a teljes funkcionalitás eléréséhez.

A  Snippets modul használata

A kódrészletek szerkesztőablakban való használatára ideális választás lehet a Snippets modul, amelynek leírása a https://www.eduappcenter.com/apps/6197?filter_text=snipp#.YST-GY4zaHs címen érhető el.

A modul lényege, hogy telepítés után a szerkesztőablak kiegészül egy speciális ikonnal, amelyre kattintva különböző kódrészleteket tudunk elhelyezni a kódban, akár olyanokat is, amelyeket mi készítettünk.

1. ábra: Snippets ikon a szerkesztő eszköztáron (Canvas LMS)

Az ikon megnyomása után az alábbi ablak jelenik meg, ahol bal oldalon kiválaszthatjuk a megfelelő kódrészletet, amelynek előnézete jobb oldalon megjelenik. Az Insert gombra kattintva az adott kódrészlet beillesztésre kerül az oldalra.

2. ábra: Snippets bővítmény ablaka a Canvas LMS rendszerben

A modul lehetővé teszi, hogy saját snippeteket (kódrészleteket) is elhelyezzünk. Ehhez a My Snippets szakaszban az Add Snippet gombra kell kattintani. Ezután megadhatjuk a kódrészlet nevét (name), illetve a hozzá tartozó kódot (HTML).

Az alábbiakban például egy olyan kódrészletet adtunk meg, amellyel egy piros, dupla szegélyű blokkban lehet egy szöveget megjeleníteni.

3. ábra: Snippet hozzáadása

A mentés után az ablakban már a saját kódrészletünk is kiválaszthatóvá válik a My Snippets szakaszban.

4. ábra: Saját Snippet kiválasztása

Ügyeljünk arra, hogy a kódrészlet csak azon a számítógépen érhető el, amelyen a hozzáadást elvégeztük, mivel ezt az információt a helyi számítógépen tárolja el a böngészőprogram!

A modul telepítése a Canvas LMS rendszerben

Amennyiben elnyerte tetszését a bővítmény, az alábbi lépésekkel telepítheti a Canvas kurzusába:

1. Kattintson a kurzusának Beállítások gombjára!

2. Válassza ki az Alkalmazások fület!

3. Kattintson a +Alkalmazás gombra!

4. A konfiguráció típusa legördülő menüben válassza ki az URL szerint értéket!

5. A név mezőbe írja be a következőt: "Snippets"!

6. A konfigurációs URL mezőbe másolja be a következő címet: https://snippets.wyelearning.com/config.xml

7. Ellenőrizze, hogy sikeres volt-e a telepítés! Amennyiben igen, akkor a tartalom szerkesztésénél már megjelenik az új ikon az eszköztáron.

A Canvas LMS rendszer működéséről további információkat tudhat meg a Canvas kézikönyvből, a Gyakran Ismételt Kérdések listájából, valamint képzéseinken.