BOPPPS Lesson Template System

Overview

The BOPPPS Lesson Template System is a comprehensive React application designed for creating professional educational content using the proven BOPPPS (Bridge-in, Outcomes, Pre-assessment, Participatory learning, Post-assessment, Summary) methodology. The system combines AI-powered lesson planning with an intuitive content editor to streamline the creation of engaging educational materials.

Getting Started

The application features a dual-tab interface that supports both AI-assisted lesson planning and traditional content creation workflows.

Application Interface

• AI Prompt Generator Tab: Plan lessons and generate AI prompts for content creation
• Lesson Template Tab: Create and edit lesson content with rich text editor
• Help Button: Access this comprehensive help documentation

Quick Start Workflow

1. Plan Your Lesson: Use the AI Prompt Generator to structure your lesson plan
2. Generate AI Content: Create detailed prompts for AI platforms to generate content
3. Import and Edit: Load AI-generated content into the lesson template editor
4. Enhance and Customize: Add media, interactive elements, and personal touches
5. Export and Share: Save as JSON for future editing or export for distribution

AI Prompt Generator

The AI Prompt Generator helps you create comprehensive lesson plans and generates detailed prompts for AI platforms to create professional educational content.

Form Sections

Basic Information

• Lesson Topic: Main subject (required)
• Course Name: Full course title
• Duration: Total lesson time in minutes
• Target Audience: Student level and background
• Prerequisites: Required prior knowledge

BOPPPS Components

• Bridge-In: Opening activity to engage students and connect to prior knowledge
• Objectives: Clear, measurable learning outcomes
• Pre-Assessment: Activities to gauge existing knowledge
• Post-Assessment: Methods to verify learning achievement
• Summary: Key takeaways and next steps

Main Activities

Add multiple activities using the "+ Add Activity" button. Each activity includes:

• Duration: Time allocation for the activity
• Facilitator Activities: What the instructor will do
• Learner Activities: What students will do
• Materials: Required resources and tools

Generating Content

AI Prompt Generation

1. Fill in all required fields (Lesson Topic is mandatory)
2. Add at least one main activity
3. Click "Generate AI Prompt"
4. Copy the generated prompt
5. Paste into your preferred AI platform (Claude AI, ChatGPT, etc.)
6. Request the AI to provide output in JSON format

JSON Template Generation

1. Complete the form with your lesson details
2. Click "Generate JSON Template"
3. Use "Load to Template" to directly import into the lesson editor
4. Or copy the JSON for manual import later

Form Data Management

• Save Form Data: Preserve your planning inputs for future use
• Load Form Data: Restore previously saved planning sessions
• Auto-Save: Form data is automatically saved to browser storage
• Recovery: Restore unsaved changes after page reload

Lesson Template Editor

The Lesson Template Editor provides a rich content creation environment with professional formatting capabilities and intuitive editing controls.

Editor Modes

• Edit Mode: Full editing capabilities with content controls and toolbar
• Preview Mode: Clean view showing final presentation layout

Content Management

Adding Content

• Click "+ Add Content" buttons in each section
• Use the control panel (⚙️ settings icon) for additional options
• Drag and drop to reorder content blocks
• Each content type has specific formatting options

Editing Content

• Click the edit icon (✏️) on any content block
• Use the rich text editor with formatting toolbar
• Toggle HTML mode for direct code editing
• Save changes or cancel to revert

Rich Text Editor Features

• Formatting: Bold, italic, underline, colors, highlights
• Structure: Headings (H1-H6), lists, tables, text alignment
• Links: Hyperlinks with automatic styling
• HTML Mode: Direct HTML editing when needed
• Responsive: Adapts to all device sizes

Section Management

• Expand/Collapse: Toggle individual sections or all at once
• Navigation: Quick jump between sections using the navigation bar
• Auto-Save: Content automatically saved every 2 seconds
• Recovery: Restore unsaved changes on page reload

BOPPPS Methodology

BOPPPS is a proven educational framework that provides structure for effective lesson planning and delivery. Each component serves a specific purpose in the learning process.

