Skip to content

SETUP_INSTRUCTIONS.md

Latest commit

 

History

History
162 lines (132 loc) · 5.08 KB

SETUP_INSTRUCTIONS.md

File metadata and controls

162 lines (132 loc) · 5.08 KB
Raw

Setup Instructions for New Features

Quick Start

  1. Install the new dependency:
npm install idb
  1. Restart your development server:
npm run dev
  1. Access the features:
    • Navigate to /features in your app
    • Or click "Features" in the sidebar menu

Available Features

1. Analytics Dashboard (/features/analytics)

  • View student performance metrics
  • Track engagement and completion rates
  • See top performers leaderboard
  • Time-based analytics (7d, 30d, 90d)

2. Multimodal Content (/features/multimodal)

  • Generate audio scripts for text-to-speech
  • Create video storyboards
  • AI-powered content transformation

3. AI Personalization (/features/personalization)

  • View your learning profile
  • See AI-detected learning style
  • Track engagement metrics
  • Reinforcement learning recommendations

4. Offline Learning (/features/offline)

  • Download courses for offline access
  • Automatic progress sync when online
  • View downloaded courses
  • Offline indicator in bottom-right corner

5. LMS Integration (/features/lms)

  • Connect to Moodle or Canvas
  • Sync courses to your LMS
  • Export grades to gradebook
  • Import students from LMS

Navigation

The features are accessible through:

  • Sidebar Menu: Click the menu icon → "Features"
  • Direct URL: Navigate to /features
  • Profile/Dashboard: Links to specific features

Testing the Features

Test Offline Mode:

  1. Go to /features/offline
  2. Download a course
  3. Open DevTools → Network tab → Set to "Offline"
  4. Navigate around - you'll see the offline indicator
  5. Your progress will be saved locally

Test Personalization:

  1. Go to /features/personalization
  2. Complete some learning activities
  3. Click "Detect My Learning Style"
  4. View your personalized insights

Test Multimodal:

  1. Go to /features/multimodal
  2. Enter course content
  3. Select "Audio Script" or "Video Storyboard"
  4. Click "Generate"

Test Analytics:

  1. Go to /features/analytics
  2. View your instructor dashboard
  3. Change time ranges (7d, 30d, 90d)
  4. See student performance data

Test LMS Integration:

  1. Go to /features/lms
  2. Configure your Moodle or Canvas credentials
  3. Enable integration
  4. Sync a course

Troubleshooting

"Cannot read properties of undefined" Error

  • This is fixed - the analytics dashboard now handles empty data gracefully
  • Refresh the page if you still see it

Offline Mode Not Working

  • Make sure you've installed idb: npm install idb
  • Check browser console for errors
  • Ensure service worker is registered (check DevTools → Application → Service Workers)

LMS Sync Failing

  • Verify your LMS credentials are correct
  • Check that your LMS has web services enabled
  • Ensure CORS is configured on your LMS

Personalization Not Showing Data

  • Complete some learning activities first
  • The AI needs interaction data to make recommendations
  • Try clicking "Detect My Learning Style" button

Next Steps

  1. For Production: Integrate actual TTS and video generation services
  2. Mobile Apps: Use the offline-first architecture to build React Native apps
  3. More LMS Platforms: Add Blackboard, Schoology support
  4. Advanced RL: Implement Deep Q-Learning algorithms

Support

If you encounter any issues:

  1. Check the browser console for errors
  2. Verify all dependencies are installed
  3. Make sure Firebase is configured correctly
  4. Check that API routes are accessible

File Structure

src/
├── app/
│   ├── features/
│   │   ├── page.jsx                    # Features hub
│   │   ├── analytics/page.jsx          # Analytics dashboard
│   │   ├── multimodal/page.jsx         # Content generation
│   │   ├── personalization/page.jsx    # AI personalization
│   │   ├── offline/page.jsx            # Offline learning
│   │   └── lms/page.jsx                # LMS integration
│   └── api/
│       ├── analytics/route.js          # Analytics API
│       ├── personalization/route.js    # Personalization API
│       ├── lms/sync/route.js           # LMS sync API
│       ├── progress/sync/route.js      # Progress sync API
│       └── multimodal/
│           ├── audio/route.js          # Audio generation
│           └── video/route.js          # Video generation
├── components/
│   ├── dashboard/
│   │   └── AnalyticsDashboard.jsx      # Analytics component
│   ├── settings/
│   │   └── LMSConfig.jsx               # LMS configuration
│   └── OfflineIndicator.jsx            # Offline status indicator
├── hooks/
│   ├── usePersonalization.js           # Personalization hook
│   └── useOffline.js                   # Offline functionality hook
└── lib/
    ├── lms-integration.js              # LMS integration logic
    ├── multimodal.js                   # Content generation
    ├── reinforcement-learning.js       # RL algorithms
    └── offline.js                      # Offline storage

Enjoy your new features! 🚀