Language Learning Activities React Package

A comprehensive React component library designed for creating engaging, interactive translation and language learning experiences.

Features

• Fill-in-the-gap exercises
• Key sentence practice with vocabulary
• Interactive translations
• JSON-driven activity rendering
• Smooth animations with Framer Motion
• Fully typed with TypeScript
• Beautiful UI components with shadcn/ui

Installation

npm install edugo-activities-test

Requirements

This package has the following peer dependencies:

• react ^18.0.0
• react-dom ^18.0.0
• framer-motion ^10.0.0
• tailwindcss ^3.0.0

Usage

import { ActivityList, type ActivityResponse } from 'edugo-activities-test';

const sampleData: ActivityResponse = {
  id: "lesson-1",
  activities: [
    {
      activity_name: "Fill in the gap",
      activity_type: "FILL_IN_THE_GAP_SENTENCE",
      id: "fill-gap-1",
      gap: {
        text: "watch movies",
        translation: "veo películas"
      },
      subject: {
        text: "I usually <BLANK> or read books.",
        translation: "Normalmente <BLANK> o leo libros."
      }
    }
  ]
};

function App() {
  const handleComplete = (activityId: string, correct: boolean) => {
    console.log(`Activity ${activityId} completed. Correct: ${correct}`);
  };

  return (
    <ActivityList
      data={sampleData}
      onComplete={handleComplete}
      className="container"
    />
  );
}

Components

ActivityList

The main component that renders a list of language learning activities.

Props:

• data: ActivityResponse - The activity data to render
• onComplete: (activityId: string, correct: boolean) => void - Callback when an activity is completed
• className?: string - Optional CSS class name

FillInGap

A component for gap-filling exercises.

KeySentencePractice

A component for practicing key vocabulary in context.

Types

type ActivityType = "FILL_IN_THE_GAP_SENTENCE" | "KEY_SENTENCE_PRACTICE";

interface Activity {
  activity_name: string;
  activity_type: ActivityType;
  id: string;
  gap?: {
    text: string;
    translation: string;
  };
  subject?: {
    text: string;
    translation: string;
  };
  key_sentence?: {
    text: string;
    translation: string;
  };
  key_words?: Array<{
    text: string;
    translation: string;
  }>;
}

interface ActivityResponse {
  id: string;
  activities: Activity[];
}

License

MIT