Interactive Exercises (Drag-Drop, Fill-in-Blank) for LMS

Building Interactive Exercises (drag-drop, fill-in-blank) for LMS

Interactive exercises keep student attention better than passive reading and standard multiple-choice tests. Drag-and-drop, fill-in-the-blank, sorting, matching — all boost engagement and improve retention through active recall.

Types of Interactive Exercises

Drag-and-drop — dragging elements:

• Sorting: arrange algorithm steps in correct order
• Matching: connect concept with definition
• Schema filling: drag labels onto diagram

Fill-in-the-blank — fill gaps in text or code

Hotspot — click correct area of image

Matching pairs — find card pairs (memory game)

Code arrangement — assemble working code from scrambled lines

Technologies

dnd-kit — recommended for React. Accessibility out of the box (keyboard navigation), excellent performance, flexible architecture:

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}>Check</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>
  );
}

Exercise Data Structure

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;
  };
}

Exercise Editor for Teachers

Drag-and-drop constructor where teachers create exercises without code:

• Add elements via form
• Drag to set correct order
• Preview in student mode
• Bulk import from Excel

Save Progress

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;
}

Timeline

Drag-and-drop sorting with answer checking — 3–4 days. Fill-in-the-blank with template parser — 2–3 days. Matching pairs and hotspot — 3–4 days. Exercise editor for teachers — 5–7 days.