Group 5 Prototype – Online Teaching Platform

This project is a Bootstrap-based responsive prototype for an online teaching platform. The platform demonstrates course browsing, student-instructor communication, and responsive design principles.

📅 Project Info

• Developed: April 2023
• Note: This project was completed without the use of AI tools.

📂 Project Structure

All source code is located in the prototype folder:

prototype/
│── chat_with_teachers/   # Chat functionality for students and instructors
│── course/               # Course browsing and details
│── index/                # Homepage and introduction

🎨 Features

• Availability: Accessible anytime, anywhere.
• Recovery: Requires login to save and purchase courses.
• Legal Compliance: Footer includes Privacy Policy and Terms & Conditions.
• Course Browsing:
  • Search bar for courses by keyword.
  • Course selector with filters (topics, languages, duration).
  • Free episode preview & paid class outlines.
• Course Interaction:
  • User comments & “Like” button.
  • Reviews from students after purchase.
• Chatbox:
  • Student Version – Send questions to instructors or office support.
  • Instructor Version – Reply to students, supports emoji, GIFs, file attachments.
  • “Enter” key setting for sending messages.
• Contact Page:
  • Query form (name, email, course, message).
  • Office details with Google Map integration.
  • Mouseover effect on send button for feedback.
• Responsive Design:
  • Desktop – Full navigation bar and elements visible.
  • Tablet/Mobile – Collapsible menu, scrolling course display, adaptive layout.

⚙️ Technologies Used

• HTML5 / CSS3
• Bootstrap (v4/v5)
• JavaScript (custom functions)

📖 Design Principles Applied

• PACT (People, Activities, Contexts, Technologies) framework.
• Shneiderman’s 8 Golden Rules – Consistency, error prevention, user control, and informative feedback.

🚀 Getting Started

1. Clone this repository:

   git clone https://github.com/chloewongwy/Online-Teaching-Platform.git

2. Navigate into the project folder:

   cd Online-Teaching-Platform/index

3. Open index/index.html in your browser to view the homepage.

📸 Screenshots

(Feel free to check out the "presentation" pdf for screenshots of the website and Personas.)

📚 References

• Bootstrap Documentation

---