Master Prompt 1: Plant Growth Simulation (Fully Self-Contained HTML File)

 

Master Prompt: Plant Growth Simulation (Fully Self-Contained HTML File)

Create a fully interactive, realistic-looking simulation [                ] using only HTML, CSS, and JavaScript, all within a single self-contained HTML file. This file must be immediately usable in LMS platforms like the Student Learning Space (SLS) without requiring any external resources or internet access. 

Hide the page title, margins, and unnecessary UI to maximize vertical space.

Optimized for SLS iframe view: Should fit width = 100% and height = 90 %, No scrolling required horizontally or vertically. Fully responsive design for both desktop and mobile screens. Use basic CSS (internal or inline); do not use any external CSS frameworks or CDNs.

---

✅ Functional Requirements

1. Dropdown Selector (Combobox):

   • A visible and easy to click wide dropdown menu allowing the user to select "Soil A" or "Soil B".

   • Selecting a soil type will only display the plant height for that soil type.

2. Slider (0 to 6 Weeks):

   • A horizontal slider ranging from 0 to 6 weeks (integers only).

   • Changing the slider updates the plant height display and visualization based on the selected soil type.

3. Height Display:

   • A textual display showing the exact plant height in centimeters.

   • Example format: Height: 3.40 cm (Soil A at 4 weeks)

4. Realistic Side-View Visualization:

   • Render a side-view illustration of two plants side-by-side:

     • Left side: Soil A

     • Right side: Soil B

   • both plants (the selected soil) should be visually growing in height.

   • Visual scale should reflect real-world proportions (e.g., taller height = visibly taller plant).

   • Label both "Soil A" and "Soil B" clearly.

   • Roots, soil, and plant should be visually distinguishable, but simple.

5. Initial State:

   • Soil type = "Soil A"

   • Time = 0 weeks

   • Display and plant height must reflect this.

6. Data to Use:

Time (weeks):  0,    1,    2,    3,    4,    5,    6
Soil A (cm):   0.00, 0.80, 1.60, 2.20, 3.40, 3.75, 4.50
Soil B (cm):   0.00, 0.45, 0.80, 1.00, 1.60, 2.20, 2.50

---

🖥️ UI/UX Requirements

• Hide the page title, margins, and unnecessary UI to maximize vertical space.

• Optimized for SLS iframe view:

  • Should fit width = 100% and height = 90 %.

  • No scrolling required horizontally or vertically.

• Fully responsive design for both desktop and mobile screens.

• Use basic CSS (internal or inline); do not use any external CSS frameworks or CDNs.

• All logic must be written in vanilla JavaScript (no jQuery or external libraries).

---

🧾 Deployment Requirements

• Output must be a single .html file.

• It must have zero external dependencies (no CDNs, no external fonts, images, or scripts).

• If any graphics are used, generate them inline using CSS or SVG.