Implementation Tips

• Timing: Allocate appropriate time for each component based on lesson duration
• Engagement: Include interactive elements throughout, not just in participatory learning
• Assessment: Ensure pre and post assessments align with learning objectives
• Professional Context: Connect all components to real-world applications
• Differentiation: Provide options for different learning styles and skill levels

Content Types

The system supports multiple content types to create rich, interactive learning materials. Each type has specific formatting options and use cases.

Text Elements

📝 Text Blocks

• Purpose: Basic paragraphs and formatted content
• Features: Full rich text editing, HTML mode, responsive design
• Best For: Explanations, instructions, narrative content

📋 Headings

• Levels: H1 through H6 with automatic styling
• Navigation: Create document structure for easy navigation
• SEO: Proper heading hierarchy for accessibility

📝 Lists

• Types: Bulleted and numbered lists
• Nesting: Support for multi-level lists
• Formatting: Custom styling and spacing

Special Content Boxes

ℹ️ Info Boxes

• Purpose: Highlight important information
• Styling: Blue accent with distinct background
• Best For: Key concepts, definitions, summaries

💡 Exercise Boxes

• Purpose: Interactive learning activities and tasks
• Styling: Green accent with activity-focused design
• Best For: Hands-on exercises, practice problems, group activities

⚠️ Warning Boxes

• Purpose: Important cautions and critical information
• Styling: Yellow/amber accent for attention
• Best For: Safety warnings, common mistakes, important notes

Media Elements

🎥 Videos

• Platforms: YouTube, Vimeo, Panopto integration
• Features: Responsive embedding, caption support
• Setup: Simply paste video URL for automatic embedding

🖼️ Images

• Sources: Upload files or use URLs
• Features: Captions, citations, alt text for accessibility
• Responsive: Automatic sizing for different devices

🖼️ Galleries

• Layout: Grid-based image display
• Organization: Multiple images with individual captions
• Best For: Before/after comparisons, step-by-step visuals, examples

🎵 Audio

• Formats: Standard web audio formats supported
• Controls: Built-in play/pause controls
• Descriptions: Add context and transcripts

Interactive Elements

🃏 Cards

• Layouts: 2x1, 2x2, 3x1, and vertical arrangements
• Styling: Multiple style options (info, exercise, warning, success)
• Content: Rich text with images and formatting
• Best For: Key points, step-by-step processes, feature highlights

📊 Tables

• Features: Sortable columns, responsive design
• Formatting: Header styling, alternating rows
• Best For: Data comparison, specifications, schedules

📋 Worksheets

• Question Types: Short answer, long answer, multiple choice, checkboxes
• Import: Upload from JSON format (see Worksheet JSON section)
• Features: Point values, instructions, custom formatting

Worksheet JSON Upload

The system supports importing structured worksheets from JSON files, allowing you to create complex assessments and activities with predefined question types and formatting.

JSON File Structure

Worksheet JSON files must follow a specific structure with required fields for proper import and display.

Complete Example

{
  "title": "Communication Skills Assessment",
  "instructions": "Complete all questions to assess your understanding of effective communication techniques. This worksheet covers verbal, non-verbal, and written communication skills.",
  "questions": [
    {
      "type": "shortAnswer",
      "prompt": "What is your full name?",
      "placeholder": "Enter your first and last name",
      "points": 1
    },
    {
      "type": "longAnswer",
      "prompt": "Describe a time when you successfully resolved a communication conflict. Include the situation, your approach, and the outcome.",
      "maxLength": 500,
      "points": 5
    },
    {
      "type": "multipleChoice",
      "prompt": "Which of the following is the most effective way to start a presentation?",
      "options": [
        "Apologizing for being nervous",
        "Starting with a relevant story or question",
        "Immediately jumping into technical details",
        "Reading directly from your notes"
      ],
      "points": 2
    },
    {
      "type": "checkboxes",
      "prompt": "Select all effective non-verbal communication techniques:",
      "options": [
        "Maintaining appropriate eye contact",
        "Using open body language",
        "Crossing arms while speaking",
        "Nodding to show understanding",
        "Looking at your phone during conversation"
      ],
      "points": 3
    },
    {
      "type": "shortAnswer",
      "prompt": "What is active listening?",
      "placeholder": "Define active listening in your own words",
      "points": 2
    },
    {
      "type": "longAnswer",
      "prompt": "Analyze the communication challenges in remote work environments and propose three specific strategies to improve virtual team communication.",
      "maxLength": 750,
      "points": 10
    }
  ],
  "footerNote": "Total Points: 23 | Remember to review your answers before submission. Good communication skills are essential for professional success!"
}

