Title: Implementacija interaktivnih sadržaja u različite sustave
Course: Izrada interaktivnog sadržaja u alatu H5P > Section: 3 Implementacija

Preuzimanje i rad s H5P sadržajima

Kod izrade interaktivnih sadržaja često postoji potreba za korištenjem vanjskih izvora (slika, videozapisa, ikona) koje nisu naše autorsko djelo. Upravo je zato važno prije svake uporabe vanjskih sadržaja provjeriti uvjete korištenja.

U tom procesu od velike su koristi Creative Commons licencije koje su najrašireniji sustav otvorenog licenciranja u obrazovanju. Autor uz pomoć Creative Commons licencija jasno određuje pod kojim se uvjetima njegovim djelom može dalje koristiti.

Više informacija o Creative Commons licencijama moguće je pronaći u online tečaju Srca Uporaba Creative Commons licencija na obrazovnim sadržajima (A405) koji je dostupan preko sustava za e‑učenje lms.srce.hr u skupini Kratki tečajevi – prezentacije.

Koristan alat za pretraživanje sadržaja dostupnog pod Creative Commons licencijama nalazi se na ovoj poveznici: https://search.creativecommons.org/.

Postavljanje H5P u Moodle 1

Interaktivni sadržaj H5P možete postaviti u Moodle na dva načina:

