S10 Compounds Lessons

dmaccarthy · Sep 16, 2024 · 9b99235 · 9b99235
1 parent c4a6941
commit 9b99235
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 28 deletions.
diff --git a/docs/s10/chem2/acid.htm b/docs/s10/chem2/acid.htm
@@ -1,3 +1,11 @@
+<section class="Post" data-icon="gdrv">
+    <h2 class="Collapse">Lab Handout</h2><div class="Collapse">
+    <p class="Var">handouts</p>
+    <p class="BtnGrid">
+        <button data-icon="gdrv" data-gdrv="1Aw-fluCKkIY6Q3_HmcnaGwKHzsVyY-vf">Acids &amp; Bases Lab</button>
+    </p>
+</div></section>
+
 <section class="Post" data-icon="slides">
 <h2 class="Collapse">Lesson Notes<span data-print="LessonNotes"></span></h2><div class="Collapse">
 <div id="LessonNotes">
@@ -6,7 +14,85 @@ <h2 class="Collapse">Lesson Notes<span data-print="LessonNotes"></span></h2><div
 <h1 id="Title">Acids &amp; Bases</h1>
 </section>
 
-<section class="Slide"><h3>?</h3>
+<section class="Slide"><h3>Equilibirium</h3>
+    <p class="Center"><svg class="s12" data-js="s10/chem2/img/poly#H2O"></svg></p>
+    <p>Water molecules can randomly break apart according to the reaction:
+        <p class="TeX">\mathrm{H_2O \rightarrow H^{+} + OH^{-}}</p>
+    </p>
+    <ul>
+        <li data-cue="+">The ions will eventually reunite to reform a water molecule.</li>
+        <li data-cue="+">At any time, a small fraction of water molecules will be ions.</li>
+        <li data-cue="+">In pure water, the number of hydrogen ions and the hydroxide ions will be equal.</li>
+        <li data-cue="+">Water is <em class="Defn">neutral</em> when the <span class="TeX">\mathrm{H^+}</span> and <span class="TeX">\mathrm{OH^-}</span> are balanced.</li>
+    </ul>
+</section>
+
+<section class="Slide"><h3>Acids</h3>
+    <p>Adding a substance that produces hydrogen ions when it dissolves will interfere with this balance:
+        <p class="TeX">\mathrm{HCl \rightarrow H^{+} + Cl^{-}}</p>
+    </p>
+    <ul data-cue="+">
+        <li>Substances that increase the concentration of <span class="TeX">\mathrm{H^+}</span> are called <em class="Defn">acids</em>.</li>
+        <li data-cue="+">This definition of acid was created by Svante Arrhenius.</li>
+        <li data-cue="+">Acids are often corrosive.</li>
+        <li data-cue="+">Acids that are edible (vinegar, citrus fruit) have a sour or tangy taste.</li>
+    </ul>
+</section>
+
+<section class="Slide"><h3>Bases</h3>
+    <p>Adding a substance that produces hydroxide ions when it dissolves will interfere with the <span class="TeX">\mathrm{H^+}</span> versus <span class="TeX">\mathrm{OH^-}</span> balance too:
+        <p class="TeX">\mathrm{NaOH \rightarrow {Na}^{+} + OH^{-}}</p>
+    </p>
+    <ul data-cue="+">
+        <li>Substances that increase the concentration of <span class="TeX">\mathrm{OH^-}</span> are called <em class="Defn">bases</em>.</li>
+        <li data-cue="+">Like acids, bases are often corrosive.</li>
+        <li data-cue="+">Bases tend to have a bitter taste.</li>
+    </ul>
+</section>
+
+<section class="Slide"><h3>pH</h3>
+    <p>Acidity/basicity of a solution is described by a number called <em class="Defn">pH</em> (power of hydrogen) which indicates how rare the <span class="TeX">\mathrm{H^+}</span> ion is.</p>
+    <ul data-cue="+">
+        <li>Neutral solutions have pH = 7.</li>
+        <li data-cue="+">This means that the concentration of hydrogen ions is <span class="TeX">10^{-7}</span> moles per litre of water.</li>
+        <li data-cue="+">Acids have a pH <em>less than 7</em>.</li>
+        <li data-cue="+">A pH of 6 means the concentration of hydrogen ions is <span class="TeX">10^{-6}</span> moles per litre of water, which is 10 times more concentrated than neutral.</li>
+        <li data-cue="+">A pH of 4 means hydrogen ions are 1000 times more concentrated than in neutral water.</li>
+    </ul>
+    <ul data-cue="+">
+        <li>Bases have a pH <em>greater than 7</em>.</li>
+        <li data-cue="+">A pH of 8 means hydrogen is 10 times less concentrated — and hydroxide is 10 times more concentrated — than in neutral water.</li>
+    </ul>
+</section>
+
+<section class="Slide"><h3>Measuring pH</h3>
+    <p><em class="Defn">Indicators</em> are substances that change colour when the pH changes.</p>
+    <ul>
+        <li data-cue="+">Phenolphthalein is clear in acid and becomes red in bases with pH higher than 8.</li>
+        <li data-cue="+">Bromothymol blue is in yellow acid and blue in base.</li>
+        <li data-cue="+">Litmus paper turns red in acid and blue in base.</li>
+        <li data-cue="+">pH Paper turns a variety of colours depending on pH.
+            <p class="Center"><img data-aspect="1317/637" class="w28 s24" src="https://thumbs.dreamstime.com/z/ph-scale-colored-labels-environments-products-ph-scale-colored-labels-environments-products-different-130029275.jpg" alt="pH Paper"/></p></li>
+        <li data-cue="+">pH can also be measured using a digital pH meter.</li>
+    </ul>
+</section>
+
+<section class="Slide"><h3>Naming Acids</h3>
+    <p>Acid names are based on the substance that was dissolved to create the acid.</p>
+    <ul data-cue="+">
+        <li>For example, when hydrogen chloride (HCl) dissolves in water, it makes hydrochloric acid.</li>
+        <li data-cue="+">HCl<sub>(s)</sub> means solid hydrogen chloride.</li>
+        <li data-cue="+">HCl<sub>(aq)</sub> means hydrochloric acid.</li>
+        <li data-cue="+">(aq) stands for <em>aqueous</em>, which means dissolved in water.</li>
+        <li data-cue="+">(s), (l) and (g) are used to indicate a solid, liquid or gas phase.</li>
+    </ul>
+    <ul data-cue="+">
+        <li>hydrogen _ide &rarr; hydro_ic acid</li>
+        <li data-cue="+">hydrogen _ate &rarr; _ic acid</li>
+        <li data-cue="+">hydrogen _ite &rarr; _ous acid</li>
+        <li data-cue="+">hydrogen per_ate &rarr; per_ic acid</li>
+        <li data-cue="+">hydrogen hypo_ite &rarr; hypo_ous acid</li>
+    </ul>
 </section>
 
 </div></div></section>

