Розробка інтерактивних вправ (drag-drop, fill-in-blank) для LMS

Розробка інтерактивних упражнень (drag-drop, fill-in-blank) для LMS

Інтерактивні упражнення утримують увагу студента краще, ніж пасивне читання та стандартні тести з варіантами відповідей. Drag-and-drop, fill-in-the-blank, сортування, сопоставлення — все це підвищує залучення та покращує запам'ятовування через активне відтворення матеріалу.

Типи інтерактивних упражнень

Drag-and-drop — перетаскування елементів:

• Сортування: розташувати кроки алгоритму в правильному порядку
• Сопоставлення: пов'язати поняття з визначенням
• Заповнення схеми: перетягнути мітки на діаграму

Fill-in-the-blank — заповнення пропусків у тексті або коді

Hotspot — клікнути на правильну область зображення

Matching pairs — знайти пари карточок (гра в пам'ять)

Code arrangement — зібрати робочий код з перемішаних строк

Технології

dnd-kit — рекомендується для React. Доступність з коробки (keyboard navigation), відмінна продуктивність, гнучка архітектура:

import { DndContext, useDraggable, useDroppable, closestCenter } from '@dnd-kit/core';
import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';

interface SortableItem {
  id: string;
  content: string;
}

function SortableExercise({ items, onComplete }: { items: SortableItem[]; onComplete: (order: string[]) => void }) {
  const [activeItems, setActiveItems] = useState(shuffle(items));

  const handleDragEnd = (event: DragEndEvent) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;

    setActiveItems(prev => {
      const oldIndex = prev.findIndex(i => i.id === active.id);
      const newIndex = prev.findIndex(i => i.id === over.id);
      return arrayMove(prev, oldIndex, newIndex);
    });
  };

  const checkAnswer = () => {
    const currentOrder = activeItems.map(i => i.id);
    const correctOrder = items.map(i => i.id);
    const isCorrect = currentOrder.every((id, idx) => id === correctOrder[idx]);
    onComplete(currentOrder);
    return isCorrect;
  };

  return (
    <DndContext onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
      <SortableContext items={activeItems} strategy={verticalListSortingStrategy}>
        {activeItems.map(item => <SortableItemCard key={item.id} item={item} />)}
      </SortableContext>
      <button onClick={checkAnswer}>Перевірити</button>
    </DndContext>
  );
}

Fill-in-the-blank

function FillInBlankExercise({ template, answers }: { template: string; answers: Record<string, string> }) {
  const [userAnswers, setUserAnswers] = useState<Record<string, string>>({});

  const parts = template.split(/(\{\{[^}]+\}\})/g);

  return (
    <div className="exercise-text">
      {parts.map((part, idx) => {
        const match = part.match(/^\{\{(.+)\}\}$/);
        if (match) {
          const fieldId = match[1];
          return (
            <input
              key={idx}
              className="blank-input"
              style={{ width: `${Math.max(answers[fieldId]?.length * 10, 80)}px` }}
              value={userAnswers[fieldId] || ''}
              onChange={e => setUserAnswers(prev => ({ ...prev, [fieldId]: e.target.value }))}
              onBlur={() => checkSingleBlank(fieldId, userAnswers[fieldId], answers[fieldId])}
            />
          );
        }
        return <span key={idx}>{part}</span>;
      })}
    </div>
  );
}

Структура даних упражнень

interface Exercise {
  id: string;
  type: 'sort' | 'fill-blank' | 'match' | 'hotspot' | 'code-arrange';
  title: string;
  description?: string;
  content: ExerciseContent;
  hints?: string[];
  maxAttempts?: number;
  points: number;
}

interface SortExercise extends Exercise {
  type: 'sort';
  content: {
    items: { id: string; text: string }[];
    correctOrder: string[];
    explanation?: string;
  };
}

Редактор упражнень для вчителів

Drag-and-drop конструктор, де вчитель створює упражнення без коду:

• Додавання елементів через форму
• Перетаскування для установи правильного порядку
• Превью в режимі студента
• Імпорт з Excel для масового створення

Збереження прогресу

const saveProgress = debounce(async (exerciseId, answers) => {
  await api.post(`/exercises/${exerciseId}/save-draft`, { answers });
}, 2000);

async function submitExercise(exerciseId, answers) {
  const result = await api.post(`/exercises/${exerciseId}/submit`, { answers });
  return result;
}

Часові межи

Drag-and-drop сортування з перевіркою відповідей — 3–4 дні. Fill-in-the-blank з парсером шаблонів — 2–3 дні. Matching pairs та hotspot — 3–4 дні. Редактор упражнень для вчителів — 5–7 днів.