Field Definitions

Root Level Fields

Question Types

Short Answer Questions

{
  "type": "shortAnswer",
  "prompt": "Question text here",
  "placeholder": "Hint text for the input field",
  "points": 2
}

Long Answer Questions

{
  "type": "longAnswer",
  "prompt": "Extended response question text",
  "maxLength": 500,
  "points": 5
}

Multiple Choice Questions

{
  "type": "multipleChoice",
  "prompt": "Choose the best answer:",
  "options": [
    "Option A",
    "Option B", 
    "Option C",
    "Option D"
  ],
  "points": 1
}

Checkbox Questions

{
  "type": "checkboxes",
  "prompt": "Select all that apply:",
  "options": [
    "Choice 1",
    "Choice 2",
    "Choice 3",
    "Choice 4"
  ],
  "points": 3
}

Question Field Reference

Import Process

1. Create or obtain a JSON file following the structure above
2. In the Lesson Template editor, add a Worksheet content block
3. Click "Edit" on the worksheet block
4. Use the "Import Worksheet JSON" file input
5. Select your JSON file
6. The worksheet will be automatically populated with your questions
7. Save the changes to apply the imported content

Validation and Error Handling

• Valid JSON: File must be properly formatted JSON
• Required Fields: Must include "title" and "questions" array
• Question Types: Only supported types will be imported
• Error Messages: Clear feedback for invalid files or missing fields

Export & Import

The system provides comprehensive save/load functionality for preserving and sharing your educational content across sessions and devices.

Auto-Save System

• Frequency: Automatically saves every 2 seconds while editing
• Storage: Local browser storage for immediate recovery
• Recovery: Prompts to restore unsaved changes on page reload
• Indicator: Visual feedback showing save status

Export Options

JSON Export (Lesson Template)

• Content: Complete lesson data including all sections and metadata
• Format: Structured JSON with version information and timestamps
• Use Cases: Sharing lessons, creating backups, collaborative editing
• Compatibility: Can be imported into any instance of the application

Form Data Export (AI Prompt Generator)

• Content: All planning inputs and form data
• Purpose: Save lesson planning work for future iterations
• Recovery: Restore complex lesson plans without re-entering data

AI Prompt Export

• Format: Plain text file with structured prompts
• Purpose: Use with external AI platforms
• Content: Complete prompts ready for Claude AI, ChatGPT, etc.

Import Functionality

JSON Import Process

1. Click the "Load JSON" button in the lesson template toolbar
2. Select your JSON file from the file picker
3. The system validates the file format and structure
4. Content is loaded and replaces current lesson data
5. You can immediately begin editing the imported content

Form Data Import

1. In the AI Prompt Generator tab, use "Load Form Data"
2. Select previously saved form data file
3. All form fields are populated with saved values
4. Modify as needed and generate new prompts or templates

File Format Specifications

Lesson JSON Structure

{
  "version": "2.0.0",
  "timestamp": "2025-08-15T10:30:00.000Z",
  "courseTopic": "Course Title - Week 1",
  "instructorName": "Instructor Name",
  "instructorEmail": "instructor@institution.edu",
  "footerCourseInfo": "Course Code - Course Name",
  "footerInstitution": "Institution Name",
  "footerCopyright": "© 2025 All Rights Reserved",
  "week": "1",
  "date": "2025-08-15",
  "sections": {
    "overview": [...],
    "bridge-in": [...],
    "outcomes": [...],
    "pre-assessment": [...],
    "participatory-learning": [...],
    "post-assessment": [...],
    "summary": [...]
  }
}