1. Umetanje (engl. embed) postojećeg sadržaja H5P napravljenog IZVAN sustava Moodle (s pomoću besplatnog online alata dostupnog na adresi http://www.h5p.org).
2. Izrada novog interaktivnog sadržaja H5P izravno u sustavu Moodle. (opisano u cjelini 2, poveznica)

Umetanje (engl. embed) postojećeg sadržaja H5P napravljenog izvan sustava Moodle

Ako želite dodati postojeći sadržaj napravljen izvan sustava Moodle, potrebno je prethodno preuzeti kôd za umetanje navedenog sadržaja s izvorne adrese (klikom na dugme Embed, desno na dnu prikaza interaktivnog sadržaja) i pohraniti ga na svom računalu/uređaju (najbolje u uređivaču teksta poput Notepada).

Dugme “Embed”

Prozor za preuzimanje kôda za ugradnju

Postavljanje H5P u Moodle 2

Primjer kôda za ugradnju jednog prethodno napravljenog interaktivnog sadržaja:

<iframe src="https://h5p.org/h5p/embed/144767" width="1091" height="639" frameborder="0" allowfullscreen="allowfullscreen">
</iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

Za umetanje postojećeg interaktivnog sadržaja H5P najbolje je koristiti se jednom od vrsta resursa ili aktivnosti ugrađenih u sustav Moodle:

1. Stranica
2. Natpis
3. Knjiga
4. Lekcija

Ovdje ćemo prikazati umetanje postojećeg interaktivnog sadržaja H5P u resurs Stranica (uz napomenu da su koraci za ostale tri vrste resursa i aktivnosti identični):

1. Omogućiti izmjene na razini e-kolegija.

2. U sekciji/temi/cjelini u koju želimo dodati željeni resurs Stranica kliknuti na poveznicu „+Dodaj aktivnost ili resurs“.

3. Odabrati iz izbornika resurs Stranica.

Postavljanje H5P u Moodle 3

4. Na novootvorenoj stranici zadati naslov resursa.

5. U okviru Sadržaj kliknuti na prvu ikonu slijeva u traci s alatima (ikona Proširi alatnu traku, engl. Toolbar toggle), što će otvoriti drugi i treći red ikona (ovisno o tome koji je zadani uređivač teksta na sustavu Moodle)

6. Potom odabrati ikonu Uredi HTML izvorni kôd (treću s lijeve strane u trećem redu).

7. U okvir za sadržaj potrebno je zalijepiti tekst kôda za umetanje željenog sadržaja koji smo preuzeli s izvorne adrese na http://www.h5p.org/, na primjer:

<iframe src="https://h5p.org/h5p/embed/144767" width="1091" height="639" frameborder="0" allowfullscreen="allowfullscreen">
</iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

8. Pohraniti promjene i provjeriti prikazuje li se navedeni sadržaj ispravno.

Postavljanje H5P u Drupal

Nakon instalacije dodatka H5P u Drupalu, sustavu za uređivanje web‑sadržaja, interaktivni sadržaj moguće je dodavati na pojedne web‑stranice.

U inačici Drupal 7 H5P sadržaj dodaje se kao zasebni sadržaj, dok je u inačici Drupal 8 moguće ubaciti interaktivni H5P sadržaj u bilo koji dio web-stranice.

Nakon odabira H5P modula otvara se standardni izbornik za unos H5P sadržaja.

Postavljanje H5P u Wordpress 1

Interaktivni sadržaj H5P možete postaviti u Wordpress na dva načina:

1. Umetanje (engl. embed) postojećeg sadržaja H5P napravljenog IZVAN sustava Wordpress (besplatnim online alatom dostupnim na adresi http://www.h5p.org).
2. Izrada novog interaktivnog sadržaja H5P UNUTAR sustava Wordpress.

Umetanje (engl. embed) postojećeg sadržaja H5P napravljenog izvan sustava Wordpress

Ako želite dodati postojeći sadržaj napravljen izvan sustava Wordpress, potrebno je prethodno preuzeti kôd za umetanje navedenog sadržaja s izvorne adrese (klikom na dugme Embed, desno na dnu prikaza interaktivnog sadržaja) i pohraniti ga na svoje računalo/uređaj (najbolje u uređivaču teksta poput Notepad).

Primjer kôda za umetanje jednog prethodno napravljenog interaktivnog sadržaja:

<iframe src="https://h5p.org/h5p/embed/144767" width="1091" height="639" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

Postojeći interaktivni sadržaj H5P moguće je umetnuti u:

1. stranicu (engl. Page)
2. obavijest (engl. Post).

Ovdje ćemo prikazati umetanje postojećeg interaktivnog sadržaja H5P u obavijest (uz napomenu da su koraci za umetanje u Stranicu identični):

1. Prijaviti se na sustav Wordpress.

2. Otvoriti postojeću obavijest ili stvoriti novu (Obavijesti - Dodaj novu).

3. Kliknuti na karticu Tekst (desno, ispod naslova obavijesti)

4. U okvir za sadržaj potrebno je zalijepiti tekst kôda za umetanje željenog sadržaja koji smo preuzeli s izvorne adrese na http://www.h5p.org/, na primjer:

<iframe src="https://h5p.org/h5p/embed/144767" width="1091" height="639" frameborder="0" allowfullscreen="allowfullscreen"></iframe><script src="https://h5p.org/sites/all/modules/h5p/library/js/h5p-resizer.js" charset="UTF-8"></script>

5. Pohraniti promjene i provjeriti prikazuje li se navedeni sadržaj ispravno.

Postavljanje H5P u Wordpress 2

VAŽNO!
Preduvjet za izradu novog interaktivnog sadržaja unutar sustava Wordpress je instalacija dodatka H5P na razini samog sustava.

Ovdje ćemo prikazati izradu novog interaktivnog sadržaja H5P, vrste Aritmetički test, u ugrađenoj aktivnosti H5P unutar sustava Wordpress (uz napomenu da su koraci za sve ostale vrste interaktivnog sadržaja slične u najvećoj mjeri):

1. Prijaviti se na sustav Wordpress.

2. Otvoriti postojeću obavijest ili stvoriti novu (Obavijesti – Dodaj novu).

3. Kliknuti na ikonu Add H5P:

4. Zadati naslov aktivnosti, npr. “Provjera znanja – zbrajanje”.

5. Odabrati vrstu interaktivnog sadržaja H5P Aritmetički test (engl. Arithmetic test) u padajućem izborniku Select content type, zadati uputu, vrstu matematičke operacije i broj pitanja.

6. Pohraniti promjene i provjeriti prikazuje li se navedeni sadržaj ispravno.

Postavljanje H5P na vanjske stranice

Sadržaj H5P moguće je ubaciti na bilo koju web-stranicu ako je za sadržaj H5P omogućeno uključivanje na vanjske stranice (Embed).

Nakon klika na mogućnost Embed otvara se okvir iz kojeg je moguće kopirati kôd koji se može kopirati na bilo koju web-stranicu koja omogućava unos HTML kôda. U dodatnim postavkama moguće je uređivati veličinu okvira (Size), kao i napredne postavke (Show advanced) s programskim kôdom koji omogućava responzivno ponašanje H5P okvira.