assignment-submission-system

🎓 Assignment Submission System

A modern, feature-rich assignment submission platform built with Google Apps Script, featuring advanced image zoom capabilities, glassmorphism UI, and seamless file management.

Assignment Submission System Google Apps Script HTML5 CSS3 JavaScript

✨ Features

🎨 Modern UI/UX

🔍 Advanced Image Zoom

📁 File Management

👥 Dual Portal System

🚀 Performance & Quality

🎬 Live Demo

Note: This is a Google Apps Script web application. Users can access the deployed version by requesting the web app URL from the administrator.

Demo Link: https://asad2204.github.io/assignment-submission-system/showcase.html

How to Access:

  1. Student Portal: Use the deployment URL without any parameters
  2. Teacher Portal: Add ?role=teacher&secret=YOUR_SECRET_STRING to the URL

Features You’ll Experience:

🛠️ Technology Stack

🚀 Quick Start

Prerequisites

Installation

  1. Clone the Repository 
    git clone https://github.com/yourusername/assignment-submission-system.git
cd assignment-submission-system
  2. Setup Google Apps Script
    • Open Google Apps Script
    • Create a new project named “Assignment Submission System”
    • Copy the contents of Code.js to the script editor
    • Add HTML files: Click + next to Files > Select “HTML”
      • Create Student.html and paste the contents
      • Create Teacher.html and paste the contents
  3. Configure Google Sheets & Drive
    • Create a Google Sheet with two sheets: “Assignments” and “Submissions”
    • Copy the Spreadsheet ID from the URL
    • Create a folder in Google Drive for file storage
    • Copy the Folder ID from the URL
    • Update these IDs in Code.js: 
      const SPREADSHEET_ID = "your-spreadsheet-id";
const DRIVE_FOLDER_ID = "your-folder-id";
const SECRET_STRING = "your-secure-password"; // Change this!
  4. Deploy the Application
    • Click “Deploy” > “New Deployment”
    • Click “Select type” > “Web app”
    • Set the following:
      • Execute as: Me
      • Who has access: Anyone (or your preference)
    • Click “Deploy”
    • Copy the deployment URL
    • Grant necessary permissions when prompted

📖 Usage

For Students:

  1. Access the Student Portal via the deployment URL
  2. Select your assignment from the dropdown
  3. Fill in your details (name, roll number, email)
  4. Upload your assignment files (multiple files supported)
  5. Click “Submit Assignment” and track upload progress

For Teachers:

  1. Access the Teacher Portal
  2. Create new assignments with descriptions and deadlines
  3. Upload reference images or documents
  4. View and manage all submissions
  5. Download student submissions organized by assignment

🎯 Key Features Showcase

1. Image Zoom Technology

.image-modal img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  image-rendering: high-quality;
  filter: contrast(1.2) saturate(1.2) sharpen(2);
  will-change: transform;
  -webkit-transform: translateZ(0);
}

2. Glassmorphism Effects

.glassmorphism {
  background: rgba(30, 41, 59, 0.25);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.1);
}

3. Progressive File Upload

// Real-time progress tracking with visual feedback
const progress = Math.round((filesProcessed / files.length) * 100);
submitMessage.innerHTML = `📤 Processing files... ${progress}%`;

🔧 Configuration

Environment Variables

Customization Options

📊 Performance Metrics

🤝 Contributing

  1. Fork the repository
  2. Create a feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙋‍♂️ Support

If you encounter any issues or have questions:

👥 Authors

🎉 Acknowledgments

⚠️ Important Notes

🔐 Security Features

Made with ❤️ for Education
Revolutionizing assignment submission, one upload at a time!
This site is open source. Improve this page.