Best Practices

• Regular Exports: Export JSON files regularly as backups
• Version Control: Include dates or version numbers in filenames
• Sharing: Use JSON exports to share lessons with colleagues
• Templates: Create template files for common lesson structures
• Storage: Keep local copies in addition to cloud storage

Interface Controls

The application interface is designed for intuitive use with clearly labeled controls and consistent interaction patterns.

Main Navigation

• Tab Buttons: Switch between AI Prompt Generator and Lesson Template
• Section Navigation: Quick jump links to BOPPPS sections
• Help Button: Access this comprehensive documentation

Lesson Template Controls

Mode Toggle

• Edit Mode: Full editing capabilities with controls visible
• Preview Mode: Clean presentation view for review and printing

Toolbar Functions

• ⚙️ Settings Panel: Open control panel for adding content and managing sections
• 📁 Export: Download lesson as JSON file
• 📂 Import: Load lesson from JSON file
• 📊 Expand/Collapse All: Toggle all section visibility

Content Block Controls

• ✏️ Edit: Open content for editing
• 🗑️ Delete: Remove content block
• ⬆️⬇️ Move: Reorder content within sections
• ➕ Add: Insert new content blocks

Rich Text Editor Controls

Formatting Toolbar

• Text Formatting: Bold, italic, underline, strikethrough
• Colors: Text color and background highlighting
• Alignment: Left, center, right, justify
• Lists: Bulleted and numbered lists
• Headings: H1 through H6 styles
• Links: Insert and edit hyperlinks
• Special: Code blocks, blockquotes, horizontal rules

Advanced Features

• HTML Mode: Toggle between visual and HTML editing
• Undo/Redo: Standard editing history
• Clear Formatting: Remove all formatting from selected text
• Source View: Direct HTML code editing

Keyboard Shortcuts

Mobile Interface

• Responsive Design: Adapts to tablet and mobile screens
• Touch Controls: All functions accessible via touch
• Simplified Toolbar: Condensed controls for smaller screens
• Swipe Navigation: Gesture support where appropriate

Troubleshooting

Common issues and their solutions to help you get the most out of the BOPPPS Lesson Template System.

Content Creation Issues

❌ Rich Text Editor Not Loading

• Cause: JavaScript disabled or browser compatibility issues
• Solution: Ensure JavaScript is enabled; try refreshing the page
• Workaround: Use HTML mode for direct editing
• Browser Support: Update to latest Chrome, Firefox, Safari, or Edge

❌ Content Not Saving

• Check: Browser local storage permissions
• Clear: Browser cache and cookies, then reload
• Storage: Ensure sufficient disk space for local storage
• Alternative: Use manual Export function as backup

❌ Auto-Save Not Working

• Verify: Edit mode is enabled
• Check: Browser console for JavaScript errors
• Test: Make a small edit and look for save indicator
• Refresh: Reload page and check for recovery prompt

Import/Export Problems

❌ JSON Import Fails

• Validate: Check JSON syntax using online validators
• Format: Ensure file matches expected structure
• Encoding: Save file as UTF-8 encoding
• Size: Very large files may have browser limitations

❌ Worksheet JSON Import Issues

• Structure: Verify "questions" array exists and is properly formatted
• Types: Check question types are: shortAnswer, longAnswer, multipleChoice, checkboxes
• Required Fields: Ensure each question has "type" and "prompt" fields
• Quotes: Use double quotes for JSON strings, not single quotes

AI Prompt Generator Issues

❌ AI Prompt Not Generating

• Required Fields: Ensure "Lesson Topic" is filled
• Activities: Add at least one main activity
• Content: Fill in rich text fields completely
• Save Status: Wait for form to auto-save before generating

❌ JSON Template Generation Fails

