# ⚡ Test Project: Module A — Speed Test

## 1. Project Overview

This assessment is a **Speed Test** designed to quickly and accurately evaluate practical proficiency across web technologies. Competitors must complete a total of 20 independent tasks across four categories — **A (Design)**, **B (Layout)**, **C (Frontend)**, and **D (Backend)** — within the allotted time. Each task is independent and may be attempted in any order.

---

## 2. Tech Stack & Constraints

| Category | Allowed Technologies | Restrictions |
| :--- | :--- | :--- |
| **A. Design** | GIMP | No other image editors (e.g., Photoshop) permitted |
| **B. Layout** | HTML, CSS | JavaScript is not permitted |
| **C. Frontend** | JavaScript (Vanilla) | No external libraries or frameworks permitted |
| **D. Backend** | PHP, MySQL | Database must be connected using PDO |

* All deliverables will be evaluated in a desktop Chrome browser.
* Save each task's deliverable in a subdirectory named after the task ID under `/module_a/`. (e.g., `/module_a/a1/`, `/module_a/b1/`)
* Design tasks must include the GIMP source file (`.xcf`) in the submission directory.

---

## 3. Tasks

### 🎨 A. Design — GIMP Proficiency

> **Provided files**: Files for A1 (`source.png`), A2 (`base.jpg`), and A3 (`photo.jpg`, `mask.png`) are pre-placed in each task's working directory. A4 and A5 have no provided files; competitors must create all assets from scratch.

#### **A1. Layer Compositing and Text Placement** `Easy`

Create an image in GIMP using a layered structure.

* Canvas size: **800×400px**, Resolution: **72dpi**
* **Layer 1**: Fill the background with the solid color `#2C3E50`.
* **Layer 2**: Open the provided image (`source.png`), place it at the **center** of the canvas, and set its opacity to **70%**.
* **Layer 3**: Add the text **"Hello, GIMP"** in white (`#FFFFFF`) at 36pt, and position it at the top-left of the canvas **(x: 20px, y: 20px)**.
* Save the project as a `.xcf` file first. Then flatten all layers (Flatten Image) and export the result as `result.png`.

#### **A2. Selection and Layer Compositing** `Easy`

Apply shape effects to an image using GIMP's selection tools and layers.

* Open the provided image (`base.jpg`) as the background layer.
* **Effect 1**: Add a new layer. Use the Rectangle Select tool to select the region from **(0, 0) to (200, 200)** in the top-left corner, fill it with `#E74C3C`, and set this layer's opacity to **60%**.
* **Effect 2**: Add another new layer. Create an elliptical selection with a diameter of **150px** at the **center** of the image. Go to `Selection → Border`, set the border width to **3px**, and fill the resulting selection with `#FFFFFF`.
* Save the project as a `.xcf` file first. Then flatten all layers (Flatten Image) and export the result as `result.jpg`.

#### **A3. Color Correction and Layer Mask** `Normal`

Apply color correction and a layer mask to the provided image (`photo.jpg`) in GIMP.

* **Color correction**: Use the Hue-Saturation tool to increase Saturation by **+40**.
* **Curves adjustment**: Use the Curves tool to raise the output value of highlights by **+20 or more** and lower the output value of shadows by **-20 or less** to increase contrast.
* **Layer mask**: Add a layer mask to the image layer. Paste the provided mask image (`mask.png`) into the mask layer so that the background outside the subject is removed.
* Save the project as a `.xcf` file first. Then export the result as `result.png`, ensuring the transparent background is preserved (PNG format).

#### **A4. Text Effect and Glow** `Normal`

Apply a glow visual effect to text in GIMP.

* Canvas size: **600×200px**, Background color: `#1A1A2E`
* Add the text **"SPEED TEST"** in white (`#FFFFFF`), Bold, 60pt, centered on the canvas.
* Duplicate the text layer and place the duplicate **below** the original text layer.
* Rasterize the duplicate layer (Layer → Rasterize). In the Layers panel, set the duplicate layer's **Mode** to **`Color`** first. Then set the foreground color to `#4A90D9` and apply `Edit → Fill with Foreground Color` so the blue color is applied.
* Apply **Gaussian Blur** with a radius of **8px** to the duplicate layer to complete the outer glow effect.
* Save the project as a `.xcf` file first, then export the result as `result.png`.

