older version: https://iwant2study.org/lookangejss/chemistry/2017%2001%2031/
https://iwant2study.org/lookangejss/chemistry/grace_leong_titration.zip
Download model (simulator made by grace leong)
🔬 Level Up Your Virtual Lab: The Journey of Refining Chemistry Titration Simulations!
Hey science enthusiasts and aspiring chemists! Ever wondered what powers those sleek simulations that help you master acid-base titrations? Spoiler alert: it’s not just chemistry—it’s also code, creativity, and a ton of debugging!
https://iwant2study.org/lookangejss/chemistry/2025_04_14/
In this behind-the-scenes look, we're sharing the process of upgrading a suite of titration simulations—covering Strong Acid/Strong Base (SASB)
![]() |
https://iwant2study.org/lookangejss/chemistry/2025_04_14/SASB.html |
, Strong Acid/Weak Base (SAWB)
![]() |
https://iwant2study.org/lookangejss/chemistry/2025_04_14/SBSA.html |
, Strong Base/Strong Acid (SBSA)
![]() |
https://iwant2study.org/lookangejss/chemistry/2025_04_14/WASB.html |
, and Weak Acid/Strong Base (WASB)
![]() |
https://iwant2study.org/lookangejss/chemistry/2025_04_14/WBSA.html |
Strong Base against Weak Acid
![]() |
https://iwant2study.org/lookangejss/chemistry/2025_04_14/SBWA.html |
Strong Acid - Weak Base
![]() |
https://iwant2study.org/lookangejss/chemistry/2025_04_14/SAWB.html |
scenarios. Think of it as chemistry class meets software engineering!
🧪 Why Update? The Pursuit of Digital Excellence
Titration is a foundational technique in chemistry, letting us determine the concentration of unknown solutions with precision. Virtual labs bring this process to life—offering safe, repeatable, and highly visual practice environments.
But just like our understanding of chemistry evolves, so should the simulations that teach it. Here’s what we aimed to improve:
-
Accuracy Boost: Refining titration models using more precise pKa/pKb values, ionic strength corrections, and activity coefficients.
-
User-Friendly Design: Adding controls for selecting indicators, adjusting concentrations, and visually highlighting the equivalence point.
-
Modernized UI: Updating the interface for cross-device compatibility using responsive design (thank you, Bootstrap!).
-
Optimized Codebase: Rewriting parts of the JavaScript for performance and maintainability, with smart use of libraries like jQuery and D3.js.
-
Accessibility First: Ensuring the simulations are usable by all learners, including those using assistive technology.
⚙️ Under the Hood: Where Chemistry Meets Code
Updating these simulations is a multidisciplinary effort. Here’s a peek at the tech stack that powers them:
-
HTML: Builds the core structure—buttons, sliders, titration visuals. Files like
SASB.html
,SAWB.html
define each simulation. -
CSS: Styles the UI, with clean layouts and vibrant visuals.
bootstrap.min.css
and custom stylesheets handle the design. -
JavaScript: The engine room!
-
Custom logic via
elgo.js
-
User interface interactions with
jquery.min.js
-
pH calculations and dynamic titration curves with
d3.v4.min.js
-
Every drop of titrant, every change in pH—it's all coded to behave like the real deal.
🧩 Development Challenges: From Bugs to Breakthroughs
Let’s be real: upgrading simulations isn’t all smooth sailing. We hit a few bumps along the way:
-
Wrestling with D3.js: Ever tried plotting a dynamic equivalence point that shifts with changing variables? Let’s just say, scale functions and axes become your new best friends.
-
Rewriting pH Logic: Especially tricky with buffers and midpoints. One small mistake in the math? Say goodbye to realism.
-
Cross-Browser Testing: Making sure the simulation works equally well on Chrome, Firefox, Safari, and Edge (a web dev rite of passage).
-
Responsive Layout Fixes: Ensuring the burette, beaker, and curve scale properly on phones and tablets.
Despite the challenges, the final results make it all worthwhile—more accurate, more interactive, and way more fun to use.
(Optional image insertion:
SASB.png
with caption: “Titration curve generated by the updated Strong Acid–Strong Base simulation.”)
🚀 Outcome: A Sharper Tool for Science Education
The revamped simulations now deliver:
✅ Clearer Visual Feedback – Understand pH shifts instantly through dynamic, high-resolution graphs.
✅ Greater Interactivity – Customize acid/base strength, concentration, and volumes to explore “what-if” scenarios.
✅ Deeper Learning – Practice without fear. Make mistakes. Try again. Master the concept.
These aren’t just simulations—they’re guided, digital lab experiences.
🔭 What’s Next?
Educational tech is always evolving. Future plans may include:
-
More titration types (e.g., polyprotic acids, redox titrations)
-
Real-time collaboration features for classrooms
-
AR/VR integration for immersive lab experiences
Our mission remains clear: make science learning engaging, interactive, and accessible to all.
So next time you fire up a virtual titration lab, remember: behind the clean UI and smooth sliders is a blend of chemistry, code, and care. Happy titrating!
Titration Curves [H2 Chemistry]
About Introduction to Titration Curves https://library.opal.moe.edu.sg/ictc&func=view&rid=2348
Can you predict the shape of the titration curve obtained when a solution of NaOH was titrated against HCl?