• Form Validation: Complete all required sections
• Rich Text: Ensure text editors have content, not just formatting
• Activities: Each activity needs duration and description
• Browser: Try in a different browser if issues persist

Display and Formatting Issues

❌ Content Not Displaying Correctly

• CSS Loading: Check if stylesheets are loading properly
• Browser Cache: Clear cache and hard refresh (Ctrl+F5)
• Zoom Level: Reset browser zoom to 100%
• Extensions: Disable ad blockers and other extensions

❌ Print Layout Problems

• Preview Mode: Switch to Preview mode before printing
• Browser Print: Use browser's print function, not system print
• Margins: Adjust printer margins in print dialog
• Scale: Try different scaling options (fit to page, actual size)

Performance Issues

❌ Slow Loading or Lag

• Content Size: Very large lessons may impact performance
• Images: Optimize image sizes for web use
• Browser: Close unnecessary tabs and applications
• Memory: Restart browser if using for extended periods

Browser Compatibility

Getting Additional Help

• Browser Console: Check for error messages (F12 → Console tab)
• Network Tab: Verify files are loading correctly
• Documentation: Re-read relevant sections of this help guide
• Updates: Ensure you're using the latest version of the application

Best Practices

Guidelines and recommendations for creating effective educational content using the BOPPPS methodology and system features.

Lesson Planning Strategy

📝 Start with the AI Prompt Generator

• Complete Planning: Use the form to think through all lesson components
• Multiple Activities: Plan at least 3-4 different activities for engagement
• Time Allocation: Be realistic about timing for each BOPPPS component
• Learning Objectives: Use action verbs and make outcomes measurable

🎯 BOPPPS Implementation

• Bridge-In (5-10%): Start strong with engaging opening activities
• Objectives (5%): Make learning goals clear and student-friendly
• Pre-Assessment (10%): Use non-threatening activities to gauge knowledge
• Participatory Learning (60-70%): Main content with interactive elements every 15 minutes
• Post-Assessment (10-15%): Verify learning with varied assessment methods
• Summary (5-10%): Consolidate learning and preview next steps

Content Creation Guidelines

📚 Effective Content Structure

• Chunking: Break content into digestible sections with clear headings
• Progressive Disclosure: Introduce concepts gradually with increasing complexity
• Visual Hierarchy: Use headings, subheadings, and formatting consistently
• White Space: Allow breathing room between content sections

🎨 Visual Design Principles

• Consistency: Use similar formatting for similar types of content
• Contrast: Make important information stand out with info boxes
• Color Coding: Use box types strategically (info=concepts, exercise=activities, warning=cautions)
• Balance: Mix text with media and interactive elements

Media Integration

🎥 Video Best Practices

• Duration: Keep videos under 5-10 minutes for attention span
• Quality: Ensure good audio quality and clear visuals
• Context: Provide introduction and follow-up discussion
• Accessibility: Include captions or transcripts when possible

🖼️ Image Guidelines

• Relevance: Use images that directly support learning objectives
• Quality: High resolution but optimized for web loading
• Captions: Always include descriptive captions
• Alt Text: Add alt text for accessibility

Interactive Elements

💡 Exercise Box Usage

• Clear Instructions: Provide step-by-step guidance
• Time Estimates: Include how long activities should take
• Materials: List everything students need
• Success Criteria: Define what successful completion looks like

🃏 Card Layout Strategies

• Grouping: Use cards for related concepts or steps
• Comparison: Great for before/after or pros/cons
• Process: Show sequential steps with numbered cards
• Highlights: Feature key points or takeaways

Assessment Integration

📊 Formative Assessment

• Frequent Checks: Include knowledge checks throughout lessons
• Low Stakes: Make assessments practice-focused, not graded
• Immediate Feedback: Provide answers or discussion after assessments
• Variety: Use different question types and formats

📋 Worksheet Design

• Progressive Difficulty: Start easy and build complexity
• Clear Instructions: Explain expectations and format
• Point Allocation: Weight questions based on importance/difficulty
• Scaffolding: Provide support for complex questions