#### **A5. Text Warp and Filter Effects** `Hard`

Rasterize text and apply a combination of Distorts filters in GIMP to create visual distortion effects.

* Canvas size: **800×300px**, Background color: `#0D0D0D`
* Add the text **"DISTORTION"** in white (`#FFFFFF`), Bold, 72pt, centered on the canvas.
* Rasterize the text layer (Layer → Rasterize).
* Apply the following two Distorts filters to the rasterized text layer in order:
  * **Ripple**: Amplitude **8**, Wavelength **40**, Orientation: Horizontal
  * **Whirl and Pinch**: Whirl angle **20** degrees, Pinch **0**, Radius **1.0**
* Duplicate the distorted text layer. Apply **Gaussian Blur** with a radius of **3px** to the duplicate, then place the duplicate **below** the original layer to create a ghosting effect.
* Save the project as a `.xcf` file first, then export the result as `result.png`.

---

### 📐 B. Layout — HTML / CSS Only

#### **B1. Flexbox Card Layout** `Easy`

Build a card list layout using HTML and CSS only.

* Use **Flexbox** to arrange cards **4 per row**. (Use `flex-wrap: wrap`)
* Each card must contain: an image area (`<div>`, height **160px**, with a background color), a title (`<h3>`), body text (`<p>`), and a button (`<button>`).
* Set the gap between cards to **24px**.
* Create **8** dummy cards. Each card's image area must have a different background color.

#### **B2. Sticky Header and CSS Interaction** `Easy`

Build a header with CSS-only interactions using HTML and CSS only.

* Use **Flexbox** to arrange the header with a logo text on the left, 4 menu links in the center, and 2 buttons on the right.
* Implement a CSS-only interaction where hovering over a menu link reveals a **2px solid underline** with a `transition` effect. (Use `border-bottom` or a `::after` pseudo-element)
* Use `position: sticky; top: 0;` to keep the header fixed at the top while scrolling.
* Place dummy content with a minimum height of **3000px** below the header to enable scrolling.

#### **B3. CSS Grid Two-Column Layout** `Normal`

Build a two-column page layout using CSS Grid with HTML and CSS only.

* Use **CSS Grid** to create a layout with a fixed left sidebar (**250px**) and a right main content area (`1fr`).
* Place a vertical navigation menu (5 items) in the left sidebar. Style the first item to indicate an active state using background color and text color.
* Place a title, body text, and a **3-column card grid** (using CSS Grid, 6 cards) in sequence in the right main area.
* Apply `height: 100vh` and `overflow: hidden` to the layout wrapper. Apply `height: 100vh` and `overflow-y: auto` to both the sidebar and the main area so that each scrolls independently.

#### **B4. CSS Animations and Transitions** `Normal`

Implement various CSS animations and transition effects on a single page using HTML and CSS only.

* **Card hover effect**: Arrange 4 cards in a row using Flexbox. On hover, each card should move up **8px** and have a stronger shadow using a transition. (Use `transform: translateY(-8px)`, `box-shadow`, and `transition`)
* **Loading spinner**: Use `@keyframes` to create a circular loading spinner. The spinner should be **48px** in diameter with a **4px** border. Only the top border (`border-top`) should be colored `#3498DB`; the remaining borders should be `#e0e0e0`. The spinner rotates infinitely.
* **Fade-in text**: On page load, a heading (`<h1>`) should animate from `translateY(20px)` to `translateY(0)` while fading from `opacity: 0` to `opacity: 1` using `@keyframes`. (`animation-duration: 0.8s`, `animation-fill-mode: both`)

#### **B5. CSS Grid and Advanced Selectors** `Hard`

Build a two-column content layout with a CSS-only tab interaction using HTML and CSS only.

