Title: Kako napraviti interaktivni sadržaj Prenesi i postavi (Drag and Drop)
Course: Izrada interaktivnog sadržaja u alatu H5P > Section: 2_5 Prenesi i postavi (Drag and drop)

Prenesi i postavi (Drag and Drop)

Interaktivni sadržaj Prenesi i postavi (engl. Drag and Drop) koristi se za izradu pitanja u kojima se od polaznika traži da prenesu dio teksta ili slike i postave ga na odgovarajuće mjesto.

Ova vrsta pitanja korisna je za utvrđivanje povezanosti jednog ili više pojmova uz korištenje vizualnih elemenata. Grupiranje elemenata koji imaju zajedničke osobine, postavljanje elemenata u ispravan poredak ili postavljanje elemenata na ispravnu poziciju, neki su od mogućih primjena u nastavi.

Scenarij pripreme

1.  Što želim napraviti?

Tema

Potrebno je povezivati imena i prezimena poznatih znanstvenica, dobitnica Nobelovih nagrada, s njihovim fotografijama

2.   Što trebam pripremiti?

Plan izrade pitanja

Za izradu ove vrste pitanja potrebni su minimalno ovi podaci:

- Naziv interaktivnog sadržaja (Title) koji se koristi za interno pretraživanje i nije vidljiv polaznicima
- Veličina područja koje će se koristiti za prijenos elemenata (izražena u pikselima) (Task size)
- Tekstovi i slike koji su elementi zadatka (Task).

Prije početka izrade sadržaja kao radni materijal za pripremu može poslužiti ovakva tablica:

Naziv H5P sadržaja | Poznate znanstvenice dobitnice Nobelovih nagrada
Veličina područja koje će se koristiti za prijenos elemenata (u pikselima) | 620 x 310
Ispravno povezana područja | Izvor: https://www.photosforclass.com/search/marie%20curie | Marie Curie
Izvor: https://commons.wikimedia.org/wiki/File:Barbara_McClintock_(1902-1992)_shown_in_her_laboratory_in_1947.jpg | Barbara McClintock

Realizacija

3. Kako ću to realizirati?

Postupak izrade sadržaja Drag and Drop

1. S popisa interaktivnih sadržaja odaberite Drag and Drop.

2. U polje Title upišite željeni naziv interaktivnog sadržaja.

3. U ovom trenutku na redu je izrada samog pitanja. Kod ovog interaktivnog sadržaja izrada pitanja sastoji se od dva koraka. U prvom koraku postavlja se pozadinska slika.  To je slika na koju će se postavljati područja na koja će polaznici trebati povući određeni pojam ili drugu sliku. Za dodavanje slike odaberite dugme Add.

U prvom je koraku potrebno i odrediti veličinu područja (Task size) koje će se koristiti za pomicanje sadržaja. Prvi unos predstavlja širinu, a drugi visinu u pikselima (px).

Realizacija 2

4. Za prelazak na drugi korak odaberite Task. U ovom se dijelu određuju područja na koja će biti moguće prenijeti tekst, slike ili područja unosa (Drop Zone) te sadržaj koji će se moći prenositi.

Određivanje područja unosa

5. Počet ćemo s određivanjem područja (Drop Zone) na koje će se moći prenijeti tekst Kliknite na dugme, nakon čega će se otvoriti dijaloški okvir za podešavanje postavki područja prijenosa. Ovdje je moguće upisati naziv područja (Label), odabrati hoće li se naziv prikazivati (Show label), odrediti prozirnost pozadine (Background Opacity), pri čemu je 100 neprozirno, a 0 prozirno.

- U području Tips and feedback moguće je dodatno uređivati naputke za rješavanje i povratne poruke nakon ispravnog ili neispravnog povezivanja.

Određivanje područja unosa 2

6. Naposljetku u posljednjem se dijelu određuje hoće li ovo područje koje se izrađuje sadržavati samo jedan element (This drop zone can only contain one element) te hoće li se automatski poravnati svi elementi koji će se postaviti u ovo područje (Enable Auto-Align).

7. U ovom primjeru najprije će se izraditi područje s ovim postavkama:

- naziv (Label): Barbara McClintock
- neprozirno: Background Opacity = 0
- omogućeno prihvaćanje samo jednog elementa u području: uključena mogućnost This drop zone can only contain one element.

8. Novo se područje unosi klikom na dugme Done.

9. Nakon unosa područja na pozadinskoj se slici pojavi područje (Drop Zone). Područje je moguće pomicati i dodatno uređivati klikom miša na označeno područje.

10. Za unos novog područja potrebno je ponoviti postupak opisan od 5. do 9. koraka. U ovom primjeru dodat će se još jedno područje s ovim postavkama:

- naziv (Label): Marie Curie
- neprozirno: Background Opacity = 0
- omogućeno prihvaćanje samo jednog elementa u području: uključena mogućnost This drop zone can only contain one element.

Unos teksta i slika

11.Nakon unosa područja potrebno je ubaciti tekst ili slike koje će biti moguće pomicati. Za unos teksta potrebno je kliknuti na dugme  , a za slike na dugme .

