Тип вмісту перетягування дозволяє учням перетягувати фрагмент тексту або зображення та опускати його на одну або кілька відповідних зон розвантаження.

У цьому посібнику ви дізнаєтесь:

• Коли використовувати перетягування
• Як створити Drag and drop

Відеоурок

Текстовий посібник – приклад

Коли використовувати перетягування

Перетягування дозволяє учневі пов’язувати два або більше елементів і створювати логічні зв’язки візуально. Ось кілька прикладів:

• Групуйте елементи, які належать разом або мають щось спільне
• Зіставте предмет з іншим предметом
• Розмістіть елементи в правильному порядку
• Розмістіть елементи в правильному положенні

Перетягування можна використовувати для перевірки знань учня з певної теми як варіацію до запитань з множинним вибором. Перетягування можна використовувати як окремо, так і включати в набори запитань , інтерактивні відео або презентації . У будь-якому випадку вони створюються однаково.

Крок 1: Тема

Припустімо, у вас є текст про полуницю, для якого ви хочете створити запитання перетягування. Наведений нижче приклад тексту вставлено з Вікісловника :

Полуниця

Соковиті, зазвичай червоні, їстівні плоди деяких рослин роду Fragaria.

Крок 2. Створіть запитання, яке можна перетягнути

Виберіть опцію «Новий вміст» і виберіть «Перетягнути та опустити» зі списку типів вмісту:

Крок 3. Перетягніть редактор запитань

Тепер має з’явитися редактор питань перетягування. Верхня частина редактора виглядає так:

У цьому підручнику ми зосередимося на створенні вмісту запитань із перетягуванням. Створення вмісту відбувається у верхній частині редактора, тому ми зосередимося на цій частині тут.

Існує два кроки створення запитання перетягування: налаштування та завдання . Ви можете будь-коли натиснути вкладки «Параметри» та «Завдання» у верхній частині редактора, щоб переходити між переглядами.

Крок 4: Налаштування

Параметри стосуються загальних параметрів, таких як фонове зображення та розмір.

Ми додамо це фонове зображення:

Зображення було завантажено з Вікімедіа та має ліцензію Creative Commons Attribution Share Alike .

Натисніть кнопку, щоб додати фонове зображення. Перейдіть до місця, де ви завантажили зображення полуниці вище, і виберіть його.

Лише для H5P 1.1: Ви можете додати інформацію про ліцензію для фонового зображення, натиснувши кнопку Редагувати авторське право :

Поле «Рік» не має значення в цьому контексті, тому ми залишимо його порожнім.

Тепер, коли ми додали фонове зображення, я можу визначити розмір питання перетягування. Оскільки ширина зображення становить 800 пікселів, а висота 532 пікселі, я буду використовувати цей розмір для завдання.

Після збереження питання перетягування буде масштабовано до максимальної ширини сторінки, на якій воно розміщене. Розмір визначає ширину та висоту редактора, а також співвідношення сторін питання «Перетягування», а не фактичний розмір у пікселях під час перегляду .

Оскільки ми хочемо, щоб учні мали змогу спробувати вирішити питання про перетягування кілька разів, а не лише один раз, ми позначимо опцію « Увімкнути «Повторити» .

Параметр «Надати один бал за все завдання» є більш доцільним, коли ми додаємо запитання «Перетягнути й опустіть» до наборів запитань , інтерактивних відео або презентацій . Ця опція контролює оцінку, яку учень отримує за розв’язання запитання «Перетягування та скидання», якщо воно розміщене в послідовності кількох завдань. Оскільки ми створюємо окреме питання перетягування, не має значення, залишимо ми цей параметр позначеним чи ні.

Крок 5: Завдання

Натисніть вкладку «Завдання» у верхній правій частині редактора, щоб розпочати створення самого завдання.

Ви побачите, що фонове зображення відображається з розміром, визначеним на вкладці «Параметри» .

Ми створимо питання перетягування, за допомогою якого користувач намагатиметься пов’язати полуницю з назвою відповідного роду. Відповідно до Вікіпедії , рід — це таксономічний ранг, який використовується в біологічній класифікації живих і викопних організмів.

З прикладу тексту вище ми знаємо, що полуниця належить до роду Fragaria . Іншими прикладами ягідних родів є Rubus (наприклад, малина) і Vaccinnium (наприклад, чорниця). Ми використаємо останні два приклади як помилкові альтернативи.

Ви побачите панель інструментів над фоновим зображенням.

Панель інструментів дозволяє вставляти:

	Дропзони
	Тексти
	і зображення