In this lesson, you will be working with a titration curve generator, a simulation to generate and explore the shapes of titration curves involving strong or weak acids and bases.
If you are not yet familiar with the usage of the titration curve generator, please read the introduction tab or watch this video to learn how to use it.
Exploring pH changes using the titration curve generator
Change the parameters and explore the features of the titration curve generator. Generate the shapes of the various titration curves
-
Strong acid - strong base
-
Strong base - strong acid
-
Weak acid - strong base
-
Strong base - weak acid
-
Weak base - strong acid
-
Strong acid - weak base
Change these parameters:
-
Concentration of solutions
-
Type of reagent - monoprotic or diprotic
-
Values of Ka (for weak acids) /Kb (for weak bases)
Observe what happens to the:
- General shape of curve
- Volume required for complete neutralisation
- pH at point of complete neutralisation
What is common across all titration curves at the point of complete neutralisation?
When a strong acid is changed to a weak acid of the same concentration, the volume of the same base required for complete neutralisation
stays the same
The approximate pH change at the point of complete neutralisation for a strong acid - weak base titration is from
3 to 7
Strong acid - Strong base titration curve
Weak acid - Strong base titration curve
Check your understanding Sketch on a piece of paper, the titration curve obtained when 20 cm3 of 0.100 mol dm-3 ethanoic acid (pKa = 4.7) is added to 10.0 cm3 of 0.100 mol dm-3 sodium hydroxide. In your sketch, pay attention to the initial pH, pH at equivalence point ,volume of ethanoic acid required to reach equivalence point, volume of ethanoic acid required for pH = pKa.
pH = 14 - 1.00 = 13
Amount of ethanoic acid = 1.00 x 10-3 mol
Volume of ethanoic acid = http://www.w3.org/1998/Math/MathML">1×10-30.100" class="Wirisformula" role="math" alt="fraction numerator 1 cross times 10 to the power of negative 3 end exponent over denominator 0.100 end fraction" style="box-sizing: border-box; min-width: auto; min-height: auto; padding: 0px; margin: 0px; outline: none; display: inline-block; vertical-align: -12px; border: none; height: 40px; width: 73px;"> = 10 cm3
Concentration of sodium ethanoate = http://www.w3.org/1998/Math/MathML">1×10-3201000" class="Wirisformula" role="math" alt="fraction numerator 1 cross times 10 to the power of negative 3 end exponent over denominator begin display style bevelled 20 over 1000 end style end fraction" style="box-sizing: border-box; min-width: auto; min-height: auto; padding: 0px; margin: 0px; outline: none; display: inline-block; vertical-align: -19px; border: none; height: 47px; width: 76px;"> = 0.05 mol dm-3
What is the value of Ka, in mol dm−3, for this acid HX?
1.0 × 10−5
Translation
[text]
Research
[text]
Video
[text]
Credits
[SIMU_CREDITS]
Version:
https://weelookang.blogspot.com/2025/04/updated-to-2025-for-2017-edulab.html
Other Resources
[text]
Frequently Asked Questions: Understanding Titration Curves
1. What is a titration curve and what information does it provide?
A titration curve is a graph that illustrates the change in pH of a solution as a titrant (a solution of known concentration) is gradually added to another solution (with an unknown concentration). By plotting pH against the volume of titrant added, the curve provides a visual representation of the acid-base reaction occurring. It helps in determining the equivalence point of the titration, which is when the moles of acid and base have completely reacted. Furthermore, the shape of the curve and the pH at different points can reveal the strengths of the acid and base involved (i.e., whether they are strong or weak) and the nature of the resulting salt solution.
2. How do titration curves differ when strong acids/bases are involved compared to weak acids/bases?
Titration curves involving strong acids and strong bases exhibit a sharp and significant change in pH (a steep vertical region) around the equivalence point. The pH at the equivalence point for a strong acid-strong base titration is typically close to 7, indicating a neutral solution.
When a weak acid or weak base is involved, the titration curve looks different. The initial pH (or pOH) will be less extreme compared to a strong acid or base of the same concentration due to the partial dissociation of the weak electrolyte. The pH change near the equivalence point is less abrupt and the vertical region is shorter. Additionally, the pH at the equivalence point will not be neutral. For a weak acid-strong base titration, the pH at equivalence will be greater than 7 (basic), while for a strong acid-weak base titration, it will be less than 7 (acidic) due to the hydrolysis of the salt formed. Weak acid/base titrations also show a buffering region before the equivalence point, where the pH changes gradually upon addition of the titrant.
3. What is the significance of the equivalence point on a titration curve?
The equivalence point is a crucial point on a titration curve because it signifies that stoichiometrically equivalent amounts of the acid and base have reacted. This point is often identified by the steepest change in pH on the curve, especially in strong acid-strong base titrations. The volume of titrant added to reach the equivalence point is essential for calculating the concentration of the unknown solution using stoichiometry.
4. How can the strength of an acid or base be determined from its titration curve?
The strength of an acid or base can be inferred from several features of the titration curve. Strong acids have a very low initial pH, while strong bases have a very high initial pH. Weak acids and bases start at a less extreme pH. The sharpness of the pH change near the equivalence point is more pronounced for strong acid-strong base titrations. Furthermore, the presence of a buffering region, where the pH changes gradually, indicates the titration of a weak acid or weak base. For a weak acid, the pH at the half-equivalence point (where half of the acid has been neutralized) is equal to its pKa value, allowing for the determination of the acid dissociation constant (Ka). Similarly, for a weak base, the pOH at the half-equivalence point equals its pKb.
5. What is a buffer region on a titration curve and when does it occur?
A buffer region is a portion of the titration curve where the pH of the solution changes very gradually upon the addition of a titrant. This region occurs during the titration of a weak acid with a strong base (or vice versa) before the equivalence point is reached. In this region, a mixture of the weak acid (or base) and its conjugate base (or acid) exists in significant amounts, enabling the solution to resist changes in pH upon addition of small amounts of acid or base. The buffering capacity is maximum when the concentrations of the weak acid/base and its conjugate are equal, which corresponds to the pH being equal to the pKa of the weak acid (or pOH equal to the pKb of the weak base).
6. How is the pH at the equivalence point determined for different types of titrations?
The pH at the equivalence point depends on the nature of the salt formed during the neutralization reaction.
- Strong acid - strong base: The salt formed is neutral, so the pH at the equivalence point is approximately 7.
- Weak acid - strong base: The salt formed contains the conjugate base of the weak acid, which will hydrolyze in water to produce hydroxide ions (OH-), resulting in a pH greater than 7 (basic).
- Strong acid - weak base: The salt formed contains the conjugate acid of the weak base, which will hydrolyze in water to produce hydronium ions (H3O+), resulting in a pH less than 7 (acidic).
- Weak acid - weak base: The pH at the equivalence point depends on the relative strengths of the weak acid and weak base (their Ka and Kb values). If Ka > Kb, the solution will be acidic; if Kb > Ka, it will be basic; and if Ka ≈ Kb, it will be approximately neutral.
7. What is the relationship between the pH at the half-equivalence point and the pKa of a weak acid?
For the titration of a weak acid with a strong base, the half-equivalence point is the point at which exactly half of the weak acid has been neutralized to form its conjugate base. At this point, the concentration of the weak acid ([HA]) is equal to the concentration of its conjugate base ([A-]). According to the Henderson-Hasselbalch equation (pH = pKa + log([A-]/[HA])), when [A-] = [HA], the log term becomes log(1) = 0. Therefore, at the half-equivalence point, the pH of the solution is equal to the pKa of the weak acid. This provides a convenient experimental method for determining the pKa value of a weak acid from its titration curve.
8. What are some practical applications of titration curves?
Titration curves have significant practical applications in various fields, including:
- Determining the concentration of unknown solutions: By analyzing the equivalence point and using stoichiometry.
- Identifying unknown acids or bases: By examining the shape of the curve and determining pKa or pKb values.
- Studying the behavior of buffer solutions: Understanding the buffer region and its capacity to resist pH changes.
- Quality control in industries: Such as in the food and pharmaceutical industries to determine the amounts of specific substances.
- Environmental monitoring: For analyzing the acidity or alkalinity of water samples.
- Biochemistry: In studying the ionization of biological molecules like amino acids and proteins, which exhibit multiple pKa values and complex titration curves.