This tutorial simulates an acid–base titration: you add strong base (e.g. NaOH) from a burette into a flask containing either strong acid (HCl) or weak acid (e.g. acetic acid). The simulator computes pH from the exact chemistry and draws the titration curve (pH vs volume of base added, V_b). The beaker liquid color follows a phenolphthalein-style indicator (colorless below pH ~8.2, pink above ~10) so you see the transition as you “pour” titrant.

 

Mathematical foundation

1. Strong acid / strong base

Before equivalence: excess H⁺ → [H⁺] = (moles acid − moles base) / total volume, so pH = −log₁₀[H⁺]. At equivalence, pH = 7. After equivalence: excess OH⁻ → [OH⁻] = (moles base − moles acid) / total volume, so pH = 14 + log₁₀[OH⁻].

2. Weak acid / strong base (Henderson–Hasselbalch)

The simulation uses four stages:

• Initial (V_b = 0): Weak acid only → [H⁺] ≈ √(K_a c_a), so pH = −log₁₀[H⁺].
• Buffer region (0 < V_b < V_eq): Henderson–Hasselbalch: pH = pK_a + log₁₀( [A⁻] / [HA] ). Here [A⁻] and [HA] are proportional to moles of base added and moles of acid remaining.
• Equivalence (V_b = V_eq): Solution is the conjugate base A⁻. pH = 7 + ½ pK_a + ½ log₁₀[A⁻] (hydrolysis of A⁻).
• Post-equivalence (V_b > V_eq): pH is set by excess [OH⁻] as in the strong-acid case.

3. Indicator (phenolphthalein)

Color is interpolated between colorless (pH < 8.2) and pink (pH > 10). Between 8.2 and 10 the liquid shade changes smoothly so the “endpoint” is visible as the curve rises through the indicator range.

 

Usage

Acid type: Choose Strong (HCl) or Weak (Acetic). Strong acid gives an S-shaped curve with a sharp jump at equivalence (pH 7). Weak acid (acetic, K_a ≈ 1.8×10⁻⁵) gives a buffer region and equivalence pH > 7.

Burette slider (V_b): Simulates volume of base added (0–50 mL). As you move the slider: (1) pH display updates from the math engine; (2) Beaker liquid color shifts from colorless to pink via the indicator; (3) Fill level in the beaker rises; (4) The red dot on the chart moves along the titration curve so you connect “pouring” with the graph.

Why this works for education: Mapping the slider directly to pH → indicator color gives immediate feedback. The live dot on the canvas ties the physical action (adding titrant) to the abstract pH–volume curve.

State and math engine

The simulator keeps: acid type (strong/weak), V_a, c_a, c_b, V_b, and for weak acid K_a. pH is computed with the formulas in the Mathematical foundation above. No React or heavy frameworks; jQuery handles DOM and events; CSS is internal/linked for a laboratory-style look (black background, Courier New, max width 800 px per project requirements).

Color engine (indicator)

Phenolphthalein: below pH 8.2 the liquid is colorless (very low opacity); above 10 it is full pink. Between 8.2 and 10, ratio = (pH − 8.2) / (10 − 8.2) and pink opacity = ratio × 0.6, so the transition is smooth rather than a snap.

UI layout

Three-column grid: Left = controls (acid type dropdown, V_b slider, pH readout); Center = burette + beaker (2D CSS/SVG-style); Right = HTML5 Canvas titration curve (pH vs V_b) with live dot. Responsive: columns stack on narrow screens.

Guided Inquiry Labs

Since you have built a high-fidelity simulator capable of modeling complex chemical buffers and real-world fluids, these labs are designed as Guided Inquiry exercises. Users will interact with the UI to discover the underlying "engineering" of chemistry.

Lab 1: The "Digital Filter" – Engineering a Linear pH Response

Objective: Learn how multiple "poles" can be combined to create a "Wide-Range" buffer that resists change linearly.

1. Setup: Set Acid Type to Strong (HCl) (Pure HCl) and Buffer Preset to None.
2. Activity: Move the V_b slider. Observe how the pH stays low and then "snaps" vertically to 14.
3. The Design: Change the Buffer Preset to Linear (Wide-Range).
4. Observation: Notice how the curve becomes a straight diagonal line.
5. Task: Go to Custom buffer. Try to "flatten" a specific pH region (e.g., pH 8 to 10) by adjusting only two buffer pK_a sliders and their Molarities.

Question: How does increasing M (Molarity) affect the "stiffness" of your filter?

Lab 2: Biological Resilience – The Blood & Stomach Acid Model

Objective: Compare how the human body uses different chemical strategies to handle pH stress.

1. The Reservoir: Set Acid Type to Stomach Acid and Buffer Preset to None.
2. The Shield: Change Buffer Preset to Blood-like (pH 7.4).
3. Stress Test: Increase the Titrant Concentration (c_b) to 0.50 M.
4. Observation: Slide the V_b to 25 mL.

Question: Look at the Math Panel. Even with a strong base added, why does the pH stay near 7.4?

Analysis: Toggle the Indicator Mode to Universal. Note how the color stays "Greenish" much longer in the Blood model than in the pure Stomach Acid model.

Lab 3: Forensic Chemistry – Identifying Household Unknowns

Objective: Use the "Universal Indicator" color standard and curve shape to identify substances.

1. Mystery A: Set Acid Type to Lemon Juice and Buffer Preset to None.
2. Mystery B: Set Acid Type to Toilet Cleaner.
3. The Color Test: Without looking at the pH number, move the slider.

Question: One starts "Deep Red" and one starts "Orange/Yellow." Which one has the higher concentration of H⁺ ions?

The Curve Test: Look at the Chart. One curve has a "shoulder" (buffer region), and the other is a sharp "cliff."

Question: Which fluid is a Weak Acid (complex molecule) and which is a Strong Acid (simple mineral acid)?

Lab 4: The Noise & Sensitivity Lab

Objective: Understand how "Sensor Noise" affects the ability to detect the Equivalence Point.

1. Setup: Set Acid Type to Weak Acid (Acetic) and Buffer Preset to None.
2. Activity: Move the Noise (pH) slider to 0.20.
3. The Hunt: Try to find the exact V_b where the pH hits 7.00.
4. Observation: Notice how the pH meter and the Red Dot on the graph jitter.
5. Task: Switch to Log Scale.

Question: Does the Logarithmic X-axis make it easier or harder to identify the "endpoint" when the signal is noisy?

Lab 5: Optimization – Designing the "Perfect" pH 10 Buffer

Objective: Use the 5-pole buffer equalizer to "anchor" a solution at a specific alkaline pH.

1. Goal: You need a liquid that stays at pH 10.0 even if you add 10 mL of Base.
2. Setup: Set Acid Type to Black Coffee (to start slightly acidic).
3. Activity: Use the Custom Buffer sliders.
4. The Logic: Set pK_a to 10.0 and M to 0.100.
5. The Test: Slide V_b from 0 to 20 mL.

Question: How many "poles" do you need to add to make the pH 10 plateau perfectly flat? (Hint: Try setting two buffer pK_a values to 9.8 and 10.2.)