Зони розміщення – це області, на які можна перетягувати елементи тексту та зображення .

Крок 6: Dropzone

Ми починаємо з додавання Dropzone поверх полуниці, показаної на фоновому зображенні. Натисніть кнопку Dropzone на панелі інструментів, перетягніть її на фонове зображення та опустіть десь над полуницею.

Параметри зони викидання з’являються, коли ви її опускаєте. Ми додаємо етикетку Fragaria , що є назвою роду, до якого належить полуниця. Встановіть непрозорість на 50, щоб зробити його напівпрозорим.

У вас буде щось на зразок цього:

Натисніть Готово .

Тепер ви побачите білу зону падіння, розміщену над фоновим зображенням. Перемістіть і змініть розмір dropzone так, щоб вона розташовувалася приблизно над полуницею на фоновому зображенні. Ви можете перемістити зону випадання, натиснувши та перетягнувши її туди, куди потрібно її розмістити. Ви змінюєте розмір розвантажувальної зони, натискаючи нижній правий кут випадаючої зони та перетягуючи вгору/вниз або ліворуч/праворуч, щоб масштабувати випадаючу зону до потрібних пропорцій.

Двічі натисніть на dropzone, щоб редагувати його в будь-який час.

Тепер у вас має бути щось на зразок цього:

Крок 7: Додайте текст

У цьому посібнику ми додамо три елементи Text , які можна перетягувати; одна правильна і дві неправильні. Зображення можна використовувати як елементи, які можна перетягувати, так само, як і текст .

Натисніть кнопку «Текст» на панелі інструментів і перетягніть її на фонове зображення. Ви можете розмістити його праворуч від полуниці. Параметри тексту з’являються, коли ви його опускаєте.

У полі «Мітка» введіть Vaccinium . У розділі «Вибрати зони висадки» встановіть прапорець Fragaria. Ми знаємо, що це неправильний збіг, однак ми хочемо, щоб учень міг кинути об’єкт Vaccinium у зону падіння Fragaria . Якби цей параметр був знятий, учневі не дозволили б кинути об’єкт у зону викидання. Це актуальніше у випадках, коли у вас більше однієї дропзони.

Залиште непрозорість 100 і натисніть Готово . Тепер ви побачите об’єкт Vaccinium , який можна перетягувати, куди ви його розмістили.

Переміщуйте та змінюйте розмір об’єкта, який можна перетягувати, як завгодно. Ви пересуваєте його, натискаючи на нього, а потім перетягуєте туди, куди вам потрібно. Ви можете змінити розмір, натиснувши нижній правий кут об’єкта, а потім потягнувши в будь-якому напрямку, щоб масштабувати.

Додайте ще два елементи Text , які можна перетягувати, дотримуючись тієї самої процедури, що й вище. Однак позначте ці елементи Fragaria та Rubus відповідно. Розмістіть їх акуратно вирівняно праворуч від полуниці.

Двічі натисніть об’єкт, який можна перетягнути, щоб будь-коли відредагувати його.

Сподіваюся, тепер у вас буде щось подібне:

Крок 8: Визначте правильний збіг

Щоб визначити, яка відповідність між dropzone і перетягуваними елементами є правильною, двічі натисніть на dropzone. Це призведе до тих самих параметрів dropzone, що й у кроці 5.

Оскільки на попередньому кроці ви визначили зв’язок між трьома елементами, які можна перетягувати, і зоною випадання Fragaria , тепер ви побачите опцію «Вибрати правильні елементи» . Поставте прапорець Text: Fragaria , щоб визначити цей об’єкт, який можна перетягувати, як правильний збіг.

Тепер встановіть непрозорість на 0 (нуль) і натисніть Готово .

На дропзоні можна розмістити кілька правильних елементів.

Крок 9: Завершення

Зараз ми більш-менш закінчили. Можливо, ми захочемо додати текст інструкції, наприклад: До якого роду належить полуниця? Введіть правильну назву роду на Полуницю.

Це робиться шляхом додавання елемента Text і введення наших інструкцій у полі Label .

Оскільки текст інструкції не повинен бути елементом, який можна перетягувати, ми не вибираємо відповідну зону випадання.

Розмістіть текст інструкції у верхньому правому куті та змініть його розмір на свій розсуд.

Тепер у вас має бути щось на зразок цього:

Збережіть вузол/статтю, щоб переглянути готове запитання перетягування.
Тепер у вас має бути той самий результат, що й у прикладі .
Не соромтеся залишати будь-які коментарі чи пропозиції щодо покращення цього підручника