EvalFlowAI - Intelligent Rubrics-Based Evaluator

An intelligent web application for automated assessment of flowcharts, algorithms, and pseudocode using rubric-based evaluation.

Features

• Multi-Format Support: Upload files in various formats (.pdf, .png, .jpg, .docx, .pptx)
• Automated Parsing: Intelligent parsing and interpretation of uploaded submissions
• Rubric-Based Evaluation: Comprehensive evaluation based on customizable rubrics
• Detailed Feedback: Get comprehensive feedback reports with suggestions for improvement
• Rubric Management: Create, edit, and manage evaluation rubrics
• Dark Mode Support: Full dark mode support for comfortable viewing

Pages Overview

1. Home Page (index.html)

• Landing page with application overview
• Key features showcase
• How it works section
• Call-to-action buttons to get started

Navigation from Home:

• Click "Get Started" → Upload Page
• Navigate to Rubrics via header
• View Features section

2. Upload Submission Page (upload.html)

• Drag and drop file upload interface
• File validation and preview
• Upload progress tracking
• Support for multiple file formats

Navigation Flow:

• From: Home Page
• To: Parsing Page (after successful upload)

3. Parsing & Interpretation Page (parsing.html)

• Real-time progress indicator
• Content extraction preview
• Identified components display
• Processing status updates

Navigation Flow:

• From: Upload Page
• To: Evaluation Page

4. Evaluation & Scoring Page (evaluation.html)

• Overall score visualization
• Criteria breakdown with expandable details
• Rating system
• Feedback summary

Navigation Flow:

• From: Parsing Page
• To: Full Report Page
• Access via sidebar: Home, Rubrics, Settings

5. Feedback & Report Page (report.html)

• Comprehensive evaluation report
• Rubric-based feedback sections
• Detailed suggestions for improvement
• Download report option

Navigation Flow:

• From: Evaluation Page
• Back to: Evaluation Page
• Download report functionality

6. Rubric Management Page (rubrics.html)

• View all available rubrics
• Search and filter rubrics
• Create new rubrics
• Edit/delete existing rubrics
• Pagination support

Navigation Flow:

• Accessible from any page header
• Manage evaluation criteria

Page Flow Diagram

Home (index.html)
    ↓
    [Get Started Button]
    ↓
Upload (upload.html)
    ↓
    [Continue to Parsing Button]
    ↓
Parsing (parsing.html)
    ↓
    [Continue to Evaluation Button]
    ↓
Evaluation (evaluation.html)
    ↓
    [View Full Report Button]
    ↓
Report (report.html)
    ↓
    [Download Report]

Rubrics (rubrics.html)
    ← Accessible from header navigation on all pages

Technology Stack

• HTML5: Semantic markup
• Tailwind CSS: Utility-first CSS framework via CDN
• JavaScript: Interactive functionality
• Google Fonts: Inter font family
• Material Symbols: Icons

Getting Started

1. Clone or Download the project files
2. Open index.html in your web browser
3. Navigate through the application using the buttons and navigation links

File Structure

Techgium/
│
├── index.html           # Home page
├── upload.html          # Upload submission page
├── parsing.html         # Parsing & interpretation page
├── evaluation.html      # Evaluation & scoring page
├── report.html          # Feedback & report page
├── rubrics.html         # Rubric management page
└── README.md            # Documentation

Navigation Links

Header Navigation (Available on all pages)

• Home: Returns to landing page
• Evaluations: View evaluation results
• Rubrics: Manage rubrics
• Settings: Application settings

Primary Action Buttons

1. Home Page: "Get Started" → upload.html
2. Upload Page: "Continue to Parsing" → parsing.html
3. Parsing Page: "Continue to Evaluation" → evaluation.html
4. Evaluation Page: "View Full Report" → report.html
5. Report Page: "Back to Evaluation" → evaluation.html

Customization

Colors

The application uses a primary color scheme defined in Tailwind config:

• Primary: #1173d4 (Blue)
• Background Light: #f6f7f8
• Background Dark: #101922

Modifying Navigation

To update navigation links, edit the <nav> sections in each HTML file's header.

Adding New Pages

1. Create a new HTML file
2. Copy the header/footer from existing pages
3. Update navigation links to include the new page
4. Add appropriate onclick handlers for buttons

Dark Mode

The application supports dark mode automatically based on system preferences. The dark: classes in Tailwind CSS handle the styling.

Browser Compatibility

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Future Enhancements

• User authentication system
• Real file upload and processing
• Backend integration for AI-powered evaluation
• Export reports in multiple formats
• Collaborative rubric creation
• Analytics dashboard
• Mobile app version

Support

For issues or questions, refer to the Help section in the application or contact support.

License

Copyright © 2024 IntelliEval. All rights reserved.

---

Version: 1.2
Last Updated: October 2024