SP25 BSAI Lab Midterm Exam

Sure! Here’s a Lab Midterm Exam Statement that builds on the previous assignments and lab tasks, encouraging students to apply their HTML, CSS, and JavaScript skills:

Lab Midterm Exam – Web Development (HTML, CSS, JavaScript)

Date: 09-04-2025

Duration: 1.5 hours

Submission Folder: lab_midterm_exam

Submission: Push to your GitHub repository within the deadline.

Objective

In this midterm exam, you are required to enhance your previously created E-Commerce Landing Page by adding a Mega Menu using JavaScript. This will demonstrate your understanding of DOM manipulation, events, and dynamic content display.

Instructions

1. Copy your previous assignments (Assignment 1, Assignment 2, Lab Task 1, Lab Task 2) into a new folder named: lab_midterm_exam Make sure each task has its own folder inside lab_midterm_exam.
2. Enhance your E-Commerce Landing Page (from Assignment 2 or Lab Task 1) by adding a new menu item in the navigation bar titled: "Previous Tasks"
3. When this menu item is clicked, it should open a Mega Menu that lists all four tasks with:
   • Task Title
   • Short Description
   • Link to open the task page (open in a new tab)
4. Implement the Mega Menu using JavaScript (no frameworks like jQuery or Bootstrap JS).
   CSS can be used for styling, but toggling visibility and interaction must be handled via JavaScript.
5. Ensure the menu opens/closes smoothly and enhances user experience:
   • Clicking outside the mega menu should close it.
   • Only one mega menu should be open at a time.

Example Mega Menu Layout

|----------------------------------------------------------|
|   Assignment 1: CV                                       |
|   Create a CV using HTML and CSS. [View]                 |
|----------------------------------------------------------|
|   Assignment 2: E-Commerce Landing Page                  |
|   Build a landing page with product showcase. [View]     |
|----------------------------------------------------------|
|   Lab Task 1: Landing Page with Bootstrap                |
|   Add responsiveness and UI plugins. [View]              |
|----------------------------------------------------------|
|   Lab Task 2: Checkout Page                              |
|   Form validation with JS for a checkout experience. [View] |
|----------------------------------------------------------|

Submission Requirements

• Folder structure: lab_midterm_exam/ ├── assignment_1/ ├── assignment_2/ ├── labtask_1/ ├── labtask_2/ └── index.html (your modified landing page with mega menu)
• Push your work to your GitHub repository.
• Share the GitHub link on the LMS or designated platform before the time is up.

Submission Deadline

• Total Time Allowed: 1.5 hours from the start of the exam.

Evaluation Criteria

Let me know if you’d like this converted to a printable PDF or shared as a template file too.