AI Content Enhancement

🤖 Working with AI-Generated Content

• Review Thoroughly: Always check AI content for accuracy and appropriateness
• Personalize: Add your teaching style and specific examples
• Context: Ensure content matches your institution and student needs
• Update: Verify current information and best practices

📝 Prompt Optimization

• Specificity: Provide detailed context and requirements
• Examples: Include examples of desired output style
• Constraints: Specify time limits, audience level, and format needs
• Iteration: Refine prompts based on results

Collaboration and Sharing

🤝 Team Workflows

• JSON Sharing: Use export/import for collaboration
• Version Control: Include version numbers and dates in filenames
• Templates: Create standardized templates for consistency
• Documentation: Include notes about customizations and source materials

Accessibility Considerations

♿ Universal Design

• Text Alternatives: Provide descriptions for images and media
• Color Contrast: Ensure sufficient contrast for readability
• Font Size: Use readable fonts and appropriate sizing
• Navigation: Provide clear structure and navigation aids

Technical Specifications

Technical details about the system architecture, requirements, and deployment considerations.

System Requirements

🖥️ Development Environment

• Node.js: Version 14 or higher
• Package Manager: npm or yarn
• Operating System: Windows, macOS, or Linux
• Memory: Minimum 4GB RAM for development

🌐 Browser Requirements

• JavaScript: Must be enabled
• Local Storage: Required for auto-save functionality
• Modern Features: ES6+ support, CSS Grid, Flexbox
• File API: For import/export functionality

Technology Stack

Project Structure

lecture-template-system/
├── public/
│   ├── index.html
│   ├── favicon.ico
│   ├── manifest.json
│   └── help.html              # This help documentation
├── src/
│   ├── MainApp.js             # Main application with tab navigation
│   ├── TabNavigation.js       # Tab navigation component
│   ├── BopppsPromptGenerator.js # AI prompt generator interface
│   ├── LessonTemplate.js      # Lesson template editor
│   ├── WorksheetModule.js     # Worksheet functionality
│   ├── constants.js           # Application constants
│   ├── index.js               # React entry point
│   └── index.css              # Global styles with Tailwind
├── package.json               # Dependencies and scripts
├── tailwind.config.js         # Tailwind CSS configuration
├── postcss.config.js          # PostCSS configuration
└── README.md                  # Project documentation

Deployment Options

🚀 Static Hosting

• Hostinger: Upload build files to public_html folder
• Netlify: Drag and drop build folder or connect Git repository
• Vercel: Connect GitHub repository for automatic deployments
• AWS S3: Upload to S3 bucket with static website hosting enabled
• GitHub Pages: Deploy from repository using GitHub Actions

🏗️ Build Process

1. Run npm run build to create production build
2. Build folder contains optimized static files
3. Copy contents to web server public directory
4. Ensure server supports client-side routing (if applicable)

Performance Considerations

⚡ Optimization Features

• Code Splitting: React lazy loading for improved performance
• Asset Optimization: Automatic image and CSS optimization
• Caching: Service worker for offline functionality
• Compression: Gzip compression for smaller file sizes

📊 Performance Metrics

• Initial Load: < 3 seconds on standard connections
• Interaction: < 100ms response time for UI interactions
• Auto-Save: < 50ms for content persistence
• Export/Import: Handles files up to 10MB efficiently

Security Considerations

🔒 Data Protection

• Local Storage: All data stored locally in browser
• No Server: No external data transmission by default
• File Validation: JSON import validation to prevent malicious content
• XSS Protection: HTML sanitization in rich text editor

Customization Options

🎨 Theming

• CSS Variables: Easy color scheme modifications
• Tailwind Config: Customize design system tokens
• Component Props: Configurable component behavior
• Logo Integration: Custom institutional branding

🔧 Configuration

• Environment Variables: Configure API endpoints and features
• Build Options: Customize webpack configuration if needed
• Content Types: Add new content types in constants.js
• BOPPPS Sections: Modify or extend section definitions