diff --git a/docs/s10/chem2/img/poly.js b/docs/s10/chem2/img/poly.js
@@ -13,13 +13,13 @@ H2O: (sel) => {
     let pt = [x, y + 2 * bond];
 
     let tog = [];
-    tog.push(svg.line([bond, 0], [-bond, 0]).css({stroke: "black", "stroke-width": "2px"}).$.hide());
-    tog.push(svg.circle(r, [bond, 0]).$);
-    tog.push(svg.circle(r, [-bond, 0]).css({fill: "red"}).$);
+    tog.push(svg.line([bond, 0], [-bond, 0]).css({stroke: "black", "stroke-width": "2px"}).$);
+    tog.push(svg.circle(r, [bond, 0]).$.hide());
+    tog.push(svg.circle(r, [-bond, 0]).css({fill: "red"}).$.hide());
 
-    tog.push(svg.line([x, y], pt).css({stroke: "black", "stroke-width": "2px"}).$.hide());
-    tog.push(svg.circle(r, [x, y]).$);
-    tog.push(svg.circle(r, pt).css({fill: "red"}).$);
+    tog.push(svg.line([x, y], pt).css({stroke: "black", "stroke-width": "2px"}).$);
+    tog.push(svg.circle(r, [x, y]).$.hide());
+    tog.push(svg.circle(r, pt).css({fill: "red"}).$.hide());
 
     svg.circle(r, [x - dx, -y]);
     svg.circle(r, [x + dx, -y]);
@@ -29,7 +29,7 @@ H2O: (sel) => {
 
     let toggle = clickCycle.toggle;
 
-    clickCycle(svg.element, 2,
+    clickCycle(svg.element, 1,
         () => {toggle(tog, true, 0); toggle(tog, false, 1, 2)},
         () => {toggle(tog, true, 3); toggle(tog, false, 4, 5)},
         () => {toggle(tog, true, 1, 2, 4, 5); toggle(tog, false, 0, 3)},

diff --git a/docs/s10/chem2/img/water_H_bond.png b/docs/s10/chem2/img/water_H_bond.png
diff --git a/docs/s10/chem2/poly.htm b/docs/s10/chem2/poly.htm
@@ -13,18 +13,14 @@ <h1 id="Title">Polyatomic Ions &amp; Solubility</h1>
         <li data-cue="+">Oxygen has 6 valence electrons and needs 2 more to fill it.</li>
         <li data-cue="+">Hydrogen has 1 valence electron and needs 1 more to fill it.</li>
         <li data-cue="+">A water molecule is formed when two hydrogen atoms form covalent bonds with an oxygen atom.
-            <p class="Center">
-                <svg class="s12" data-js="s10/chem2/img/poly#H2O"></svg>
-            </p>
+            <p class="Center"><svg id="H2O" class="s12" data-js="s10/chem2/img/poly#H2O"></svg></p>
         </li>
     </ul>
 </section>
 
 <section class="Slide"><h3>Polyatomic Ions</h3>
     <p>What if an oxygen atom formed a bond with a single hydrogen atom...</p>
-    <p class="Center">
-        <svg class="s12" data-js="s10/chem2/img/poly#OH"></svg>
-    </p>
+    <p class="Center"><svg class="s12" data-js="s10/chem2/img/poly#OH"></svg></p>
     <p data-cue="+">The oxygen is still one electron short of a full valence...</p>
     <ul data-cue="+">
         <li>It will try to acquire an extra electron.</li>
@@ -68,12 +64,13 @@ <h1 id="Title">Polyatomic Ions &amp; Solubility</h1>
 
 <script type="text/javascript" data-init="notes">
 
-    loadFeed.notes = () => {
-        let rev = $("#LessonNotes td.Reveal").on("click", (ev) => {
-            $(ev.currentTarget).find("span").fadeToggle();
-        });
-    }
-
+loadFeed.notes = () => {
+    $("#H2O").trigger("click");
+    let rev = $("#LessonNotes td.Reveal").on("click", (ev) => {
+        $(ev.currentTarget).find("span").fadeToggle();
+    });
+}
+
 </script>
 
 </div></div></section>

diff --git a/docs/s10/chem2/water.htm b/docs/s10/chem2/water.htm
@@ -11,7 +11,39 @@ <h2 class="Collapse">Lesson Notes<span data-print="LessonNotes"></span></h2><div
 <h1 id="Title">Properties of Water</h1>
 </section>
 
-<section class="Slide"><h3>?</h3>
+<section class="Slide"><h3>Hydrogen Bonds</h3>
+    <p>Water is an angular molecule (104°) formed when two hydrogen atoms for covalent bonds with an oxygen atom.</p>
+    <p class="Center"><svg class="s12" data-js="s10/chem2/img/poly#H2O"></svg></p>
+    <ul data-cue="+">
+        <li>The sharing of the electrons is not equal. Oxygen keeps more of the shared electrons than hydrogen.</li>
+        <li data-cue="+">Water is a <em class="Defn">polar</em> molecule; the oxygen side is slightly negative and the hydrogen side is slightly positive.</li>
+        <li data-cue="+">As a result, hydrogen is on the lookout for a better opportunity.</li>
+        <li data-cue="+">The hydrogen atoms in H<sub>2</sub>O will attract to the unbonded pairs of electrons in adjacent molecules.
+            <p class="Center"><img data-aspect="432/192" class="s24" src="s10/chem2/img/water_H_bond.png"/></p>
+        </li>
+    </ul>
+    <ul data-cue="+">
+        <li>This attraction of a hydrogen atom in one molecule to electrons in an adjacent molecule is called a <em class="Defn">hydrogen bond</em>.</li>
+        <li data-cue="+">Hydrogen bonds are not as strong as intramolecular (ionic or covalent) bonds, but they are very strong for an intermolecular force.</li>
+    </ul>
+</section>
+
+<section class="Slide""><h3>Properties of Water</h3>
+    <ul>
+        <li>The hydrogen bonds cause water to have high <em class="Defn">cohesion</em> and <em class="Defn">surface tension</em>.</li>
+        <li data-cue="+">Water is an excellent <em class="Defn">solvent</em>; it can dissolve many ionic compounds and even polar molecular compounds.</li>
+        <li data-cue="+">Water has a very high <em class="Defn">heat capacity</em> and <em class="Defn">latent heat</em>; it takes a lot of energy to heat and evapourate water.</li>
+        <li data-cue="+">As a result water has a moderating effect on climate, and persperation/transpiration can keep organisms cool.</li>
+        <li data-cue="+">Ice forms a hexagonal crystal when it freezes.
+            <p class="Center"><img class="w24" src="https://www.mtg.msm.cam.ac.uk/sites/www.mtg.msm.cam.ac.uk/files/styles/carousel/public/media/HexagonalIce.jpg?itok=Aq2XJAAN"/></p>
+        </li>
+    </ul>
+    <ul data-cue="+">
+        <li>The crystal has lots of empty space in the centre of the hexagon.</li>
+        <li data-cue="+">Ice is less dense than liquid water, and floats as a result.</li>
+        <li data-cue="+">Bodies of water freeze from the top down rather than bottom up.</li>
+        <li data-cue="+">The frozen surface of a ponds or lake insulates the liquid water beneath.</li>
+    </ul>
 </section>
 
 </div></div></section>

diff --git a/docs/s10/home.htm b/docs/s10/home.htm
@@ -57,12 +57,12 @@ <h2 class="Collapse">Course Links</h2><div class="Collapse">
     //    ["2024.9.5", "$chem1/atomic"],
     //    ["2024.9.9", "$chem1/isotope"],
     //    ["2024.9.10", "$chem1/bohr"],
-       ["2024.9.11", "$chem1/dot"],
+    //    ["2024.9.11", "$chem1/dot"],
        ["2024.9.16", "$chem2/ionic"],
        ["2024.9.17", "$chem2/molec"],
        ["2024.9.18", "$chem2/poly"],
-       // ["2024.9.", "$chem2/acid"],
-       // ["2024.9.", "$chem2/water"],
+       ["2024.9.19", "$chem2/acid"],
+       ["2024.9.23", "$chem2/water"],
        // ["2024.9.", "$chem3/"],
        ],
 }

diff --git a/docs/s10/unitA.htm b/docs/s10/unitA.htm
@@ -17,17 +17,16 @@ <h2 class="Collapse">Chapter 1: Matter</h2><div class="Collapse">
     </div>
 </div></section>
 
-<section data-show="2024" class="Post" data-icon="salt.svg">
+<section class="Post" data-icon="salt.svg">
 <h2 class="Collapse">Chapter 2: Compounds</h2><div class="Collapse Expand">
     <p>In this chapter you will learn about ionic and covalent bonds, and about the chemistry of molecular and ionic compounds.</p>
     <ul>
         <li><a data-feed="$chem2/ionic">Lesson 8: Binary Ionic Compounds</a></li>
         <li><a data-feed="$chem2/molec">Lesson 9: Molecular Compounds</a></li>
         <li><a data-feed="$chem2/poly">Lesson 10: Polyatomic Ions &amp; Solubility</a></li>
-        <li data-show="2025"><a data-feed="$chem2/acid">Lesson 11: Acids &amp; Bases</a></li>
-        <li data-show="2025"><a data-feed="$chem2/water">Lesson 12: Properties of Water</a></li>
+        <li><a data-feed="$chem2/acid">Lesson 11: Acids &amp; Bases</a></li>
+        <li><a data-feed="$chem2/water">Lesson 12: Properties of Water</a></li>
         <!-- <li><a data-feed="$chem2/rev">Chapter Review</a></li> -->
-        <li>(Additional lessons coming soon)</li>
     </ul>
     <div></div>
         <p class="Var">handouts</p>
@@ -41,6 +40,7 @@ <h2 class="Collapse">Chapter 3: Reactions</h2><div class="Collapse">
         <li><a data-feed="$chem3/">Lesson 1: </a></li>
         <li><a data-feed="$chem3/">Lesson 2: </a></li>
         <!-- <li><a data-feed="$chem3/rev">Chapter Review</a></li> -->
+        <li>(Additional lessons coming soon)</li>
     </ul>
 </div></section>