Kiedy używać “Przeciągnij i upuść”
“Przeciągnij i upuść” umożliwia uczestnikom powiązanie dwóch lub więcej elementów, tworząc logiczne połączenia w wizualny sposób. Oto kilka przykładów:
- Grupy elementów, które należą do siebie lub mają coś wspólnego.
- Dopasuj obiekt do innego obiektu.
- Ułóż elementy we właściwej kolejności.
- Umieść elementy we właściwym miejscu.
Funkcję Przeciągnij i upuść można wykorzystać do przetestowania wiedzy uczestnika na dany temat. Jest to odmiana dla pytań wielokrotnego wyboru.
Przeciągnij i upuść można używać osobno lub w zestawach pytań, interaktywnych filmach wideo lub prezentacjach. Niezależnie od wykorzystania, są one tworzone zawsze w ten sam sposób.
Krok 1: Temat
Powiedzmy, że masz temat o motoryzacji samochodowej.
Chcesz przetestować wiedzę uczestników w przyjemniejszej wizualnie formie niż zwykły quiz.
Zadaniem uczestników będzie dopasowanie poszczególnych elementów do miejsca ich występowania w samochodzie:
Zaczynajmy.
Krok 2: Stwórz pytanie “Przeciągnij i upuść”
Będąc zalogowanym w Interfejsie naszej platformy e-learningowej, przechodzimy do opcji -> Zawartość H5p i stąd wybieramy podopcję “Dodaj nowy”.
Mając zaznaczoną zakładkę Utwórz nowy, wybierz z listy opcję “Drag and Drop” czyli “Przeciągnij i upuść”.
Krok 3: Edytor
Powinien teraz pojawić się edytor pytań. Górna część edytora wygląda następująco:
W tym samouczku skupimy się na tworzeniu pytania w formacie “przeciągnij i upuść”.
Główne opcje znajdują się w górnej części edytora, więc skupimy się na tej części tutaj.
Tworzenie pytania w formacie “przeciągnij i upuść” składa się z dwóch etapów: Ustawienia i Zadanie. W dowolnym momencie możesz przenieść się na zakładkę Ustawienia lub Zadanie u góry edytora.
Krok 4: Ustawienia
Ustawienia dotyczą ustawień ogólnych, takich jak obraz tła i jego rozmiar.
Jako zdjęcie w tle dodam ten obraz:
Wciśnij przycisk dodaj, aby dodać obraz tła. Przejdź do miejsca, w którym pobrałeś obraz samochodu i wybierz go.
Klikając przycisk Edytuj prawa autorskie, możemy uzupełnić dane związane z prawami autorskimi obrazu.
Teraz gdy dodaliśmy obraz tła, mogę zdefiniować rozmiar naszego pytania. Ponieważ obraz ma szerokość 900 pikseli i wysokość 596 pikseli, przeniosę te parametry do rozmiaru obszaru zadania.
Obszar naszego pytania “przeciągnij i upuść” będzie skalowany do maksymalnej szerokości strony, na której jest umieszczony. Rozmiar obszaru zadania określa szerokość i wysokość edytora, a także proporcje pytania Przeciągnij i upuść, a nie rzeczywisty rozmiar w pikselach podczas przeglądania.
PODPOWIEDŹ: Aby sprawdzić rozmiar obrazu, kliknij na niego prawym przyciskiem myszy, wybierz Właściwości, przejdź do zakładki Szczegóły i w sekcji obraz odczat jego rozmiar.
Rozwijamy teraz opcje Ustawienia zachowania.
Jeżeli chcemy, aby uczniowie mogli ponownie spróbować odpowiedzieć na pytanie w sytuacji gdy zrobili to źle, zaznaczymy opcję „Pokazuj przycisk powtórz”.
Opcja “Przyznaj jeden punkt za całe zadanie” jest bardzo przydatna gdy dodajemy nasze pytanie do zestawów pytań, interaktywnych filmów wideo lub prezentacji. Ponieważ pozwala ona nam, kontrolować wynik uzyskiwany przez ucznia. Z zaznaczoną tą opcją nie ma możliwości otrzymania więcej niż jednego punktu.
Jednak my tworzymy samodzielne pytanie, więc nie ma znaczenia, czy pozostawimy tę opcję zaznaczoną, czy nie.
Krok 5: Zadanie
Naciśnij kartę Zadanie w prawej górnej części edytora, aby rozpocząć tworzenie samego pytania.
Zobaczysz, że obraz tła jest wyświetlany w rozmiarze określonym na karcie Ustawienia.
Utworzymy pytanie typu ”przeciągnij i upuść”, w którym uczestnik próbuje powiązać element pojazdu z miejscem jego występowania na naszym obiekcie.
Zadaniem ucznia będzie przeciągnąć pola:
- Bagażnik
- Koło
- Reflektor
W miejsca, w których się znajdują w naszym pojeździe z obrazu.
Nad obrazem zobaczysz opcje narzędzi, którymi dysponujemy:
Jak widzimy przybornik zawiera trzy opcje:
| Dropzones – obszar przeciągania |
| Tekst |
| Obraz |
Dropzones to obszary, w których można przeciągać elementy tekstowe i graficzne.
Krok 6: Dropzone – obszar przeciągania
Zaczynamy od dodania Dropzone, który będzie obejmował obszar występowania bagażnika samochodowego. Naciśnij i trzymaj przycisk Dropzone na pasku narzędzi, a następnie przeciągnij go (ciągle trzymając lewy przycisk myszy) na obraz tła i upuść gdzieś nad samochodem. Miejsce jeszcze nie jest ważne.
Zaraz po upuszczeniu obszaru, nasze tło powinno zostać zastąpione opcjami Dropzone. Dodajemy etykietę obszaru: Bagażnik, która jest nazwą tego dropzone’a. Ustaw Poziom nieprzezroczystości tła na 50, aby obszar był półprzezroczysty.
Powinno to wyglądać w ten sposób:
Wciśnij przycisk Wykonano.
Zobaczysz teraz białą strefę obszaru umieszczoną nad obrazem. Przesuń i zmień rozmiar dropzone’a, aby z grubsza był umieszczony w miejscu występowania bagażnika. Przenosisz obszar, naciskając i przeciągając go w wybrane miejsce. Zmieniasz rozmiar, naciskając w kwadrat w prawym dolnym róg strefy i przeciągając w górę / w dół lub w lewo / w prawo, aby skalować strefę zrzutu do odpowiednich proporcji.
Naciśnij dwukrotnie na wybrany obszar, aby edytować go w dowolnym momencie.
Powinno to wyglądać w ten sposób:
Proces ten powtarzamy kolejno dla reflektora i obu kół.
Rada: Obszary stworzone dla kół mogą mieć tę samą nazwę np. Koło.
Krok 7: Dodajemy tekst
W tym samouczku dodamy trzy Tekstowe elementy do przeciągania. Co ważne grafiki mogą być używane jako elementy “przeciągalne” w taki sam sposób, jak Tekst.
Naciśnij raz lewym przyciskiem myszy na przycisk Tekst na pasku narzędzi. Spowoduje to otworzenie się opcji Tekstowych.
W polu Text wpisz Bagażnik. W Wybierz obszary przeciągania zaznacz opcję “Zaznacz wszystko“.
Dlaczego wybieramy opcję “Zaznacz wszystko”, a nie tylko i wyłącznie Dropzone Bagażnik? Otóż tutaj wybieramy, na jaki obszar uczestnik będzie mógł przeciągnąć dany Tekst. Gdyby zaznaczona była tylko opcja Bagażnik, to uczący się nie miałby możliwości upuszczenia obiektu w innym Obszarze.
My jednak chcemy dać mu możliwość umieszczenia Tekstu w niepoprawnym Obszarze.
Pozostaw poziom nieprzezroczystości tła na 100 i naciśnij Wykonano. Zobaczysz teraz przesuwalny obiekt Bagażnik na naszym polu roboczym.
Przesuwaj i zmieniaj rozmiar przeciąganego obiektu, według potrzeb. Poruszasz go, naciskając go, a następnie przeciągasz w żądane miejsce. Aby zmienić rozmiar, naciśnij prawy dolny róg obiektu, a następnie pociągnij w dowolnym kierunku, aby skalować.
Dodaj teraz dwa kolejne Tekstowe elementy do przeciągania, wykonując dokładnie taką samą procedurę jak wcześniej. Oznacz te elementy odpowiednio Reflektor i Koło. Umieść je w jednej kolumnie po prawej stronie pod Bagażnik (pamiętaj, aby wszystkie pola Tekstowe miały zaznaczone wszystkie dropzone).
Dwukrotnie naciśnij przeciągany obiekt, aby edytować go w dowolnym momencie.
Teraz nasze pytanie powinno prezentować się w ten sposób:
Krok 8: Poprawne dopasowanie
Aby zdefiniować, które dopasowanie między dropzonem a Tekstem jest prawidłowe, należy edytować dany dropzone i przypisać mu poprawny Tekst. Zacznijmy od dropzone: bagażnik.
Ponieważ w poprzednim kroku zdefiniowałeś powiązanie między trzema Tekstami, ze wszystkimi czterema obszarami, teraz edytując dany obszar, zobaczysz opcję “Wybierz prawidłowe elementy”. Dla obszaru Bagażnik zaznacz pole wyboru Tekst: Bagażnik, aby zdefiniować ten “przeciągalny” obiekt jako prawidłowe dopasowanie.
Teraz zmień nieprzezroczystość tła na 0 i wybierz Wykonaj.
Wiele Tekstów można umieścić w obszarze Bagażnik, ale gdy będzie się na nim znajdował wyłącznie Tekst: Bagażnik, zostanie to uznane za poprawną odpowiedź.
Proces powtarzamy dla pozostałych obszarów (dropzone).
Krok 9: Wykończenie
Jesteśmy teraz przy końcówce.
Możemy chcieć dodać tekst instruktażowy, taki jak:
“Przenieś elementy samochodu w miejsce ich występowania.”.
Odbywa się to poprzez dodanie elementu Tekst i wpisanie naszych instrukcji w polu Tytuł.
Ponieważ tekst instruktażowy nie powinien być elementem do przeciągania, nie wybieramy żadnego obszaru.
Umieść instrukcję w lewym górnym rogu i dostosuj jej wielkość według potrzeb.
Finalny efekt powinien prezentować się następująco:
W prawym górnym rogu wybieramy opcję Zaktualizuj, aby opublikować nasze pytanie i je podejrzeć.
Następnie w wyświetlonym przykładzie możemy przetestować funkcjonalność naszego pytania:
Aby następnie umieścić nasze pytanie “przeciągnij i upuść” w odpowiednim temacie musimy skopiować jego shortcode podany w prawym górnym rogu:
[h5p id=”2″]
A następnie wkleić w treści naszego tematu.
Gotowe!