Step 1
Base Map of India
Create an interactive political map of India as a single HTML page. Show all state and union territory boundaries.
What happened: The LLM chose D3.js and found a public GeoJSON dataset — all from one sentence.
Step 2
Hover Highlighting
Each state should get highlighted when the mouse cursor moves over it. Change the border color on hover.
What happened: Two sentences added hover interactivity. The LLM understood "highlighted" means a visual change.
Step 3
Click to Reveal Name
Only upon clicking a state should the name of the state be revealed as a label on the map. Names should be hidden by default.
What happened: The word "only" tells the LLM names must be hidden until clicked — turning the map into a quiz tool.
Step 4
Capital Panel
Create a panel in the top left corner with a minimize button. The panel should have a heading called Capital, a text info section, and be collapsible.
What happened: The LLM created a floating UI panel with a minimize toggle — a common web pattern.
Step 5
Capital Button
Add a button labeled 'Capital' inside the panel. When a state is clicked and then the Capital button is pressed, the text box should reveal the capital of that state.
What happened: A two-step interaction (select → reveal) turns this into a learning tool. The LLM needed capital data for all states.
Step 6
Capital on Map
When the Capital button is clicked, mark the capital city's location on the map with a dot and label. Add a reset button to clear the selection.
What happened: The LLM used lat/long coordinates from its training data to place each capital. Always verify accuracy!
Step 7
Crops Section
Add a second section below the Capital panel called 'Crops'. It should also have a minimize button and a text info area.
What happened: We said "below the Capital panel" — spatial instructions help the LLM position elements correctly.
Step 8
Crop Buttons
Add buttons inside the Crops section for each crop: Rice, Wheat, Maize, and Millet. Each button should have a crop emoji icon next to its name.
What happened: We named exact crops. What if you said "add buttons for major Indian crops" — would the LLM pick the same ones?
Step 9
Crop Icons Sized
When a crop button is clicked, show a crop emoji icon on each state that produces it. The icon size must be proportional to how much that state produces compared to others — the top producer gets the largest icon.
What happened: The LLM used production data to scale icons. West Bengal gets the largest rice icon. Verify this data with students!
Step 10
Hover Tooltips
When hovering over any crop icon on the map, show a tooltip with the state name and how much it produces annually in thousand tonnes.
What happened: Tooltips add a data layer on top of the visual — students can compare exact numbers, not just icon sizes.
Step 11
Temperature Section
Add a Temperature section on the right side of the map. It should have a minimize button and a button called 'Avg Yearly Temperature'.
What happened: We moved to the right side — separating data layers (right) from reference tools (left). This is layout design.
Step 12
Temperature Colors
When the temperature button is clicked, color the entire map using a continuous scale — blue for cold states, yellow for mild, orange for warm, and red for hot. Show a color legend.
What happened: This is a choropleth map. Ask: Why is Ladakh blue and Tamil Nadu red?
Step 13
Year Slider
Add a year slider from 1950 to present day. As the slider moves, the temperature colors on the map should update continuously to show how India has warmed over the decades.
🔥 The wow moment. Dragging the slider shows climate change in real time. Connect this to your Social Science curriculum!
Step 14
AQI Section
Add an Air Quality Index section below Temperature on the right side, with the same pattern — a button and a year slider from 2015 to 2025.
What happened: We said "same pattern" — this is prompt reuse. The LLM copies the temperature pattern for AQI data.
Step 15
Complete Simulation
Color the map green for good AQI, yellow for moderate, orange for unhealthy, red for very unhealthy, and purple for hazardous. The colors should update as the year slider moves from 2015 to 2025.
You built this entire simulation in 15 prompts. Notice the COVID-era dip around 2020. Now try adding your own layer — Rainfall, Literacy, or GDP!