pH Detective: a chemistry lab in your browser

What you’ll get

A pH scale from 0 to 14 in indicator colors, eight liquids and a glass. Tap a liquid: it pours in, the glass changes color, the pointer shows the pH, and the label says “Acid”, “Neutral” or “Base”. Press “Play the example” above — Gemini made it from the prompt below.

Steps

1. Open gemini.google.com. If you’re under 13, do it together with a parent, on their device.

2. Copy the whole prompt and send it:

   Make "pH Detective" in one HTML file. Don't load anything from the internet: no Tailwind, CDN, fonts, images or libraries — only your own CSS and JavaScript inside the file. Don't save anything in browser storage. At the top, a pH scale from 0 to 14 with universal indicator colors. Below it, 8 liquid buttons with real pH values: lemon juice, cola, coffee, milk, pure water, sea water, soapy water, bleach. When I tap a liquid, it pours into a glass drawn in SVG, the glass takes the indicator color, the pointer on the scale shows the pH, and a label says "Acid", "Neutral" or "Base". A "Dilute with water" button gradually moves the pH toward 7 but never goes past 7. Everything should look good on a phone. Show the result in Canvas.
   

3. Wait about a minute, press Preview and try every button and slider.

4. Check the AI (see the question above).

5. Press Download (sometimes it’s under the Export menu). The file opens in any browser. Show it off in class!

Change the prompt

Before sending, swap a few words to make your own version. Change only the words, and keep the rules about the internet and Canvas.

• “lemon juice, cola” → “tomato juice, vinegar”
• “8 liquid buttons” → “10 liquid buttons” (and add two more liquids)

If it doesn’t work

• The AI says it changed everything, but the result looks the same? Write: Nothing changed. Show the updated version in Canvas.
• No Preview button? Write: Show the result in Canvas.
• “Dilute with water” jumps past 7? Write: “When diluting, the pH jumps past 7. Make it only approach 7.”