* Use **CSS Grid** to create a two-column layout: left column (65%) and right column (35%).
* **Left area**: Place a main image area (`<div>`, height **300px**, with a background color) and a horizontal thumbnail list below it (Flexbox, `overflow-x: auto`). Include **5** thumbnails, each as an **80×80px** `<div>` with a different background color.
* **Right area — upper**: Place a title, subtitle, and body text.
* **Right area — lower**: Implement 3 tabs (Overview / Details / Reviews) with their respective content areas.
  * Use `<input type="radio" name="tab">` and the CSS `:checked` selector **without JavaScript** so that only the selected tab's content is shown.
  * Hide the `<input type="radio">` elements with `display: none` and style the corresponding `<label>` elements to look like tab buttons.
* At the bottom of the right area, place a Primary button and a Secondary button side by side. Apply a `@keyframes` animation to the Primary button so its background color transitions smoothly on hover.

---

### ⚡ C. Frontend — JavaScript (Vanilla)

#### **C1. localStorage-based Memo App** `Easy`

Build a simple memo app using Vanilla JavaScript and `localStorage`.

* The page must include a text input (`<textarea>`) and a **"Save"** button.
* Clicking **"Save"** adds the memo to a JSON array stored under the `memos` key in `localStorage`. Empty content must not be saved.
* Render the saved memo list below the input area. Each item must include the memo content and a **"Delete"** button.
* Clicking **"Delete"** removes the item from `localStorage` and immediately updates the rendered list.
* The memo list must persist after a page refresh.

#### **C2. DOM Manipulation and Event Handling** `Easy`

Build a dynamic list with item management using Vanilla JavaScript.

* The page must include a text input (`<input type="text">`) and an **"Add"** button.
* Clicking **"Add"** or pressing Enter adds the input value as a new list item. Empty values must not be added. The input field is cleared after adding.
* Each item must include a **"Done"** button and a **"Delete"** button.
  * Clicking **"Done"** applies a strikethrough (`text-decoration: line-through`) to the item text. Clicking again toggles it back.
  * Clicking **"Delete"** removes the item immediately.
* Display the current **total item count** and **completed item count** at the top of the list in real time.

#### **C3. Dynamic JSON Rendering and Filtering** `Normal`

Build a page that fetches a local JSON file and dynamically renders its content using Vanilla JavaScript and the Fetch API.

* Fetch the provided `posts.json` file at `/module_a/c3/posts.json` using the Fetch API. The file contains an array of objects with the keys `id`, `title`, `body`, and `category`. (20 items total)
* Display a **loading spinner** (CSS animation) while fetching, and remove it when the fetch completes.
* Render all items as cards. Each card must display `id`, `title`, `body`, and `category`.
* Implement a search input that filters cards in real time by `title`. (Case-insensitive; updates immediately on each keystroke)
* If the Fetch request fails, display the error message **"Failed to load data."** on the screen.