12. Nakon odabira dugmeta za unos teksta otvara se dijaloški okvir u kojem je moguće uređivati postavke tekstualnog okvira. Na ovom je mjestu moguće uređivati ove mogućnosti:

  - tekst koji će se prikazati na pomičnom elementu (Text)
  - područja u koja će biti moguće prenijeti elemente (Select drop zones)
  - prozirnost pozadine (Background Opacity) pri čemu 100 predstavlja iznos za neprozirnu pozadinu, a 0 za prozirnu
  - mogućnost kopiranja elementa (Infinite number of element instances).

U ovom primjeru prvi tekst koji će biti moguće prebacivati je ime i prezime znanstvenice „Marie Curie“ i navedeni element će biti moguće prenijeti u prethodno izrađena područja koja imaju nazive poznatih znanstvenica (Barbara McClintock i Marie Curie).

Napomena: U ovom dijelu postavki određuje se ponašanje elementa, a ne ispravnost odgovora!

Unos teksta i slika 2

13. Novi tekstualni element ubacuje se klikom na dugme Done. Nakon unosa okvir s tekstom pojavit će se u području za izradu zadatka. Tekstualni element moguće je premještati na željenu poziciju.

14. Ponavljanjem postupaka opisanih u koracima 12. i 13. moguće je dodavati dodatne tekstualne elemente.

15. Za unos slika potrebno je odabrati dugme . U dijaloškom okviru koji se otvori nakon odabira dugmeta moguće je unijeti sliku (Add), postaviti alternativni tekst (Alternative text), tekst koji će se prikazati nakon prelaska mišem iznad slike (Hover text), odabrati područja u koja će biti moguće prenijeti sliku (Select drop zones), prozirnost pozadine (Background Opacity) i mogućnost kopiranja elementa (Infinite number of element instances). Slika se unosi klikom na dugme Done.

Unos teksta i slika 3

16. U ovom primjeru dodat će se fotografije znanstvenica. Nakon dodavanja fotografija ubačeni su svi potrebni elementi – područja unosa (pravokutnici s isprekidanim okvirom, fotografije znanstvenica i njihova imena.

Prije prelaska na sljedeći korak potrebno je dodatno urediti poziciju elemenata.

Uređivanje ispravnog odnosa među elementima

17. Nakon unosa područja za unos i elemenata koji će se prebacivati potrebno je dodatno urediti ponašanje elemenata, tj. odrediti njihov ispravan odnos. U ovom primjeru ispravan će odgovor biti ako se ime i prezime prenese na ispravnu sliku znanstvenice. Za uređivanje ponašanja elemenata potrebno je ponovno otvoriti postavke područja (Drop Zone) (nakon klika na područje pojavit će se izbornik iz kojeg se odabere Edit).

18. U izborniku su se sada pojavili dodatni elementi (Select correct elements). U ovom popisu prikazuju se svi prethodno izrađeni tekstualni elementi. U ovom primjeru na raspolaganju su dva tekstualna elementa između kojih je potrebno izabrati onaj ispravan (Marie Curie  s obzirom na to da se određuje točan odgovor za područje preko slike znanstvenice Marie Curie).

19. Unos se potvrđuje klikom na dugme Done.

20. Na identičan način (postupak opisan u 17. i 19. koraku) određuje se ispravan odgovor za ostala područja.

Uređivanje ispravnog odnosa među elementima 2

21. U ostalim postavkama moguće je

- podešavati povratne poruke ovisno o ostvarenom rezultatu. Preddefiniran je raspon od 0 % do 100 %. Međutim, klikom na dugme Add Range moguće je dodatno podijeliti raspon (npr. od 0 % do 50 % i od 51 % do 100 %) te upisati tekst povratnih poruka.

- Upravljati ponašanjem pojedinih elemenata.

Provjera sadržaja

Funkcionalnost izrađenog interaktivnog sadržaja u H5P-u potrebno je provjeriti u: 1. internetskom pregledniku na stolnom računalu, 2. internetskom pregledniku na mobilnim uređajima (pametni telefon, tablet – pri čemu je korisno provjeru napraviti na različitim platformama – Android, iOS). Provjeru je potrebno napraviti u ulozi studenta/polaznika e-kolegija. Svakako je potrebno provjeriti adekvatnost glasnoće zvuka i prikaz videa (ako postoje zvučne i videodatoteke).

Zadatak

1. Odgovorite na pitanja u interaktivnom sadržaju
2. Željeli biste urediti interaktivni sadržaj tako da se prikazuje dodatno ime znanstvenice dobitnice Nobelove nagrade – „Maria Goeppert Mayer“.

3. Na stranici https://h5p.org/h5p/embed/399784 preuzmite HP5 sadržaj i ubacite ga u vlastito okruženje (H5P.org ili Moodle).

4. U postavkama interaktivnog sadržaja (Edit) uredite interaktivni sadržaj tako da se prikazuje pomični tekstualni element na kojem je ispisano ime i prezime znanstvenice „Maria Goeppert Mayer“.  Navedeni tekstualni okvir ne treba biti povezan niti s jednim područjem na pozadinskoj slici jer ne postoji slika navedene znanstvenice.

5. Spremite izmjene.