Przycisk 'wstaw zdjęcie'

Przycisk 'wstaw zdjęcie’

Niedawno przedstawiałem proces wstawiania obrazków w Moodle, jednak zastosować go można jedynie wtedy, kiedy mamy do dyspozycji edytor WYSIWYG, w którym znajduje się przycisk „wstaw zdjęcie” (wskazany na ilustracji z prawej strony).

Dopasowywanie opisów do ilustracji

Dopasowywanie opisów do ilustracji

Niestety, w niektórych miejscach w moodle tego edytora nie ma – na przykład podczas projektowania pytań polegających na dopasowywaniu elementów w pary (pytanie „dopasuj odpowiedź”). Załóżmy, że chcemy stworzyć pytanie, które będzie polegało na dopasowywaniu opisów do fotografii, jak na ilustracji z lewej strony. I co wtedy?

W takich przypadkach również możliwe jest wstawianie obrazków, jednak nie możemy użyć przycisku „wstaw zdjęcie”, bo po prostu nie jest dostępny. Zamiast tego musimy w polu tekstowym wpisać kod html obrazka, który chcemy wyświetlić. Powyższe pytanie w trakcie edycji w Moodle wyglądać będzie następująco:

Pytanie w trakcie edycji

Pytanie w trakcie edycji

Przykładowo, kod fotografii przedstawiającej piekarza to: <img hspace="0" height="180" border="0" width="250" vspace="0" src="http://sjopw.ekursy.eu/file.php/15/jobs/iStock_000002810562XSmall.jpg" alt="What job is this?" title="What job is this?" /> , gdzie „iStock_000002810562XSmall.jpg” jest nazwą pliku fotografii.

Nie wszystkie fragmenty tego kodu są absolutnie konieczne (choć większość z nich jest wskazana), więc osoby, które boją się HTML’a, mogą się ograniczyć do wpisania jedynie: <img src="http://sjopw.ekursy.eu/file.php/15/jobs/iStock_000002810562XSmall.jpg" /> , jednak nawet w takim krótkim fragmencie kodu można się pomylić, wpisując go samodzielnie (nie wspominając już o tym, że po co uczyć się HTML’a, jeśli nie jest to konieczne? ;-))

Na szczęście nie musimy wcale uczyć się HTML’a, ponieważ możemy „pożyczyć” kod obrazka z innego miejsca. Wystarczy wstawić obrazek w dowolne miejsce, w którym dostępny jest edytor moodle, a następnie skopiować stamtąd kod html tego obrazka i wkleić go we właściwe miejsce w pytaniu. Poniższe ilustracje pokazują ten proces krok po kroku.

Krok 1 - wstawiamy obrazek

Krok 1 – wstawiamy obrazek

Najpierw wstawiamy obrazek w dowolnym miejscu, w którym dostępny jest edytor Moodle. Nie ma większego znaczenia, gdzie go wstawimy, ponieważ i tak później go stamtąd usuniemy. W tym przykładzie, obrazek jest wstawiany w polu „Ogólna informacja zwrotna”.

Krok 2 - przełączamy się do trybu HTML

Krok 2 – przełączamy się do trybu HTML

Po wstawieniu obrazka przełączamy się do trybu HTML…

Krok 3 - wycinamy kod HTML

Krok 3 – wycinamy kod HTML

… i wycinamy znajdujący się tam kod HTML,…

Krok 4 - wklejamy kod

Krok 4 – wklejamy kod

… który następnie wklejamy we właściwym miejscu w pytaniu.

kod html wklejony

kod html wklejony

I to już wszystko! Wstawiliśmy kod html obrazka, nie znając HTML’a! Teraz wystarczy powtórzyć tę operację dla pozostałych obrazków w naszym pytaniu (bo przecież chcemy utworzyć pytanie, w którym trzeba będzie dopasować opisy do kilku obrazków).

Podziwiamy efekty naszej pracy

Podziwiamy efekty naszej pracy

Po zapisaniu zmian możemy już podziwiać efekt naszej pracy :-)