> **Provided file**: `posts.json` (pre-placed in the competitor's working directory at `/module_a/c3/`)

#### **C4. Form Validation** `Normal`

Implement real-time form validation using Vanilla JavaScript.

* Build a registration form with the following fields: **Name**, **Email**, **Password**, **Confirm Password**
* Validation rules for each field:
  * **Name**: Required, at least 2 characters
  * **Email**: Required, must contain both `@` and `.`
  * **Password**: Required, at least 8 characters, must contain both letters and numbers
  * **Confirm Password**: Required, must match the Password field exactly
* When focus leaves a field (`blur` event), display an error message below that field if the validation rule is not met. Remove the error message immediately once the condition is satisfied.
* The **"Submit"** button must only be enabled when all fields are valid. Clicking it should trigger `alert("Registration complete.")`.

#### **C5. IntersectionObserver and Deferred Rendering** `Hard`

Implement infinite scroll and deferred rendering using `IntersectionObserver`.

* Define an array of 50 dummy items in JavaScript. Each item must have `id`, `title`, and `color`. (`color` is an arbitrary hex color value in `#RRGGBB` format)
* On initial load, render **10** items. Each item consists of a **200px-tall** color `<div>` and its `title` text. The first 10 items should display their `color` value as the background color immediately.
* Place a **sentinel element** (`<div id="sentinel">`) at the bottom of the list. When the sentinel enters the viewport, automatically render the next 10 items.
* While new items are being added, insert a **loading spinner element** directly before the sentinel to display it, and remove it once rendering is complete. (Simulate async behavior using `setTimeout` with 600ms)
* Once all **50 items** have been rendered, stop observing the sentinel (`observer.unobserve`) and display the message **"All items loaded."**
* New items should be added to the DOM with their color `<div>` initially set to `#cccccc` (grey). Use a **separate `IntersectionObserver` instance** to watch each `<div>`, and replace the background color with the real color from the element's `data-color` attribute the moment it enters the viewport.

---

### 🛢️ D. Backend — PHP / MySQL

> **Provided files**: `posts_dump.sql` for D4 and `data_dump.sql` for D5 are pre-placed in each task's working directory.

#### **D1. PDO-based CRUD API** `Easy`

Build a REST API to handle data using PHP and MySQL (PDO).

* Create an `items` table using the structure below. Submit the table creation SQL as `table.sql`.
  * `id` (INT, PK, AUTO_INCREMENT), `title` (VARCHAR 100, NOT NULL), `content` (TEXT), `created_at` (TIMESTAMP DEFAULT CURRENT_TIMESTAMP)
* Implement the following 4 endpoints in a single file `api.php`, branching by HTTP method (`$_SERVER['REQUEST_METHOD']`).
  * `GET /module_a/d1/api.php` → Return all items as a JSON array
  * `POST /module_a/d1/api.php` → Add a new item. Body (JSON): `{"title": "...", "content": "..."}`. Read the request body using `php://input` and parse it with `json_decode()`. On success, return the inserted row as JSON.
  * `PUT /module_a/d1/api.php?id={id}` → Update `title` and `content`. Body (JSON): `{"title": "...", "content": "..."}`. Read the request body using `php://input` and parse it with `json_decode()`. On success, return the updated row as JSON.
  * `DELETE /module_a/d1/api.php?id={id}` → Delete the item. On success, return `{"message": "deleted"}`.
* For PUT/DELETE requests with a non-existent `id`, return HTTP status **404** and `{"error": "Not found"}`.
* All responses must include a `Content-Type: application/json` header.

#### **D2. File Upload Handling** `Easy`

Implement image file upload functionality using PHP.

* In `upload.php`, implement both a file upload HTML form (GET) and the upload processing logic (POST). Set the form's `enctype` to `multipart/form-data`.
* Upload conditions: only **jpg, jpeg, png, gif** extensions are allowed; file size must be **2MB or less**.
* Save files that pass validation to the `uploads/` directory using the naming format **`{time()}_{original_filename}`**. If the `uploads/` directory does not exist, create it manually.
* On successful upload, display the uploaded image using an `<img>` tag.
* For validation failures, display the appropriate error message:
  * Invalid extension: **"File type not allowed."**
  * Size exceeded: **"File size exceeds 2MB."**

#### **D3. Session-based Authentication System** `Normal`

Implement user registration, login, and logout using PHP sessions and MySQL.

* `users` table: `id` (INT, PK, AUTO_INCREMENT), `email` (VARCHAR 100, UNIQUE), `password` (VARCHAR 255), `name` (VARCHAR 50), `created_at` (TIMESTAMP DEFAULT CURRENT_TIMESTAMP)
* **`register.php`**: On GET, render an HTML registration form. On POST, check for duplicate emails and save the password hashed with `password_hash()`, then redirect immediately to `login.php` without displaying a success message. If the email is already in use, display the error **"This email is already registered."** above the form.
* **`login.php`**: On GET, render an HTML login form. On POST, verify the password with `password_verify()`. On success, store `user_id`, `name`, and `email` in the session and redirect to `mypage.php`. On failure, display the error **"Incorrect email or password."** above the form.
* **`logout.php`**: On GET, destroy the session with `session_destroy()` and redirect to `login.php`.
* **`mypage.php`**: If `user_id` is not in the session, redirect to `login.php`. If logged in, display the message **"Welcome, {name}!"** and a logout link.

#### **D4. Pagination** `Normal`

Implement server-side pagination using PHP and MySQL (PDO).

* Create the `posts` table yourself, then import the provided SQL dump (`posts_dump.sql`). Table structure: `id`, `title`, `content`, `created_at`
* In `index.php`, display **10 posts per page**.
* The current page is determined by the URL query string `?page={n}`, defaulting to 1. Use `LIMIT` and `OFFSET` in your SQL query to retrieve only the data for the current page. If `page` is less than 1 or exceeds the total number of pages, redirect to page 1.
* Display pagination links at the bottom of the page. **Show all page numbers**, highlight the current page with an active style, and include Previous/Next buttons. Disable the Previous button on the first page and the Next button on the last page.
* Each post item must show the title and registration date. Clicking the title navigates to `view.php?id={id}`, which displays the full content of that post.

#### **D5. Multi-table Aggregate Queries** `Hard`

Implement a statistics API using multi-table JOINs and aggregate queries.

* Create all 3 tables yourself, then import the provided SQL dump (`data_dump.sql`). **Tables must be created in the order `users` → `posts` → `comments`** (to satisfy foreign key dependencies).
  * `users` (`id`, `name`, `created_at`)
  * `posts` (`id`, `user_id` — references users.id, `title`, `category`, `view_count`, `created_at`)
  * `comments` (`id`, `post_id` — references posts.id, `created_at`)
* In a single file `stats.php`, branch on the `type` query string and return the following 3 responses:
  * `GET /module_a/d5/stats.php?type=daily` → Return the number of new posts per day for the past 7 days, sorted by date ascending. Response format: `[{"date": "2026-04-06", "count": 5}, ...]`
  * `GET /module_a/d5/stats.php?type=category` → Return the total post count and average view count per category, sorted by post count descending. Response format: `[{"category": "tech", "post_count": 12, "avg_views": 340}, ...]`
  * `GET /module_a/d5/stats.php?type=top` → Return the top 5 posts by comment count, sorted by comment count descending. Response format: `[{"post_id": 3, "title": "...", "author": "Alice Johnson", "comment_count": 18}, ...]`
* All queries must use PDO **Prepared Statements**.
* For unknown `type` values, return HTTP **400** and `{"error": "Invalid type"}`.

---

## 4. Submission Guidelines

Upload all deliverables to the server directory `/module_a/`. Each task's output must be saved in a subdirectory named after the task ID. (e.g., `/module_a/a1/`, `/module_a/b1/`, `/module_a/c1/`, `/module_a/d1/`)

---

## 5. Marking Scheme — Total 25 Points

| Category | Task | Points |
| :--- | :--- | :---: |
| **A. Design** | A1. Layer Compositing and Text Placement | 0.5 |
| | A2. Selection and Layer Compositing | 0.5 |
| | A3. Color Correction and Layer Mask | 1.5 |
| | A4. Text Effect and Glow | 1.5 |
| | A5. Text Warp and Filter Effects | 2.0 |
| **B. Layout** | B1. Flexbox Card Layout | 0.5 |
| | B2. Sticky Header and CSS Interaction | 0.5 |
| | B3. CSS Grid Two-Column Layout | 1.5 |
| | B4. CSS Animations and Transitions | 1.5 |
| | B5. CSS Grid and Advanced Selectors | 2.0 |
| **C. Frontend** | C1. localStorage-based Memo App | 0.5 |
| | C2. DOM Manipulation and Event Handling | 0.5 |
| | C3. Dynamic JSON Rendering and Filtering | 1.5 |
| | C4. Form Validation | 1.5 |
| | C5. IntersectionObserver and Deferred Rendering | 2.0 |
| **D. Backend** | D1. PDO-based CRUD API | 0.5 |
| | D2. File Upload Handling | 0.5 |
| | D3. Session-based Authentication System | 1.5 |
| | D4. Pagination | 1.5 |
| | D5. Multi-table Aggregate Queries | 3.0 |
| **Total** | | **25** |