From 5c4ee052f476157de988a24cd3ea7ec0e6b54ca4 Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Mon, 29 Jul 2024 16:08:41 -0700
Subject: [PATCH 01/29] a11y: Minor CSS cleanup for headings and links

---
 css/bjc.css          | 68 ++++++++++++++++++++++++--------------------
 llab/css/default.css | 17 ++++-------
 2 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/css/bjc.css b/css/bjc.css
index 5524c4880..8e3b3c03b 100755
--- a/css/bjc.css
+++ b/css/bjc.css
@@ -1,35 +1,57 @@
 @charset "UTF-8";
 
 /** Basic HTML **/
-/* TODO: work sans is not loaded on most pages. */
+body {
+  width: 100%;
+  max-width: 100%;
+}
+
+/** TODO: work sans is not loaded on most pages.
+* .h1...h6 classes are used when you want something to /look/ like a heading,
+* but it shouldn't be an actual heading tag
+*/
 body,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+h1, .h1,
+h2, .h2,
+h3, .h3,
+h4, .h4,
+h5, .h5,
+h6, .h6,
+.box-head {
   font-family: "work_sansregular", "Open Sans", sans-serif;
   color: #000;
 }
 
+h3, .h3 {
+  margin-top: 20px;
+  padding-top: 10px;
+}
+
+h4, .h4 {
+  padding: 5px 0px 0px 0px;
+}
+
+/* Roughly visually aligns with the default h4 style
+ * To be used in curriculum boxes which contain subheadings.
+ */
+.box-head {
+  font-weight: bold;
+  font-size: 18px;
+}
+
 .anchor {
   padding-top: 80px;
   margin-top: -80px;
 }
 
+/* should have >= 3:1 contrast with black, 4.5:1 with white */
 a:visited {
-  color: #106070; /* darkened for a11y. */
-  /* color: #248694; */
+  color: #297694;
 }
 
 a,
 .dialogue a {
-  /* color: #28499F; */
-  color: #3056AA;
-  /* color: #2a6496; */
-  /* TODO-A11Y: We need to find better contrasting colors, or make links visual. */
-  /* text-decoration: underline; */
+  color: #3056AA; /* color: #28499F; */
 }
 
 a.btn,
@@ -60,15 +82,6 @@ a.btn,
   padding-right: 25px;
 }
 
-body {
-  width: 100%;
-  max-width: 100%;
-}
-
-h3 {
-  margin-top: 20px;
-}
-
 .blockquote {
   width: 90%;
   margin-left: auto;
@@ -112,14 +125,6 @@ h3 {
   height: 2.5em;
 }
 
-h4 {
-  padding: 5px 0px 0px 0px;
-}
-
-h3 {
-  padding-top: 10px;
-}
-
 .full ul,
 .full ol {
   display: block;
@@ -246,6 +251,7 @@ code.break {
   word-wrap: break-word;
 }
 
+/* a11y: TODO: this color matches Snap!, but does not have enough contrast with white. */
 var {
   padding: 0px;
   color: #f3761d;
diff --git a/llab/css/default.css b/llab/css/default.css
index 42ca39c6d..ac8e6e0b1 100755
--- a/llab/css/default.css
+++ b/llab/css/default.css
@@ -60,10 +60,6 @@ code, pre, tt, kbd, samp, var {
   font-family: 'Andale Mono', 'Menlo', Courier, monospace;
 }
 
-a:visited {
-  color: #36BBCE;
-}
-
 .full {
   padding: 1em;
   width: 95%;
@@ -122,16 +118,15 @@ h1 {
   margin: auto 0;
 }
 h1.title-small-screen {
-  margin: 14px 0 0 0;
+  margin: 16px 0 0 0;
 }
+
 /* Override Bootstrap 3, exclude h1 */
-h2, h3, h4, h5, h6 {
+h2, h3, h4, h5, h6
+.h2, .h3, .h4, .h5, .h6 {
   margin-top: 3px;
   padding: 8px 0;
   color: #000;
-}
-
-h2, h3 {
   font-weight: 800;
 }
 
@@ -188,10 +183,8 @@ code { /* Override bootstrap. */
 
 /* Show a special div on small screens that isn't in the nav bar */
 .title-small-screen {
-  margin: 1% 3%;
   display: none;
-  font-size: 1.5em;
-  font-weight: bold;
+  font-size: 1.8rem;
   color: #000;
 }
 

From e8db11e927288e2113b97cee355dd2484220580f Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Mon, 29 Jul 2024 16:09:03 -0700
Subject: [PATCH 02/29] Add example of using a .box-head class

---
 .../2-data-structures-art/2-quizzes.html      | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html
index 09704e54f..225c14230 100644
--- a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html
+++ b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html
@@ -98,24 +98,28 @@ <h2>Planning a Quiz App</h2>
         <div class="forYouToDo">
 
             <ol start="3">
-                <li><div class="newProject"><span class="text">"U2L2-Quiz"</span><img src="/bjc-r/img/icons/new-project-called.png" alt="Start a New Project called U2L2-Quiz" title="Start a New Project called U2L2-Quiz" /><a  name="input-type">&nbsp;</a></div></li>
-                <div class="ap-standard">AAP-1.D</div>
-                <li>Build the custom <code>quiz item</code> abstract data type (both the constructor and the two selectors).</li>
-                <div class="narrower">
-                    <h4><strong>Specifying an Input Type</strong></h4>
-                    <p>Your selectors expect a quiz item, i.e., a list, as input.  You can make your blocks <em>show</em> what type of data they expect. It's not necessary in Snap<em>!</em> but, like assigning a color to a block, it can be a helpful reminder of what the block does and what type of input it expects. You've already seen input slots of several shapes, indicating different expected data types. </p>
-                    <p>
-                        In the Block Editor while creating a selector, click on a plus sign to enter an input name.  Then...
-                        <ol style="list-style-type:lower-alpha">
-                            <li>
-                                Click on the arrow to the right of the input name:<br />
-                                <img class="indent" src="/bjc-r/img/2-complexity/create-input-name-right_arrow.png" height="125" alt="create input name right arrow" title="create input name right arrow" />
-                            </li>
-                            <li>Choose the data type you want for that input. (For this project, you'll use the "text" and "list" input types.)</li>
-                            <li>Click "OK."</li>
-                        </ol>
-                    </p>
-                </div>
+                <li><div class="newProject"><span class="text">"U2L2-Quiz"</span><img src="/bjc-r/img/icons/new-project-called.png" alt="Start a New Project called U2L2-Quiz" title="Start a New Project called U2L2-Quiz" /><a  name="input-type">&nbsp;</a></div>
+                </li>
+                <li>
+                    <div class="ap-standard">AAP-1.D</div>
+                    Build the custom <code>quiz item</code> abstract data type (both the constructor and the two selectors).
+                    <div class="narrower">
+                        <div class="box-head">Specifying an Input Type</div>
+                        <p>Your selectors expect a quiz item, i.e., a list, as input.  You can make your blocks <em>show</em> what type of data they expect. It's not necessary in Snap<em>!</em> but, like assigning a color to a block, it can be a helpful reminder of what the block does and what type of input it expects. You've already seen input slots of several shapes, indicating different expected data types. </p>
+                        <p>
+                            In the Block Editor while creating a selector, click on a plus sign to enter an input name.  Then...
+                            <ol style="list-style-type:lower-alpha">
+                                <li>
+                                    Click on the arrow to the right of the input name:<br />
+                                    <img class="indent" src="/bjc-r/img/2-complexity/create-input-name-right_arrow.png" height="125" alt="create input name right arrow" title="create input name right arrow" />
+                                </li>
+                                <li>Choose the data type you want for that input. (For this project, you'll use the "text" and "list" input types.)</li>
+                                <li>Click "OK."</li>
+                            </ol>
+                        </p>
+                    </div>
+                </li>
+
                 <li>
 				Create a global variable to store your quiz items and initialize it as a list of items, using your constructor where appropriate.</li>
 						<a id="two-views"> </a>

From e6fcbbea299da278a9e38d12ace55928bf3d4b66 Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Sun, 4 Aug 2024 15:19:06 -0700
Subject: [PATCH 03/29] a11y: ensure no empty list elements are present.

This issue was flagged by SiteImprove.
---
 llab/script/topic.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/llab/script/topic.js b/llab/script/topic.js
index f10a845e4..3ce501f62 100644
--- a/llab/script/topic.js
+++ b/llab/script/topic.js
@@ -296,6 +296,10 @@ llab.renderSection = function (section, parent) {
     }
   }
 
+  if ($contentContainer.children().length == 0) {
+    $contentContainer.remove();
+  }
+
   $section.appendTo(parent);
 };
 

From 25587c5e0e1ac67ee6ac9ba90813ce3223dac645 Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Thu, 8 Aug 2024 15:33:43 -0700
Subject: [PATCH 04/29] a11y: attempt to fix <var> coloring

---
 css/bjc.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/css/bjc.css b/css/bjc.css
index 8e3b3c03b..19403af3d 100755
--- a/css/bjc.css
+++ b/css/bjc.css
@@ -254,7 +254,10 @@ code.break {
 /* a11y: TODO: this color matches Snap!, but does not have enough contrast with white. */
 var {
   padding: 0px;
-  color: #f3761d;
+  /* color: #f3761d; */
+  color: #f1661d;
+  font-weight: bold;
+  font-size: 14pt;
 }
 
 .classIndent {

From c70662cebd5a746b255f714bece06ec7970aa563 Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 19:03:16 -0400
Subject: [PATCH 05/29] a11y - changing <h4><strong> to <h3 class="box-head">

---
 css/bjc.css                                   |  2 ++
 .../2-creating-a-snap-account.es.html         |  6 ++---
 .../2-creating-a-snap-account.html            |  6 ++---
 .../3-loading-mobile-device.es.html           | 12 +++++-----
 .../3-loading-mobile-device.html              | 12 +++++-----
 .../1-pair-programming.es.html                |  2 +-
 .../1-pair-programming.html                   |  2 +-
 .../2-gossip-and-greet/3-customizing.es.html  |  8 +++----
 .../2-gossip-and-greet/3-customizing.html     |  8 +++----
 .../4-making-a-new-block.es.html              |  4 ++--
 .../4-making-a-new-block.html                 |  4 ++--
 .../3-drawing/1-exploring-motion.es.html      |  2 +-
 .../3-drawing/1-exploring-motion.html         |  2 +-
 .../2-exploring-snap-drawing-motion.es.html   |  2 +-
 .../2-exploring-snap-drawing-motion.html      |  2 +-
 .../3-drawing/3-blocks-with-inputs.es.html    |  4 ++--
 .../3-drawing/3-blocks-with-inputs.html       |  4 ++--
 .../3-drawing/4-modify-your-pinwheel.es.html  |  2 +-
 .../3-drawing/4-modify-your-pinwheel.html     |  2 +-
 .../3-drawing/5-remix-your-pinwheel.es.html   |  2 +-
 .../3-drawing/5-remix-your-pinwheel.html      |  2 +-
 .../semi-old/1-exploring-motion.html          |  2 +-
 .../semi-old/3-blocks-with-inputs.html        |  4 ++--
 .../semi-old/4-modify-your-pinwheel.html      |  2 +-
 .../semi-old/7-graphics-and-art.html          |  2 +-
 .../1-following-sprites.es.html               |  4 ++--
 .../1-following-sprites.html                  |  4 ++--
 .../1-custom-blocks.html                      |  2 +-
 .../2-adding-an-input.html                    |  2 +-
 .../1-number-guessing-game.es.html            |  2 +-
 .../1-number-guessing-game.html               |  2 +-
 .../1-variables-games/4-keeping-score.es.html |  6 ++---
 .../1-variables-games/4-keeping-score.html    |  6 ++---
 .../old/4-importing-exporting.html            |  6 ++---
 .../2-data-structures-art/2-quizzes.es.html   |  2 +-
 .../2-combining-predicates.es.html            |  2 +-
 .../3-predicates/2-combining-predicates.html  |  2 +-
 .../2-math-predicates.es.html                 |  6 ++---
 .../2-math-predicates.html                    |  6 ++---
 .../old/debugging/debugging-summary.html      | 22 +++++++++----------
 .../optional-projects/3-mastermind.es.html    |  2 +-
 .../optional-projects/3-mastermind.html       |  2 +-
 .../future/3-click-points.es.html             |  2 +-
 .../future/3-click-points.html                |  2 +-
 .../future/4-mandala.es.html                  |  2 +-
 .../future/4-the-for-each-block.es.html       |  4 ++--
 .../future/4-the-for-each-block.html          |  4 ++--
 .../2-contact-list/1-build-the-list.es.html   |  4 ++--
 .../2-contact-list/1-build-the-list.html      |  4 ++--
 .../2-contact-list/2-adding-contact.es.html   |  2 +-
 .../2-contact-list/2-adding-contact.html      |  2 +-
 .../2-contact-list/3-modifying-adt.es.html    |  2 +-
 .../2-contact-list/3-modifying-adt.html       |  2 +-
 .../2-contact-list/old/2-modifying-adt.html   |  2 +-
 .../unused-new-stuff/5-how-old.html           |  2 +-
 .../4-robots-ai/3-implications.es.html        |  2 +-
 .../3-lists/4-robots-ai/3-implications.html   |  2 +-
 .../optional-projects/4-music-project.es.html |  2 +-
 .../optional-projects/4-music-project.html    |  2 +-
 .../old/Y2Version/2-cryptosecurity.html       |  2 +-
 .../old/mf/1-freedom-of-speech.html           |  2 +-
 .../6-web-data/2-web-scraping-techniques.html |  2 +-
 .../2-halting-problem.es.html                 | 10 ++++-----
 .../2-halting-problem.html                    | 10 ++++-----
 .../6-tic-tac-toe/1-review.es.html            |  2 +-
 .../03-software-languages.es.html             |  6 ++---
 .../1-abstraction/03-software-languages.html  |  6 ++---
 .../1-abstraction/04-software-libraries.html  |  2 +-
 .../06-digital-architecture.es.html           |  4 ++--
 .../06-digital-architecture.html              |  4 ++--
 .../2-binary-sequences.html                   |  4 ++--
 .../CSTA2019/1-solving-word-puzzle.html       |  2 +-
 cur/programming/CSTA2019/2-fractal-art.html   |  2 +-
 cur/programming/CSTA2020/quiz-app.html        |  4 ++--
 cur/programming/CSTANE2020/click-alonzo.html  |  8 +++----
 .../CSTANE2020/data-processing.html           |  2 +-
 cur/programming/CSTANE2020/quiz-app.html      |  2 +-
 .../aprilpd/processing-student-grades.html    |  2 +-
 78 files changed, 149 insertions(+), 147 deletions(-)

diff --git a/css/bjc.css b/css/bjc.css
index 8e3b3c03b..643c22251 100755
--- a/css/bjc.css
+++ b/css/bjc.css
@@ -37,6 +37,8 @@ h4, .h4 {
 .box-head {
   font-weight: bold;
   font-size: 18px;
+  margin-top: 0px;
+  padding: 5px 0px 0px 0px;
 }
 
 .anchor {
diff --git a/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.es.html b/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.es.html
index ec9cb4442..3cb5b709a 100644
--- a/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.es.html
+++ b/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.es.html
@@ -17,7 +17,7 @@ <h2>Guardar proyectos Snap<em>!</em></h2>
 				<li>
 					Hay diferentes formas de guardar los proyectos de Snap<em>!</em> Algunos de ellos implican iniciar sesión o crear una cuenta de Snap<em>!</em> Tu profesor te dirá qué opción usar.
 					<div class="narrower">
-						<h4><strong>Opción A: Guarde su proyecto en tu computadora</strong></h4>
+						<h3 class="box-head">Opción A: Guarde su proyecto en tu computadora</h3>
 						<div class="endnote">
 							<a href="#hint-save-computer" data-toggle="collapse" title="Puedes guardar este archivo en tu computadora, una unidad USB, Google Drive o cualquier otro lugar donde guardes archivos.">Puedes guardar este archivo en tu computadora, una unidad USB, Google Drive o cualquier otro lugar donde guardes archivos.</a>
 							<div id="hint-save-computer" class="collapse">
@@ -28,7 +28,7 @@ <h4><strong>Opción A: Guarde su proyecto en tu computadora</strong></h4>
 							</div>
 						</div>
 
-						<h4><strong>Opción B: Tu profesor te ha creado una cuenta</strong></h4>
+						<h3 class="box-head">Opción B: Tu profesor te ha creado una cuenta</h3>
 						<div class="endnote">
 							<a href="#hint-teacher-setup" data-toggle="collapse" title="Tu profesor te comunicará tu nombre de usuario y contraseña de Snap! Si alguna vez necesitas restablecer tu contraseña, la solicitud irá a tu profesor.">Tu profesor te comunicará tu nombre de usuario y contraseña de Snap<em>!</em> Si alguna vez necesitas restablecer tu contraseña, la solicitud irá a tu profesor.</a>
 							<div id="hint-teacher-setup" class="collapse">
@@ -51,7 +51,7 @@ <h4><strong>Opción B: Tu profesor te ha creado una cuenta</strong></h4>
 							</div>
 						</div>
 
-						<h4><strong>Opción C: Crea una cuenta de Snap<em>!</em> con tu correo electrónico personal</strong></h4>
+						<h3 class="box-head">Opción C: Crea una cuenta de Snap<em>!</em> con tu correo electrónico personal</h3>
 						<div class="endnote">
 							<a href="#hint-personal-email" data-toggle="collapse" title="Se trata de una cuenta de Snap! en la que cualquier solicitud de restablecimiento de contraseña se enviará a tu cuenta de correo electrónico personal.">Se trata de una cuenta de Snap<em>!</em> en la que cualquier solicitud de restablecimiento de contraseña se enviará a tu cuenta de correo electrónico personal.</a>
 							<div id="hint-personal-email" class="collapse">
diff --git a/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html b/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html
index e18153d97..a5371ce9d 100644
--- a/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html
+++ b/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html
@@ -17,7 +17,7 @@ <h2>Saving Snap<em>!</em> Projects</h2>
 				<li>
 					There are different ways to save Snap<em>!</em> projects. Some of them involve logging in or creating a Snap<em>!</em> account. Your teacher will let you know which option to use.
 					<div class="narrower">
-						<div class="h4"><strong>Option A: Save your project to your computer</strong></div>
+						<h3 class="box-head">Option A: Save your project to your computer</h3>
 						<div class="endnote">
 							<a href="#hint-save-computer" data-toggle="collapse" title="You can save this file to your computer, a USB drive, Google Drive, or any other place you keep files.">You can save this file to your computer, a USB drive, Google Drive, or any other place you keep files.</a>
 							<div id="hint-save-computer" class="collapse">
@@ -28,7 +28,7 @@ <h2>Saving Snap<em>!</em> Projects</h2>
 							</div>
 						</div>
 
-						<div class="h4"><strong>Option B: Your teacher has set up an account for you</strong></div>
+						<h3 class="box-head">Option B: Your teacher has set up an account for you</h3>
 						<div class="endnote">
 							<a href="#hint-teacher-setup" data-toggle="collapse" title="Your teacher will let you know your Snap! username and password. If you ever need to reset your password, the request will go to your teacher.">Your teacher will let you know your Snap<em>!</em> username and password. If you ever need to reset your password, the request will go to your teacher.</a>
 							<div id="hint-teacher-setup" class="collapse">
@@ -52,7 +52,7 @@ <h2>Saving Snap<em>!</em> Projects</h2>
 						</div>
 
 
-						<div class="h4"><strong>Option C: Create a Snap<em>!</em> account with a personal email</strong></div>
+						<h3 class="box-head">Option C: Create a Snap<em>!</em> account with a personal email</h3>
 						<div class="endnote">
 							<a href="#hint-personal-email" data-toggle="collapse" title="This is a Snap! account where any password reset requests will go to a personal email account. Your teacher may ask you to use their email address.">This is a Snap<em>!</em> account where any password reset requests will go to your personal email account. Your teacher may ask you to use their email address.</a>
 							<div id="hint-personal-email" class="collapse">
diff --git a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
index 13ebb88bd..08623fcd8 100644
--- a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
+++ b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
@@ -17,7 +17,7 @@ <h2>Compartir tu juego</h2>
                 <li>
                     Puedes utilizar cualquiera de las opciones siguientes si tienes una cuenta de Snap<em>!</em> Si no tiene una cuenta de Snap!, deberá utilizar la opción A.
                     <div class="narrower">
-                        <h4><strong>Opción A: Comparte tu proyecto como archivo</strong></h4>
+                        <h3 class="box-head">Opción A: Comparte tu proyecto como archivo</h3>
 						<div class="endnote">
 							<a href="#hint-share-file" data-toggle="collapse" title="El envío de un archivo XML envía una versión estática de tu proyecto.">El envío de un archivo XML envía una versión estática de tu proyecto.</a>
 							<div id="hint-share-file" class="collapse">
@@ -29,12 +29,12 @@ <h4><strong>Opción A: Comparte tu proyecto como archivo</strong></h4>
 							</div>
 						</div>
 
-                        <h4><strong>Opción B: Comparte tu proyecto como un enlace</strong></h4>
+                        <h3 class="box-head">Opción B: Comparte tu proyecto como un enlace</h3>
 						<div class="endnote">
 							<p><a href="#hint-share-link" data-toggle="collapse" title="Al Compartir tu proyecto se creará un enlace que permitirá a otros ver la versión guardada más reciente de tu proyecto.">Al “Compartir" tu proyecto se creará un enlace que permitirá a otros ver la versión guardada más reciente de tu proyecto.</a></p>
 							<div id="hint-share-link" class="collapse">
 
-                            <h4><strong>Crear el enlace</strong></h4>
+                            <h3 class="box-head">Crear el enlace</h3>
                             <img class="imageRight" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L1P7_OpenFile.es.png"  height="350" alt="Ventana de diálogo para abrir un proyecto" title="Ventana de diálogo para abrir un proyecto"/>
                             <ol type="a">
                                 <li>Debes asegurarte que tu proyecto se encuentra guardado.</li>
@@ -63,7 +63,7 @@ <h4><strong>Crear el enlace</strong></h4>
                 <li>
                     Si trabajas en equipo, asegúrate que todos tengan una copia del proyecto.
                     <div class="narrower">
-                        <h4><strong>Guardar una copia de un proyecto</strong></h4>
+                        <h3 class="box-head">Guardar una copia de un proyecto</h3>
                         <ul>
 							<li>Tanto si comparte su proyecto como un archivo o un enlace, siempre que el segundo socio guarde el proyecto (en su computadora o en su cuenta), estará guardando una <em>copia</em>&mdash; no un archivo compartido. Si el segundo socio modifica el proyecto, deberá volver a guardarlo y compartirlo (como archivo o enlace) con el primer socio para que éste pueda ver el cambio.</li>
 							<div class="endnote">Si tu y tu compañero tienen cuentas de Snap!, el proyecto se guardará en la cuenta de la persona que haya iniciado sesión. Para cambiar quién ha iniciado sesión en Snap<em>!</em>, abra el menú Nube (<img src="/bjc-r/img/1-introduction/cloud_button.png" alt="botón del menú Nube">) y elija "Cerrar sesión". Deja que tu compañero inicie sesión en Snap<em>!</em>. </div>
@@ -84,12 +84,12 @@ <h3>Jugar en tu teléfono</h3>
                 <li>
                     Carga tu juego en un dispositivo móvil.
                     <div class="narrowblue">
-                        <h4><strong>Cargar un proyecto de Snap<em>!</em> en dispositivos Apple iOS</strong></h4>
+                        <h3 class="box-head">Cargar un proyecto de Snap<em>!</em> en dispositivos Apple iOS</h3>
                         <ol type="a">
                             <li>En tu dispositivo móvil, abre el navegador Safari, y copia o escribe el (enlace) URL al proyecto.</li>
                             <li>En la parte inferior de la pantalla de Safari, presiona el botón de compartir, <img src="/bjc-r/img/1-introduction/share.png" width="32" height="32" alt="ícono compartir (cuadrado con flecha hacia arriba)" title="ícono compartir (cuadrado con flecha hacia arriba)">, y luego selecciona "Agregar a la Pantalla de Inicio" desde el menú que aparecerá a continuación.</li>
                         </ol>
-                        <h4><strong>Cargar un proyecto de Snap<em>!</em> en dispositivos Android</strong></h4>
+                        <h3 class="box-head">Cargar un proyecto de Snap<em>!</em> en dispositivos Android</h3>
                         <ol type="a">
                             <li>En tu dispositivo móvil, abre el navegador Chrome, y copia o escribe el (enlace) URL al proyecto.</li>
                             <li>Presiona el ícono de configuración, ☰, y luego selecciona la opción "Agregar a la pantalla de inicio" desde el menú que aparecerá a continuación.</li>
diff --git a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
index 4573e1248..e1e0b6022 100644
--- a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
+++ b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
@@ -15,7 +15,7 @@ <h2>Sharing Your Game</h2>
 				<li>You can use either option below if you have a Snap<em>!</em> account. If you do not have a Snap<em>!</em> account, you need to use Option A.</li>
 
 				<div class="narrower">
-						<h4><strong>Option A: Share your project as a file</strong></h4>
+						<h3 class="box-head">Option A: Share your project as a file</h3>
 						<div class="endnote">
 							<a href="#hint-share-file" data-toggle="collapse" title="Sending an XML file sends a static version of your project.">Sending an XML file sends a static version of your project.</a>
 							<div id="hint-share-file" class="collapse">
@@ -27,11 +27,11 @@ <h4><strong>Option A: Share your project as a file</strong></h4>
 							</div>
 						</div>
 
-						<h4><strong>Option B: Share your project as a link</strong></h4>
+						<h3 class="box-head">Option B: Share your project as a link</h3>
 						<div class="endnote">
 							<p><a href="#hint-share-link" data-toggle="collapse" title="Sharing your project will create a link that will let others see the most recently saved version of your project.">"Sharing" your project will create a link that will let others see the most recently saved version of your project.</a></p>
 							<div id="hint-share-link" class="collapse">
-								<h4><strong>Creating a Link</strong></h4>
+								<h3 class="box-head">Creating a Link</h3>
 								<img class="imageRight" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L1P7_OpenFile.png"  height="350" alt="Open Project dialog box" title="Open Project dialog box"/>
 								<ol type="a">
 									<li>Make sure your project is saved.</li>
@@ -63,7 +63,7 @@ <h4><strong>Creating a Link</strong></h4>
 				<li>
 					If you are working with a partner, make sure you both have a copy.
 					<div class="narrower">
-						<h4><strong>Saving a Copy of a Project</strong></h4>
+						<h3 class="box-head">Saving a Copy of a Project</h3>
 						<ul>
 							<li>Whether you share your project as a file or a link, whenever the second partner saves the project (to their computer or to their account), they will be saving a <em>copy</em>&mdash;not a shared file. If the second partner changes the project, they need to save and share the project (as a file or a link) again with the first partner for the first partner to see the change.</li>
 							<div class="endnote">If you and your partner have Snap<em>!</em> accounts, the project will save to the account of the person who is logged in. To change who is logged in to Snap<em>!</em>, open the Cloud menu (<img src="/bjc-r/img/1-introduction/cloud_button.png" alt="cloud menu button">) and choose "Logout." Let your partner log in to Snap<em>!</em>. </div>
@@ -82,12 +82,12 @@ <h3>Putting the Game on Your Phone</h3>
                 <li>
                     Load your game on a mobile device.
                     <div class="narrowblue">
-                        <h4><strong>Loading a Snap<em>!</em> Project on Apple iOS</strong></h4>
+                        <h3 class="box-head">Loading a Snap<em>!</em> Project on Apple iOS</h3>
                         <ol type="a">
                             <li>On your mobile device, open Safari, and type the project URL (link) for your project.</li>
                             <li>At the bottom of the Safari screen, tap the share icon, <img src="/bjc-r/img/1-introduction/share.png" width="32" height="32" alt="share icon (square with up arrow)" title="share icon (square with up arrow)">, and then select "Add to Home Screen" from the menu that appears.</li>
                         </ol>
-                        <h4><strong>Loading a Snap<em>!</em> Project on Android</strong></h4>
+                        <h3 class="box-head">Loading a Snap<em>!</em> Project on Android</h3>
                         <ol type="a">
                             <li>On your mobile device, open Chrome, and type the project URL (link) for your project.</li>
                             <li>Tap the settings icon, ☰, and then select "Add to homescreen" from the menu that appears.</li>
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/1-pair-programming.es.html b/cur/programming/1-introduction/2-gossip-and-greet/1-pair-programming.es.html
index c1b172875..49b3b1a32 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/1-pair-programming.es.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/1-pair-programming.es.html
@@ -20,7 +20,7 @@ <h2>Programación en pareja</h2>
 		<p>Hay diversas formas de organizar la colaboración. En este curso, utilizaremos una técnica llamada <a href="https://es.wikipedia.org/wiki/Programaci%C3%B3n_en_pareja" title="Wikipedia: Programación en pareja" target="_blank"><em>programación en pareja</em></a>&mdash;escribiendo programas para computadoras en equipos de dos personas. Uno de los miembros del equipo, el <em>conductor,</em> controla la computadora. El otro, el <em>navegador</em>, ayuda a identificar los errores y a llevar el control sobre cómo el código que se está escribiendo se ajusta al plan general.  El navegador o copiloto está encargado de leer las instrucciones que aparecen en la página del Laboratorio en voz alta.  Buscaremos un tiempo equitativo para cada rol, cambiando las funciones cada cinco minutos.</p>
 
 		<div class="takeNote">
-			<h4><strong>Cómo <em>no</em> hacer programación en pareja:</strong></h4>
+			<h3 class="box-head">Cómo <em>no</em> hacer programación en pareja:</h3>
 			<p>Uno de los grandes errores en la programación en pareja es que el navegador o copiloto se aparte y deje que el conductor haga todo el trabajo. El navegador debe prestar atención, de lo contrario solo se alternan los turnos para hacer el trabajo en lugar de aprovechar el beneficio del trabajo en pareja.</p>
 		</div>
 
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/1-pair-programming.html b/cur/programming/1-introduction/2-gossip-and-greet/1-pair-programming.html
index 6f43e328a..da1d35cc3 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/1-pair-programming.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/1-pair-programming.html
@@ -20,7 +20,7 @@ <h2>Pair Programming</h2>
         <p>There are several ways to organize a collaboration.  In this course, you'll use a collaboration technique called <a href="http://en.wikipedia.org/wiki/Pair_programming" title="Wikipedia: Pair programming" target="_blank"><em>pair programming</em></a>&mdash;writing computer programs in teams of two. One partner, the <em>driver,</em> controls the computer. The other, the <em>navigator</em>, helps catch errors and keeps track of how the code being written fits into the overall plan.  The navigator is also in charge of reading the lab pages out loud.  Aim for equal time in each role, switching about every five minutes.</p>
 
 		<div class="takeNote">
-			<h4><strong>How <em>not</em> to do pair programming:</strong></h4>
+			<h3 class="box-head">How <em>not</em> to do pair programming:</h3>
 			<p>The biggest mistake in pair programming is for the navigator to tune out and let the driver do all the work.  The navigator  has to be paying attention; otherwise you're just taking turns doing the entire work instead of making use of the benefits of having two people.</p>
 		</div>
 
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
index a5ff716f1..3f6cca452 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
@@ -20,7 +20,7 @@ <h2>Personalizar y depurar errores <em>(debugging)</em></h2>
                     <img class="inline" src="/bjc-r/img/1-introduction/does-what.es.png" alt="bloque hace" title="bloque hace" />
                     <img class="inline" src="/bjc-r/img/1-introduction/who2.es.png" alt="bloque quién2" title="bloque quién 2" />
                     <div class="narrower">
-                        <h4><strong>¿Cómo editar un bloque?</strong></h4>
+                        <h3 class="box-head">¿Cómo editar un bloque?</h3>
                         <ol type="a">
                             <li><strong>Encuentra el bloque</strong> en el área de trabajo o en la paleta de comandos a la derecha.</li>
                             <li><strong>Haz clic con el botón derecho</strong> (o control-clic) en el bloque y selecciona la opción "editar..."</li>
@@ -139,7 +139,7 @@ <h4><strong>¿Cómo editar un bloque?</strong></h4>
                 <li>
                     Cambia el disfraz o avatar de los personajes (objetos) a tu gusto.
                     <div class="narrower">
-                        <h4><strong>Agregar un disfraz</strong></h4>
+                        <h3 class="box-head">Agregar un disfraz</h3>
                         <ol type="a">
                             <li>En el área de objetos, selecciona el objeto al que deseas cambiar su difraz.</li>
                             <li>Selecciona la opción "Disfraces..." que se encuentra en el menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" style="height:1.5em;" alt="Botón del menú Archivo" title="Botón del menú Archivo"/>).</li>
@@ -153,7 +153,7 @@ <h4><strong>Agregar un disfraz</strong></h4>
                 <li>
                     Arregla cualquier inconveniente con el disfraz de los objetos.
                     <div class="narrower">
-                        <h4><strong>Ajustar los disfraces</strong></h4>
+                        <h3 class="box-head">Ajustar los disfraces</h3>
 
                         <ul>
                             <li>Para cambiar el tamaño del objeto se utiliza el bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/set-size-empty.es.png" alt="fijar tamaño a ( ) %" title="fijar tamaño a ( ) %" />.</li>
@@ -173,7 +173,7 @@ <h4><strong>Ajustar los disfraces</strong></h4>
                 <li>
                     Cambia el fondo del escenario.<br />
                     <div class="narrowblue">
-                        <h4><strong>Agregar un fondo al escenario</strong></h4>
+                        <h3 class="box-head">Agregar un fondo al escenario</h3>
                         <div class="endnote">Cambiar el fondo del escenario es similar a las acciones necesarias para cambiar el disfraz de un objeto.</div>
                         <ol type="a">
                         <li>En el área de objetos, selecciona el elemento <strong>escenario</strong>.</li>
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
index 805941c2a..238faac81 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
@@ -23,7 +23,7 @@ <h2>Customizing and Debugging</h2>
                     <img class="inline" src="/bjc-r/img/1-introduction/does-what.png" alt="does what block" title="does what block" />
                     <img class="inline" src="/bjc-r/img/1-introduction/who2.png" alt="who2 block" title="who2 block" />
                     <div class="narrower">
-                        <h4><strong>How to Edit a Block</strong></h4>
+                        <h3 class="box-head">How to Edit a Block</h3>
                         <ol type="a">
                             <li><strong>Find the block</strong> in the scripting area or the colored palettes on the left.</li>
                             <li><strong>Control-click</strong> (or right-click) on the block and choose "edit..."</li>
@@ -146,7 +146,7 @@ <h4><strong>How to Edit a Block</strong></h4>
                 <li>
                     Change the costumes to anything you like.
                     <div class="narrower">
-                        <h4><strong>Adding a Costume</strong></h4>
+                        <h3 class="box-head">Adding a Costume</h3>
                         <ol type="a">
                             <li>In the sprite corral, select the sprite you want to give costumes to.</li>
                             <li>Choose "Costumes..." from the File (<img src="/bjc-r/img/1-introduction/file_button.png" style="height:1.5em;" alt="File button" title="File button"/>) menu.</li>
@@ -160,7 +160,7 @@ <h4><strong>Adding a Costume</strong></h4>
                 <li>
                     Fix any issues with your costumes.
                     <div class="narrower">
-                        <h4><strong>Adjusting a Costume</strong></h4>
+                        <h3 class="box-head">Adjusting a Costume</h3>
 						<!--<div class="index-term" id="set size</code>"></div>
 						<div class="index-term" id="go to x y</code>"></div>
 						<div class="index-term" id="point in direction</code>"></div>-->
@@ -190,7 +190,7 @@ <h4><strong>Adjusting a Costume</strong></h4>
                 <li>
                     Change the background on the Stage.<br />
                     <div class="narrowblue">
-                        <h4><strong>Adding a Stage Background</strong></h4>
+                        <h3 class="box-head">Adding a Stage Background</h3>
                         <div class="endnote">Changing a stage background is almost like changing a costume.</div>
                         <ol type="a">
                         <li>In the sprite corral, <strong>select the stage.</strong></li>
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html b/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html
index c3cc3d35d..cdeb65162 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html
@@ -23,7 +23,7 @@ <h2>Crear un bloque personalizado</h2>
             </ol>
 
             <div class="narrower">
-                <h4><strong>Crear un nuevo bloque</strong></h4>
+                <h3 class="box-head">Crear un nuevo bloque</h3>
                 <ol type="a">
                     <img class="imageRight noshadow" src="/bjc-r/img/1-introduction/make-a-block-labeled.es.png" alt="imagen de la pantalla 'Crea un bloque' con la paleta de los 10 menús (Movimiento, Apariencia, Sonido, Lápiz, Listas, Control, Sensores, Operadores, Variables, Otros) con los siguientes textos: 'Elige un color (una paleta)' y 'Escribe un título para tu bloque'; tres opciones en forma de bloque (en forma de rompecabezas/'Comando', óvalo/'Reportero', y hexagonal/'Predicado'), texto: 'Selecciona la forma'; dos botones de selección (para todos los objetos, que está seleccionado, y solo para este objeto, que no está seleccionado) sin etiqueta; y dos botones (Aceptar y Cancelar) con el texto 'Haz clic en Cancelar'" title="imagen de la pantalla 'Crea un bloque' con la paleta de los 10 menús (Movimiento, Apariencia, Sonido, Lápiz, Listas, Control, Sensores, Operadores, Variables, Otros) con los siguientes textos: 'Elige un color (una paleta)' y 'Escribe un título para tu bloque'; tres opciones en forma de bloque (en forma de rompecabezas/'Comando', óvalo/'Reportero', y hexagonal/'Predicado'), texto: 'Selecciona la forma'; dos botones de selección (para todos los objetos, que está seleccionado, y solo para este objeto, que no está seleccionado) sin etiqueta; y dos botones (Aceptar y Cancelar) con el texto 'Haz clic en Cancelar'" />
                     <li>
@@ -41,7 +41,7 @@ <h4><strong>Crear un nuevo bloque</strong></h4>
                     <p>Luego de seleccionar el bloque reportero, el editor de bloques se abre con un bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/report.es.png" alt="reportar" title="reportar" /> ya incorporado a un bloque tipo sombrero. Cualquier entrada que se coloque al nuevo bloque <code>reportar</code> será el valor a transmitir.</p>
                 </div>
 
-                <h4><strong>Codificar el nuevo bloque</strong></h4>
+                <h3 class="box-head">Codificar el nuevo bloque</h3>
                 <ol type="a" start="5">
                     <li>
                         <strong>En el área de trabajo se deben arrastrar los bloques necesarios.</strong> Para el ejemplo, debes utilizar los bloques <img src="/bjc-r/img/blocks/list-full-size.es.png" alt="bloque lista" title="bloque lista"> y <img src="/bjc-r/img/1-introduction/item.es.png" alt="elemento(1) de ()" title="elemento(1) de ()">. Debes utilizar el valor reportado por <code>lista</code> como entrada para el bloque <code>elemento</code>.</li>
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html b/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html
index 38e397c04..0bf960dca 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html
@@ -26,7 +26,7 @@ <h2>Making Your Own Block</h2>
             </ol>
 
             <div class="narrower">
-                <h4><strong>Making a New Block</strong></h4>
+                <h3 class="box-head">Making a New Block</h3>
                 <ol type="a">
                        <img class="indent noshadow" src="/bjc-r/img/1-introduction/make-a-block-labeled.png" alt="image of 'Make a block' dialog box with 10 palette menus (Motion, Looks, Pen, Sound, Lists, Control, Sensing, Operation, Variables, Other) labeled 'Choose a color (a palette)'; a text box labeled 'Type a title for your block.'; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.'; two radio boxes (for all sprites, which is checked, and for this sprite only, which is not checked) with no label; and two buttons ('OK' and 'Cancel') labeled 'Click OK.'" title="image of 'Make a block' dialog box with 10 palette menus (Motion, Looks, Pen, Sound, Lists, Control, Sensing, Operation, Variables, Other) labeled 'Choose a color (a palette)'; a text box labeled 'Type a title for your block.'; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.'; two radio boxes (for all sprites, which is checked, and for this sprite only, which is not checked) with no label; and two buttons ('OK' and 'Cancel') labeled 'Click OK.'" />
                     <li>
@@ -44,7 +44,7 @@ <h4><strong>Making a New Block</strong></h4>
                     <p>Because you chose the reporter shape, the block editor opens with a <img class="inline nopadtb" src="/bjc-r/img/blocks/report.png" alt="report" title="report" /> block already attached to the hat block. Whatever input you give to <code>report</code> will become the value reported by your new block.</p>
                 </div>
 
-                <h4><strong>Coding the Block's Script</strong></h4>
+                <h3 class="box-head">Coding the Block's Script</h3>
                 <ol type="a" start="5">
                     <li>
                         <strong>Drag in the blocks you need.</strong> For your new block, use <img src="/bjc-r/img/blocks/list-full-size.png" alt="the list block" title="the list block"> and <img src="/bjc-r/img/1-introduction/item.png" alt="item(1) of ()" title="item(1) of ()">. Use the value reported by <code>list</code> as an input to <code>item</code>.</li>
diff --git a/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html b/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html
index c35d352e6..166575431 100644
--- a/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html
+++ b/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html
@@ -65,7 +65,7 @@ <h2>Explorar el movimiento</h2>
                 <li><img class="inline" src="/bjc-r/img/icons/talk-with-your-partner-mini.png" alt="Habla con tu compañero" title="Habla con tu compañero"> Analiza <em>por qué</em> el código hace lo que se muestra en pantalla.</li>
                 <li><img class="inline" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Habla con otra pareja" title="Hbla con otra pareja" />Compara tu trabajo con otro compañero. En el caso que tu código se comporte de forma diferente, revisa ambos.</li>
                 <div class="takeNote">
-                    <h4><strong>Usar pasos visibles</strong></h4>
+                    <h3 class="box-head">Usar pasos visibles</h3>
                     <p>Snap<em>!</em> cuenta con una herramienta llamada <strong>Pasos visibles</strong>, que permite controlar la velocidad de ejecución de los bloques dentro del código. </p>
                     <ul>
                         <li>
diff --git a/cur/programming/1-introduction/3-drawing/1-exploring-motion.html b/cur/programming/1-introduction/3-drawing/1-exploring-motion.html
index b070f14a1..4998af472 100644
--- a/cur/programming/1-introduction/3-drawing/1-exploring-motion.html
+++ b/cur/programming/1-introduction/3-drawing/1-exploring-motion.html
@@ -69,7 +69,7 @@ <h2>Exploring Motion</h2>
                 <li><img class="inline" src="/bjc-r/img/icons/talk-with-your-partner-mini.png" alt="Talk with Your Partner" title="Talk with Your Partner"> Analyze <em>why</em> that script does what it does.</li>
                 <li><img class="inline" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Talk with Another Pair" title="Talk with Another Pair" />Compare your work with another pair. If your script behaves differently from theirs, check both.</li>
                 <div class="takeNote">
-                    <h4><strong>Using Visible Stepping</strong></h4>
+                    <h3 class="box-head">Using Visible Stepping</h3>
                     <p>Snap<em>!</em> has a tool called <strong>Visible Stepping</strong> that allows you to control how quickly Snap<em>!</em> steps through the blocks of your code. </p>
                     <ul>
                         <li>
diff --git a/cur/programming/1-introduction/3-drawing/2-exploring-snap-drawing-motion.es.html b/cur/programming/1-introduction/3-drawing/2-exploring-snap-drawing-motion.es.html
index 04d42bdf4..9f9320922 100644
--- a/cur/programming/1-introduction/3-drawing/2-exploring-snap-drawing-motion.es.html
+++ b/cur/programming/1-introduction/3-drawing/2-exploring-snap-drawing-motion.es.html
@@ -96,7 +96,7 @@ <h2>Ángulos y giros</h2>
         </div>
 
 		<div class="takeNote">
-			<h4><strong>Depurando con el bloque <img src="/bjc-r/img/2-complexity/Debugging/say-for-secs-block.es.png" alt="decir por segs" title="decir por segs" /> </strong></h4>
+			<h3 class="box-head">Depurando con el bloque <img src="/bjc-r/img/2-complexity/Debugging/say-for-secs-block.es.png" alt="decir por segs" title="decir por segs" /> </h3>
 			<p>Es posible usar el bloque <code>decir por</code> para obtener información acerca del estado del programa que se encuentra en ejecución. La siguiente animación muestra la forma de usar el bloque <code>decir por</code> para entender el posible error en el código utilizado para dibujar un rectángulo. Toma nota de la forma en que el programa hace una pausa y proporciona información útil para ayudarte a identificar la posible fuente del error.</p>
 			<img class="indent" data-gifffer="/bjc-r/img/2-complexity/Debugging/say-for-in-rectangle.gif"  alt="Animación que muestra cómo usar los bloques decir por para depurar un rectángulo con errores de construcción." title="Animación que muestra cómo usar los bloques decir por para depurar un rectángulo con errores de construcción."/>
 		</div>
diff --git a/cur/programming/1-introduction/3-drawing/2-exploring-snap-drawing-motion.html b/cur/programming/1-introduction/3-drawing/2-exploring-snap-drawing-motion.html
index 352cd05e0..03f6c4bb7 100644
--- a/cur/programming/1-introduction/3-drawing/2-exploring-snap-drawing-motion.html
+++ b/cur/programming/1-introduction/3-drawing/2-exploring-snap-drawing-motion.html
@@ -99,7 +99,7 @@ <h2>Angles and Turning</h2>
         </div>
 
 		<div class="takeNote">
-			<h4><strong>Debugging with <img src="/bjc-r/img/2-complexity/Debugging/say-for-secs-block.png" alt="say for" title="say for" /> </strong></h4>
+			<h3 class="box-head">Debugging with <img src="/bjc-r/img/2-complexity/Debugging/say-for-secs-block.png" alt="say for" title="say for" /> </h3>
 			<p>You can use <code>say for</code> to get information about the state of your program while it's running.</p>
             <p>
                 <a href="#hint-say-for" data-toggle="collapse" title="This animation shows how to use say for to determine the bug in  code that is supposed to draw a rectangle.">This animation</a> shows how to use <code>say for</code> to determine the bug in  code that is supposed to draw a rectangle. Notice how <code>say for</code> makes the program pause and gives you information to help you identify the source of error.
diff --git a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
index 2e36c4326..e51bcbac7 100644
--- a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
+++ b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
@@ -38,7 +38,7 @@ <h2>Bloques con entradas</h2>
                 <li>
                     Crea un bloque de <code>molinete</code> con un campo de entrada para ingresar el número de <var>ramas</var>. Las instrucciones se encuentran a continuación y al final de ellas un video sobre el proceso.
                     <div class="narrower">
-                        <h4><strong>Programar un bloque con campo de entrada</strong></h4>
+                        <h3 class="box-head">Programar un bloque con campo de entrada</h3>
                         <ol type="a">
                             <li>
                                 <strong>Crea un bloque nuevo, ingresa el nombre del bloque y un campo de entrada para ingresar un valor y luego haz clic en "Aceptar".</strong> Para este proyecto, ingresa el siguiente título <code>molinete, ramas</code>.
@@ -123,7 +123,7 @@ <h4><strong>Programar un bloque con campo de entrada</strong></h4>
                 <img class="imageRight" src="/bjc-r/img/icons/save-mini.png" alt="Guarda tu trabajo." title="Guarda tu trabajo." />
                 <li>Comenta tu código.</li>
                 <div class="takeNote">
-                    <h4><strong>Consejos de depuración: Comentar tu código</strong></h4>
+                    <h3 class="box-head">Consejos de depuración: Comentar tu código</h3>
 					<div class="ap-standard">CRD-2.G.2</div>
                     <p>
                         Agregar comentarios a tu código puede ayudarte a recordar en qué pensabas al incluir ese bloque y la funcionalidad del mismo. Los comentarios ayudan a otras personas que leen el código a entenderlo mejor, y puede ayudar a evitar incluir errores gracias a que se incrementa su claridad.  Por el contrario, comentar todas las líneas de código tendrá el efecto opuesto; por lo que debes ser claro comentando únicamente cómo funcionan los bloques seleccionados dentro de tu código. Se pueden agregar comentarios en Snap<em>!</em> usando clic-derecho (o control-clic) en el área de trabajo y seleccionando la opción "Añadir comentario." <a href="#hint-comments" data-toggle="collapse" title="Clic para abrir una animación que muestra cómo añadir comentarios.">Haz clic para ver una animación del proceso.</a>
diff --git a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
index e975d59a9..1e33f1973 100644
--- a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
+++ b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
@@ -37,7 +37,7 @@ <h2>Blocks with Inputs</h2>
                 <li>
                     Create a <code>pinwheel</code> block with an input for the <var>number of branches</var>. Instructions are below and you can also watch the process in the video that follows the instructions.
                     <div class="narrower">
-                        <h4><strong>Making a Block with an Input</strong></h4>
+                        <h3 class="box-head">Making a Block with an Input</h3>
                         <ol type="a">
                             <li>
                                 <strong>Create a new block, type the block name and the label for your input, and click OK.</strong> For this project, type <code>pinwheel, branches:</code>.
@@ -122,7 +122,7 @@ <h4><strong>Making a Block with an Input</strong></h4>
                 <img class="imageRight" src="/bjc-r/img/icons/save-mini.png" alt="Save Your Work" title="Save Your Work" />
                 <li>Comment your code.</li>
                 <div class="takeNote">
-                    <h4><strong>Debugging Tip: Commenting Your Code</strong></h4>
+                    <h3 class="box-head">Debugging Tip: Commenting Your Code</h3>
 					<div class="ap-standard">CRD-2.G.2</div>
                     <p>
                         Adding comments to your code may help you remember what your code does, helps other people reading your code to understand it, and can help you avoid bugs by increasing the clarity of your program.  But it won't do any of those things if you comment every line of code, so each comment just says how a block inside your script works.  You can add comments to your Snap<em>!</em> code by right-clicking (or control-clicking) in the Scripts area and choosing "add comment." <a href="#hint-comments" data-toggle="collapse" title="Click for an animation that shows how to add comments.">Click for an animation that shows how.</a>
diff --git a/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html b/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html
index b9f2f80b2..a7d6a1df1 100644
--- a/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html
+++ b/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html
@@ -144,7 +144,7 @@ <h3>Agregar múltiples entradas</h3>
 			</ol>
 		</div>
         <div class="takeNote">
-            <h4><strong>Consejos para depuración: Organiza tu código</strong></h4>
+            <h3 class="box-head">Consejos para depuración: Organiza tu código</h3>
             <p>
                 Una buena práctica para evitar errores en el programa es, prioritariamente, mantener el código organizado al borrar todos los bloques que no se utilizan. Normalmente arrastramos bloques para hacer pruebas, pero se pueden quedar en el espacio de trabajo sin uso. Se puede usar la opción <strong>ordenar</strong> haciendo clic-derecho (o control-clic en Mac) en el área de trabajo para organizar los bloques. Se puede <strong>eliminar o eliminar un bloque o código</strong> arrastrándolo hacia afuera del área de trabajo hacia la paleta de funciones al lado izquierdo, o bien seleccionando la opción "eliminar" en el menú emergente al hacer clic-derecho. <a href="#hint-organizing" data-toggle="collapse" title="Haz clic aquí para ver un video ejemplo sobre cómo limpiar el área de trabajo eliminando bloques." >Clic para abrir el video del proceso</a>. (Toma nota que es una funcionalidad diferente a la opción "eliminar definición de bloque...", la cual borra permanentemente un bloque personalizado y todas sus instancias en todo el proyecto.)<br />
                 <div id="hint-organizing" class="collapse">
diff --git a/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html b/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html
index 0cd96fe7e..1ef0e3460 100644
--- a/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html
+++ b/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html
@@ -157,7 +157,7 @@ <h3>Adding Multiple Inputs</h3>
 
 
         <div class="takeNote">
-            <h4><strong>Debugging Tip: Organizing Your Code</strong></h4>
+            <h3 class="box-head">Debugging Tip: Organizing Your Code</h3>
             <p>
                 One way to avoid having bugs in your program in the first place is to keep your code organized by deleting any unused scripts.  You can use the <strong>clean up</strong> option by right-clicking (or control-clicking on a Mac) in the scripting area to organize your blocks.  You can <strong>remove a block or script</strong> either by dragging it out of the scripting area and back to the palettes on the left or by choosing the "delete" option from the drop-down menu. <a href="#hint-organizing" data-toggle="collapse" title="Click here for a video of cleaning up the scripting area and removing blocks.">Click here for a video</a>. (Note that this is different from the "delete block definition" option which will permanently delete a custom block and all its instances from your entire project.)<br />
                 <div id="hint-organizing" class="collapse">
diff --git a/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.es.html b/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.es.html
index bbda5fdb6..c05cee103 100644
--- a/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.es.html
+++ b/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.es.html
@@ -33,7 +33,7 @@ <h2>Usar el <code>molinete</code> para crear un <code>polígono</code></h2>
                 </li>
 			</ol>
             <div class="takeNote">
-                <h4><strong>Depurar con <img src="/bjc-r/img/2-complexity/Debugging/pause-all-block.es.png" alt="pausar todos" title="pausar todos"/></strong></h4>
+                <h3 class="box-head">Depurar con <img src="/bjc-r/img/2-complexity/Debugging/pause-all-block.es.png" alt="pausar todos" title="pausar todos"/></h3>
                 <p>Puedes utilizar <code>pausar todos</code> para colocar pausas en tu código que te permitan ver lo que está ocurriendo. Cuando trabajas el código incluyendo <code>pausar todo</code>, puedes hacer clic en el botón amarillo de Reproducir/Pausar situado al lado del botón de la bandera verde (<img src="/bjc-r/img/sys/play-button.png" alt="Botón de reproducir" title="Botón de reproducir"/>/<img src="/bjc-r/img/1-introduction/pause_button.png" alt="Botón de Pausar" title="Botón de Pausar"/>) para moverte por el código hasta que encontrarte con un bloque <code>pausar todo</code> de nuevo. El bloque <code>pausar todo</code> detendrá <em>cada</em> procedimiento que se esté reproduciendo hasta que se haga clic en el botón amarillo de Reproducir/Pausar.</p>
             </div>
 		</div>
diff --git a/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.html b/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.html
index be8d20e1c..db29327bf 100644
--- a/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.html
+++ b/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.html
@@ -36,7 +36,7 @@ <h2>Using <code>Pinwheel</code> to Make <code>Polygon</code></h2>
                 </li>
 			</ol>
             <div class="takeNote">
-                <h4><strong>Debugging with <img src="/bjc-r/img/2-complexity/Debugging/pause-all-block.png" alt="pause all" title="pause all"/></strong></h4>
+                <h3 class="box-head">Debugging with <img src="/bjc-r/img/2-complexity/Debugging/pause-all-block.png" alt="pause all" title="pause all"/></h3>
                 <p>You can use <code>pause all</code> to place breaks in your code so you can see what's happening along the way. When you run code with <code>pause all</code> in it, you can click the yellow Run/Pause button next to the Green Flag (<img src="/bjc-r/img/sys/play-button.png" alt="play button" title="play button"/>/<img src="/bjc-r/img/1-introduction/pause_button.png" alt="pause button" title="pause button"/>) to move through the code up until a <code>pause all</code> block is reached again. The <code>pause all</code> block will pause <em>every</em> script that is running until the yellow Run/Pause button is clicked.</p>
             </div>
 		</div>
diff --git a/cur/programming/1-introduction/3-drawing/semi-old/1-exploring-motion.html b/cur/programming/1-introduction/3-drawing/semi-old/1-exploring-motion.html
index f251f0061..3bd44ee24 100644
--- a/cur/programming/1-introduction/3-drawing/semi-old/1-exploring-motion.html
+++ b/cur/programming/1-introduction/3-drawing/semi-old/1-exploring-motion.html
@@ -86,7 +86,7 @@ <h2>Exploring Motion</h2>
                 	</ol>
                 </li>
                 <div class="narrower">
-                    <h4><strong>Using Visible Stepping</strong></h4>
+                    <h3 class="box-head">Using Visible Stepping</h3>
                     <p>Snap<em>!</em> has a tool called <strong>Visible Stepping</strong> that allows you to control how quickly Snap<em>!</em> steps through the blocks of your code. </p>
                     <ul>
                         <li>
diff --git a/cur/programming/1-introduction/3-drawing/semi-old/3-blocks-with-inputs.html b/cur/programming/1-introduction/3-drawing/semi-old/3-blocks-with-inputs.html
index 6fa682f2a..57e5d46a3 100644
--- a/cur/programming/1-introduction/3-drawing/semi-old/3-blocks-with-inputs.html
+++ b/cur/programming/1-introduction/3-drawing/semi-old/3-blocks-with-inputs.html
@@ -50,7 +50,7 @@ <h2>Blocks with Inputs</h2>
                 <li>
                     Create a <code>pinwheel</code> block with an input for the number of <var>branches</var>. Instructions are below and you can also watch the process in the video that follows the instructions.
                     <div class="narrower">
-                        <h4><strong>Making a Block with an Input</strong></h4>
+                        <h3 class="box-head">Making a Block with an Input</h3>
                         <ol type="a">
                             <li>
                                 <strong>Create a new block, type the block name and the label for your input, and click OK.</strong> For this project, type <code>pinwheel, branches:</code>.
@@ -131,7 +131,7 @@ <h4><strong>Making a Block with an Input</strong></h4>
                 <img class="imageRight" src="/bjc-r/img/icons/save-mini.png" alt="Save Your Work" title="Save Your Work" />
                 <li>Comment your code.</li>
                 <div class="takeNote">
-                    <h4><strong>Debugging Tip: Commenting Your Code</strong></h4>
+                    <h3 class="box-head">Debugging Tip: Commenting Your Code</h3>
                     <div class="todo">
                         <h4><em><strong>Brian</strong></em> will fix the video to address his concerns:</h4>
                         <p>Oh, about the orange box on 1.3.3, I think the comment on the hat block is okay, but the comment on the turn is exactly the sort of thing I wouldn't do.  In fact I might make a point of saying that when you're /teaching/ someone, you (we) put in comments that you wouldn't use if you were just programming for yourself.</p>
diff --git a/cur/programming/1-introduction/3-drawing/semi-old/4-modify-your-pinwheel.html b/cur/programming/1-introduction/3-drawing/semi-old/4-modify-your-pinwheel.html
index abfc4e8bd..a04517421 100644
--- a/cur/programming/1-introduction/3-drawing/semi-old/4-modify-your-pinwheel.html
+++ b/cur/programming/1-introduction/3-drawing/semi-old/4-modify-your-pinwheel.html
@@ -108,7 +108,7 @@ <h3>Adding Multiple Inputs</h3>
         </div>
 
         <div class="takeNote">
-            <h4><strong>Debugging Tip: Organizing Your Code</strong></h4>
+            <h3 class="box-head">Debugging Tip: Organizing Your Code</h3>
             <p>
                 One way to avoid having bugs in your program in the first place is to keep your code organized by deleting any unused scripts.  You can use the <strong>clean up</strong> option by right-clicking (or control-clicking on a Mac) in the scripting area to organize your blocks.  You can <strong>remove a block or script</strong> either by dragging it out of the scripting area and back to the palettes on the left or by choosing the "delete" option from the drop-down menu. <a href="#hint-target" data-toggle="collapse" title="Click here for a video of cleaning up the scripting area and removing blocks.">Click here for a video</a>. (Note that this is different from the "delete block definition" option which will permanently delete a custom block and all its instances from your entire project.)<br />
                 <div id="hint-target" class="collapse">
diff --git a/cur/programming/1-introduction/3-drawing/semi-old/7-graphics-and-art.html b/cur/programming/1-introduction/3-drawing/semi-old/7-graphics-and-art.html
index 9c628e4ac..e907390ca 100644
--- a/cur/programming/1-introduction/3-drawing/semi-old/7-graphics-and-art.html
+++ b/cur/programming/1-introduction/3-drawing/semi-old/7-graphics-and-art.html
@@ -42,7 +42,7 @@ <h3>Ruthless Suggestions from Al</h3>
                 </li>
 
                 <div class="takeNote">
-                    <h4><strong>Debugging with <img src="/bjc-r/img/2-complexity/Debugging/say-for-secs-block.png" height="48" alt="say for" title="say for" /> </strong></h4>
+                    <h3 class="box-head">Debugging with <img src="/bjc-r/img/2-complexity/Debugging/say-for-secs-block.png" height="48" alt="say for" title="say for" /> </h3>
                     <p>You can use <code>say for</code> to get information about the state of your program while it's running. This animation shows how to use <code>say for</code> to understand the problem in buggy code for drawing a rectangle. Notice how this makes the program pause and give you information to help you identify the source of error.</p>
 					<img class="indent" data-gifffer="/bjc-r/img/2-complexity/Debugging/say-for-in-rectangle.gif"  alt="Animation on how to use say for blocks for debugging an erroneous rectangle construction." title="Animation on how to use say for blocks for debugging an erroneous rectangle construction."/>
                 </div>
diff --git a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
index 1640319a6..38cef3288 100644
--- a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
+++ b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
@@ -20,7 +20,7 @@ <h3>Seguir al puntero de tu ratón</h3>
 				<li>
 					<div class="newProject"><span class="text">"U1L5-SeguirObjeto"</span><img src="/bjc-r/img/icons/new-project-called.es.png" alt="Crea un proyecto nuevo llamado U1L5-SeguirObjeto" /></div>
 					<div class="narrower">
-						<h4><strong>Creación de un nuevo proyecto Snap<em>!</em></strong></h4>
+						<h3 class="box-head">Creación de un nuevo proyecto Snap<em>!</em></h3>
 						<ol style="list-style-type:lower-alpha">
 							<li>
 								Abre <a href="https://snap.berkeley.edu/run" title="Snap!" target="_blank">Snap<em>!</em></a>.
@@ -69,7 +69,7 @@ <h3>Programar un segundo personaje</h3>
 				<li>
 					Para que los nombres de tus personajes sean significativos, cambia el nombre de <strong>Objeto</strong> a <strong>Líder</strong> y cambia <strong>Objeto(2)</strong> a <strong>Seguidor</strong>.
 					<div class="narrower">
-						<h4><strong>Cambiar el nombre de un personaje</strong></h4>
+						<h3 class="box-head">Cambiar el nombre de un personaje</h3>
 						<p>
 							Busca el nombre en un cuadro gris sobre el área de secuencias de comandos. Haz clic dentro del nombre y podrás editarlo.<br />
 							<img class="indent" src="/bjc-r/img/1-introduction/change-sprite-name.es.jpg" alt="imagen del campo de nombre de un personaje sobre el area de secuencias de comandos y debajo del nombre del proyecto" title="imagen del campo de nombre de un personaje sobre el area de secuencias de comandos y debajo del nombre del proyecto" />
diff --git a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
index 8e68b8819..ea3f38e79 100644
--- a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
+++ b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
@@ -20,7 +20,7 @@ <h3>Following the Mouse</h3>
 				<li>
 					<div class="newProject"><span class="text">"U1L5-SpriteChase"</span><img src="/bjc-r/img/icons/new-project-called.png" alt="Create a new project called U1L5-SpriteChase" title="Create a new project called U1L5-SpriteChase" /></div>
 					<div class="narrower">
-						<h4><strong>Creating a New Snap<em>!</em> Project</strong></h4>
+						<h3 class="box-head">Creating a New Snap<em>!</em> Project</h3>
 						<ol style="list-style-type:lower-alpha">
 							<li>
 								Open <a href="https://snap.berkeley.edu/run" title="Snap!" target="_blank">Snap<em>!</em></a>.
@@ -70,7 +70,7 @@ <h3>Programming a Second Sprite</h3>
 				<li>
 					To make your sprite names meaningful, change the name of <strong>Sprite</strong> to <strong>Leader</strong>, and change <strong>Sprite(2)</strong> to <strong>Follower</strong>.
 					<div class="narrower">
-						<h4><strong>Changing the Name of a Sprite</strong></h4>
+						<h3 class="box-head">Changing the Name of a Sprite</h3>
 						<p>
 							Look for the name in a gray box above the scripting area.  Click inside the name and you'll be able to edit it.<br />
 							<img class="indent" src="/bjc-r/img/1-introduction/change-sprite-name.jpg" alt="image of sprite name input field above the scripting area and below the project name" title="image of sprite name input field above the scripting area and below the project name" />
diff --git a/cur/programming/1-introduction/old/4-modularity-and-abstraction/1-custom-blocks.html b/cur/programming/1-introduction/old/4-modularity-and-abstraction/1-custom-blocks.html
index 668fb1a3d..804fe81f5 100755
--- a/cur/programming/1-introduction/old/4-modularity-and-abstraction/1-custom-blocks.html
+++ b/cur/programming/1-introduction/old/4-modularity-and-abstraction/1-custom-blocks.html
@@ -64,7 +64,7 @@ <h2>Designing Custom Blocks</h2>
         
                 
         <div class="endnote">
-	        <h4><strong>Optional Details on Making a Custom Block</strong></h4>
+	        <h3 class="box-head">Optional Details on Making a Custom Block</h3>
             Every block needs a place to "live" (a <strong>palette</strong>, shown by the color), a <strong>title</strong>, a <strong>category</strong> (shown by the shape of the block), and a <strong>script</strong> that defines its behavior.
 			<ul>
 				<li> 
diff --git a/cur/programming/1-introduction/old/4-modularity-and-abstraction/2-adding-an-input.html b/cur/programming/1-introduction/old/4-modularity-and-abstraction/2-adding-an-input.html
index 692bedbea..a9c285ecc 100755
--- a/cur/programming/1-introduction/old/4-modularity-and-abstraction/2-adding-an-input.html
+++ b/cur/programming/1-introduction/old/4-modularity-and-abstraction/2-adding-an-input.html
@@ -48,7 +48,7 @@ <h2>Giving Your Block an Input Variable</h2>
         
                 
 		<div class="endnote">
-	        <h4><strong>Optional Details on Adding an Input Variable</strong></h4>
+	        <h3 class="box-head">Optional Details on Adding an Input Variable</h3>
 			<ul>
                 <li> 
                 	<div class="sideHOMbig">If you don't see the <strong>+</strong> marks, uncheck  "Plain prototype labels" in the Settings menu.<br /><img class="" src="/bjc-r/img/1-introduction/plain-protoype-labels.jpg" alt="Plain prototype labels option" title="Plain prototype labels option" /></div>
diff --git a/cur/programming/2-complexity/1-variables-games/1-number-guessing-game.es.html b/cur/programming/2-complexity/1-variables-games/1-number-guessing-game.es.html
index 6e94322e9..16d0f609f 100755
--- a/cur/programming/2-complexity/1-variables-games/1-number-guessing-game.es.html
+++ b/cur/programming/2-complexity/1-variables-games/1-number-guessing-game.es.html
@@ -41,7 +41,7 @@ <h2>Empezar un juego de adivinar números</h2>
 				<li>
 					Crea una variable de programa llamada <var>número secreto</var> para almacenar el número que el jugador intentará adivinar (instrucciones a continuación).
 					<div class="narrower">
-						<h4><strong>Crear una variable de programa</strong></h4>
+						<h3 class="box-head">Crear una variable de programa</h3>
 						<ol type="a">
 							<li>
 								<strong>Mueve un bloque de <code>variable de programa</code> al Área de programas. </strong> Puedes encontrarlo en la paleta Variables.<br />
diff --git a/cur/programming/2-complexity/1-variables-games/1-number-guessing-game.html b/cur/programming/2-complexity/1-variables-games/1-number-guessing-game.html
index b3807ce53..15c0f294f 100755
--- a/cur/programming/2-complexity/1-variables-games/1-number-guessing-game.html
+++ b/cur/programming/2-complexity/1-variables-games/1-number-guessing-game.html
@@ -45,7 +45,7 @@ <h2>Starting a Number Guessing Game</h2>
                 <li>
                     Create a script variable called <var>secret number</var> to store the number that the player will try to guess (instructions below).
                     <div class="narrower">
-                        <h4><strong>Making a Script Variable</strong></h4>
+                        <h3 class="box-head">Making a Script Variable</h3>
                         <ol type="a">
                             <li>
                                 <strong>Move a <code>script variables</code> block into the Scripting Area.</strong> You can find it in the Variables palette.<br />
diff --git a/cur/programming/2-complexity/1-variables-games/4-keeping-score.es.html b/cur/programming/2-complexity/1-variables-games/4-keeping-score.es.html
index 24e9e4aa8..cde945841 100644
--- a/cur/programming/2-complexity/1-variables-games/4-keeping-score.es.html
+++ b/cur/programming/2-complexity/1-variables-games/4-keeping-score.es.html
@@ -17,7 +17,7 @@ <h2>Mantener la puntuación con variables globales</h2>
             <p>Una <strong>variable global</strong> (<em>global variable</em>) es una variable que todos los scripts del programa pueden utilizar.</p>
         </div>
         <div class="endnote">
-            <h4><strong>¿Cuándo se necesitan variables globales?</strong></h4>
+            <h3 class="box-head">¿Cuándo se necesitan variables globales?</h3>
             <p>La mayoría de las veces, las variables de secuencia de comandos son una mejor opción porque ninguna otra parte del programa puede cambiarlas y, por lo tanto, reducen la posibilidad de errores. Pero <strong>si varias secuencias de comandos necesitan acceso</strong> a una variable o <strong>si la información de esa variable debe guardarse</strong> en tu proyecto, utiliza una variable global.</p>
         </div>
 
@@ -28,7 +28,7 @@ <h4><strong>¿Cuándo se necesitan variables globales?</strong></h4>
                 <div class="takeNote">Si guardas un trabajo nuevo con un nombre de archivo anterior, Snap<em>!</em> sobrescribirá tu proyecto original. Utiliza &quot;Guardar como...&quot; desde el menú Archivo Snap<em>!</em> para guardar con el nuevo nombre. Cuando cargues un proyecto anterior y estés a punto de hacer un gran cambio, acostúmbrate a <em>guardar primero, con el nuevo nombre, antes de cambiar nada</em>. </div>
                 <li>Crea una variable global llamada <var>puntuación</var> siguiendo los pasos a continuación:</li>
                 <div class="narrower">
-                    <h4><strong>Crear una variable global</strong></h4>
+                    <h3 class="box-head">Crear una variable global</h3>
                     <ol type="a">
                         <li>Haz clic en <img class="inline" src="/bjc-r/img/1-introduction/make-a-variable.es.png" alt="botón para crear una variable" title="botón para crear una variable" /> en la paleta Variables. (No es un bloque; no puedes arrastrarlo al área de secuencias de comandos).</li>
                         <li>Escribe el título de tu variable. En este caso, es <var>puntuación</var>.</li>
@@ -67,7 +67,7 @@ <h4><strong>Crear una variable global</strong></h4>
                 <li>
                     <strong>Prueba y depura.</strong> Tomen turnos para jugar y corrijan cualquier error. <img class="inline" src="/bjc-r/img/icons/save-mini.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" /><br />
                     <div class="takeNote">
-                        <h4><strong>Consejo de depuración: Visualización de variables</strong></h4>
+                        <h3 class="box-head">Consejo de depuración: Visualización de variables</h3>
                         <p>
                             Cuando estés depurando tu código, puede ser útil ver el valor de una variable en diferentes puntos de tu programa. Esto se hace de manera diferente para las variables locales y globales:
                             <ul>
diff --git a/cur/programming/2-complexity/1-variables-games/4-keeping-score.html b/cur/programming/2-complexity/1-variables-games/4-keeping-score.html
index 4cbde1bd3..3a94a4230 100644
--- a/cur/programming/2-complexity/1-variables-games/4-keeping-score.html
+++ b/cur/programming/2-complexity/1-variables-games/4-keeping-score.html
@@ -18,7 +18,7 @@ <h2>Keeping Score with Global Variables</h2>
             <p>A <strong>global variable</strong> is a variable that is usable by all scripts in the program.</p>
         </div>
         <div class="endnote">
-            <h4><strong>When are global variables needed?</strong></h4>
+            <h3 class="box-head">When are global variables needed?</h3>
             <p>Most of the time, script variables are a better choice because they can't be changed by some other part of the program, and so they reduce the chance of bugs. But <strong>if multiple scripts need access</strong> to a variable or <strong>if the information in that variable needs to be saved</strong> with your project, then use a global variable.</p>
         </div>
 
@@ -29,7 +29,7 @@ <h4><strong>When are global variables needed?</strong></h4>
                 <div class="takeNote">If you save new work under an old filename, Snap<em>!</em> will overwrite your original project. Use  &quot;Save as...&quot; from the Snap<em>!</em> File menu to save with the new name. When you load an older project and are about to make a big change, get in the habit of <em>saving first, with the new name, before you change anything</em>. </div>
                 <li>Create a global variable named <var>score</var>. Here's how.</li>
                 <div class="narrower">
-                    <h4><strong>Making a Global Variable</strong></h4>
+                    <h3 class="box-head">Making a Global Variable</h3>
                     <ol type="a">
                         <li>Click  <img class="inline" src="/bjc-r/img/1-introduction/make-a-variable.png" alt="make a variable button" title="make a variable button" />  in the Variables palette.  (It's not a block; you can't drag it into the scripting area.)</li>
                         <li>Type the title for your variable. In this case, it's <var>score</var>.</li>
@@ -68,7 +68,7 @@ <h4><strong>Making a Global Variable</strong></h4>
                 <li>
                     <strong>Test and debug.</strong> Take turns playing, and fix any bugs. <img class="inline" src="/bjc-r/img/icons/save-mini.png" alt="Save your work" title="Save your work" /><br />
                     <div class="takeNote">
-                        <h4><strong>Debugging Tip: Display of Variables</strong></h4>
+                        <h3 class="box-head">Debugging Tip: Display of Variables</h3>
                         <p>
                             When you are debugging your code, it can help to see the value of a variable at different points in your program. This is done differently for local and global variables:
                             <ul>
diff --git a/cur/programming/2-complexity/1-variables-games/old/4-importing-exporting.html b/cur/programming/2-complexity/1-variables-games/old/4-importing-exporting.html
index e31954437..1d00afaea 100644
--- a/cur/programming/2-complexity/1-variables-games/old/4-importing-exporting.html
+++ b/cur/programming/2-complexity/1-variables-games/old/4-importing-exporting.html
@@ -29,7 +29,7 @@ <h2>Importing <code>Greet Player</code> into Another Program</h2>
                 <li>
                     Fix any problems with <code>greet player</code>. When  it's working correctly, <em>export</em> it. (Instructions below.)
                     <div class="narrower">
-                        <h4><strong>Exporting Blocks</strong></h4>
+                        <h3 class="box-head">Exporting Blocks</h3>
                         <ol type="a">
                             <li><strong>Choose "Export blocks..."</strong> from the Snap<em>!</em> file menu (<img class="inline" src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>).</li>
                             <li><strong>Select only the block(s) you wish to export</strong> (in this case, just <code>greet player</code>), and click "OK." An XML file will download.</li>
@@ -40,7 +40,7 @@ <h4><strong>Exporting Blocks</strong></h4>
                 <li>
                     Now, open your U2L1-NumberGuessing project, and <em>import</em> your <code>greet player</code> block. 
 					<div class="narrower">
-                        <h4><strong>Importing Blocks</strong></h4>
+                        <h3 class="box-head">Importing Blocks</h3>
 						<ol type="a">
                             <li><strong>Choose "Import..."</strong> from the Snap<em>!</em> file menu (<img class="inline" src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>).</li>
                             <li><strong>Locate the XML file you exported</strong> (perhaps on your desktop or in your downloads folder) and <strong>click Open</strong>.</li>
@@ -55,7 +55,7 @@ <h4><strong>Importing Blocks</strong></h4>
         </div>
         
         <div class="takeNote">
-            <h4><strong>Debugging Dependencies</strong></h4>
+            <h3 class="box-head">Debugging Dependencies</h3>
             <p>Sometimes when you take a script out of the program where you built it and try to use it somewhere else, something breaks. It could be that the script depends on a custom block that isn't defined in the new program, or it could be (as in this case) that the script depends on a <em>global variable</em> that isn't defined in the new program. </p>
             <p>To fix this problem so you can use the imported block, you'll need to define the global variable in your new program. Dependencies are one reason to use script variables rather than global variables whenever you can. Because they are defined <em>in</em> their scripts, you don't lose them when you move the script to a new place.</p>
         </div>
diff --git a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.es.html b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.es.html
index 10446f3ac..c12b20939 100644
--- a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.es.html
+++ b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.es.html
@@ -101,7 +101,7 @@ <h2>Planificación de una aplicación de cuestionario</h2>
                 <div class="ap-standard">AAP-1.D</div>
                 <li>Cree el tipo de datos abstracto <code>elemento de prueba</code> personalizado (tanto el constructor como los dos selectores).</li>
                 <div class="narrower">
-                    <h4><strong>Especificación de un tipo de entrada</strong></h4>
+                    <h3 class="box-head">Especificación de un tipo de entrada</h3>
                     <p>Sus selectores esperan un elemento de prueba, es decir, una lista, como entrada. Puede hacer que sus bloques <em>muestren</em> qué tipo de datos esperan. No es necesario en Snap<em>!</em> pero, como asignar un color a un bloque, puede ser un recordatorio útil de lo que hace el bloque y qué tipo de entrada espera. Ya conoces las ranuras de entrada de varias formas, que indican diferentes tipos de datos esperados. </p>
                     <p>
                         En el Editor de bloques, mientras creas un selector, haz clic en el signo más para ingresar un nombre de entrada. Después...
diff --git a/cur/programming/2-complexity/3-predicates/2-combining-predicates.es.html b/cur/programming/2-complexity/3-predicates/2-combining-predicates.es.html
index 2e55b6d9d..f7ee45f02 100644
--- a/cur/programming/2-complexity/3-predicates/2-combining-predicates.es.html
+++ b/cur/programming/2-complexity/3-predicates/2-combining-predicates.es.html
@@ -66,7 +66,7 @@ <h3>Funciones booleanas</h3>
                     <img class="indent" src="/bjc-r/img/2-complexity/number-between-two-others(with-result-false).es.png" alt="¿El número (3.8) está entre (3.9) y (4.7) ? reporta falso" title="¿El número (3.8) está entre (3.9) y (4.7) ? reporta falso">
                     <img class="indent" src="/bjc-r/img/2-complexity/word-between-two-others(with-result-true).es.png" alt="¿ (manzana) está entre (mango) y (martes) ? reporta verdadero" title="¿ (manzana) está entre (mango) y (martes) ? reporta verdadero">
                     <div class="narrower">
-                        <h4><strong>Hacer un predicado</strong></h4>
+                        <h3 class="box-head">Hacer un predicado</h3>
                         <ul>
                             <li>
                                 Elige el <em>predicado</em> con la forma hexagonal.<br />
diff --git a/cur/programming/2-complexity/3-predicates/2-combining-predicates.html b/cur/programming/2-complexity/3-predicates/2-combining-predicates.html
index 5d3398c5e..ddc9645e3 100644
--- a/cur/programming/2-complexity/3-predicates/2-combining-predicates.html
+++ b/cur/programming/2-complexity/3-predicates/2-combining-predicates.html
@@ -69,7 +69,7 @@ <h3>Boolean Functions</h3>
                     <img class="indent" src="/bjc-r/img/2-complexity/number-between-two-others(with-result-false).png" alt="is (3.8) between (3.9) and (4.7) ? reporting false" title="is (3.8) between (3.9) and (4.7) ? reporting false">
                     <img class="indent" src="/bjc-r/img/2-complexity/word-between-two-others(with-result-true).png" alt="is (apples) between (alphabet) and (azure) ? reporting true" title="is (apples) between (alphabet) and (azure) ? reporting true">
                     <div class="narrower">
-                        <h4><strong>Making a Predicate </strong></h4>
+                        <h3 class="box-head">Making a Predicate </h3>
                         <ul>
                             <li>
                             	Choose the hexagonal <em>predicate</em> shape.<br />
diff --git a/cur/programming/2-complexity/4-making-computers-do-math/2-math-predicates.es.html b/cur/programming/2-complexity/4-making-computers-do-math/2-math-predicates.es.html
index 027662f3b..635518381 100644
--- a/cur/programming/2-complexity/4-making-computers-do-math/2-math-predicates.es.html
+++ b/cur/programming/2-complexity/4-making-computers-do-math/2-math-predicates.es.html
@@ -21,7 +21,7 @@ <h2>Crear una biblioteca matemática</h2>
                 <li>
                     Exporta los bloques matemáticos de tu proyecto U2L3-Predicados.
                     <div class="narrower">
-                      <h4><strong>Exportación de bloques</strong></h4>
+                      <h3 class="box-head">Exportación de bloques</h3>
                         <ol type="a">
                             <li><strong>Abre el proyecto Snap<em>!</em></strong> que tiene los bloques que quieres exportar. (En este caso, tu proyecto U2L3-Predicados).</li>
                             <li><strong>Elige "Exportar bloques..."</strong> en el menú de Archivo de Snap<em>!</em> (<img class="inline" src="/bjc-r/img/1-introduction/file_button.png" alt="Botón del menú Archivo" title="Botón del menú Archivo"/>).</li>
@@ -39,7 +39,7 @@ <h4><strong>Exportación de bloques</strong></h4>
                 <li>
                     Importa estos bloques a tu proyecto U2L4-BibliotecaMatemática, pruébalos, resuelve cualquier problema y guárdalo.
                     <div class="narrower">
-                        <h4><strong>Importación de bloques</strong></h4>
+                        <h3 class="box-head">Importación de bloques</h3>
                         <ol type="a">
                             <li><strong>Abre el proyecto Snap<em>!</em></strong> que tiene los bloques que quieres exportar. (En este caso, tu proyecto U2L4-BibliotecaMatemática).</li>
                             <li>
@@ -68,7 +68,7 @@ <h4><strong>Importación de bloques</strong></h4>
         </div>
 
         <div class="takeNote">
-            <h4><strong>Depuración de<a name="dependencies" class="anchor">&nbsp;</a>dependencias</strong></h4>
+            <h3 class="box-head">Depuración de<a name="dependencies" class="anchor">&nbsp;</a>dependencias</h3>
             <img class="imageRight" src="/bjc-r/img/2-complexity/even-obsolete.es.png" alt="¿Es este un número par? {reportar(¡Obsoleto!)}" title="¿Es este un número par? {reportar(¡Obsoleto!)}" />
                 <p>Creaste el bloque <code>¿par?</code> usando otro bloque personalizado, <code>¿divisible entre?</code>. Si deseas usar <code>¿par?</code> en otro proyecto algún día, debes exportar <em>ambos</em> bloques para que <code>¿par?</code> funcione correctamente.</p>
                 <p>Si alguna vez ves este bloque rojo <code>¡Obsoleto!</code> en el código que has importado, significa que faltó exportar un bloque requerido. Tendrás que regresar al proyecto original y exportar de nuevo los bloques asegurándote que seleccionas todos los que necesitas.</p>
diff --git a/cur/programming/2-complexity/4-making-computers-do-math/2-math-predicates.html b/cur/programming/2-complexity/4-making-computers-do-math/2-math-predicates.html
index 7aa549363..bb60e3706 100644
--- a/cur/programming/2-complexity/4-making-computers-do-math/2-math-predicates.html
+++ b/cur/programming/2-complexity/4-making-computers-do-math/2-math-predicates.html
@@ -22,7 +22,7 @@ <h2>Making a Mathematical Library</h2>
                 <li>
                     Export the mathematical blocks from your U2L3-Predicates project.
                     <div class="narrower">
-                      <h4><strong>Exporting Blocks</strong></h4>
+                      <h3 class="box-head">Exporting Blocks</h3>
                         <ol type="a">
                             <li><strong>Open the Snap<em>!</em> project</strong> from which you want to export blocks. (In this case, your U2L3-Predicates project.)</li>
                             <li><strong>Choose "Export blocks..."</strong> from the Snap<em>!</em> file menu (<img class="inline" src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>).</li>
@@ -40,7 +40,7 @@ <h4><strong>Exporting Blocks</strong></h4>
                 <li>
                     Import these blocks into your U2L4-MathLibrary project, test them and resolve any issues, and save.
                     <div class="narrower">
-                        <h4><strong>Importing Blocks</strong></h4>
+                        <h3 class="box-head">Importing Blocks</h3>
                         <ol type="a">
                             <li><strong>Open the Snap<em>!</em> project</strong> into which you want to import blocks. (In this case, your U2L4-MathLibrary project.)</li>
                             <li>
@@ -69,7 +69,7 @@ <h4><strong>Importing Blocks</strong></h4>
         </div>
 
         <div class="takeNote">
-            <h4><strong>Debugging<a name="dependencies" class="anchor">&nbsp;</a>Dependencies</strong></h4>
+            <h3 class="box-head">Debugging<a name="dependencies" class="anchor">&nbsp;</a>Dependencies</h3>
             <img class="imageRight" src="/bjc-r/img/2-complexity/even-obsolete.png" alt="even? (number#){report(Obsolete!)}" title="even? (number#){report(Obsolete!)}" />
                 <p>You created your <code>even?</code> block using another custom block, <code>divisible by?</code>. If you want to use <code>even?</code> in another project one day, you must export <em>both</em> blocks in order for <code>even?</code> to work properly.</p>
                 <p>If you ever see this red <code>Obsolete!</code> block in code you have imported, it means that a required block was not exported. You'll have to go back to the original project and export again being sure to select all of the blocks needed by the blocks you want.</p>
diff --git a/cur/programming/2-complexity/old/debugging/debugging-summary.html b/cur/programming/2-complexity/old/debugging/debugging-summary.html
index 97bc8c937..710571335 100644
--- a/cur/programming/2-complexity/old/debugging/debugging-summary.html
+++ b/cur/programming/2-complexity/old/debugging/debugging-summary.html
@@ -46,11 +46,11 @@ <h2>Debugging Reference Page</h2>
         </div>
         
         
-        <h4><strong>What is Debugging?</strong></h4> 
+        <h3 class="box-head">What is Debugging?</h3> 
         Debugging is the art of identifying errors in computer programs and finding  ways of resolving them.<br /><br />
         
         
-        <h4><strong>Debugging Principles</strong></h4>
+        <h3 class="box-head">Debugging Principles</h3>
         <ul>
         <li>Recognize the existence of a bug. </li>
         <li>When you experience a bug, do <em>not</em> delete your project and start over.</li>
@@ -64,7 +64,7 @@ <h4><strong>Debugging Principles</strong></h4>
         <li>Love your bugs!  They give you insight into programming and a make you better at it!</li>
         </ul><br />
         
-        <h4><strong>Some Debugging Tools in Snap<em>!</em></strong></h4>
+        <h3 class="box-head">Some Debugging Tools in Snap<em>!</em></h3>
         <ul>
         <li>Use <code>pause all</code> block to place breaks in your code and step through your code at will.  
        
@@ -74,7 +74,7 @@ <h4><strong>Some Debugging Tools in Snap<em>!</em></strong></h4>
         <div id="hint-pause" class="collapse">
         You learned about this in <a href="/bjc-r/cur/programming/2-complexity/optional-projects/future/7-diagonal-design.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment" title="Mandala Design">Unit 2 Lab 2 Page 4: Mandala Design</a>. <br />
         <div class="takeNote">
-			<h4><strong>Debugging with <img src="/bjc-r/img/2-complexity/Debugging/pause-all-block.png"  height="42" alt="pause all" title="pause all"/></strong></h4>
+			<h3 class="box-head">Debugging with <img src="/bjc-r/img/2-complexity/Debugging/pause-all-block.png"  height="42" alt="pause all" title="pause all"/></h3>
             
 			You can use <code>pause all</code> to place breaks in your code so you can see what's happening along the way. In this animation, the programmer runs their code with <code>pause all</code> inside it and then clicks the yellow Run/Pause button next to the Green Flag (<img src="/bjc-r/img/sys/play-button.png" alt="play button" title="play button"/>/<img src="/bjc-r/img/1-introduction/pause_button.png" alt="pause button" title="pause button"/>) to move through the code up until a <code>pause</code> block is reached again. In this example, there is only one script running, but <code>pause all</code> will pause <em>every</em> script that is running until the yellow Run/Pause button is clicked.<br />
             <img class="indent" data-gifffer="/bjc-r/img/2-complexity/Debugging/PauseAll.gif" width="800" height="358" alt="Animation on how to use pause all block" title="Animation on how to use pause all block"/>
@@ -88,7 +88,7 @@ <h4><strong>Debugging with <img src="/bjc-r/img/2-complexity/Debugging/pause-all
         <div id="hint-say-blocks" class="collapse">
         You learned about this in <a href="/bjc-r/cur/programming/1-introduction/3-drawing/old/7-graphics-and-art.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Graphics and Art">Unit 1 Lab 3 Page 7: Graphics and Art</a>. <br />
          <div class="takeNote">
-                    <h4><strong>Debugging with <img src="/bjc-r/img/2-complexity/Debugging/say-for-secs-block.png"  height="48" alt="say() for () secs" title="say() for () secs"/> </strong></h4>
+                    <h3 class="box-head">Debugging with <img src="/bjc-r/img/2-complexity/Debugging/say-for-secs-block.png"  height="48" alt="say() for () secs" title="say() for () secs"/> </h3>
                     <p>You can use <code>say for</code> to get information about the state of your program while it's running. This animation shows how to use <code>say for</code> to understand the problem in buggy code for drawing a rectangle. Notice how this makes the program pause and give you information to help you identify the source of error.</p>
                     
 		<img class="indent" data-gifffer="/bjc-r/img/2-complexity/Debugging/say-for-in-rectangle.gif"  alt="Animation on how to use say for blocks for debugging an erroneous rectangle construction." title="Animation on how to use say for blocks for debugging an erroneous rectangle construction."/>
@@ -102,7 +102,7 @@ <h4><strong>Debugging with <img src="/bjc-r/img/2-complexity/Debugging/say-for-s
                 <div id="hint-visual-stepping" class="collapse">
                 You learned about this in <a href="/bjc-r/cur/programming/3-lists/1-abstraction/2-fractal-art.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment" title="Fractal Art">Unit 2 Lab 4 Page 2: Fractal Art</a>. <br />
                 <div class="takeNote">
-			<h4><strong>Debugging with Visible Stepping</strong></h4>
+			<h3 class="box-head">Debugging with Visible Stepping</h3>
 			
             <p>Snap<em>!</em> has a debugging tool called <strong>Visible Stepping</strong> that allows you to control how quickly Snap<em>!</em> steps through the blocks of your code. This lets you see the effect of each block one-by-one to help you understand any errors in your code.</p>
            
@@ -121,7 +121,7 @@ <h4><strong>Debugging with Visible Stepping</strong></h4>
         You learned about this in <a href="/bjc-r/cur/programming/2-complexity/1-variables-games/3-debugging-extending.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment" title="Unit 2 Lab 1 Page 3: Debugging and Extending Your Number Guessing Game">Unit 2 Lab 1 Page 3: Debugging and Extending Your Number Guessing Game</a> and <a href="/bjc-r/cur/programming/2-complexity/1-variables-games/4-keeping-score.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment" title="Unit 2 Lab 1 Page 4: Keeping Score with Global Variables">Unit 2 Lab 1 Page 4: Keeping Score with Global Variables</a>.<br />
         
         <div class="takeNote">
-                      <h4><strong>Debugging Tip: Display of Variables</strong></h4>
+                      <h3 class="box-head">Debugging Tip: Display of Variables</h3>
                         
                       <p>
                             When you are debugging your code, it can help to see the value of a variable at different points in your program. There are several ways to do this:
@@ -136,7 +136,7 @@ <h4><strong>Debugging Tip: Display of Variables</strong></h4>
           </div>
                   <div class="takeNote">
 
-                    <h4><strong>Debugging Tip: Display of Variables</strong></h4>
+                    <h3 class="box-head">Debugging Tip: Display of Variables</h3>
                     <p>Global variables have check-boxes that control the display of the variable watcher on the stage (shown below). This can make it easier to track down errors in your program.</p>
                     <img class="indent" src="/bjc-r/img/2-complexity/Debugging/golbal-variables-checked.png"  height="300" alt="Checking the global variables in the palette." title="Checking the global variables in the palette."/><img class="indent" src="/bjc-r/img/2-complexity/Debugging/global-variables-displayed.png"  height="300" alt="Displaying the global variables on the stage" title="Displaying the global variables on the stage"/>
                 </div>
@@ -146,7 +146,7 @@ <h4><strong>Debugging Tip: Display of Variables</strong></h4>
 		</div>
 		
         
-        <h4><strong>Recommended Programming Habits to Minimize Bugs</strong></h4>
+        <h3 class="box-head">Recommended Programming Habits to Minimize Bugs</h3>
        <ul>
        
        <li>Document your program using comments in Snap<em>!</em>.  <a href="#hint-commenting" data-toggle="collapse" title="Commenting in Snap!">  Click for a demo of commenting.</a>  
@@ -154,7 +154,7 @@ <h4><strong>Recommended Programming Habits to Minimize Bugs</strong></h4>
         <div id="hint-commenting" class="collapse">
         You have seen this in <a href="/bjc-r/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Blocks with Inputs">Unit 1 Lab 3 Page 3: Blocks with Inputs</a>.
        <div class="takeNote">
-            <h4><strong>Debugging Tip: Commenting Your Code</strong></h4>
+            <h3 class="box-head">Debugging Tip: Commenting Your Code</h3>
             
             <p>Adding comments to your code helps you remember what your code does, helps other people reading your code to understand it, and can help you avoid bugs by increasing the clarity of your program.  This animation shows how to add comments to your Snap<em>!</em> code by right-clicking (or control-clicking) in the Scripts area and choosing "add comment."</p>
             <p>Notice that a comment attached to the hat block in the Block Editor becomes the help message for a custom block.</p>
@@ -168,7 +168,7 @@ <h4><strong>Debugging Tip: Commenting Your Code</strong></h4>
         <div id="hint-organization" class="collapse">  
         You have seen this <a href="/bjc-r/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Modify Your Pinwheel">Unit 1 Lab 3 Page 4: Modify Your Pinwheel</a><br />
         <div class="takeNote">
-            <h4><strong>Debugging Tip: Organizing Your Code</strong></h4>
+            <h3 class="box-head">Debugging Tip: Organizing Your Code</h3>
             
             <p>
                 A great way to avoid having bugs in your program in the first place is to keep your code organized by deleting any unused blocks to avoid clutter. Here are examples of messy code and neatly organized code with comments. If you came back to your project after a few days, which code do you think would be easier to debug?<br />
diff --git a/cur/programming/2-complexity/optional-projects/3-mastermind.es.html b/cur/programming/2-complexity/optional-projects/3-mastermind.es.html
index 7f776efc3..efd665b50 100644
--- a/cur/programming/2-complexity/optional-projects/3-mastermind.es.html
+++ b/cur/programming/2-complexity/optional-projects/3-mastermind.es.html
@@ -36,7 +36,7 @@ <h2>La mente maestra</h2>
                 </div>
                 <li>Juega una partida del juego de La mente maestra <em>en papel</em> con tu compañero.</li>
                 <div class="narrower">
-                	<h4><strong>La mente maestra</strong></h4>
+                	<h3 class="box-head">La mente maestra</h3>
                     <ul>
                         <li>
                             <strong>Cada jugador deberá escribir una secuencia de cuatro colores</strong> sin que tu compañero la vea.
diff --git a/cur/programming/2-complexity/optional-projects/3-mastermind.html b/cur/programming/2-complexity/optional-projects/3-mastermind.html
index b86b98c4c..72d59e9c8 100644
--- a/cur/programming/2-complexity/optional-projects/3-mastermind.html
+++ b/cur/programming/2-complexity/optional-projects/3-mastermind.html
@@ -36,7 +36,7 @@ <h2>Mastermind</h2>
                 </div>
                 <li>Play a game of Mastermind with your partner <em>on paper</em>.</li>
                 <div class="narrower">
-                	<h4><strong>Mastermind Rules</strong></h4>
+                	<h3 class="box-head">Mastermind Rules</h3>
                     <ul>
                         <li>
                             <strong>Each player should write down a sequence of four colors</strong> without letting your partner see it.
diff --git a/cur/programming/2-complexity/optional-projects/future/3-click-points.es.html b/cur/programming/2-complexity/optional-projects/future/3-click-points.es.html
index 85d1584e9..8c276384a 100644
--- a/cur/programming/2-complexity/optional-projects/future/3-click-points.es.html
+++ b/cur/programming/2-complexity/optional-projects/future/3-click-points.es.html
@@ -67,7 +67,7 @@ <h2>Capturing Clicks as Points</h2>
                 <li>
                     Select a stage background of your choice.
                     <div class="narrower">
-                        <h4><strong>Setting the Stage Background</strong></h4>
+                        <h3 class="box-head">Setting the Stage Background</h3>
                         <ol type="a">
                             <li>
 								<strong>Click the Stage button</strong> below the actual stage. <br />
diff --git a/cur/programming/2-complexity/optional-projects/future/3-click-points.html b/cur/programming/2-complexity/optional-projects/future/3-click-points.html
index ca56e24d8..2fb89f482 100644
--- a/cur/programming/2-complexity/optional-projects/future/3-click-points.html
+++ b/cur/programming/2-complexity/optional-projects/future/3-click-points.html
@@ -64,7 +64,7 @@ <h2>Capturing Clicks as Points</h2>
                 <li>
                     Select a stage background of your choice.
                     <div class="narrower">
-                        <h4><strong>Setting the Stage Background</strong></h4>
+                        <h3 class="box-head">Setting the Stage Background</h3>
                         <ol type="a">
                             <li>
 								<strong>Click the Stage button</strong> below the actual stage. <br />
diff --git a/cur/programming/2-complexity/optional-projects/future/4-mandala.es.html b/cur/programming/2-complexity/optional-projects/future/4-mandala.es.html
index d8a16f73b..77378bd6c 100644
--- a/cur/programming/2-complexity/optional-projects/future/4-mandala.es.html
+++ b/cur/programming/2-complexity/optional-projects/future/4-mandala.es.html
@@ -92,7 +92,7 @@ <h1>Moved this to 1.3.4 --MF, 7/19/19</h1>
         </div>
         </div>
         <div class="takeNote">
-			<h4><strong>Debugging with <img src="/bjc-r/img/2-complexity/Debugging/pause-all-block.es.png"  height="42" alt="pause all" title="pause all"/></strong></h4>
+			<h3 class="box-head">Debugging with <img src="/bjc-r/img/2-complexity/Debugging/pause-all-block.es.png"  height="42" alt="pause all" title="pause all"/></h3>
             <div class="todo">BH, I edited this text so I could hide the video. --MF, 5/31/19</div>
 			<p>You can use <code>pause all</code> to place breaks in your code so you can see what's happening along the way. When you run code with <code>pause all</code> in it, you can click the yellow Run/Pause button next to the Green Flag (<img src="/bjc-r/img/sys/play-button.png" alt="play button" title="play button"/>/<img src="/bjc-r/img/1-introduction/pause_button.png" alt="pause button" title="pause button"/>) to move through the code up until a <code>pause all</code> block is reached again. The <code>pause all</code> block will pause <em>every</em> script that is running until the yellow Run/Pause button is clicked.
             <a href="#hint-pauseall" data-toggle="collapse" title="Click for a video that shows how to use the PAUSE ALL block.">Click for a video that shows how.</a></p>
diff --git a/cur/programming/2-complexity/optional-projects/future/4-the-for-each-block.es.html b/cur/programming/2-complexity/optional-projects/future/4-the-for-each-block.es.html
index ddb43d46d..a79e25436 100644
--- a/cur/programming/2-complexity/optional-projects/future/4-the-for-each-block.es.html
+++ b/cur/programming/2-complexity/optional-projects/future/4-the-for-each-block.es.html
@@ -84,7 +84,7 @@ <h1>VAGUE OUTLINE FOR NEW VERSION</h1>
 				<li>
                     Select a stage background of your choice.
                     <div class="narrower">
-                        <h4><strong>Setting the Stage Background</strong></h4>
+                        <h3 class="box-head">Setting the Stage Background</h3>
                         <ol type="a">
                             <li>
                                 <strong>Click the Stage button</strong> below the actual stage. <br />
@@ -174,7 +174,7 @@ <h1>OLD VERSION FOLLOWS</h1>
                 <li><a class="run" href="/bjc-r/prog/2-complexity/U2L2-DrawShape.xml"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a><br />
                 This project file contains the list of points for the letter A, but you need to build their <code>go to point</code> block that takes a point as input.</li>
                 <div class="narrower">
-                    <h4><strong>Specifying an Input Type</strong></h4>
+                    <h3 class="box-head">Specifying an Input Type</h3>
                     This animation shows you how to specify the list input type (<img class="inline" src="/bjc-r/img/3-lists/list_input_slot.png" alt="list input type: rectangle with two smaller orange rectangles inside" title="list input type: rectangle with two smaller orange rectangles inside">). Other input types are specified the same way. <br />
                     <img class="indent" data-gifffer="/bjc-r/img/2-complexity/U2ImageVideoAddendum_img/gotopointAnimation.gif" height="400" alt="List input type selection" title="List input type selection" />
                     <div class="endnote">
diff --git a/cur/programming/2-complexity/optional-projects/future/4-the-for-each-block.html b/cur/programming/2-complexity/optional-projects/future/4-the-for-each-block.html
index fce5ffa3f..31dec1fb9 100644
--- a/cur/programming/2-complexity/optional-projects/future/4-the-for-each-block.html
+++ b/cur/programming/2-complexity/optional-projects/future/4-the-for-each-block.html
@@ -84,7 +84,7 @@ <h1>VAGUE OUTLINE FOR NEW VERSION</h1>
 				<li>
                     Select a stage background of your choice.
                     <div class="narrower">
-                        <h4><strong>Setting the Stage Background</strong></h4>
+                        <h3 class="box-head">Setting the Stage Background</h3>
                         <ol type="a">
                             <li>
                                 <strong>Click the Stage button</strong> below the actual stage. <br />
@@ -174,7 +174,7 @@ <h1>OLD VERSION FOLLOWS</h1>
                 <li><a class="run" href="/bjc-r/prog/2-complexity/U2L2-DrawShape.xml"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load a starter project. Then save it." title="Click here to load a starter project. Then save it."></a><br />
                 This project file contains the list of points for the letter A, but you need to build their <code>go to point</code> block that takes a point as input.</li>
                 <div class="narrower">
-                    <h4><strong>Specifying an Input Type</strong></h4>
+                    <h3 class="box-head">Specifying an Input Type</h3>
                     This animation shows you how to specify the list input type (<img class="inline" src="/bjc-r/img/3-lists/list_input_slot.png" alt="list input type: rectangle with two smaller orange rectangles inside" title="list input type: rectangle with two smaller orange rectangles inside">). Other input types are specified the same way. <br />
                     <img class="indent" data-gifffer="/bjc-r/img/2-complexity/U2ImageVideoAddendum_img/gotopointAnimation.gif" height="400" alt="List input type selection" title="List input type selection" />
                     <div class="endnote">
diff --git a/cur/programming/3-lists/2-contact-list/1-build-the-list.es.html b/cur/programming/3-lists/2-contact-list/1-build-the-list.es.html
index d6bbe198e..7fc2803f3 100644
--- a/cur/programming/3-lists/2-contact-list/1-build-the-list.es.html
+++ b/cur/programming/3-lists/2-contact-list/1-build-the-list.es.html
@@ -27,7 +27,7 @@ <h3>Configuración de la lista de contactos</h3>
             </ol>
 		</div>
         <div class="takeNote">
-            <h4><strong>¿Por qué mundial?</strong></h4>
+            <h3 class="box-head">¿Por qué mundial?</h3>
             <strong>Varias secuencias de comandos</strong> en todo el proyecto <strong>utilizarán esta variable</strong>, por lo que no debe adjuntarse a una sola secuencia de comandos como una variable de secuencia de comandos local.
         </div>
 
@@ -41,7 +41,7 @@ <h3>Crear el tipo de dato abstracto (ADT)</h3>
             <div><span>Gamal:</span> Sí. En este proyecto, necesitaremos un constructor <code>contacto</code> y luego selectores para acceder al <code>nombre</code>, <code>dirección</code> y <code>número de teléfono</code> para cualquier contacto dado.</div>
 		</div>
 		<div class="takeNote">
-            <h4><strong>Preservar la privacidad</strong></h4>
+            <h3 class="box-head">Preservar la privacidad</h3>
             <p>Los proyectos de Snap<em>!</em> no son seguros. No utilices tu información personal ni la de tus compañeros.</p>
         </div>
         <div class="forYouToDo">
diff --git a/cur/programming/3-lists/2-contact-list/1-build-the-list.html b/cur/programming/3-lists/2-contact-list/1-build-the-list.html
index 32596b54e..700d4d1cb 100644
--- a/cur/programming/3-lists/2-contact-list/1-build-the-list.html
+++ b/cur/programming/3-lists/2-contact-list/1-build-the-list.html
@@ -28,7 +28,7 @@ <h3>Setting Up the Contact List</h3>
 		</div>
 
 		<div class="takeNote">
-            <h4><strong>Why a global variable?</strong></h4>
+            <h3 class="box-head">Why a global variable?</h3>
             <em>Multiple scripts</em> across the project <em>will use this variable</em>, so it shouldn't be attached to just one script like a local, script variable.
         </div>
 
@@ -41,7 +41,7 @@ <h3>Creating the ADT</h3>
             <div><span>Gamal:</span> Yeah. In this project, we'll need a <code>contact</code> constructor and then selectors to access the <code>name</code>, <code>address</code>, and <code>phone number</code> for any given contact.</div>
 		</div>
 		<div class="takeNote">
-            <h4><strong>Preserve Privacy</strong></h4>
+            <h3 class="box-head">Preserve Privacy</h3>
             <p>Snap<em>!</em> projects are not secure. Do not use your or your classmates' personal information.</p>
         </div>
         <div class="forYouToDo">
diff --git a/cur/programming/3-lists/2-contact-list/2-adding-contact.es.html b/cur/programming/3-lists/2-contact-list/2-adding-contact.es.html
index 4e0076bbf..33d4b685d 100644
--- a/cur/programming/3-lists/2-contact-list/2-adding-contact.es.html
+++ b/cur/programming/3-lists/2-contact-list/2-adding-contact.es.html
@@ -37,7 +37,7 @@ <h2>Añadir datos de contacto</h2>
                         </div>
                         <li>Haz que el guion pida al usuario los datos de contacto y luego agregue esos datos a la <var>lista de contactos</var> usando el constructor <code>contacto</code>.</li>
                         <div class="narrower">
-                            <h4><strong>Recopilación de los datos del usuario</strong></h4>
+                            <h3 class="box-head">Recopilación de los datos del usuario</h3>
                             <p>
                                 Necesitas pedir al usuario cada dato (nombre de contacto, dirección y número de teléfono) por separado.
 								<ul>
diff --git a/cur/programming/3-lists/2-contact-list/2-adding-contact.html b/cur/programming/3-lists/2-contact-list/2-adding-contact.html
index 81d6a6500..a191a5840 100644
--- a/cur/programming/3-lists/2-contact-list/2-adding-contact.html
+++ b/cur/programming/3-lists/2-contact-list/2-adding-contact.html
@@ -37,7 +37,7 @@ <h2>Adding Contact Data</h2>
                         </div>
                         <li>Make the script ask the user for contact data and then add that data to the <var>contact list</var> using the <code>contact</code> constructor.</li>
                         <div class="narrower">
-                            <h4><strong>Collecting Data from the User</strong></h4>
+                            <h3 class="box-head">Collecting Data from the User</h3>
                             <p>
                                 You'll want to ask the user for each piece of data (contact name, address, and phone number) separately.
 								<ul>
diff --git a/cur/programming/3-lists/2-contact-list/3-modifying-adt.es.html b/cur/programming/3-lists/2-contact-list/3-modifying-adt.es.html
index f678a4622..f2f1fe915 100644
--- a/cur/programming/3-lists/2-contact-list/3-modifying-adt.es.html
+++ b/cur/programming/3-lists/2-contact-list/3-modifying-adt.es.html
@@ -57,7 +57,7 @@ <h2>Agregar cumpleaños</h2>
                         <li>
                             Adapta tu botón "Agregar contacto" para ingresar este nuevo tipo de contacto en tu lista.
                             <div class="narrower">
-                                <h4><strong>Añadir contactos con cumpleaños</strong></h4>
+                                <h3 class="box-head">Añadir contactos con cumpleaños</h3>
                                     <p>Puedes usar varios bloques de preguntas y respuestas junto con variables de programa.</p>
                                     <p>
                                         Otra forma es usar <em>abstracción</em> y crear otro ayudante,<img class="inlinde" src="/bjc-r/img/3-lists/ask-birthdate.es.png" alt="preguntar fecha de nacimiento" title="preguntar fecha de nacimiento" /> que reporta una lista de las respuestas del usuario a estas indicaciones:
diff --git a/cur/programming/3-lists/2-contact-list/3-modifying-adt.html b/cur/programming/3-lists/2-contact-list/3-modifying-adt.html
index 52ca98df7..f0b355dd4 100644
--- a/cur/programming/3-lists/2-contact-list/3-modifying-adt.html
+++ b/cur/programming/3-lists/2-contact-list/3-modifying-adt.html
@@ -59,7 +59,7 @@ <h2>Adding Birthdays</h2>
                         <li>
                             Adapt your "Add Contact" button to input this new type of contact into your list.
                             <div class="narrower">
-                                <h4><strong>Adding Contacts with Birthdays</strong></h4>
+                                <h3 class="box-head">Adding Contacts with Birthdays</h3>
                                     <p>You could use several ask and answer blocks together with script variables.</p>
                                     <p>
                                         Another way is to use <em>abstraction</em> and create another helper, <img class="inlinde" src="/bjc-r/img/3-lists/ask-birthdate.png" alt="ask birthdate" title="ask birthdate" /> that reports a list of the user's answers to these prompts:
diff --git a/cur/programming/3-lists/2-contact-list/old/2-modifying-adt.html b/cur/programming/3-lists/2-contact-list/old/2-modifying-adt.html
index e72b46808..c8582fa60 100644
--- a/cur/programming/3-lists/2-contact-list/old/2-modifying-adt.html
+++ b/cur/programming/3-lists/2-contact-list/old/2-modifying-adt.html
@@ -114,7 +114,7 @@ <h2>Creating the Name ADT</h2>
                     There are only two allowable values for the <var>type</var> input, and you won't want users of your program to have to remember them and type them in without spelling errors.  Instead, you want a <em>menu</em> input, like this:<br />
                     <img class="indent" src="/bjc-r/img/3-lists/dropdown-block.png" alt="name block with menu input slot for type"><br />
                     <div class="narrowpurple">
-                        <h4><strong>Adding Menu Inputs</strong></h4>
+                        <h3 class="box-head">Adding Menu Inputs</h3>
                         <ol type="a">
                             <li>Edit the <code>name</code> block, and click on the orange <var>type</var> variable in its hat block.</li>
 							<li>
diff --git a/cur/programming/3-lists/2-contact-list/unused-new-stuff/5-how-old.html b/cur/programming/3-lists/2-contact-list/unused-new-stuff/5-how-old.html
index 0f262ec14..885b3f6f2 100644
--- a/cur/programming/3-lists/2-contact-list/unused-new-stuff/5-how-old.html
+++ b/cur/programming/3-lists/2-contact-list/unused-new-stuff/5-how-old.html
@@ -25,7 +25,7 @@ <h3>Creating the <code>How Old</code> Reporter</h3>
                     <img class="indent" src="/bjc-r/img/3-lists/date-constructor-in-month-as-number-selector.png" alt="month as number from date: ()" title="month as number from date: ()" />
                     <div class="todo"><strong>TG:</strong> Changing months from words to numbers is the most challenging task on this page. The instructions specify one approach, though students may come up with their own or may require additional support in understanding the approach presented. Make sure that all students get the <code>month (as number) from date</code> block working correctly before moving on even if it requires some class discussion.</div>
                     <div class="narrower">
-                        <h4><strong>Changing Months from Words to Numbers</strong></h4>
+                        <h3 class="box-head">Changing Months from Words to Numbers</h3>
                         <p>The <code>day from date</code> and <code>year from date</code> blocks are straightforward to program, but <code>month (as number) from date</code> requires selecting the month and then also changing it from a word to a number.</p>
                         <p>
                             To build <code>month (as number) from date</code>:
diff --git a/cur/programming/3-lists/4-robots-ai/3-implications.es.html b/cur/programming/3-lists/4-robots-ai/3-implications.es.html
index 81bf62843..98bfd7f50 100644
--- a/cur/programming/3-lists/4-robots-ai/3-implications.es.html
+++ b/cur/programming/3-lists/4-robots-ai/3-implications.es.html
@@ -33,7 +33,7 @@ <h2>Implicaciones de la IA</h2>
                         <li>
                             ¿Qué leyes se aplican a la IA? ¿Qué sucede cuando un robot comete un delito? ¿Quién es castigado?
                             <div class="endnote">
-                                <h4><strong>Algunos artículos relevantes:</strong></h4>
+                                <h3 class="box-head">Algunos artículos relevantes:</h3>
                                 <ul>
                                     <!--<li><a href="http://futureoflife.org/open-letter-autonomous-weapons/" target="_blank">Autonomous Weapons: An Open Letter from AI and Robotics Researchers</a></li>-->
                                     <li><a href="http://www.theatlantic.com/technology/archive/2014/05/the-military-wants-to-teach-robots-right-from-wrong/370855/" target="_blank" title="El ejército quiere enseñar a los robots lo que está bien y lo que está mal.">El ejército quiere enseñar a los robots lo que está bien y lo que está mal.</a></li>
diff --git a/cur/programming/3-lists/4-robots-ai/3-implications.html b/cur/programming/3-lists/4-robots-ai/3-implications.html
index 18a592499..ea5396fe4 100644
--- a/cur/programming/3-lists/4-robots-ai/3-implications.html
+++ b/cur/programming/3-lists/4-robots-ai/3-implications.html
@@ -33,7 +33,7 @@ <h2>Implications of AI</h2>
                         <li>
                             What laws apply to AI? What happens when a robot commits a crime? Who gets punished?
                             <div class="endnote">
-                                <h4><strong>Some relevant articles:</strong></h4>
+                                <h3 class="box-head">Some relevant articles:</h3>
                                 <ul>
                                     <!--<li><a href="http://futureoflife.org/open-letter-autonomous-weapons/" target="_blank">Autonomous Weapons: An Open Letter from AI and Robotics Researchers</a></li>-->
                                     <li><a href="http://www.theatlantic.com/technology/archive/2014/05/the-military-wants-to-teach-robots-right-from-wrong/370855/" target="_blank" title="The Military Wants to Teach Robots Right from Wrong">The Military Wants to Teach Robots Right from Wrong</a></li>
diff --git a/cur/programming/3-lists/optional-projects/4-music-project.es.html b/cur/programming/3-lists/optional-projects/4-music-project.es.html
index d894bea5d..54362bad3 100644
--- a/cur/programming/3-lists/optional-projects/4-music-project.es.html
+++ b/cur/programming/3-lists/optional-projects/4-music-project.es.html
@@ -52,7 +52,7 @@ <h3>Revisión de funciones de orden superior con sonido</h3>
                 </li>
             </ol>
             <div class="endnote">
-                <h4><strong>¿Necesitas revisar?</strong></h4>
+                <h3 class="box-head">¿Necesitas revisar?</h3>
                 <div class="todo">These need updating!! --MF, 4/5/19</div>
                 <ul>
                     <li>Aprendiste sobre <code>para cada</code> en <a href="/bjc-r/cur/programming/2-complexity/2-data-structures-art/3-traversing-list.es.html?topic=nyc_bjc%2F2-conditionals-abstraction.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Unidad 2 Laboratorio 2: Comprobación de cada respuesta del cuestionario">Unidad 2 Laboratorio 2: Comprobación de cada respuesta del cuestionario</a>.</li>
diff --git a/cur/programming/3-lists/optional-projects/4-music-project.html b/cur/programming/3-lists/optional-projects/4-music-project.html
index 2d24012da..fbc4e6645 100644
--- a/cur/programming/3-lists/optional-projects/4-music-project.html
+++ b/cur/programming/3-lists/optional-projects/4-music-project.html
@@ -52,7 +52,7 @@ <h3>Reviewing Higher-Order Functions with Sound</h3>
                 </li>
             </ol>
             <div class="endnote">
-                <h4><strong>Need to Review?</strong></h4>
+                <h3 class="box-head">Need to Review?</h3>
                 <div class="todo">These need updating!! --MF, 4/5/19</div>
                 <ul>
                     <li>You learned about <code>for each</code> in <a href="/bjc-r/cur/programming/2-complexity/2-data-structures-art/3-traversing-list.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment" title="Unit 2 Lab 2: Checking Each Quiz Answer">Unit 2 Lab 2: Checking Each Quiz Answer</a>.</li>
diff --git a/cur/programming/4-internet/2-cybersecurity/old/Y2Version/2-cryptosecurity.html b/cur/programming/4-internet/2-cybersecurity/old/Y2Version/2-cryptosecurity.html
index c60ff85ef..9a709e701 100644
--- a/cur/programming/4-internet/2-cybersecurity/old/Y2Version/2-cryptosecurity.html
+++ b/cur/programming/4-internet/2-cybersecurity/old/Y2Version/2-cryptosecurity.html
@@ -42,7 +42,7 @@ <h3>Secure HTTP</h3>
         <iframe width="560" height="315" src="https://www.youtube.com/embed/kBXQZMmiA4s?start=280" frameborder="0" allowfullscreen class="indent"></iframe>
         
         <div class="endnote">
-            <h4><strong>Open Standards Help Security</strong></h4>
+            <h3 class="box-head">Open Standards Help Security</h3>
             <p>In order to work properly, a cryptographic function has to be easy for the private key holder to invert, but hard for anyone else to invert. How do we know what &quot;hard&quot; means? For example, current cryptographic methods rely on the difficulty of finding prime factors of very large numbers. There's no <em>proof</em> that someone won't come up with a fast way to do that, but people are pretty confident about it because the problem has been well studied by many mathematicians. (On the other hand, when <em>quantum computers</em> become practical, factorization <em>will</em> be easy, and new cryptographic methods will be needed.)</p>
             <p>What makes it possible for mathematicians to study the difficulty of breaking Internet cryptography is that the method used&mdash;the cryptographic function&mdash;is openly published. This may seem strange; if you want to keep secrets, shouldn't you keep the technique secret, too? But secret algorithms can have weaknesses that go undiscovered until some bad guy exploits them. Open standards allow an algorithm to be studied <em>before</em> it is used in practice.</p>
         </div>
diff --git a/cur/programming/4-internet/3-community/old/mf/1-freedom-of-speech.html b/cur/programming/4-internet/3-community/old/mf/1-freedom-of-speech.html
index 83aa91085..1617ee60d 100644
--- a/cur/programming/4-internet/3-community/old/mf/1-freedom-of-speech.html
+++ b/cur/programming/4-internet/3-community/old/mf/1-freedom-of-speech.html
@@ -19,7 +19,7 @@ <h2>Freedom of Speech</h2>
         
         
         <div class="takeNote">
-            <h4><strong>The First Amendment to the US Constitution</strong></h4>
+            <h3 class="box-head">The First Amendment to the US Constitution</h3>
             <strong>Congress shall make no law</strong> respecting an establishment of religion, or prohibiting the free exercise thereof; or <strong>abridging the freedom of speech</strong>, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.
         </div>
         <div class="forYouToDo">
diff --git a/cur/programming/4-internet/old/6-web-data/2-web-scraping-techniques.html b/cur/programming/4-internet/old/6-web-data/2-web-scraping-techniques.html
index 0ff2e0b80..f59dfb7cc 100644
--- a/cur/programming/4-internet/old/6-web-data/2-web-scraping-techniques.html
+++ b/cur/programming/4-internet/old/6-web-data/2-web-scraping-techniques.html
@@ -32,7 +32,7 @@ <h3>Using <code>proxied http</code> to Access Websites</h3>
             </ol>
         </div>
         <div class="takeNote">
-        	<h4><strong>What if <code>proxied http</code> doesn't work?</strong></h4>
+        	<h3 class="box-head">What if <code>proxied http</code> doesn't work?</h3>
         	If <code>proxied http</code> doesn't work, you can skip the remaining pages in this lab. You might find them interesting to read, but will not be able to do the projects. If you have access to the Internet somewhere that this block works, you can use Snap<em>!</em> to code web scraping projects such as a <a href="/bjc-r/cur/programming/6-computers/optional-projects/weather-app.html?topic=nyc_bjc%2F4-internet.topic&course=bjc4nyc.html&novideo&noassignment">Weather App</a>.
 			<div class="endnote"><strong>What's going on?</strong> You may not be able to use the <code>proxied http</code> block if your network has certain security settings (like a <a href="https://en.wikipedia.org/wiki/Firewall_(computing)" target="_blank">firewall</a>) that prohibit using proxy servers to access blocked content.</div> 
         </div>
diff --git a/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.es.html b/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.es.html
index 1f9f14b13..d1985a187 100755
--- a/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.es.html
+++ b/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.es.html
@@ -28,7 +28,7 @@ <h2>Un problema indecidible</h2>
 
 
         <h3>Suposición de que existe una función <code>¿detener?</code></h3>
-        <h4><strong>Realizar la suposición</strong></h4>
+        <h3 class="box-head">Realizar la suposición</h3>
         <p>
 			<div class="sidenote">No podemos mostrar el código dentro de <code>¿detener?</code>; estamos demostrando que no se puede escribir en absoluto, sin importar qué código lo implemente.</div>
             Primero, <em>asumimos</em> que existe una función llamada <code>¿detener?</code> que determina si dado un reportero reportará un valor en un tiempo finito. (Si es así, decimos que el reportero <em>se detiene.</em>) Se necesitan dos entradas: una función y un valor de entrada para esa función. Reporta <code>verdadero</code> si la función reportase un valor cuando se le da esa entrada; y reporta <code>falso</code> si la función se ejecutase para siempre (en un bucle infinito).<br />
@@ -43,7 +43,7 @@ <h4><strong>Realizar la suposición</strong></h4>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-reporting-false.es.png" alt="¿detener?(programa con un bucle infinito ())(foo) reporta falso" title="¿detener?(programa con un bucle infinito ())(foo) reporta falso" /> porque <img class="inline" src="/bjc-r/img/5-algorithms/program-with-loop(foo).es.png" alt="programa con un bucle infinito (foo)" title="programa con un bucle infinito (foo)" /> bucles infinitamente.</p>
 
 
-        <h4><strong>Revisión del plan para la prueba</strong></h4>
+        <h3 class="box-head">Revisión del plan para la prueba</h3>
         <p>Usaremos prueba por contradicción para mostrar que la siguiente pregunta <em>no se puede</em> responder<em>en general</em>:</p>
         <p class="center"><strong>¿Un determinado programa de computadora, dada una determinada entrada, reportara un resultado en un tiempo finito?</strong></p>
         <div class="endnote">
@@ -87,7 +87,7 @@ <h4><strong>Revisión del plan para la prueba</strong></h4>
 
         <h3>Muestra de cómo esto crea una contradicción</h3>
 
-		<h4><strong>Construir un programa para el cual <code>¿detener?</code> no funcionará</strong></h4>
+		<h3 class="box-head">Construir un programa para el cual <code>¿detener?</code> no funcionará</h3>
 		<p>
             Para demostrar que no puede existir tal función, necesitamos crear una contradicción. Necesitamos demostrar que tiene que haber al menos una función y una entrada a esa función para la cual <code>¿detener?</code> no funciona de la manera que asumimos. Por lo tanto, podemos hacer un bloque <code>prueba</code>, específicamente con el propósito de romper <code>¿detener?</code>:<br />
             <div class="sidenoteBig">
@@ -105,7 +105,7 @@ <h4><strong>Construir un programa para el cual <code>¿detener?</code> no funcio
             Este <em>es</em> desafiante. ¡Quédate con eso! Estamos <em>creando una contradicción</em> para demostrar que no puede existir la función <code>¿detener?</code> a la que se llama dentro de <code>prueba</code>.
         </div>
 
-        <h4><strong>Uso de autorreferencia para conducir a la contradicción</strong></h4>
+        <h3 class="box-head">Uso de autorreferencia para conducir a la contradicción</h3>
         <p>
             Para hacer que la situación sea <em>exactamente</em> como lo que dijo Betsy ("La declaración que estoy haciendo <em>en este momento</em> es falsa"), llamaremos a <code>prueba</code> dentro de <em>sí mismo</em>:<br />
             <img class="indent" src="/bjc-r/img/5-algorithms/testertester.es.png" alt="prueba(prueba())" title="prueba(prueba())" /><br />
@@ -117,7 +117,7 @@ <h4><strong>Uso de autorreferencia para conducir a la contradicción</strong></h
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-tester-tester-reporting-true.es.png" alt="¿detener? (prueba) (prueba) reporta verdadero" title="¿detener? (prueba) (prueba) reporta verdadero" /> significaría que <img class="inline" src="/bjc-r/img/5-algorithms/testertester.es.png" alt="prueba(prueba())" title="prueba(prueba())" /> devuelve un valor.</p>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-tester-tester-reporting-false.es.png" alt="¿detener? (prueba) (prueba) reporta falso" title="¿detener? (prueba) (prueba) reporta falso" /> significaría que <img class="inline" src="/bjc-r/img/5-algorithms/testertester.es.png" alt="prueba(prueba())" title="prueba(prueba())" /> bucles infinitamente.</p>
 
-        <h4><strong>Entender la contradicción</strong></h4>
+        <h3 class="box-head">Entender la contradicción</h3>
         <p>
             Cuando llamamos <img class="inline" src="/bjc-r/img/5-algorithms/testertester.es.png" alt="prueba(prueba())" title="prueba(prueba())" />, nos encontramos con la contradicción. Para ver cómo, mire hacia atrás en la definición de <code>prueba</code>:<br />
             <img class="indent" src="/bjc-r/img/5-algorithms/tester-halting.es.png" alt="prueba(reportero){si(¿detener?(reportero)(reportero){por siempre{}}sino{reportar(verdadero)}}" title="prueba(reportero){si(¿detener?(reportero)(reportero){por siempre{}}sino{reportar(verdadero)}}">
diff --git a/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.html b/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.html
index b52ae3ccc..cc45a5d6f 100755
--- a/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.html
+++ b/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.html
@@ -28,7 +28,7 @@ <h2>An Undecidable Problem</h2>
 
 
         <h3>Assuming That a <code>Halts?</code> Function Exists</h3>
-        <h4><strong>Making the Assumption</strong></h4>
+        <h3 class="box-head">Making the Assumption</h3>
         <p>
 			<div class="sidenote">We can't show the code inside <code>halts?</code>; we are proving that it can't be written at all, no matter what code implements it.</div>
             First, we <em>assume</em> there exists a function called <code>halts?</code> that determines whether a given reporter will report a value in a finite time. (If so, we say that the reporter <em>halts.</em>) It takes two inputs: a function and an input value for that function. It reports <code>true</code> if the function would report a value when given that input;  it reports <code>false</code> if the function would run forever (in an infinite loop).<br />
@@ -43,7 +43,7 @@ <h4><strong>Making the Assumption</strong></h4>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-reporting-false.png" alt="halts?(program with an infinite loop ())(foo) reporting false" title="halts?(program with an infinite loop ())(foo) reporting false" /> because <img class="inline" src="/bjc-r/img/5-algorithms/program-with-loop(foo).png" alt="program with an infinite loop (foo)" title="program with an infinite loop (foo)" /> loops infinitely.</p>
 
 
-        <h4><strong>Reviewing the Plan for the Proof</strong></h4>
+        <h3 class="box-head">Reviewing the Plan for the Proof</h3>
         <p>We'll use proof by contradiction to show that the following question <em>can't</em> be answered <em>in general</em>:</p>
         <p class="center"><strong>Will a certain computer program, given a certain input, report a result in a finite amount of time?</strong></p>
         <div class="endnote">
@@ -87,7 +87,7 @@ <h4><strong>Reviewing the Plan for the Proof</strong></h4>
 
         <h3>Showing How This Creates a Contradiction</h3>
 
-		<h4><strong>Constructing a Program For Which <code>Halts?</code> Won't Work</strong></h4>
+		<h3 class="box-head">Constructing a Program For Which <code>Halts?</code> Won't Work</h3>
 		<p>
             To prove there can be no such function, we need to create a contradiction. We need to show that there has to be at least one function and one input to that function for which <code>halts?</code> fails to work the way we assumed it does. So, we can make up a block, <code>tester</code>, specifically for the purpose of breaking <code>halts?</code>:<br />
             <div class="sidenoteBig">
@@ -105,7 +105,7 @@ <h4><strong>Constructing a Program For Which <code>Halts?</code> Won't Work</str
             This <em>is</em> challenging. Stick with it! We are <em>creating a contradiction</em> to prove that the <code>halts?</code> function called inside <code>tester</code> can't exist.
         </div>
 
-        <h4><strong>Using Self-Reference to Lead to Contradiction</strong></h4>
+        <h3 class="box-head">Using Self-Reference to Lead to Contradiction</h3>
         <p>
             To make the situation <em>exactly</em> like what Betsy said ("The statement I'm making <em>right now </em>is false."), we'll call <code>tester</code> on <em>itself</em>:<br />
             <img class="indent" src="/bjc-r/img/5-algorithms/testertester.png" alt="tester(tester())" title="tester(tester())" /><br />
@@ -117,7 +117,7 @@ <h4><strong>Using Self-Reference to Lead to Contradiction</strong></h4>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-tester-tester-reporting-true.png" alt="halts (tester) (tester) reporting true" title="halts (tester) (tester) reporting true" /> would mean that <img class="inline" src="/bjc-r/img/5-algorithms/testertester.png" alt="tester(tester())" title="tester(tester())" /> returns a value.</p>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-tester-tester-reporting-false.png" alt="halts (tester) (tester) reporting false" title="halts (tester) (tester) reporting false" /> would mean that <img class="inline" src="/bjc-r/img/5-algorithms/testertester.png" alt="tester(tester())" title="tester(tester())" /> loops infinitely.</p>
 
-        <h4><strong>Understanding the Contradiction</strong></h4>
+        <h3 class="box-head">Understanding the Contradiction</h3>
         <p>
         	When we call <img class="inline" src="/bjc-r/img/5-algorithms/testertester.png" alt="tester(tester())" title="tester(tester())" />, we run into the contradiction. To see how, look back at the <code>tester</code> definition:<br />
             <img class="indent" src="/bjc-r/img/5-algorithms/tester-halting.png" alt="tester(reporter){if(halts?(reporter)(reporter){forever{}}else{report(true)}}" title="tester(reporter){if(halts?(reporter)(reporter){forever{}}else{report(true)}}">
diff --git a/cur/programming/5-algorithms/6-tic-tac-toe/1-review.es.html b/cur/programming/5-algorithms/6-tic-tac-toe/1-review.es.html
index 753c98f7a..98cf5983b 100644
--- a/cur/programming/5-algorithms/6-tic-tac-toe/1-review.es.html
+++ b/cur/programming/5-algorithms/6-tic-tac-toe/1-review.es.html
@@ -9,7 +9,7 @@
     <body>
         <h2>Revisa tu proyecto de tres en l&iacute;nea</h2>
         <div class="todo">
-            <h4><strong>NEXT YEAR</strong></h4>
+            <h3 class="box-head">NEXT YEAR</h3>
             <p>I was looking for ways to scaffold this project without excessive hand-holding, and I decided to have them implement a randomly playing computer player first, then give it a little strategy (using the final "best empty square" rule), and then build in the advanced strategy later. As a result, <strong>this first lab doesn't have to wait until U5</strong>. For example, it might be nice to have it at the end of U3 or the beginning of U4 <em>before TCP</em> since that project uses <code>broadcast</code> and this first is easier to understand than that project. --MF, 6/7/18</p>
             <p>If we go with this approach <strong>next year</strong>, we need to update the link at the bottom of <a href="/bjc-r/cur/programming/3-lists/3-tic-tac-toe/2-find-wins.es.html?topic=nyc_bjc%2F3-lists.es.topic&amp;course=bjc4nyc.es.html&amp;novideo&amp;noassignment">3.2.2</a>. --MF, 6/8/18</p>
         </div>
diff --git a/cur/programming/6-computers/1-abstraction/03-software-languages.es.html b/cur/programming/6-computers/1-abstraction/03-software-languages.es.html
index 1bd4cb2bd..58fd206b0 100644
--- a/cur/programming/6-computers/1-abstraction/03-software-languages.es.html
+++ b/cur/programming/6-computers/1-abstraction/03-software-languages.es.html
@@ -17,7 +17,7 @@ <h3>Lenguajes de alto y bajo nivel</h3>
         <img class="imageRight noshadow" src="/bjc-r/img/6-computers/language-continuum.es.png" alt="diagrama de lenguajes de programación comunes enumerados en orden de nivel de abstracción; hay una flecha vertical de doble cabeza a la derecha que indica que la primera fila de lenguajes (Snap!, Scheme, Prolog, Ruby, Lisp) son 'lenguajes de alto nivel', la segunda fila (JavaScript, Python, Java, Alice, Scratch) se encuentra en el medio, y la tercera fila (C, C++) son 'lenguajes de bajo nivel'" title="diagrama de lenguajes de programación comunes enumerados en orden de nivel de abstracción; hay una flecha vertical de doble cabeza a la derecha que indica que la primera fila de lenguajes (Snap!, Scheme, Prolog, Ruby, Lisp) son 'lenguajes de alto nivel', la segunda fila (JavaScript, Python, Java, Alice, Scratch) se encuentra en el medio, y la tercera fila (C, C++) son 'lenguajes de bajo nivel'" width="400">
         <p>Un <em>lenguaje de nivel alto</em> (como Snap<em>!</em> o Scheme) incluye muchas abstracciones incorporadas que hacen m&aacute;s f&aacute;cil centrarse en el problema que se quiere resolver en lugar de en c&oacute;mo funciona el hardware de la computadora. Un <em>lenguaje de bajo nivel </em>(como C) tiene menos abstracciones, requiriendo que sepas mucho sobre la arquitectura de tu computadora para escribir un programa.</p>
 
-        <h4><strong>&iquest;Por qu&eacute; los programadores usan lenguajes de alto nivel?</strong></h4>
+        <h3 class="box-head">&iquest;Por qu&eacute; los programadores usan lenguajes de alto nivel?</h3>
         <p>Los lenguajes de nivel alto pueden producir programas m&aacute;s <em>seguros</em> &mdash;los que son menos propensos a tener errores&mdash;porque las abstracciones manejan detalles desordenados que pueden hacer fracasar a los programadores. </p>
         <div class="endnote">
             <p>Los lenguajes de nivel alto reducen los errores en el uso de la memoria. Los lenguajes m&aacute;s antiguos y de bajo nivel requer&iacute;an que el programador manejara el uso de la memoria de la computadora con instrucciones que dijeran "cons&iacute;gueme un bloque de memoria lo suficientemente grande para contener 100 n&uacute;meros" y otras instrucciones que dijeran "bien, ya termin&eacute; de usar este bloque de memoria; puede ser asignado para alg&uacute;n otro prop&oacute;sito."</p>
@@ -74,7 +74,7 @@ <h4><strong>&iquest;Por qu&eacute; los programadores usan lenguajes de alto nive
             <img class="indent" src="/bjc-r/img/6-computers/map-s.es.png" alt="reportar (mapar (unir () (s)) sobre (palabras))" title="reportar (mapar (unir () (s)) sobre (palabras))">
         </p>
 
-        <h4><strong>&iquest;Por qu&eacute; los programadores usan lenguajes de bajo nivel?</strong></h4>
+        <h3 class="box-head">&iquest;Por qu&eacute; los programadores usan lenguajes de bajo nivel?</h3>
 		<p>La mejor raz&oacute;n para usar lenguajes de bajo nivel es para escribir sistemas operativos (como Windows, Mac OS X, Android, o iOS).&nbsp; Aprender&aacute;s m&aacute;s acerca de sistemas operativos en la p&aacute;gina <a href="/bjc-r/cur/programming/6-computers/1-abstraction/05-software-OS.es.html?topic=nyc_bjc%2F6-how-computers-work.es.topic&amp;course=bjc4nyc.es.html&amp;novideo&amp;noassignment" title="The Software Domain: Operating Systems">Dominio de software: Sistemas operativos</a>.</p>
         <div class="endnote">
             <a href="#hint-low-level-lang" data-toggle="collapse" title="Why else would a programmer use a low-level language?">&iquest;Por que otra raz&oacute;n un programador usar&iacute;a un lenguaje de bajo nivel?</a>
@@ -86,7 +86,7 @@ <h4><strong>&iquest;Por qu&eacute; los programadores usan lenguajes de bajo nive
             </div>
         </div>
 
-        <h4><strong>&iquest;Qu&eacute; es el lenguaje de m&aacute;quina?</strong></h4>
+        <h3 class="box-head">&iquest;Qu&eacute; es el lenguaje de m&aacute;quina?</h3>
         <p>Tanto los idiomas de alto como de bajo nivel son utilizados por <em>personas</em> para escribir programas de m&aacute;quina. El hardware de la computadora entiende una especie de lenguaje de nivel ultra bajo, llamado <em>lenguaje de m&aacute;quina.</em> Programas especiales llamados <em>compiladores</em> e <em>int&eacute;rpretes </em>se utilizan para traducir los lenguajes de programaci&oacute;n de humanos a lenguaje de m&aacute;quina para ser ejecutado por la computadora.</p>
         <div class="endnote">
             <a href="#hint-compilers" data-toggle="collapse" title="Read more about compilers and interpreters">Lee m&aacute;s acerca de compiladores e int&eacute;rpretes.</a>
diff --git a/cur/programming/6-computers/1-abstraction/03-software-languages.html b/cur/programming/6-computers/1-abstraction/03-software-languages.html
index deb1bfc76..094113b15 100644
--- a/cur/programming/6-computers/1-abstraction/03-software-languages.html
+++ b/cur/programming/6-computers/1-abstraction/03-software-languages.html
@@ -24,7 +24,7 @@ <h3>High-Level and Low-Level Languages</h3>
         <img class="imageRight noshadow" src="/bjc-r/img/6-computers/language-continuum.png" width="400" alt="diagram of common programming languages listed in order of abstraction level; there is a vertical double-headed arrow on the right indicating that the first row of languages (Snap!, Scheme, Prolog, Ruby, Lisp) are 'high level languages,' the second row (JavaScript, Python, Java, Alice, Scratch) falls between, and the third row (C, C++) are 'low level languages'" title="diagram of common programming languages listed in order of abstraction level; there is a vertical double-headed arrow on the right indicating that the first row of languages (Snap!, Scheme, Prolog, Ruby, Lisp) are 'high level languages,' the second row (JavaScript, Python, Java, Alice, Scratch) falls between, and the third row (C, C++) are 'low level languages'" />
         <p>A <em>high-level language</em> (like Snap<em>!</em> or Scheme) includes many built-in abstractions that make it easier to focus on the problem you want to solve rather than on how computer hardware works. A <em>low-level language</em> (like C) has fewer abstractions, requiring you to know a lot about your computer's architecture to write a program.</p>
 
-        <h4><strong>Why do programmers use high-level languages?</strong></h4>
+        <h3 class="box-head">Why do programmers use high-level languages?</h3>
         <p>High-level languages can produce <em>safer</em> programs&mdash;ones that are less likely to have bugs&mdash;because the abstractions manage messy details that can trip up programmers. </p>
         <div class="endnote">
             <p>High-level languages reduce bugs in memory use. Older, low-level languages required the programmer to manage the use of the computer's memory with instructions saying "get me a block of memory big enough to hold 100 numbers" and other instructions saying "okay, I'm finished using this block of memory; it can be allocated for some other purpose."</p>
@@ -82,7 +82,7 @@ <h4><strong>Why do programmers use high-level languages?</strong></h4>
             <img class="indent" src="/bjc-r/img/6-computers/map-s.png" alt="report (map (join () (s)) over (words))" title="report (map (join () (s)) over (words))" />
         </p>
 
-        <h4><strong>Why do programmers use low-level languages?</strong></h4>
+        <h3 class="box-head">Why do programmers use low-level languages?</h3>
 		<p>The best reason to use low-level languages is to write operating systems (like Windows, Mac OS X, Android, or iOS). You'll learn more about Operating systems on the <a href="/bjc-r/cur/programming/6-computers/1-abstraction/05-software-OS.html?topic=nyc_bjc%2F6-how-computers-work.topic&course=bjc4nyc.html&novideo&noassignment" title="The Software Domain: Operating Systems">The Software Domain: Operating Systems</a> page.</p>
         <div class="endnote">
             <a href="#hint-low-level-lang" data-toggle="collapse" title="Why else would a programmer use a low-level language?">Why else would a programmer use a low-level language?</a>
@@ -100,7 +100,7 @@ <h4><strong>Why do programmers use low-level languages?</strong></h4>
             </div>
         </div>
 
-        <h4><strong>What is machine language?</strong></h4>
+        <h3 class="box-head">What is machine language?</h3>
         <p>Both high- and low-level languages are used by <em>people</em> to write computer programs. Computer hardware understands a sort of ultra-low-level language, called <em>machine language.</em> Special programs called <em>compilers</em> and <em>interpreters</em> are used to translate human programming languages into machine language to be run by the computer.</p>
         <div class="endnote">
             <a href="#hint-compilers" data-toggle="collapse" title="Read more about compilers and interpreters">Read more about compilers and interpreters.</a>
diff --git a/cur/programming/6-computers/1-abstraction/04-software-libraries.html b/cur/programming/6-computers/1-abstraction/04-software-libraries.html
index 4c3c49f46..fe27f224c 100644
--- a/cur/programming/6-computers/1-abstraction/04-software-libraries.html
+++ b/cur/programming/6-computers/1-abstraction/04-software-libraries.html
@@ -26,7 +26,7 @@ <h2>The Software Domain: Libraries</h2>
 		</div>
 
         <!--<div class="endnote">
-            <h4><strong>Web API</strong></h4>
+            <h3 class="box-head">Web API</h3>
             <p>A common kind of API is a <em>web API</em> in which the library exists on someone else's computer. For example, the <a href="https://developers.google.com/maps/documentation/embed/start" title="Google Maps API" target="_blank">Google Maps API</a> describes how to embed a Google Map on your own website.</p>
             <p>A web API is just a call to a procedure on another machine. For example, these are three different notations for the same procedure call:
                 <ul>
diff --git a/cur/programming/6-computers/1-abstraction/06-digital-architecture.es.html b/cur/programming/6-computers/1-abstraction/06-digital-architecture.es.html
index 8b90b1155..3c873bb13 100644
--- a/cur/programming/6-computers/1-abstraction/06-digital-architecture.es.html
+++ b/cur/programming/6-computers/1-abstraction/06-digital-architecture.es.html
@@ -19,7 +19,7 @@ <h3>La computadora del programa almacenado</h3>
             <p>Como verás en el Laboratorio 2, ha habido máquinas para realizar cálculos durante miles de años. Pero los inicios de la computadora moderna <em>programable</em> se remontan a principios de 1800 con el trabajo de Charles Babbage.</p>
             <p>Babbage era principalmente un matemático, pero contribuyó a campos tan variados como la astronomía y la economía. Babbage vivió hace unos 150 años de 1791-1871. La electricidad como fuente de energía era desconocida. La máquina de vapor entró en uso generalizado en la época en que nació. La maquinaria más precisa de su tiempo era el mecanismo de relojería/engranajes.</p>
 
-            <h4><strong>Máquina diferencial</strong></h4>
+            <h3 class="box-head">Máquina diferencial</h3>
             <p>La primera computadora de Babbage fue la máquina diferencial. Utilizó engranajes para diseñar una máquina compleja que calcularía e imprimiría tablas de números (como las tablas de registro o funciones trigonométricas que puede tener en la parte posterior un libro de texto de matemáticas). Pero estos engranajes debían ser tan precisos que cada uno tenía que ser hecho a mano. El proyecto se volvió tan costoso que el gobierno dejó de financiarlo y Babbage nunca terminó una versión a gran escala.</p>
             <table class="indent">
                 <tr>
@@ -49,7 +49,7 @@ <h4><strong>Máquina diferencial</strong></h4>
                 </div>
             </p>
 
-            <h4><strong>La máquina analítica</strong></h4>
+            <h3 class="box-head">La máquina analítica</h3>
             <p>
             	La máquina diferencial podría usarse para calcular muchas funciones diferentes configurando manualmente la posición de inicio de varios engranajes. Pero tenía <strong>solo un algoritmo</strong>: el construido en el diseño de hardware. En 1833, Babbage comenzó a trabajar en la máquina analítica, que se basaba en la idea general de la máquina diferencial, pero <strong>podía llevar a cabo instrucciones</strong> en un lenguaje de programación primitivo preparado en tarjetas perforadas.<br />
                 <div class="sidenote">
diff --git a/cur/programming/6-computers/1-abstraction/06-digital-architecture.html b/cur/programming/6-computers/1-abstraction/06-digital-architecture.html
index 490b69208..cb51c129b 100644
--- a/cur/programming/6-computers/1-abstraction/06-digital-architecture.html
+++ b/cur/programming/6-computers/1-abstraction/06-digital-architecture.html
@@ -23,7 +23,7 @@ <h3>The Stored Program Computer</h3>
             <p>As you'll see in Lab 2, there have been machines to carry out computations for thousands of years. But the modern, <em>programmable</em> computer had its roots in the work of Charles Babbage in the early 1800s.</p>
             <p>Babbage was mainly a mathematician, but he contributed to fields as varied as astronomy and economics. Babbage lived about 150 years ago from  1791-1871. Electricity as a source of energy was unknown. The steam engine came into widespread use around the time he was born. The most precise machinery of his time was clockwork—gears.</p>
 
-            <h4><strong>Difference Engine</strong></h4>
+            <h3 class="box-head">Difference Engine</h3>
             <p>Babbage's first computer was the Difference Engine. He used gears to design a complex machine that would compute and print tables of numbers (like the tables of log or trig functions you may have in the back of a math textbook). But these gears needed to be so precise that each one had to be handmade. The project became so expensive that the government stopped funding it, and Babbage never finished a full-scale version.</p>
             <div class="comment">Bad Mary. ;) We need a CSS solution for this instead of using tables. --MF, 12/4/17</div>
             <table class="indent">
@@ -54,7 +54,7 @@ <h4><strong>Difference Engine</strong></h4>
                 </div>
             </p>
 
-            <h4><strong>The Analytical Engine</strong></h4>
+            <h3 class="box-head">The Analytical Engine</h3>
             <p>
             	The Difference Engine could be used to compute many different functions by manually setting the starting position of various gears.  But it had <strong>only one algorithm</strong>: the one built into the hardware design. In 1833, Babbage began working on the Analytical Engine, which was based on the general idea of the Difference Engine but <strong>could carry out instructions</strong> in a primitive programming language prepared on punched cards.<br />
                 <div class="sidenote">
diff --git a/cur/programming/6-computers/old/1-number-representation/2-binary-sequences.html b/cur/programming/6-computers/old/1-number-representation/2-binary-sequences.html
index ee550c512..0925ee295 100644
--- a/cur/programming/6-computers/old/1-number-representation/2-binary-sequences.html
+++ b/cur/programming/6-computers/old/1-number-representation/2-binary-sequences.html
@@ -91,7 +91,7 @@ <h2>Binary Sequences</h2>
 		<h3>Storing Integers</h3>
         <p>Depending on the programming language used, an integer might be stored with two or perhaps four bytes of data allowing for a range of about -32,768 to 32,767 (with two bytes) or -2,147,483,648 to 2,147,483,647 (with four bytes).</p>
         <div class="endnote">
-        	<h4><strong>Why are these the ranges for integers?</strong></h4>
+        	<h3 class="box-head">Why are these the ranges for integers?</h3>
             <p>Two bytes is 16 bits, so two bytes can represent 2<sup>16</sup> = 65,536 different values. We use about half of these to represent negative numbers, about half for postive numbers, and one to represent zero.</p>
             <p>Four bytes is 32 bits, so four bytes can represent 2<sup>32</sup> = 4,294,967,296 different values. Again, we use about half for negative numbers, half for postives, and one for zero.</p>
         </div>
@@ -123,7 +123,7 @@ <h4><strong>Why are these the ranges for integers?</strong></h4>
           <img class="indent" src="/bjc-r/img/4-internet/zero-div-zero-reporting-NaN.png" alt="(0) / (0) reporting NaN" title="(0) / (0) reporting NaN" />
         </div>
         
-        <h4><strong>Storing Text</strong></h4>
+        <h3 class="box-head">Storing Text</h3>
 		<div class="sidenoteBig">You can learn more about Unicode if you do the <a href="/bjc-r/cur/programming/4-internet/2-cybersecurity/2-caesar-cipher.html?topic=nyc_bjc%2F4-internet.topic&course=bjc4nyc.html&novideo&noassignment">Caesar Cipher Project</a> in the Cybersecurity lab, where you create a program to encrypt a message.</div>
         <p>It's common for programming languages to use a <em>specific</em> number of bits to represent Unicode characters or integers. Unicode is a system that allows computers to store letters as integers. For example, capital A is Unicode number 65, which is 01000001<sub>2</sub>.</p>
 
diff --git a/cur/programming/CSTA2019/1-solving-word-puzzle.html b/cur/programming/CSTA2019/1-solving-word-puzzle.html
index f2e2260a2..cb8051407 100644
--- a/cur/programming/CSTA2019/1-solving-word-puzzle.html
+++ b/cur/programming/CSTA2019/1-solving-word-puzzle.html
@@ -56,7 +56,7 @@ <h4>Please note, this is a adaptation of the student-facing page and was designe
         </div>
 
         <div class="takeNote">
-            <h4><strong>Essential Idea</strong></h4>
+            <h3 class="box-head">Essential Idea</h3>
             <p>You write the predicate that does the checking, and <code>keep</code> applies that predicate to each item in the input list and then reports a new list of only the items that make your predicate <code>true</code>.</p>
 			<p>Note that the blank input slot in the predicate is <em>required</em> when using <code>keep</code>. This is where the item from the list goes each time the question (predicate) is asked.</p>
 		</div>
diff --git a/cur/programming/CSTA2019/2-fractal-art.html b/cur/programming/CSTA2019/2-fractal-art.html
index 2c641e807..f0bb5c4d2 100644
--- a/cur/programming/CSTA2019/2-fractal-art.html
+++ b/cur/programming/CSTA2019/2-fractal-art.html
@@ -36,7 +36,7 @@ <h4>Please note, this is a adaptation of the student-facing page and was designe
                 <div class="endnote">
                     <p><a href="#hint-stepping" data-toggle="collapse" title="Having trouble? Click here.">Having trouble? Click here for a instructions on using <strong>Visible Stepping</strong> to see your code running one line at a time.</a></p>
                     <div id="hint-stepping" class="collapse">
-                        <h4><strong>Debugging with Visible Stepping</strong></h4>
+                        <h3 class="box-head">Debugging with Visible Stepping</h3>
                         <p>Snap<em>!</em> has a debugging tool called <strong>Visible Stepping</strong> that allows you to control how quickly Snap<em>!</em> steps through the blocks of your code. This lets you see the effect of each block one-by-one to help you understand any errors in your code.</p>
                         <p>After clicking the Visible Stepping button (<img class="inline nopadtb" src="/bjc-r/img/2-complexity/visible-stepping.png" alt="Visible Stepping button with two footprints" title="Visible Stepping button with two footprints" />), you can adjust the slider to control the stepping speed. The sprite executes the each step of the code as it is highlighted in <span style="color: black; background-color:cyan">cyan</span>. <a href="#hint-slider" data-toggle="collapse" title="Click for a video of adjusting the Visible Stepping slider.">Click for a video.</a></p>
                         <div id="hint-slider" class="collapse">
diff --git a/cur/programming/CSTA2020/quiz-app.html b/cur/programming/CSTA2020/quiz-app.html
index ab2726378..e4d93d861 100644
--- a/cur/programming/CSTA2020/quiz-app.html
+++ b/cur/programming/CSTA2020/quiz-app.html
@@ -65,7 +65,7 @@ <h2>Building a Quiz App</h2>
                 <li>
                     <div class="newProject"><span class="text">"U2L2-Quiz"</span><img src="/bjc-r/img/icons/new-project-called.png" alt="Start a New Project called BJC-Quiz-App" title="Start a New Project called BJC-Quiz-App" /><a  name="input-type">&nbsp;</a></div>
                     <div class="narrower">
-                        <h4><strong>Making a New Snap<em>!</em> Project</strong></h4>
+                        <h3 class="box-head">Making a New Snap<em>!</em> Project</h3>
                         <ol style="list-style-type:lower-alpha">
                             <li>Open <a href="https://snap.berkeley.edu/run" title="Snap!" target="_blank">Snap<em>!</em></a>.</li>
                             <li>Choose "Save" from the Snap<em>!</em> File menu, <img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>.</li>
@@ -93,7 +93,7 @@ <h4><strong>Making a New Snap<em>!</em> Project</strong></h4>
                 <li>
                     Create a global variable to store your quiz items and initialize it as a list of items, using your constructor where appropriate.
                     <div class="narrower">
-                        <h4><strong>Making a Global Variable</strong></h4>
+                        <h3 class="box-head">Making a Global Variable</h3>
                         <ol type="a">
                             <li>Click  <img class="inline" src="/bjc-r/img/1-introduction/make-a-variable.png" alt="make a variable button" title="make a variable button" />  in the Variables palette.</li>
                             <li>Type the title for your variable.</li>
diff --git a/cur/programming/CSTANE2020/click-alonzo.html b/cur/programming/CSTANE2020/click-alonzo.html
index 4a3b9dd62..1c436b55c 100644
--- a/cur/programming/CSTANE2020/click-alonzo.html
+++ b/cur/programming/CSTANE2020/click-alonzo.html
@@ -15,7 +15,7 @@ <h2>Click Alonzo Game</h2>
 
         <h3>Making a Character Move</h3>
         <div class="endnote">
-            <h4><strong>Yellow Is for Optional Reading</strong></h4>
+            <h3 class="box-head">Yellow Is for Optional Reading</h3>
             <div class="pseudop" style="display: flex; align-items:center;">
                 <img class="imageLeft" src="/bjc-r/img/1-introduction/alonzo.png" alt="Alonzo character" title="Alonzo character" >
                 <span>
@@ -38,7 +38,7 @@ <h4><strong>Yellow Is for Optional Reading</strong></h4>
                     <img class="indent" src="/bjc-r/img/1-introduction/when-clicked-jump.png" width="199" height="87" alt="when I am clicked, go to [random position]">
                     <div class="ap-standard">CRD-2.B.1</div>
                     <div class="narrower">
-                        <h4><strong>Finding Blocks</strong></h4>
+                        <h3 class="box-head">Finding Blocks</h3>
                         <div class="comment">I refined the presentation of the supports in this problem, and we might want to consider using them in the students version also. --MF, 10/24/20</div>
                         <p>You can find blocks in <em>palettes</em> with their matching color. Drag one block underneath another to snap them together. </p>
                         <img class="indent" src="/bjc-r/img/1-introduction/motion-palette-categories.jpg" alt="Palette categories: Motion, Looks, Sound, Pen, Control, Sensing, Operators, and Variables" title="Palette categories: Motion, Looks, Sound, Pen, Control, Sensing, Operators, and Variables" />
@@ -114,7 +114,7 @@ <h3>Confirming Whether Alonzo Was Clicked</h3>
         <h3>Keeping Score</h3>
         <p>The player will also want to know how much progress they have made in the game. The command <img src="/bjc-r/img/1-introduction/ghosteffect.png" alt="change (ghost) effect by ()" title="change (ghost) effect by ()" /> can control Alonzo's <em>transparency</em>.</p>
         <div class="endnote">
-        <h4><strong>Optional Reading for the Conference Format</strong></h4>
+        <h3 class="box-head">Optional Reading for the Conference Format</h3>
         <div class="vocabFullWidth">
             <p>
                 The <strong>transparency</strong> of an image is how much you can see what's behind it. For example, here is the Alonzo sprite shown with three different transparencies (which have been set using the <code>ghost effect</code> block).<br />
@@ -141,7 +141,7 @@ <h3>Ending the Game</h3>
                 <li>
                     If you want to save your work, open the Snap<em>!</em> File menu (<img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>) and choose save. You can either save the file to your computer, or if you have a Snap<em>!</em> account, you can save it to the Snap<em>!</em> cloud.
                     <div class="endnote">
-                        <h4><strong>Creating an Account</strong></h4>
+                        <h3 class="box-head">Creating an Account</h3>
                         In the Snap<em>!</em> window, click the Cloud menu, <img src="/bjc-r/img/1-introduction/cloud_button.png" alt="Cloud menu button" title="Cloud menu button" />, select "Signup...", and follow the instructions. <br />
                         <img class="indent" src="/bjc-r/img/sys/button-cloud-with-context.png" alt="cloud icon" title="cloud icon"/>
                         <p>You'll be asked to click a link in your email to verify your account, but you don't have to do that right now.</p>
diff --git a/cur/programming/CSTANE2020/data-processing.html b/cur/programming/CSTANE2020/data-processing.html
index 3db6982d3..7c331e7b5 100644
--- a/cur/programming/CSTANE2020/data-processing.html
+++ b/cur/programming/CSTANE2020/data-processing.html
@@ -27,7 +27,7 @@ <h3>Importing and Accessing Data</h3>
                         <li><img class="inline" src="/bjc-r/img/5-algorithms/column-of-table.png" alt="column () of table ()" title="column () of table ()" /> takes a table of data and a column number as input and reports that column from the data</li>
                     </ul>
                     <div class="endnote">
-                        <h4><strong>Yellow Is for Optional Reading</strong></h4>
+                        <h3 class="box-head">Yellow Is for Optional Reading</h3>
                         <p>Notice that these block names include the word "table" or "record" before the second input.  These expected input data types can help you avoid bugs caused by using an input that does not match that the selector expects to receive.</p>
                         <img height="231" class="indent" data-gifffer="/bjc-r/img/5-algorithms/cars-table-view-parts.gif" alt="three frame animation of the report of cars dataset displayed as a table with columns and rows; in the first frame, the fourth row of the table is highlighted and labeled 'record (row)'; in the second frame, the third column of the table is highlighted and labeled 'column'; in the third frame, the cell in the fourth row and third column is highlighted and labeled 'field'" title="three frame animation of the report of cars dataset displayed as a table with columns and rows; in the first frame, the fourth row of the table is highlighted and labeled 'record (row)'; in the second frame, the third column of the table is highlighted and labeled 'column'; in the third frame, the cell in the fourth row and third column is hightlighted and labeled 'field'" />
                         <p>A table is represented in Snap<em>!</em> as a list of lists. If you right-click (or control-click on a Mac) a table, you can switch to "list view" and see how the data (and column headings) are stored. <a href="#hint-views" data-toggle="collapse" title="See examples of table view and list view.">See examples of table view and list view.</a></p>
diff --git a/cur/programming/CSTANE2020/quiz-app.html b/cur/programming/CSTANE2020/quiz-app.html
index c5d054b69..cf995ef10 100644
--- a/cur/programming/CSTANE2020/quiz-app.html
+++ b/cur/programming/CSTANE2020/quiz-app.html
@@ -71,7 +71,7 @@ <h2>Building a Quiz App</h2>
                         <li>A script that sets that global variable to contain a list of quiz items (this script will only work after the constructor and selectors have been built)</li>
                     </ul>
                     <div class="endnote">
-                        <h4><strong>Yellow Is for Optional Reading</strong></h4>
+                        <h3 class="box-head">Yellow Is for Optional Reading</h3>
                         In the full version of this project, students create the constructor, selectors, and global variable themselves, and they write their own quiz questions on a topic of their choosing.
                     </div>
                 </li>
diff --git a/cur/programming/new-ideas/aprilpd/processing-student-grades.html b/cur/programming/new-ideas/aprilpd/processing-student-grades.html
index 70ef2a759..28e2d5a14 100644
--- a/cur/programming/new-ideas/aprilpd/processing-student-grades.html
+++ b/cur/programming/new-ideas/aprilpd/processing-student-grades.html
@@ -16,7 +16,7 @@ <h2>Processing Student Grades</h2>
 
         <div class="forYouToDo" id="first">
             <div class="sidenoteBig">
-				<h4><strong>Making a Variable</strong></h4>
+				<h3 class="box-head">Making a Variable</h3>
 				<ol type="a">
                     <li><strong>Choose <img class="" src="/bjc-r/img/1-introduction/make-a-variable.png" alt="make a variable button" title="make a variable button" />from the Variables palette.</strong></li>
                     <li><strong>Type the title</strong> for your variable: <var>student grades</var>.</li>

From c84fb32d0dcff5a5c4c799fa2444d6eeabe360e4 Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 19:35:40 -0400
Subject: [PATCH 06/29] a11y - 1.1.3 HTML cleanup and changing an H3 to H4

(H4 is on line 34)
---
 .../3-loading-mobile-device.es.html           | 116 +++++++++---------
 .../3-loading-mobile-device.html              |  82 ++++++-------
 2 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
index 08623fcd8..c3a8513ee 100644
--- a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
+++ b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
@@ -7,71 +7,71 @@
 	</head>
 
 	<body>
-        <h2>Compartir tu juego</h2>
-
-        <div class="learn"><p>El juego aún no está terminado, pero está terminado <em>lo suficiente</em>. <strong>En esta página</strong>, compartirás tu proyecto para que otros puedan jugar a tu juego.</p>
-        </div>
-		
+		<h2>Compartir tu juego</h2>
+		<div class="learn">El juego aún no está terminado, pero está terminado <em>lo suficiente</em>. <strong>En esta página</strong>, compartirás tu proyecto para que otros puedan jugar a tu juego.</div>
 		<div class="forYouToDo">
-            <ol>
-                <li>
-                    Puedes utilizar cualquiera de las opciones siguientes si tienes una cuenta de Snap<em>!</em> Si no tiene una cuenta de Snap!, deberá utilizar la opción A.
-                    <div class="narrower">
-                        <h3 class="box-head">Opción A: Comparte tu proyecto como archivo</h3>
-						<div class="endnote">
-							<a href="#hint-share-file" data-toggle="collapse" title="El envío de un archivo XML envía una versión estática de tu proyecto.">El envío de un archivo XML envía una versión estática de tu proyecto.</a>
-							<div id="hint-share-file" class="collapse">
-								<ul>
-									<li>En la página anterior, aprendiste cómo guardar un archivo XML guardándolo en tu computadora en cambio de en la nube. También puedes ir al menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" alt="botón del menú Archivo" title="botón del menú Archivo"/>) y seleccionar "Exportar proyecto..." para generar un archivo XML.</li>
-									<li>Puede enviar este archivo XML a otras personas. Para abrir el archivo, pueden ir a Snap<em>!</em> y arrastrar el archivo XML. También pueden ir al menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" alt="botón del menú Archivo" title="botón del menú Archivo"/>) y Abrir... el archivo.</li>
-									<li>Si haces cambios en tu proyecto, tienes que guardarlo de nuevo y enviar el nuevo archivo para que los demás vean tus actualizaciones.</li>
-								</ul>
-							</div>
-						</div>
+			<ol>
 
-                        <h3 class="box-head">Opción B: Comparte tu proyecto como un enlace</h3>
-						<div class="endnote">
-							<p><a href="#hint-share-link" data-toggle="collapse" title="Al Compartir tu proyecto se creará un enlace que permitirá a otros ver la versión guardada más reciente de tu proyecto.">Al “Compartir" tu proyecto se creará un enlace que permitirá a otros ver la versión guardada más reciente de tu proyecto.</a></p>
-							<div id="hint-share-link" class="collapse">
+				<li>Puedes utilizar cualquiera de las opciones siguientes si tienes una cuenta de Snap<em>!</em> Si no tiene una cuenta de Snap!, deberá utilizar la opción A.</li>
 
-                            <h3 class="box-head">Crear el enlace</h3>
-                            <img class="imageRight" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L1P7_OpenFile.es.png"  height="350" alt="Ventana de diálogo para abrir un proyecto" title="Ventana de diálogo para abrir un proyecto"/>
-                            <ol type="a">
-                                <li>Debes asegurarte que tu proyecto se encuentra guardado.</li>
-                                <li>Selecciona la opción "Abrir..." del menú Archivo en Snap<em>!</em>, <img src="/bjc-r/img/1-introduction/file_button.png" alt="Botón menú Archivo" title="Botón menú Archivo"/>.</li>
-                                <li>Selecciona, de la lista de proyectos, el proyecto que deseas compartir (tu proyecto actual se llama probablemente "U1L1-ClicAlonzo").
-                                    <ul>
-                                        <li>Para encontrar un archivo, podemos escribir una palabra en la barra de búsqueda en la parte superior para ver únicamente la lista de archivos que coinciden (ver el ejemplo a la derecha, aparecen únicamente los archivos que coinciden con "U1").</li>
-                                    </ul>
+				<div class="narrower">
+					<h3 class="box-head">Opción A: Comparte tu proyecto como archivo</h3>
+					<div class="endnote">
+						<a href="#hint-share-file" data-toggle="collapse" title="El envío de un archivo XML envía una versión estática de tu proyecto.">El envío de un archivo XML envía una versión estática de tu proyecto.</a>
+						<div id="hint-share-file" class="collapse">
+							<ul>
+								<li>En la página anterior, aprendiste cómo guardar un archivo XML guardándolo en tu computadora en cambio de en la nube. También puedes ir al menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" alt="botón del menú Archivo" title="botón del menú Archivo"/>) y seleccionar "Exportar proyecto..." para generar un archivo XML.</li>
+								<li>Puede enviar este archivo XML a otras personas. Para abrir el archivo, pueden ir a Snap<em>!</em> y arrastrar el archivo XML. También pueden ir al menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" alt="botón del menú Archivo" title="botón del menú Archivo"/>) y Abrir... el archivo.</li>
+								<li>Si haces cambios en tu proyecto, tienes que guardarlo de nuevo y enviar el nuevo archivo para que los demás vean tus actualizaciones.</li>
+							</ul>
+						</div>
+					</div>
 
-                                </li>
-                                
-                                
-                                <li>Haz clic en "Compartir," y luego haz clic en "Sí" para compartir. Luego haz clic en "Cancelar" para cerrar el menú.</li>
-                                <li>Ahora, la URL (el enlace) en la barra de navegación de la ventana ha cambiado. Copia la nueva URL, y puedes enviarla a tu correo. Cuando tengas tiempo, puedes enviarla a alguien más para compartir el proyecto.</li>
-                                <div class="endnote">
-                                    <a href="#hint-URL" data-toggle="collapse" title="Haz clic para ver las imágenes que muestran la forma en que cambia la URL.">Haz clic para ver las imágenes que muestran la forma en que cambia la URL.</a>
-                                    <div id="hint-URL" class="collapse">
-                                        <img class="inline" src="/bjc-r/img/1-introduction/url-before.es.png" width="800" alt="Ventana de Snap! con la URL 'snap.berkeley.edu/snapsource/snap.html' con un círculo en la barra de dirección. El círculo está etiqutado 'URL antes de compartir'" title="Ventana de Snap! con la URL 'snap.berkeley.edu/snapsource/snap.html' con un círculo en la barra de dirección. El círculo está etiqutado 'URL antes de compartir'" /><br />
-                                        <img class="inline" src="/bjc-r/img/1-introduction/url-after.es.png" width="800" alt="Ventana de Snap! con la URL 'snap.berkeley.edu/snapsource/snap.html#present:Username=bh&Proje...' con un círculo en la barra de dirección. El círculo tiene la etiqueta 'URL después de compartir'" title="Ventana de Snap! con la URL 'snap.berkeley.edu/snapsource/snap.html#present:Username=bh&Proje...' con un círculo en la barra de dirección. El círculo tiene la etiqueta 'URL después de compartir'" />
-                                    </div>
-                                </div>
-                                    <p>Si realizas cambios en el proyecto después de compartirlo, estos cambios se reflejan en lo que otras personas ven, así que no tienes que compartirlo de nuevo.</p>
-                            </ol>
-                    </div>
-                </li>
-                <li>
-                    Si trabajas en equipo, asegúrate que todos tengan una copia del proyecto.
-                    <div class="narrower">
-                        <h3 class="box-head">Guardar una copia de un proyecto</h3>
-                        <ul>
+					<h3 class="box-head">Opción B: Comparte tu proyecto como un enlace</h3>
+					<div class="endnote">
+						<p><a href="#hint-share-link" data-toggle="collapse" title="Al Compartir tu proyecto se creará un enlace que permitirá a otros ver la versión guardada más reciente de tu proyecto.">Al “Compartir" tu proyecto se creará un enlace que permitirá a otros ver la versión guardada más reciente de tu proyecto.</a></p>
+						<div id="hint-share-link" class="collapse">
+							<h4 class="box-head">Crear el enlace</h4>
+							<img class="imageRight" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L1P7_OpenFile.es.png"  height="350" alt="Ventana de diálogo para abrir un proyecto" title="Ventana de diálogo para abrir un proyecto"/>
+							<ol type="a">
+								<li>Debes asegurarte que tu proyecto se encuentra guardado.</li>
+								<li>Selecciona la opción "Abrir..." del menú Archivo en Snap<em>!</em>, <img src="/bjc-r/img/1-introduction/file_button.png" alt="Botón menú Archivo" title="Botón menú Archivo"/>.</li>
+								<li>
+									Selecciona, de la lista de proyectos, el proyecto que deseas compartir (tu proyecto actual se llama probablemente "U1L1-ClicAlonzo").
+									<ul>
+										<li>Para encontrar un archivo, podemos escribir una palabra en la barra de búsqueda en la parte superior para ver únicamente la lista de archivos que coinciden (ver el ejemplo a la derecha, aparecen únicamente los archivos que coinciden con "U1").</li>
+									</ul>
+								</li>
+								<li>Haz clic en "Compartir," y luego haz clic en "Sí" para compartir. Luego haz clic en "Cancelar" para cerrar el menú.</li>
+								<li>
+									Ahora, la URL (el enlace) en la barra de navegación de la ventana ha cambiado. Copia la nueva URL, y puedes enviarla a tu correo. Cuando tengas tiempo, puedes enviarla a alguien más para compartir el proyecto.
+									<ul>
+										<li>
+											<a href="#hint-URL" data-toggle="collapse" title="Haz clic para ver las imágenes que muestran la forma en que cambia la URL.">Haz clic para ver las imágenes que muestran la forma en que cambia la URL.</a>
+											<div id="hint-URL" class="collapse">
+												<img class="inline" src="/bjc-r/img/1-introduction/url-before.es.png" width="800" alt="Ventana de Snap! con la URL 'snap.berkeley.edu/snapsource/snap.html' con un círculo en la barra de dirección. El círculo está etiqutado 'URL antes de compartir'" title="Ventana de Snap! con la URL 'snap.berkeley.edu/snapsource/snap.html' con un círculo en la barra de dirección. El círculo está etiqutado 'URL antes de compartir'" /><br />
+												<img class="inline" src="/bjc-r/img/1-introduction/url-after.es.png" width="800" alt="Ventana de Snap! con la URL 'snap.berkeley.edu/snapsource/snap.html#present:Username=bh&Proje...' con un círculo en la barra de dirección. El círculo tiene la etiqueta 'URL después de compartir'" title="Ventana de Snap! con la URL 'snap.berkeley.edu/snapsource/snap.html#present:Username=bh&Proje...' con un círculo en la barra de dirección. El círculo tiene la etiqueta 'URL después de compartir'" />
+											</div>
+										</li>
+									</ul>
+								</li>
+								<p>Si realizas cambios en el proyecto después de compartirlo, estos cambios se reflejan en lo que otras personas ven, así que no tienes que compartirlo de nuevo.</p>
+							</ol>
+						</div>
+					</div>
+				</div>
+				<li>
+					Si trabajas en equipo, asegúrate que todos tengan una copia del proyecto.
+					<div class="narrower">
+						<h3 class="box-head">Guardar una copia de un proyecto</h3>
+						<ul>
 							<li>Tanto si comparte su proyecto como un archivo o un enlace, siempre que el segundo socio guarde el proyecto (en su computadora o en su cuenta), estará guardando una <em>copia</em>&mdash; no un archivo compartido. Si el segundo socio modifica el proyecto, deberá volver a guardarlo y compartirlo (como archivo o enlace) con el primer socio para que éste pueda ver el cambio.</li>
 							<div class="endnote">Si tu y tu compañero tienen cuentas de Snap!, el proyecto se guardará en la cuenta de la persona que haya iniciado sesión. Para cambiar quién ha iniciado sesión en Snap<em>!</em>, abra el menú Nube (<img src="/bjc-r/img/1-introduction/cloud_button.png" alt="botón del menú Nube">) y elija "Cerrar sesión". Deja que tu compañero inicie sesión en Snap<em>!</em>. </div>
 						</ul>
-                    </div>
-                </li>
-            </ol>
-        </div>
+					</div>
+				</li>
+			</ol>
+		</div>
 
         
 <!--
diff --git a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
index e1e0b6022..d6c47370c 100644
--- a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
+++ b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
@@ -15,51 +15,51 @@ <h2>Sharing Your Game</h2>
 				<li>You can use either option below if you have a Snap<em>!</em> account. If you do not have a Snap<em>!</em> account, you need to use Option A.</li>
 
 				<div class="narrower">
-						<h3 class="box-head">Option A: Share your project as a file</h3>
-						<div class="endnote">
-							<a href="#hint-share-file" data-toggle="collapse" title="Sending an XML file sends a static version of your project.">Sending an XML file sends a static version of your project.</a>
-							<div id="hint-share-file" class="collapse">
-								<ul>
-									<li>On the previous page, you learned how to save an XML file by saving to your computer instead of the cloud. You can also go to File menu (<img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>) and select "Export project..." to generate an XML file.</li>
-									<li>You can send this XML file to others. To open the file, they can go to Snap<em>!</em> and drag in the XML file. They can also go to the File menu (<img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>) and Open... the file.</li>
-									<li>If you make changes to your project, then you have to save the project again and send the new file for others to see your updates.</li>
-								</ul>
-							</div>
+					<h3 class="box-head">Option A: Share your project as a file</h3>
+					<div class="endnote">
+						<a href="#hint-share-file" data-toggle="collapse" title="Sending an XML file sends a static version of your project.">Sending an XML file sends a static version of your project.</a>
+						<div id="hint-share-file" class="collapse">
+							<ul>
+								<li>On the previous page, you learned how to save an XML file by saving to your computer instead of the cloud. You can also go to File menu (<img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>) and select "Export project..." to generate an XML file.</li>
+								<li>You can send this XML file to others. To open the file, they can go to Snap<em>!</em> and drag in the XML file. They can also go to the File menu (<img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>) and Open... the file.</li>
+								<li>If you make changes to your project, then you have to save the project again and send the new file for others to see your updates.</li>
+							</ul>
 						</div>
+					</div>
 
-						<h3 class="box-head">Option B: Share your project as a link</h3>
-						<div class="endnote">
-							<p><a href="#hint-share-link" data-toggle="collapse" title="Sharing your project will create a link that will let others see the most recently saved version of your project.">"Sharing" your project will create a link that will let others see the most recently saved version of your project.</a></p>
-							<div id="hint-share-link" class="collapse">
-								<h3 class="box-head">Creating a Link</h3>
-								<img class="imageRight" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L1P7_OpenFile.png"  height="350" alt="Open Project dialog box" title="Open Project dialog box"/>
-								<ol type="a">
-									<li>Make sure your project is saved.</li>
-									<li>Choose "Open..." from the Snap<em>!</em> File menu (<img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>).</li>
-									<li>
-										Select the project you want to share from the project list (your current project is likely named "U1L1-ClickAlonzo").
-										<ul>
-											<li>To locate a file, you can type in the search bar at the top to see a list of matching files (see the example on the right, where only "U1" files are shown).</li>
-										</ul>
-									</li>
-									<li>Click "Share," and then click "Yes" to share. Then click "Cancel" to close the menu.</li>
-									<li>
-										Now, the URL (the link) at the top of the browser window has changed.  Copy the new URL, and send it to someone else to share the project.
-										<ul>
-											<li>
-												<a href="#hint-URL" data-toggle="collapse" title="Click for images that show where the URL is and how it changes.">Click for images that show where the URL is and how it changes.</a>
-												<div id="hint-URL" class="collapse">
-													<img class="inline" src="/bjc-r/img/1-introduction/url-before.png" width="800" alt="Snap! window in browser with URL 'snap.berkeley.edu/snapsource/snap.html' circled in the location bar. The circle is labeled 'URL before sharing'" title="Snap! window in browser with URL 'snap.berkeley.edu/snapsource/snap.html' circled in the location bar. The circle is labeled 'URL before sharing'" /><br />
-													<img class="inline" src="/bjc-r/img/1-introduction/url-after.png" width="800" alt="Snap! window in browser with URL 'snap.berkeley.edu/snapsource/snap.html#present:Username=bh&Proje...' circled in the location bar. The circle is labeled 'URL after sharing'" title="Snap! window in browser with URL 'snap.berkeley.edu/snapsource/snap.html#present:Username=bh&Proje...' circled in the location bar. The circle is labeled 'URL after sharing'" />
-												</div>
-											</li>
-										</ul>
-									</li>
-									<p>If you save a change to your project after sharing it, the changes will be visible at the URL you have already shared. (The other person may need to refresh their screen.) You don't have to re-share it.</p>
-								</ol>
-							</div>
+					<h3 class="box-head">Option B: Share your project as a link</h3>
+					<div class="endnote">
+						<p><a href="#hint-share-link" data-toggle="collapse" title="Sharing your project will create a link that will let others see the most recently saved version of your project.">"Sharing" your project will create a link that will let others see the most recently saved version of your project.</a></p>
+						<div id="hint-share-link" class="collapse">
+							<h4 class="box-head">Creating a Link</h4>
+							<img class="imageRight" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L1P7_OpenFile.png"  height="350" alt="Open Project dialog box" title="Open Project dialog box"/>
+							<ol type="a">
+								<li>Make sure your project is saved.</li>
+								<li>Choose "Open..." from the Snap<em>!</em> File menu (<img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>).</li>
+								<li>
+									Select the project you want to share from the project list (your current project is likely named "U1L1-ClickAlonzo").
+									<ul>
+										<li>To locate a file, you can type in the search bar at the top to see a list of matching files (see the example on the right, where only "U1" files are shown).</li>
+									</ul>
+								</li>
+								<li>Click "Share," and then click "Yes" to share. Then click "Cancel" to close the menu.</li>
+								<li>
+									Now, the URL (the link) at the top of the browser window has changed.  Copy the new URL, and send it to someone else to share the project.
+									<ul>
+										<li>
+											<a href="#hint-URL" data-toggle="collapse" title="Click for images that show where the URL is and how it changes.">Click for images that show where the URL is and how it changes.</a>
+											<div id="hint-URL" class="collapse">
+												<img class="inline" src="/bjc-r/img/1-introduction/url-before.png" width="800" alt="Snap! window in browser with URL 'snap.berkeley.edu/snapsource/snap.html' circled in the location bar. The circle is labeled 'URL before sharing'" title="Snap! window in browser with URL 'snap.berkeley.edu/snapsource/snap.html' circled in the location bar. The circle is labeled 'URL before sharing'" /><br />
+												<img class="inline" src="/bjc-r/img/1-introduction/url-after.png" width="800" alt="Snap! window in browser with URL 'snap.berkeley.edu/snapsource/snap.html#present:Username=bh&Proje...' circled in the location bar. The circle is labeled 'URL after sharing'" title="Snap! window in browser with URL 'snap.berkeley.edu/snapsource/snap.html#present:Username=bh&Proje...' circled in the location bar. The circle is labeled 'URL after sharing'" />
+											</div>
+										</li>
+									</ul>
+								</li>
+								<p>If you save a change to your project after sharing it, the changes will be visible at the URL you have already shared. (The other person may need to refresh their screen.) You don't have to re-share it.</p>
+							</ol>
 						</div>
 					</div>
+				</div>
 				<li>
 					If you are working with a partner, make sure you both have a copy.
 					<div class="narrower">

From 37a3e171fd9442c61f65226384649b40975fe8bb Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 19:42:17 -0400
Subject: [PATCH 07/29] a11y - 1.2.3 lite HTML edits

---
 .../2-gossip-and-greet/3-customizing.es.html  | 242 +++++++++---------
 .../2-gossip-and-greet/3-customizing.html     |   2 +-
 2 files changed, 122 insertions(+), 122 deletions(-)

diff --git a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
index 3f6cca452..c0dcb6924 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
@@ -7,76 +7,76 @@
 	</head>
 
 	<body>
-        <h2>Personalizar y depurar errores <em>(debugging)</em></h2>
-        <div class="learn">
+		<h2>Personalizar y depurar errores <em>(debugging)</em></h2>
+		<div class="learn">
 			<p><strong>En esta página</strong>, editarás las listas de palabras usadas por los personajes y luego identificarás posibles problemas.</p>
-        </div>
+		</div>
 
-        <div class="forYouToDo" id="first">
+		<div class="forYouToDo" id="first">
 			<ol>
-                <li>
-           	    Abre el proyecto U1L2-Chisme.  Edita los siguientes tres bloques reporteros para cambiar las frases que usa el programa. (Sigue las instrucciones en el recuadro a continuación.) Sé creativo y divertido, pero serio.<br />
-                    <img class="indent" src="/bjc-r/img/1-introduction/who.es.png" alt="bloque quién" title="bloque quién" />
-                    <img class="inline" src="/bjc-r/img/1-introduction/does-what.es.png" alt="bloque hace" title="bloque hace" />
-                    <img class="inline" src="/bjc-r/img/1-introduction/who2.es.png" alt="bloque quién2" title="bloque quién 2" />
-                    <div class="narrower">
-                        <h3 class="box-head">¿Cómo editar un bloque?</h3>
-                        <ol type="a">
-                            <li><strong>Encuentra el bloque</strong> en el área de trabajo o en la paleta de comandos a la derecha.</li>
-                            <li><strong>Haz clic con el botón derecho</strong> (o control-clic) en el bloque y selecciona la opción "editar..."</li>
-                            <li><strong>Realiza los cambios</strong> al código interno del bloque. (Las instrucciones ya se encuentran dentro de los bloques.)</li>
-                            <li><strong>Presiona "Aceptar"</strong> cuando estés seguro de tus cambios. (O bien haz clic en "Cancelar" si no deseas hacer los cambios.)</li>
-                        </ol>
-                        <div class="endnote">
-                            <a href="#hint-edit-block" data-toggle="collapse" title="Haz clic para reproducir una animación con los pasos a seguir para editar un bloque.">Haz clic para reproducir una animación con los pasos a seguir para editar un bloque.</a>
-                            <div id="hint-edit-block" class="collapse">
-                                <div style="display:block;">
-                                    <img src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L2P2-EditABlock.es.gif" alt="Animación con los pasos a seguir para editar un bloque" title="Animación con los pasos a seguir para editar un bloque"/>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </li>
-            </ol>
-        </div>
-        <div class="endnote">
-            <a href="#hint-report" data-toggle="collapse" title="¿Por qué estos bloques usan reportar? ¿Por qué no usan solamente decir?">¿Por qué estos bloques usan <img class="inline nopadtb" src="/bjc-r/img/blocks/report.es.png" alt="reportar" title="reportar" />? ¿Por qué no usar solamente <img class="" src="/bjc-r/img/blocks/say-empty-full-size.es.png" alt="decir" title="decir" />?</a>
-            <div id="hint-report" class="collapse">
-                <p>Los bloques <code>reportar</code> y <code>decir</code> tienen diferentes funciones. <code>Reportar</code> traslada un valor a la computadora, y este valor puede llevar una entrada a otro bloque, por ejemplo al bloque <code>unir</code> dentro del bloque <code>chisme</code>. <code>Decir</code> únicamente presenta el valor el pantalla mediante una burbuja de texto.</p>
-            </div>
-        </div>
+				<li>
+				Abre el proyecto U1L2-Chisme.  Edita los siguientes tres bloques reporteros para cambiar las frases que usa el programa. (Sigue las instrucciones en el recuadro a continuación.) Sé creativo y divertido, pero serio.<br />
+					<img class="indent" src="/bjc-r/img/1-introduction/who.es.png" alt="bloque quién" title="bloque quién" />
+					<img class="inline" src="/bjc-r/img/1-introduction/does-what.es.png" alt="bloque hace" title="bloque hace" />
+					<img class="inline" src="/bjc-r/img/1-introduction/who2.es.png" alt="bloque quién2" title="bloque quién 2" />
+					<div class="narrower">
+						<h3 class="box-head">¿Cómo editar un bloque?</h3>
+						<ol type="a">
+							<li><strong>Encuentra el bloque</strong> en el área de trabajo o en la paleta de comandos a la derecha.</li>
+							<li><strong>Haz clic con el botón derecho</strong> (o control-clic) en el bloque y selecciona la opción "editar..."</li>
+							<li><strong>Realiza los cambios</strong> al código interno del bloque. (Las instrucciones ya se encuentran dentro de los bloques.)</li>
+							<li><strong>Presiona "Aceptar"</strong> cuando estés seguro de tus cambios. (O bien haz clic en "Cancelar" si no deseas hacer los cambios.)</li>
+						</ol>
+						<div class="endnote">
+							<a href="#hint-edit-block" data-toggle="collapse" title="Haz clic para reproducir una animación con los pasos a seguir para editar un bloque.">Haz clic para reproducir una animación con los pasos a seguir para editar un bloque.</a>
+							<div id="hint-edit-block" class="collapse">
+								<div style="display:block;">
+									<img src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L2P2-EditABlock.es.gif" alt="Animación con los pasos a seguir para editar un bloque" title="Animación con los pasos a seguir para editar un bloque"/>
+								</div>
+							</div>
+						</div>
+					</div>
+				</li>
+			</ol>
+		</div>
+		<div class="endnote">
+			<a href="#hint-report" data-toggle="collapse" title="¿Por qué estos bloques usan reportar? ¿Por qué no usan solamente decir?">¿Por qué estos bloques usan <img class="inline nopadtb" src="/bjc-r/img/blocks/report.es.png" alt="reportar" title="reportar" />? ¿Por qué no usar solamente <img class="" src="/bjc-r/img/blocks/say-empty-full-size.es.png" alt="decir" title="decir" />?</a>
+			<div id="hint-report" class="collapse">
+				<p>Los bloques <code>reportar</code> y <code>decir</code> tienen diferentes funciones. <code>Reportar</code> traslada un valor a la computadora, y este valor puede llevar una entrada a otro bloque, por ejemplo al bloque <code>unir</code> dentro del bloque <code>chisme</code>. <code>Decir</code> únicamente presenta el valor el pantalla mediante una burbuja de texto.</p>
+			</div>
+		</div>
 
-        <div class="vocabFullWidth">: <strong>Listas</strong>, <strong>cadenas</strong> y <strong>concatenación</strong>
-            <ul>
-                <div class="ap-standard">AAP-1.C.1 first sentence</div>
-                <div class="sidenoteBig">
-                    <a href="#ordered" data-toggle="collapse" title='¿Qué significa "ordenado"?'>¿Qué significa "ordenado?"</a>
-                    <div id="ordered" class="collapse">
-                        No quiere decir que los elementos tienen que aparecer en orden alfabético
-                        o numérico.  Solo significa que
-                        <img src="/bjc-r/img/1-introduction/list-a-b.es.png" alt="(lista a b)" title="(lista a b)">
-                        es una lista diferente a
-                        <img src="/bjc-r/img/1-introduction/list-b-a.es.png" alt="(lista b a)" title="(lista b a)">.
-                    </div>
-                </div>
-                <li>
-                    Una <strong>lista</strong> (<em>list</em>) es un conjunto ordenado de elementos. Ya has visto una en el siguiente ejemplo:<br />
-                    <img class="indent" src="/bjc-r/img/1-introduction/list-from-who-result.es.png" alt="lista{Señora, Sra. C, mi gato, Hannah, Jake}" title="lista{Señora, Sra. C, mi gato, Hannah, Jake}" />
-                </li>
-                <div class="ap-standard">AAP-2.D.1, AAP-2.D.2</div>
-                <li>Los elementos en esta lista son <em>cadenas</em>. Una <strong>cadena</strong> (<em>string</em>) es una secuencia de caracteres (letras, dígitos, signos de puntuación, etc.). Una <strong>sub-cadena</strong> (<em>substring</em>) es sub-conjunto de una cadena existente. Por ejemplo: "Hanna," "anna", y "nnah" son cada una de ellas sub-cadenas de la cadena madre "Hannah." (Ten en cuenta que la cadena vacía, y la cadena original, son también sub-cadenas de la cadena madre.)</li>
-                <li><strong>Concatenar</strong> (<em>concatenate</em>) cadenas significa hacer más grande una cadena mediante la conexión de dos o más cadenas. En Snap<em>!</em>, el bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/join()().es.png" alt="unir () ()" title="unir () ()" /> es utilizado para concatenar cadenas.</li>
-            </ul>
-        </div>
+		<div class="vocabFullWidth">: <strong>Listas</strong>, <strong>cadenas</strong> y <strong>concatenación</strong>
+			<ul>
+				<div class="ap-standard">AAP-1.C.1 first sentence</div>
+				<div class="sidenoteBig">
+					<a href="#ordered" data-toggle="collapse" title="¿Qué significa 'ordenado'?">¿Qué significa "ordenado?"</a>
+					<div id="ordered" class="collapse">
+						No quiere decir que los elementos tienen que aparecer en orden alfabético
+						o numérico.  Solo significa que
+						<img src="/bjc-r/img/1-introduction/list-a-b.es.png" alt="(lista a b)" title="(lista a b)">
+						es una lista diferente a
+						<img src="/bjc-r/img/1-introduction/list-b-a.es.png" alt="(lista b a)" title="(lista b a)">.
+					</div>
+				</div>
+				<li>
+					Una <strong>lista</strong> (<em>list</em>) es un conjunto ordenado de elementos. Ya has visto una en el siguiente ejemplo:<br />
+					<img class="indent" src="/bjc-r/img/1-introduction/list-from-who-result.es.png" alt="lista{Señora, Sra. C, mi gato, Hannah, Jake}" title="lista{Señora, Sra. C, mi gato, Hannah, Jake}" />
+				</li>
+				<div class="ap-standard">AAP-2.D.1, AAP-2.D.2</div>
+				<li>Los elementos en esta lista son <em>cadenas</em>. Una <strong>cadena</strong> (<em>string</em>) es una secuencia de caracteres (letras, dígitos, signos de puntuación, etc.). Una <strong>sub-cadena</strong> (<em>substring</em>) es sub-conjunto de una cadena existente. Por ejemplo: "Hanna," "anna", y "nnah" son cada una de ellas sub-cadenas de la cadena madre "Hannah." (Ten en cuenta que la cadena vacía, y la cadena original, son también sub-cadenas de la cadena madre.)</li>
+				<li><strong>Concatenar</strong> (<em>concatenate</em>) cadenas significa hacer más grande una cadena mediante la conexión de dos o más cadenas. En Snap<em>!</em>, el bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/join()().es.png" alt="unir () ()" title="unir () ()" /> es utilizado para concatenar cadenas.</li>
+			</ul>
+		</div>
 
-        <div class="forYouToDo">
-            <ol start="2">
-                <div class="vocabBig">
-                    <p>El proceso de probar, buscar problemas y arreglarlos se llama <strong>depuración</strong> (<em>debugging</em>). Utilizaremos también el término en inglés, <em>debugging</em>, que viene de la palabra "bug" o "error" y representa la acción de buscar errores en nuestro programa.</p>
-                </div>
-                <li>
-                	Debes asegurarte que tu programa funciona. Prueba cada bloque de forma individual y también el programa completo en su conjunto. En el caso que algo no funcione, no debes seguir adelante hasta resolverlo.<br />
-	                <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" />
+		<div class="forYouToDo">
+			<ol start="2">
+				<div class="vocabBig">
+					<p>El proceso de probar, buscar problemas y arreglarlos se llama <strong>depuración</strong> (<em>debugging</em>). Utilizaremos también el término en inglés, <em>debugging</em>, que viene de la palabra "bug" o "error" y representa la acción de buscar errores en nuestro programa.</p>
+				</div>
+				<li>
+					Debes asegurarte que tu programa funciona. Prueba cada bloque de forma individual y también el programa completo en su conjunto. En el caso que algo no funcione, no debes seguir adelante hasta resolverlo.<br />
+					<img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" />
 				</li>
 			</ol>
 		</div>
@@ -91,20 +91,20 @@ <h3 class="box-head">¿Cómo editar un bloque?</h3>
 		</div>
 
 		<div class="forYouToDo">
-            <ol start="3">
-                <li>
-                    <!-- Question 1 -->
-                    <div class="assessment-data" type="multiplechoice" identifier="Cuál o cuáles de las siguientes cadenas representa un posible resultado de ejecutar el código <code>chisme</code>?"
+			<ol start="3">
+				<li>
+					<!-- Question 1 -->
+					<div class="assessment-data" type="multiplechoice" identifier="Cuál o cuáles de las siguientes cadenas representa un posible resultado de ejecutar el código <code>chisme</code>?"
 						hasinlinefeedback="true" maxchoices="4" responseIdentifier="ri1" shuffle="true">
 						<div class="prompt">
-        					<div class="ap-standard">AAP-2.D</div>
+							<div class="ap-standard">AAP-2.D</div>
 							¿Cuál o cuáles de las siguientes cadenas representa un posible resultado de ejecutar el código <code>chisme</code>?<br />
-                            <img class="indent" src="/bjc-r/img/1-introduction/gossip-definition.es.png" alt="chisme: (reportar (unir (quién) ( ) (hace) ( ) (quién)))" title="chisme: (reportar (unir (quién) ( ) (hace) ( ) (quién)))" />
-			                <div class="endnote">
-                                Toma como referencia las siguientes definiciones:<br >
-                                <img class="indent" src="/bjc-r/img/1-introduction/who-block-definition.es.png" alt="quién definición del bloque reportar: reportar (elemento (aleatorio) de lista (Señora) (Sra. C) (mi gato) (Hannah) (Jake)))" title="quién definición del bloque reportar: reportar (elemento (aleatorio) de lista (Señora) (Sra. C) (mi gato) (Hannah) (Jake)))" />
-                                <img class="indent" src="/bjc-r/img/1-introduction/does-what-block-definition.es.png" alt="hace definición del bloque reportar: reportar (elemento (aleatorio) de lista (lista (escuchó) (ama) (escapó) (ayudó) (está en una banda con)))" title="hace definición del bloqe reportar: reportar (elemento (aleatorio) de lista (lista (escuchó) (ama) (escapó) (ayudó) (está en una banda con)))" />
-                            </div>
+							<img class="indent" src="/bjc-r/img/1-introduction/gossip-definition.es.png" alt="chisme: (reportar (unir (quién) ( ) (hace) ( ) (quién)))" title="chisme: (reportar (unir (quién) ( ) (hace) ( ) (quién)))" />
+							<div class="endnote">
+								Toma como referencia las siguientes definiciones:<br >
+								<img class="indent" src="/bjc-r/img/1-introduction/who-block-definition.es.png" alt="quién definición del bloque reportar: reportar (elemento (aleatorio) de lista (Señora) (Sra. C) (mi gato) (Hannah) (Jake)))" title="quién definición del bloque reportar: reportar (elemento (aleatorio) de lista (Señora) (Sra. C) (mi gato) (Hannah) (Jake)))" />
+								<img class="indent" src="/bjc-r/img/1-introduction/does-what-block-definition.es.png" alt="hace definición del bloque reportar: reportar (elemento (aleatorio) de lista (lista (escuchó) (ama) (escapó) (ayudó) (está en una banda con)))" title="hace definición del bloqe reportar: reportar (elemento (aleatorio) de lista (lista (escuchó) (ama) (escapó) (ayudó) (está en una banda con)))" />
+							</div>
 						</div>
 						<div class="choice" identifier="c1">
 							<div class="text">Señora y Sra. C ayudaron.</div>
@@ -136,56 +136,56 @@ <h3 class="box-head">¿Cómo editar un bloque?</h3>
 						</div>
 					</div>
 				</li>
-                <li>
-                    Cambia el disfraz o avatar de los personajes (objetos) a tu gusto.
-                    <div class="narrower">
-                        <h3 class="box-head">Agregar un disfraz</h3>
-                        <ol type="a">
-                            <li>En el área de objetos, selecciona el objeto al que deseas cambiar su difraz.</li>
-                            <li>Selecciona la opción "Disfraces..." que se encuentra en el menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" style="height:1.5em;" alt="Botón del menú Archivo" title="Botón del menú Archivo"/>).</li>
-                            <li>Selecciona uno de los disfraces.</li>
-                            <li>Haz clic en "Importar."</li>
-                            <li>Haz clic en "Cancelar" para cerrar la ventana.</li>
-                        </ol>
-                    </div>
-                    <div class="endnote">Es posible utilizar una fotografía o imagen digital al arrastrar la imagen a la ventana del editor Snap<i>!</i>.</div>
-                </li>
-                <li>
-                    Arregla cualquier inconveniente con el disfraz de los objetos.
-                    <div class="narrower">
-                        <h3 class="box-head">Ajustar los disfraces</h3>
+				<li>
+					Cambia el disfraz o avatar de los personajes (objetos) a tu gusto.
+					<div class="narrower">
+						<h3 class="box-head">Agregar un disfraz</h3>
+						<ol type="a">
+							<li>En el área de objetos, selecciona el objeto al que deseas cambiar su difraz.</li>
+							<li>Selecciona la opción "Disfraces..." que se encuentra en el menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" style="height:1.5em;" alt="Botón del menú Archivo" title="Botón del menú Archivo"/>).</li>
+							<li>Selecciona uno de los disfraces.</li>
+							<li>Haz clic en "Importar."</li>
+							<li>Haz clic en "Cancelar" para cerrar la ventana.</li>
+						</ol>
+					</div>
+					<div class="endnote">Es posible utilizar una fotografía o imagen digital al arrastrar la imagen a la ventana del editor Snap<i>!</i>.</div>
+				</li>
+				<li>
+					Arregla cualquier inconveniente con el disfraz de los objetos.
+					<div class="narrower">
+						<h3 class="box-head">Ajustar los disfraces</h3>
 
-                        <ul>
-                            <li>Para cambiar el tamaño del objeto se utiliza el bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/set-size-empty.es.png" alt="fijar tamaño a ( ) %" title="fijar tamaño a ( ) %" />.</li>
-                            <li>Para cambiar la ubicación del objeto se utiliza el bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/go-to-x-y-full-size.es.png" alt="ir a x: () y: ()" title="ir a x: () y: ()" />.</li>
-                            <li>
-                                Para cambiar la dirección a la que apunta el objeto se utiliza el bloque:<br />
-                                <img class="indent" src="/bjc-r/img/1-introduction/point-in-direction-menu-showing.es.png" alt="apuntar en dirección (270) con el menú abierto con las opciones de derecha, izquierda, arriba, abajo y aleatorio" title="apuntar en dirección (270) con el menú abierto con las opciones de derecha, izquierda, arriba, abajo y aleatorio" /><br>
-                            </li>
-                        </ul>
-                    </div>
-                </li>
+						<ul>
+							<li>Para cambiar el tamaño del objeto se utiliza el bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/set-size-empty.es.png" alt="fijar tamaño a ( ) %" title="fijar tamaño a ( ) %" />.</li>
+							<li>Para cambiar la ubicación del objeto se utiliza el bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/go-to-x-y-full-size.es.png" alt="ir a x: () y: ()" title="ir a x: () y: ()" />.</li>
+							<li>
+								Para cambiar la dirección a la que apunta el objeto se utiliza el bloque:<br />
+								<img class="indent" src="/bjc-r/img/1-introduction/point-in-direction-menu-showing.es.png" alt="apuntar en dirección (270) con el menú abierto con las opciones de derecha, izquierda, arriba, abajo y aleatorio" title="apuntar en dirección (270) con el menú abierto con las opciones de derecha, izquierda, arriba, abajo y aleatorio" /><br>
+							</li>
+						</ul>
+					</div>
+				</li>
 			</ol>
 		</div>
 
-        <div class="ifTime">
+		<div class="ifTime">
 			<ol start="6">
-                <li>
-                    Cambia el fondo del escenario.<br />
-                    <div class="narrowblue">
-                        <h3 class="box-head">Agregar un fondo al escenario</h3>
-                        <div class="endnote">Cambiar el fondo del escenario es similar a las acciones necesarias para cambiar el disfraz de un objeto.</div>
-                        <ol type="a">
-                        <li>En el área de objetos, selecciona el elemento <strong>escenario</strong>.</li>
-                            <li>Procede a seleccionar la opción "Fondos de escenario..." en el menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" style="height:1.5em;" alt="botón de Archivo" title="botón de Archivo"/>) </li>
-                            <li>Selecciona una imagen de fondo disponible.</li>
-                            <li>Haz clic en "Importar."</li>
-                            <li>Haz clic en "Cancelar" para cerrar la ventana.</li>
-                        </ol>
-                    </div>
-                </li>
-            </ol>
-        </div>
+				<li>
+					Cambia el fondo del escenario.<br />
+					<div class="narrowblue">
+						<h3 class="box-head">Agregar un fondo al escenario</h3>
+						<div class="endnote">Cambiar el fondo del escenario es similar a las acciones necesarias para cambiar el disfraz de un objeto.</div>
+						<ol type="a">
+						<li>En el área de objetos, selecciona el elemento <strong>escenario</strong>.</li>
+							<li>Procede a seleccionar la opción "Fondos de escenario..." en el menú Archivo (<img src="/bjc-r/img/1-introduction/file_button.png" style="height:1.5em;" alt="botón de Archivo" title="botón de Archivo"/>) </li>
+							<li>Selecciona una imagen de fondo disponible.</li>
+							<li>Haz clic en "Importar."</li>
+							<li>Haz clic en "Cancelar" para cerrar la ventana.</li>
+						</ol>
+					</div>
+				</li>
+			</ol>
+		</div>
 
 
 	</body>
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
index 238faac81..5e7931e7d 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
@@ -57,7 +57,7 @@ <h3 class="box-head">How to Edit a Block</h3>
                 <div class="ap-standard">AAP-1.C.1 first sentence</div>
                 <li>
 					<div class="sidenoteBig">
-						<a href="#ordered" data-toggle="collapse" title='What does "ordered" mean?'>What does "ordered" mean?</a>
+						<a href="#ordered" data-toggle="collapse" title="What does 'ordered' mean?">What does "ordered" mean?</a>
 						<div id="ordered" class="collapse">
 							It doesn't mean that the items have to appear in alphabetical
 							or numeric order.  It just means that

From efe30abcd4fd176315f3508c86d81d448c11972a Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 19:57:54 -0400
Subject: [PATCH 08/29] a11y - 1.3.3 HTML cleanup

---
 .../3-drawing/3-blocks-with-inputs.es.html            | 11 ++++++-----
 .../3-drawing/3-blocks-with-inputs.html               |  3 ++-
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
index e51bcbac7..9dd056d78 100644
--- a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
+++ b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
@@ -75,7 +75,7 @@ <h3 class="box-head">Programar un bloque con campo de entrada</h3>
                                 <div class="endnote">
                                     <a href="#hint-setup-code" data-toggle="collapse" title="Haz clic para ver una toma de pantalla del ejemplo utilizando el campo de entrada en el editor de bloques.">Haz clic para ver una toma de pantalla del ejemplo utilizando el campo de entrada en el editor de bloques.</a>
                                     <div id="hint-setup-code" class="collapse">
-                                        <img class="indent" src="/bjc-r/img/1-introduction/Blockswith-Inputs_img/blockwith21.es.png" height= 250px alt="molinete, ramas:(número de ramas) {repetir(21){mover(100) pasos; mover(-70) pasos; girar(360/21) grados}}" title="molinete, ramas:(número de ramas) {repetir(21){mover(100) pasos; mover(-70) pasos; girar(360/21) grados}}" />
+                                        <img class="indent" src="/bjc-r/img/1-introduction/Blockswith-Inputs_img/blockwith21.es.png" height="250px" alt="molinete, ramas:(número de ramas) {repetir(21){mover(100) pasos; mover(-70) pasos; girar(360/21) grados}}" title="molinete, ramas:(número de ramas) {repetir(21){mover(100) pasos; mover(-70) pasos; girar(360/21) grados}}" />
                                         <img class="indent" src="/bjc-r/img/1-introduction/Blockswith-Inputs_img/numberofbranches.es.png" alt="molinete, ramas:(número de ramas){repetir(número de ramas){mover(100) pasos; esperar(0.1) segs; mover(-70) pasos; esperar(0.1) segs; girar(360/número de ramas) grados}}" title="molinete, ramas:(número de ramas){repetir(número de ramas){mover(100) pasos; esperar(0.1) segs; mover(-70) pasos; esperar(0.1) segs; girar(360/número de ramas) grados}}" />
                                     </div>
                                 </div>
@@ -85,7 +85,7 @@ <h3 class="box-head">Programar un bloque con campo de entrada</h3>
                     <div class="endnote">
                         <a href="#hint-target" data-toggle="collapse" title="Haz clic para reproducir un video con el proceso completo para construir el bloque monillo.">Haz clic para reproducir un video con el proceso completo para construir el bloque <code>molinete</code>.</a>
                         <div id="hint-target" class="collapse">
-                            <img class="indent" data-gifffer="/bjc-r/img/1-introduction/Blockswith-Inputs_img/blocks-with-inputs.es.gif" height= 600 alt="Animación con resumen de los pasos para crear un bloque con campo de entrada." title="Animación con resumen de los pasos para crear un bloque con campo de entrada."/>
+                            <img class="indent" data-gifffer="/bjc-r/img/1-introduction/Blockswith-Inputs_img/blocks-with-inputs.es.gif" alt="Animación con resumen de los pasos para crear un bloque con campo de entrada." title="Animación con resumen de los pasos para crear un bloque con campo de entrada."/>
                         </div>
                     </div>
                 </li>
@@ -94,7 +94,8 @@ <h3 class="box-head">Programar un bloque con campo de entrada</h3>
 
         <div class="takeNote">
             <div class="ap-standard">DAT-1.A.1</div>
-            <p><strong>¿Qué tipo de datos puede ser utilizado como campo de entrada?</strong> Todos los tipos de datos. En este ejemplo, el campo de entrada espera un número, pero <em>cualquier</em> tipo de valor puede ser usado en el campo de entrada. Por ejemplo, se ha visto en ejercicios anteriores el bloque <code>lista</code>, es posible recordar que recibía cadenas de texto. En Snap<em>!</em>, cualquier tipo de dato puede ser usado como entrada, puede ser reportado por un bloque, o puede ser incluido como elemento de una lista.</p>
+            <h3 class="box-head">¿Qué tipo de datos puede ser utilizado como campo de entrada?</h3>
+			<p>Todos los tipos de datos. En este ejemplo, el campo de entrada espera un número, pero <em>cualquier</em> tipo de valor puede ser usado en el campo de entrada. Por ejemplo, se ha visto en ejercicios anteriores el bloque <code>lista</code>, es posible recordar que recibía cadenas de texto. En Snap<em>!</em>, cualquier tipo de dato puede ser usado como entrada, puede ser reportado por un bloque, o puede ser incluido como elemento de una lista.</p>
         </div>
 
 		<div class="vocabFullWidth">: ¿Qué es una entrada? <strong>Parámetro</strong> vs. <strong>Argumento</strong>
@@ -103,11 +104,11 @@ <h3 class="box-head">Programar un bloque con campo de entrada</h3>
                 <ul>
                     <li>
                         Un <strong>parámetro</strong> (<em>parameter</em>) (o <em>parámetro formal</em>) es el <em>nombre,</em> del campo de entrada, por ejemplo: <var>número de ramas</var>. El nombre del campo de entrada es grabado en la definición del bloque. Nunca cambia.<br />
-                        <img class="indent" src="/bjc-r/img/1-introduction/example-parameter.es.png" height=250px alt="molinete, ramas:(número de ramas) bloque de definición con la etiqueta Parámetro apuntando al número de ramas" title="molinete, ramas:(número de ramas) bloque de definición con la etiqueta Parámetro apuntando al número de ramas" />
+                        <img class="indent" src="/bjc-r/img/1-introduction/example-parameter.es.png" height="250px" alt="molinete, ramas:(número de ramas) bloque de definición con la etiqueta Parámetro apuntando al número de ramas" title="molinete, ramas:(número de ramas) bloque de definición con la etiqueta Parámetro apuntando al número de ramas" />
                     </li>
                     <li>
                         Un <strong>argumento</strong> (<em>argument</em>) (o <em>argumento actual</em>) es el <em>valor</em> ingresado en el campo de entrada, por ejemplo el número 6 para el ejemplo de un molinete hexagonal. El valor de entrada es ingresado cada vez que el bloque es ejecutado; por lo que puede ser diferente.<br />
-                        <img class="indent" src="/bjc-r/img/1-introduction/example-argument.es.png" height=80px alt="molinete, ramas: (6) con la etiqueta Argumento apuntando a la entrada 6" title="molinete, ramas: (6) con la etiqueta Argumento apuntando a la entrada 6" />
+                        <img class="indent" src="/bjc-r/img/1-introduction/example-argument.es.png" height="80px" alt="molinete, ramas: (6) con la etiqueta Argumento apuntando a la entrada 6" title="molinete, ramas: (6) con la etiqueta Argumento apuntando a la entrada 6" />
                     </li>
                 </ul>
                 Usamos la palabra "entrada" tanto para parámetros (nombre del campo de entrada) y para los argumentos (valor del campo de entrada).
diff --git a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
index 1e33f1973..43b9e62fe 100644
--- a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
+++ b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
@@ -93,7 +93,8 @@ <h3 class="box-head">Making a Block with an Input</h3>
 
         <div class="takeNote">
             <div class="ap-standard">DAT-1.A.1</div>
-            <p><strong>What kind of data can be an input?</strong> All kinds of data. In this example, the input is supposed to be a number, but <em>any</em> kind of value can be used as an input. For instance, you've seen the <code>list</code> block called with text as inputs. In Snap<em>!</em>, any kind of data can be used as an input, can be reported by a block, or can be put in a list.</p>
+            <h3 class="box-head">What kind of data can be an input?</h3>
+			<p>All kinds of data. In this example, the input is supposed to be a number, but <em>any</em> kind of value can be used as an input. For instance, you've seen the <code>list</code> block called with text as inputs. In Snap<em>!</em>, any kind of data can be used as an input, can be reported by a block, or can be put in a list.</p>
         </div>
 
 		<div class="vocabFullWidth">: What's an input? <strong>Parameter</strong> vs. <strong>Argument</strong>

From 3202a5eba800d810a9aeb2e2554af0b9e81aad34 Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 19:58:20 -0400
Subject: [PATCH 09/29] a11y - 1.5.1 changing two H3s to H4s

---
 .../5-follow-the-leader/1-following-sprites.es.html           | 4 ++--
 .../5-follow-the-leader/1-following-sprites.html              | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
index 38cef3288..13d500c34 100644
--- a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
+++ b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
@@ -20,7 +20,7 @@ <h3>Seguir al puntero de tu ratón</h3>
 				<li>
 					<div class="newProject"><span class="text">"U1L5-SeguirObjeto"</span><img src="/bjc-r/img/icons/new-project-called.es.png" alt="Crea un proyecto nuevo llamado U1L5-SeguirObjeto" /></div>
 					<div class="narrower">
-						<h3 class="box-head">Creación de un nuevo proyecto Snap<em>!</em></h3>
+						<h4 class="box-head">Creación de un nuevo proyecto Snap<em>!</em></h4>
 						<ol style="list-style-type:lower-alpha">
 							<li>
 								Abre <a href="https://snap.berkeley.edu/run" title="Snap!" target="_blank">Snap<em>!</em></a>.
@@ -69,7 +69,7 @@ <h3>Programar un segundo personaje</h3>
 				<li>
 					Para que los nombres de tus personajes sean significativos, cambia el nombre de <strong>Objeto</strong> a <strong>Líder</strong> y cambia <strong>Objeto(2)</strong> a <strong>Seguidor</strong>.
 					<div class="narrower">
-						<h3 class="box-head">Cambiar el nombre de un personaje</h3>
+						<h4 class="box-head">Cambiar el nombre de un personaje</h4>
 						<p>
 							Busca el nombre en un cuadro gris sobre el área de secuencias de comandos. Haz clic dentro del nombre y podrás editarlo.<br />
 							<img class="indent" src="/bjc-r/img/1-introduction/change-sprite-name.es.jpg" alt="imagen del campo de nombre de un personaje sobre el area de secuencias de comandos y debajo del nombre del proyecto" title="imagen del campo de nombre de un personaje sobre el area de secuencias de comandos y debajo del nombre del proyecto" />
diff --git a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
index ea3f38e79..a9c8d955e 100644
--- a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
+++ b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
@@ -20,7 +20,7 @@ <h3>Following the Mouse</h3>
 				<li>
 					<div class="newProject"><span class="text">"U1L5-SpriteChase"</span><img src="/bjc-r/img/icons/new-project-called.png" alt="Create a new project called U1L5-SpriteChase" title="Create a new project called U1L5-SpriteChase" /></div>
 					<div class="narrower">
-						<h3 class="box-head">Creating a New Snap<em>!</em> Project</h3>
+						<h4 class="box-head">Creating a New Snap<em>!</em> Project</h4>
 						<ol style="list-style-type:lower-alpha">
 							<li>
 								Open <a href="https://snap.berkeley.edu/run" title="Snap!" target="_blank">Snap<em>!</em></a>.
@@ -70,7 +70,7 @@ <h3>Programming a Second Sprite</h3>
 				<li>
 					To make your sprite names meaningful, change the name of <strong>Sprite</strong> to <strong>Leader</strong>, and change <strong>Sprite(2)</strong> to <strong>Follower</strong>.
 					<div class="narrower">
-						<h3 class="box-head">Changing the Name of a Sprite</h3>
+						<h4 class="box-head">Changing the Name of a Sprite</h4>
 						<p>
 							Look for the name in a gray box above the scripting area.  Click inside the name and you'll be able to edit it.<br />
 							<img class="indent" src="/bjc-r/img/1-introduction/change-sprite-name.jpg" alt="image of sprite name input field above the scripting area and below the project name" title="image of sprite name input field above the scripting area and below the project name" />

From cab32e032168f12034a372b287d993a12bbe350d Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 20:06:38 -0400
Subject: [PATCH 10/29] a11y - 2.2.2 changing a DIV to an H3 (es was ok)

---
 .../2-complexity/2-data-structures-art/2-quizzes.html           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html
index 225c14230..c21412b5e 100644
--- a/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html
+++ b/cur/programming/2-complexity/2-data-structures-art/2-quizzes.html
@@ -104,7 +104,7 @@ <h2>Planning a Quiz App</h2>
                     <div class="ap-standard">AAP-1.D</div>
                     Build the custom <code>quiz item</code> abstract data type (both the constructor and the two selectors).
                     <div class="narrower">
-                        <div class="box-head">Specifying an Input Type</div>
+                        <h3 class="box-head">Specifying an Input Type</h3>
                         <p>Your selectors expect a quiz item, i.e., a list, as input.  You can make your blocks <em>show</em> what type of data they expect. It's not necessary in Snap<em>!</em> but, like assigning a color to a block, it can be a helpful reminder of what the block does and what type of input it expects. You've already seen input slots of several shapes, indicating different expected data types. </p>
                         <p>
                             In the Block Editor while creating a selector, click on a plus sign to enter an input name.  Then...

From 19943297c29625064a9ec213a6534026310febdb Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 20:14:15 -0400
Subject: [PATCH 11/29] a11y - 2.3.2 changing an H3 to H4 & moving comment to
 TG

(also deleted Spanish comment)
---
 .../2-combining-predicates.es.html            | 94 +------------------
 .../3-predicates/2-combining-predicates.html  | 94 +------------------
 .../U2/lab-pages/3-predicates-game.html       | 94 +++++++++++++++++++
 3 files changed, 96 insertions(+), 186 deletions(-)

diff --git a/cur/programming/2-complexity/3-predicates/2-combining-predicates.es.html b/cur/programming/2-complexity/3-predicates/2-combining-predicates.es.html
index f7ee45f02..94db8c193 100644
--- a/cur/programming/2-complexity/3-predicates/2-combining-predicates.es.html
+++ b/cur/programming/2-complexity/3-predicates/2-combining-predicates.es.html
@@ -66,7 +66,7 @@ <h3>Funciones booleanas</h3>
                     <img class="indent" src="/bjc-r/img/2-complexity/number-between-two-others(with-result-false).es.png" alt="¿El número (3.8) está entre (3.9) y (4.7) ? reporta falso" title="¿El número (3.8) está entre (3.9) y (4.7) ? reporta falso">
                     <img class="indent" src="/bjc-r/img/2-complexity/word-between-two-others(with-result-true).es.png" alt="¿ (manzana) está entre (mango) y (martes) ? reporta verdadero" title="¿ (manzana) está entre (mango) y (martes) ? reporta verdadero">
                     <div class="narrower">
-                        <h3 class="box-head">Hacer un predicado</h3>
+                        <h4 class="box-head">Hacer un predicado</h4>
                         <ul>
                             <li>
                                 Elige el <em>predicado</em> con la forma hexagonal.<br />
@@ -162,98 +162,6 @@ <h3 class="box-head">Hacer un predicado</h3>
         </div>
 
 		<div class="takeItFurther">
-            <div class="todo">
-                <div class="comment">Brian, OK, I went a little over the top here, but some teachers might like to dig in too. Please review this table carefully; it would be easy to get something wrong. --MF, 1/14/20</div>
-                TG (para la clave de respuestas): i) La función <code>y</code> se puede representar como VFFF; ii-v) Las respuestas variarán para las partes ii y iii. La tabla siguiente muestra un listado de los 16 (parte iv) operadores booleanos de dos entradas posibles y su utilidad. El objetivo es que los estudiantes <em>reflexionen acerca de la utilidad</em>&mdash; no que categoricen correctamente cada una de las funciones ni que aprendan la lógica de cada una de ellas. A menos que tengan conocimientos de lógica o ciencias de la computación, incluso (como profesor con la clave de respuestas) es posible que encuentres que alguna de estas requiere mayor reflexión.
-                <table class="bordered standard" summary="tabla con los 16 operadores booleanos de dos entradas y explicaciones acerca de su utilidad">
-                    <tr>
-                        <th scope="col">&nbsp;</th>
-                        <th scope="col">¿Útil?</th>
-                        <th scope="col">¿Por qué?</th>
-                    </tr>
-                    <tr>
-                        <th scope="col">VVVV</th>
-                        <td>no</td>
-                        <td>siempre reporta <code>verdadero</code></td>
-                    </tr>
-                    <tr>
-                        <th scope="col">VVVF</th>
-                        <td>si</td>
-                        <td>equivalente a <código>o</code></td>
-                    </tr>
-                    <tr>
-                        <th scope="col">VVFV</th>
-                        <td>si</td>
-                        <td>equivalente a <a href="https://en.wikipedia.org/wiki/Converse_implication" title="converse implication" target="_blank">implicación inversa</a> (falso solo cuando la primera entrada es falsa pero la segunda entrada es verdadera; que la segunda entrada sea verdadera implica que la primera entrada debe ser verdadera)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">VVFF</th>
-                        <td>no</td>
-                        <td>reporta el valor de la primera entrada independientemente de la segunda entrada, entonces podrías solo usar la primera entrada como predicado en lugar de construir esta función de predicados</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">VFVV</th>
-                        <td>si</td>
-                        <td>equivalente a <a href="https://en.wikipedia.org/wiki/Material_conditional" title="implicación" target="_blank">implicación</a> (falso solo cuando la primera entrada es verdadera pero la segunda entrada es falsa; si la primera entrada es verdadera implica que la segunda entrada debe tambien ser verdad)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">VFVF</th>
-                        <td>no</td>
-                        <td>reporta el valor de la segunda entrada independientemente de la primera entrada, entonces podrías solo usar la segunda entrada como predicado en lugar de construir esta función de predicados</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">VFFV</th>
-                        <td>si</td>
-                        <td>comprueba si dos entradas son iguales (equivalente a  <code>=</code> y a <a href="https://en.wikipedia.org/wiki/XNOR_gate" title="XNOR" target="_blank">XNOR</a>, NO O exclusiva)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">VFFF</th>
-                        <td>si</td>
-                        <td>equivalente a <code>y</code></td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FVVV</th>
-                        <td>si</td>
-                        <td>equivalente a <a href="https://en.wikipedia.org/wiki/NAND_gate" title="NAND" target="_blank">NAND</a> (eso es, <code>no (y)</code>)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FVVF</th>
-                        <td>si</td>
-                        <td>comprueba si dos entradas son diferentes (equivalente a <code>no(=)</code> y <a href="https://en.wikipedia.org/wiki/XOR_gate" title="XOR" target="_blank">XOR</a>, o exclusiva)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FVFV</th>
-                        <td>no</td>
-                        <td>reporta el valor del opuesto de la segunda entrada independientemente de la primera entrada, entonces podrías solo usar el opuesto de la segunda entrada como predicado en lugar de construir esta función de predicados</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FVFF</th>
-                        <td>si</td>
-                        <td>equivalente a <a href="https://en.wikipedia.org/wiki/Material_nonimplication" title="nonimplication" target="_blank">no implicación</a> (verdadero solo cuando la primera entrada es verdadera pero la segunda entrada es falsa; si la primera entrada es verdadera esto implica que la segunda entrada es falsa)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FFVV</th>
-                        <td>no</td>
-                        <td>reporta el valor del opuesto de la primera entrada independientemente de la segunda entrada, entonces podrías solo usar el opuesto de la primera entrada como predicado en lugar de construir esta función de predicados</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FFVF</th>
-                        <td>si</td>
-                        <td>equivalente a <a href="https://en.wikipedia.org/wiki/Converse_nonimplication" title="no implicación opuesta" target="_blank">no implicación opuesta</a> (verdadero solo cuando la primera entrada es falsa pero la segunda entrada es verdadera; la segunda entrada siendo verdadera implica que la primera entrada debe ser falsa)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FFFV</th>
-                        <td>si</td>
-                        <td>equivalente a <a href="https://en.wikipedia.org/wiki/NOR_gate" title="NOR" target="_blank">NOR</a> (eso es, <code>no(o)</code>)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FFFF</th>
-                        <td>no</td>
-                        <td>siempre reporta <code>falso</code></td>
-                    </tr>
-                </table>
-                vi) Hay 256 operadores booleanos de tres entradas porque hay ocho combinaciones de entradas para un operador booleano de tres entradas y cada una de esas combinaciones pueden reportar uno de dos valores (V or F): <span class="katex">2^8=256</span>. (Para comparación, hay 16 operadores booleanos de dos entradas porque hay cuatro combinaciones de entradas para un operador de dos entradas y cada uno puede reportar uno de dos valores (V or F): <span class="katex">2^4=16</span>.)
-            </div>
             <ol type="A">
                 <li>
                     Debido a que solo hay dos valores booleanos (<code>verdadero</code> y <code>falso</code>), solo hay cuatro combinaciones de entradas para un operador booleano de dos entradas. Aquí están las cuatro combinaciones que se muestran con el operador<code>o</code>:<br />
diff --git a/cur/programming/2-complexity/3-predicates/2-combining-predicates.html b/cur/programming/2-complexity/3-predicates/2-combining-predicates.html
index ddc9645e3..2910dfcf8 100644
--- a/cur/programming/2-complexity/3-predicates/2-combining-predicates.html
+++ b/cur/programming/2-complexity/3-predicates/2-combining-predicates.html
@@ -69,7 +69,7 @@ <h3>Boolean Functions</h3>
                     <img class="indent" src="/bjc-r/img/2-complexity/number-between-two-others(with-result-false).png" alt="is (3.8) between (3.9) and (4.7) ? reporting false" title="is (3.8) between (3.9) and (4.7) ? reporting false">
                     <img class="indent" src="/bjc-r/img/2-complexity/word-between-two-others(with-result-true).png" alt="is (apples) between (alphabet) and (azure) ? reporting true" title="is (apples) between (alphabet) and (azure) ? reporting true">
                     <div class="narrower">
-                        <h3 class="box-head">Making a Predicate </h3>
+                        <h4 class="box-head">Making a Predicate </h4>
                         <ul>
                             <li>
                             	Choose the hexagonal <em>predicate</em> shape.<br />
@@ -165,98 +165,6 @@ <h3 class="box-head">Making a Predicate </h3>
         </div>
 
 		<div class="takeItFurther">
-            <div class="todo">
-                <div class="comment">Brian, OK, I went a little over the top here, but some teachers might like to dig in too. Please review this table carefully; it would be easy to get something wrong. --MF, 1/14/20</div>
-                TG (for answer key): i) The <code>and</code> function can be represented as TFFF; ii-v) Answers will vary for parts ii and iii. The following table lists the 16 (part iv) possible two-input Boolean operators and their usefulness. The goal is for students to <em>think about usefulness</em>&mdash;not for them to accurately categorize each of the functions or even to learn the logic of each one. Unless you have a background in logic or computer science, even you (as teacher with the answer key) are likely to find some of these take a bit of thinking to wrap your mind around.
-                <table class="bordered standard" summary="table showing the 16 two-input Boolean operators and remarking on their usefulness">
-                    <tr>
-                        <th scope="col">&nbsp;</th>
-                        <th scope="col">Useful?</th>
-                        <th scope="col">Why?</th>
-                    </tr>
-                    <tr>
-                        <th scope="col">TTTT</th>
-                        <td>no</td>
-                        <td>always reports <code>true</code></td>
-                    </tr>
-                    <tr>
-                        <th scope="col">TTTF</th>
-                        <td>yes</td>
-                        <td>equivalent to <code>or</code></td>
-                    </tr>
-                    <tr>
-                        <th scope="col">TTFT</th>
-                        <td>yes</td>
-                        <td>equivalent to <a href="https://en.wikipedia.org/wiki/Converse_implication" title="converse implication" target="_blank">converse implication</a> (false only when the first input is false but the second input is true; the second input being true implies the first input must be true)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">TTFF</th>
-                        <td>no</td>
-                        <td>reports the value of the first input regardless of the second input, so you could just use the first input as the predicate instead of building this predicate function</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">TFTT</th>
-                        <td>yes</td>
-                        <td>equivalent to <a href="https://en.wikipedia.org/wiki/Material_conditional" title="implication" target="_blank">implication</a> (false only when the first input is true but the second input is false; the first input being true implies the second input must be true)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">TFTF</th>
-                        <td>no</td>
-                        <td>reports the value of the second input regardless of the first input, so you could just use the second input as the predicate instead of building this predicate function</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">TFFT</th>
-                        <td>yes</td>
-                        <td>checks whether two inputs are the same (equivalent to <code>=</code> and to <a href="https://en.wikipedia.org/wiki/XNOR_gate" title="XNOR" target="_blank">XNOR</a>, exclusive NOT OR)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">TFFF</th>
-                        <td>yes</td>
-                        <td>equivalent to <code>and</code></td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FTTT</th>
-                        <td>yes</td>
-                        <td>equivalent to <a href="https://en.wikipedia.org/wiki/NAND_gate" title="NAND" target="_blank">NAND</a> (that is, <code>not (and)</code>)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FTTF</th>
-                        <td>yes</td>
-                        <td>checks whether two inputs are the different (equivalent to <code>not(=)</code> and to <a href="https://en.wikipedia.org/wiki/XOR_gate" title="XOR" target="_blank">XOR</a>, exclusive OR)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FTFT</th>
-                        <td>no</td>
-                        <td>reports the value of the opposite of the second input regardless of the first input, so you could just use the opposite of the second input as the predicate instead of building this predicate function</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FTFF</th>
-                        <td>yes</td>
-                        <td>equivalent to <a href="https://en.wikipedia.org/wiki/Material_nonimplication" title="nonimplication" target="_blank">nonimplication</a> (true only when the first input is true but the second input is false; the first input being true implies the second input must be false)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FFTT</th>
-                        <td>no</td>
-                        <td>reports the value of the opposite of the first input regardless of the second input, so you could just use the opposite of the first input as the predicate instead of building this predicate function</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FFTF</th>
-                        <td>yes</td>
-                        <td>equivalent to <a href="https://en.wikipedia.org/wiki/Converse_nonimplication" title="converse nonimplication" target="_blank">converse nonimplication</a> (true only when the first input is false but the second input is true; the second input being true implies the first input must be false)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FFFT</th>
-                        <td>yes</td>
-                        <td>equivalent to <a href="https://en.wikipedia.org/wiki/NOR_gate" title="NOR" target="_blank">NOR</a> (that is, <code>not(or)</code>)</td>
-                    </tr>
-                    <tr>
-                        <th scope="col">FFFF</th>
-                        <td>no</td>
-                        <td>always reports <code>false</code></td>
-                    </tr>
-                </table>
-                vi) There are 256 three-input Boolean operators because there are eight combinations of inputs for a three-input Boolean operator and each of those combinations could report one of two values (T or F): <span class="katex">2^8=256</span>. (For comparison, there are 16 two-input Boolean operators because there are four combinations of inputs for a two-input operator and each can report one of two values (T or F): <span class="katex">2^4=16</span>.)
-            </div>
             <ol type="A">
                 <li>
                     Because there are only two Boolean values (<code>true</code> and <code>false</code>), there are only four combinations of inputs for a two-input Boolean operator. Here are the four combinations shown with the <code>or</code> operator:<br />
diff --git a/cur/teaching-guide/U2/lab-pages/3-predicates-game.html b/cur/teaching-guide/U2/lab-pages/3-predicates-game.html
index 1c2670c5e..e5b137f04 100644
--- a/cur/teaching-guide/U2/lab-pages/3-predicates-game.html
+++ b/cur/teaching-guide/U2/lab-pages/3-predicates-game.html
@@ -77,6 +77,100 @@ <h3>Lab Pages</h3>
                             </ul>
 						</li>
 					</ul>
+					
+					<div class="todo">
+						<div class="comment">Brian, OK, I went a little over the top here, but some teachers might like to dig in too. Please review this table carefully; it would be easy to get something wrong. --MF, 1/14/20</div>
+						TG (for answer key): i) The <code>and</code> function can be represented as TFFF; ii-v) Answers will vary for parts ii and iii. The following table lists the 16 (part iv) possible two-input Boolean operators and their usefulness. The goal is for students to <em>think about usefulness</em>&mdash;not for them to accurately categorize each of the functions or even to learn the logic of each one. Unless you have a background in logic or computer science, even you (as teacher with the answer key) are likely to find some of these take a bit of thinking to wrap your mind around.
+						<table class="bordered standard" summary="table showing the 16 two-input Boolean operators and remarking on their usefulness">
+							<tr>
+								<th scope="col">&nbsp;</th>
+								<th scope="col">Useful?</th>
+								<th scope="col">Why?</th>
+							</tr>
+							<tr>
+								<th scope="col">TTTT</th>
+								<td>no</td>
+								<td>always reports <code>true</code></td>
+							</tr>
+							<tr>
+								<th scope="col">TTTF</th>
+								<td>yes</td>
+								<td>equivalent to <code>or</code></td>
+							</tr>
+							<tr>
+								<th scope="col">TTFT</th>
+								<td>yes</td>
+								<td>equivalent to <a href="https://en.wikipedia.org/wiki/Converse_implication" title="converse implication" target="_blank">converse implication</a> (false only when the first input is false but the second input is true; the second input being true implies the first input must be true)</td>
+							</tr>
+							<tr>
+								<th scope="col">TTFF</th>
+								<td>no</td>
+								<td>reports the value of the first input regardless of the second input, so you could just use the first input as the predicate instead of building this predicate function</td>
+							</tr>
+							<tr>
+								<th scope="col">TFTT</th>
+								<td>yes</td>
+								<td>equivalent to <a href="https://en.wikipedia.org/wiki/Material_conditional" title="implication" target="_blank">implication</a> (false only when the first input is true but the second input is false; the first input being true implies the second input must be true)</td>
+							</tr>
+							<tr>
+								<th scope="col">TFTF</th>
+								<td>no</td>
+								<td>reports the value of the second input regardless of the first input, so you could just use the second input as the predicate instead of building this predicate function</td>
+							</tr>
+							<tr>
+								<th scope="col">TFFT</th>
+								<td>yes</td>
+								<td>checks whether two inputs are the same (equivalent to <code>=</code> and to <a href="https://en.wikipedia.org/wiki/XNOR_gate" title="XNOR" target="_blank">XNOR</a>, exclusive NOT OR)</td>
+							</tr>
+							<tr>
+								<th scope="col">TFFF</th>
+								<td>yes</td>
+								<td>equivalent to <code>and</code></td>
+							</tr>
+							<tr>
+								<th scope="col">FTTT</th>
+								<td>yes</td>
+								<td>equivalent to <a href="https://en.wikipedia.org/wiki/NAND_gate" title="NAND" target="_blank">NAND</a> (that is, <code>not (and)</code>)</td>
+							</tr>
+							<tr>
+								<th scope="col">FTTF</th>
+								<td>yes</td>
+								<td>checks whether two inputs are the different (equivalent to <code>not(=)</code> and to <a href="https://en.wikipedia.org/wiki/XOR_gate" title="XOR" target="_blank">XOR</a>, exclusive OR)</td>
+							</tr>
+							<tr>
+								<th scope="col">FTFT</th>
+								<td>no</td>
+								<td>reports the value of the opposite of the second input regardless of the first input, so you could just use the opposite of the second input as the predicate instead of building this predicate function</td>
+							</tr>
+							<tr>
+								<th scope="col">FTFF</th>
+								<td>yes</td>
+								<td>equivalent to <a href="https://en.wikipedia.org/wiki/Material_nonimplication" title="nonimplication" target="_blank">nonimplication</a> (true only when the first input is true but the second input is false; the first input being true implies the second input must be false)</td>
+							</tr>
+							<tr>
+								<th scope="col">FFTT</th>
+								<td>no</td>
+								<td>reports the value of the opposite of the first input regardless of the second input, so you could just use the opposite of the first input as the predicate instead of building this predicate function</td>
+							</tr>
+							<tr>
+								<th scope="col">FFTF</th>
+								<td>yes</td>
+								<td>equivalent to <a href="https://en.wikipedia.org/wiki/Converse_nonimplication" title="converse nonimplication" target="_blank">converse nonimplication</a> (true only when the first input is false but the second input is true; the second input being true implies the first input must be false)</td>
+							</tr>
+							<tr>
+								<th scope="col">FFFT</th>
+								<td>yes</td>
+								<td>equivalent to <a href="https://en.wikipedia.org/wiki/NOR_gate" title="NOR" target="_blank">NOR</a> (that is, <code>not(or)</code>)</td>
+							</tr>
+							<tr>
+								<th scope="col">FFFF</th>
+								<td>no</td>
+								<td>always reports <code>false</code></td>
+							</tr>
+						</table>
+						vi) There are 256 three-input Boolean operators because there are eight combinations of inputs for a three-input Boolean operator and each of those combinations could report one of two values (T or F): <span class="katex">2^8=256</span>. (For comparison, there are 16 two-input Boolean operators because there are four combinations of inputs for a two-input operator and each can report one of two values (T or F): <span class="katex">2^4=16</span>.)
+					</div>
+					
 				</li>
                 <li>
                     <strong>Page 3: Combining Conditionals.</strong>

From 138dc8e828bb47edfa30da9083d32d16e754fa0e Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 20:27:15 -0400
Subject: [PATCH 12/29] a11y - 3.2.1 changing two H3s to H4s

---
 .../3-lists/2-contact-list/1-build-the-list.es.html           | 4 ++--
 cur/programming/3-lists/2-contact-list/1-build-the-list.html  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/cur/programming/3-lists/2-contact-list/1-build-the-list.es.html b/cur/programming/3-lists/2-contact-list/1-build-the-list.es.html
index 7fc2803f3..0a3946bd6 100644
--- a/cur/programming/3-lists/2-contact-list/1-build-the-list.es.html
+++ b/cur/programming/3-lists/2-contact-list/1-build-the-list.es.html
@@ -27,7 +27,7 @@ <h3>Configuración de la lista de contactos</h3>
             </ol>
 		</div>
         <div class="takeNote">
-            <h3 class="box-head">¿Por qué mundial?</h3>
+            <h4 class="box-head">¿Por qué mundial?</h4>
             <strong>Varias secuencias de comandos</strong> en todo el proyecto <strong>utilizarán esta variable</strong>, por lo que no debe adjuntarse a una sola secuencia de comandos como una variable de secuencia de comandos local.
         </div>
 
@@ -41,7 +41,7 @@ <h3>Crear el tipo de dato abstracto (ADT)</h3>
             <div><span>Gamal:</span> Sí. En este proyecto, necesitaremos un constructor <code>contacto</code> y luego selectores para acceder al <code>nombre</code>, <code>dirección</code> y <code>número de teléfono</code> para cualquier contacto dado.</div>
 		</div>
 		<div class="takeNote">
-            <h3 class="box-head">Preservar la privacidad</h3>
+            <h4 class="box-head">Preservar la privacidad</h4>
             <p>Los proyectos de Snap<em>!</em> no son seguros. No utilices tu información personal ni la de tus compañeros.</p>
         </div>
         <div class="forYouToDo">
diff --git a/cur/programming/3-lists/2-contact-list/1-build-the-list.html b/cur/programming/3-lists/2-contact-list/1-build-the-list.html
index 700d4d1cb..6bcc3af3b 100644
--- a/cur/programming/3-lists/2-contact-list/1-build-the-list.html
+++ b/cur/programming/3-lists/2-contact-list/1-build-the-list.html
@@ -28,7 +28,7 @@ <h3>Setting Up the Contact List</h3>
 		</div>
 
 		<div class="takeNote">
-            <h3 class="box-head">Why a global variable?</h3>
+            <h4 class="box-head">Why a global variable?</h4>
             <em>Multiple scripts</em> across the project <em>will use this variable</em>, so it shouldn't be attached to just one script like a local, script variable.
         </div>
 
@@ -41,7 +41,7 @@ <h3>Creating the ADT</h3>
             <div><span>Gamal:</span> Yeah. In this project, we'll need a <code>contact</code> constructor and then selectors to access the <code>name</code>, <code>address</code>, and <code>phone number</code> for any given contact.</div>
 		</div>
 		<div class="takeNote">
-            <h3 class="box-head">Preserve Privacy</h3>
+            <h4 class="box-head">Preserve Privacy</h4>
             <p>Snap<em>!</em> projects are not secure. Do not use your or your classmates' personal information.</p>
         </div>
         <div class="forYouToDo">

From b569b76c6df72251fa99d86ea19080102ac6a755 Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 20:33:29 -0400
Subject: [PATCH 13/29] a11y - 3.4.3 changing an H3s to <strong>

---
 cur/programming/3-lists/4-robots-ai/3-implications.es.html | 2 +-
 cur/programming/3-lists/4-robots-ai/3-implications.html    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/cur/programming/3-lists/4-robots-ai/3-implications.es.html b/cur/programming/3-lists/4-robots-ai/3-implications.es.html
index 98bfd7f50..9bc83040e 100644
--- a/cur/programming/3-lists/4-robots-ai/3-implications.es.html
+++ b/cur/programming/3-lists/4-robots-ai/3-implications.es.html
@@ -33,7 +33,7 @@ <h2>Implicaciones de la IA</h2>
                         <li>
                             ¿Qué leyes se aplican a la IA? ¿Qué sucede cuando un robot comete un delito? ¿Quién es castigado?
                             <div class="endnote">
-                                <h3 class="box-head">Algunos artículos relevantes:</h3>
+                                <strong>Algunos artículos relevantes:</strong>
                                 <ul>
                                     <!--<li><a href="http://futureoflife.org/open-letter-autonomous-weapons/" target="_blank">Autonomous Weapons: An Open Letter from AI and Robotics Researchers</a></li>-->
                                     <li><a href="http://www.theatlantic.com/technology/archive/2014/05/the-military-wants-to-teach-robots-right-from-wrong/370855/" target="_blank" title="El ejército quiere enseñar a los robots lo que está bien y lo que está mal.">El ejército quiere enseñar a los robots lo que está bien y lo que está mal.</a></li>
diff --git a/cur/programming/3-lists/4-robots-ai/3-implications.html b/cur/programming/3-lists/4-robots-ai/3-implications.html
index ea5396fe4..4469eb127 100644
--- a/cur/programming/3-lists/4-robots-ai/3-implications.html
+++ b/cur/programming/3-lists/4-robots-ai/3-implications.html
@@ -33,7 +33,7 @@ <h2>Implications of AI</h2>
                         <li>
                             What laws apply to AI? What happens when a robot commits a crime? Who gets punished?
                             <div class="endnote">
-                                <h3 class="box-head">Some relevant articles:</h3>
+                                <strong>Some relevant articles:</strong>
                                 <ul>
                                     <!--<li><a href="http://futureoflife.org/open-letter-autonomous-weapons/" target="_blank">Autonomous Weapons: An Open Letter from AI and Robotics Researchers</a></li>-->
                                     <li><a href="http://www.theatlantic.com/technology/archive/2014/05/the-military-wants-to-teach-robots-right-from-wrong/370855/" target="_blank" title="The Military Wants to Teach Robots Right from Wrong">The Military Wants to Teach Robots Right from Wrong</a></li>

From 581363ed56fffbe30f192f9e6dbb9c95adde83ae Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 20:38:19 -0400
Subject: [PATCH 14/29] a11y - 3.OP.4 changing an H3s to <strong> and removing
 comment

(I checked; the links look fine and don't seem to need updates.)
---
 .../3-lists/optional-projects/4-music-project.es.html          | 3 +--
 cur/programming/3-lists/optional-projects/4-music-project.html | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/cur/programming/3-lists/optional-projects/4-music-project.es.html b/cur/programming/3-lists/optional-projects/4-music-project.es.html
index 54362bad3..4e422e80c 100644
--- a/cur/programming/3-lists/optional-projects/4-music-project.es.html
+++ b/cur/programming/3-lists/optional-projects/4-music-project.es.html
@@ -52,8 +52,7 @@ <h3>Revisión de funciones de orden superior con sonido</h3>
                 </li>
             </ol>
             <div class="endnote">
-                <h3 class="box-head">¿Necesitas revisar?</h3>
-                <div class="todo">These need updating!! --MF, 4/5/19</div>
+                <strong>¿Necesitas revisar?</strong>
                 <ul>
                     <li>Aprendiste sobre <code>para cada</code> en <a href="/bjc-r/cur/programming/2-complexity/2-data-structures-art/3-traversing-list.es.html?topic=nyc_bjc%2F2-conditionals-abstraction.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Unidad 2 Laboratorio 2: Comprobación de cada respuesta del cuestionario">Unidad 2 Laboratorio 2: Comprobación de cada respuesta del cuestionario</a>.</li>
                     <li>Aprendiste sobre <code>mantener</code> en <a href="/bjc-r/cur/programming/2-complexity/3-predicates/5-keeping-list-items.es.html?topic=nyc_bjc%2F2-conditionals-abstraction.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Unidad 2 Laboratorio 3: Mantener elementos de una lista
diff --git a/cur/programming/3-lists/optional-projects/4-music-project.html b/cur/programming/3-lists/optional-projects/4-music-project.html
index fbc4e6645..9a20d30c7 100644
--- a/cur/programming/3-lists/optional-projects/4-music-project.html
+++ b/cur/programming/3-lists/optional-projects/4-music-project.html
@@ -52,8 +52,7 @@ <h3>Reviewing Higher-Order Functions with Sound</h3>
                 </li>
             </ol>
             <div class="endnote">
-                <h3 class="box-head">Need to Review?</h3>
-                <div class="todo">These need updating!! --MF, 4/5/19</div>
+                <strong>Need to Review?</strong>
                 <ul>
                     <li>You learned about <code>for each</code> in <a href="/bjc-r/cur/programming/2-complexity/2-data-structures-art/3-traversing-list.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment" title="Unit 2 Lab 2: Checking Each Quiz Answer">Unit 2 Lab 2: Checking Each Quiz Answer</a>.</li>
                     <li>You learned about <code>keep</code> in <a href="/bjc-r/cur/programming/2-complexity/3-predicates/5-keeping-list-items.html?topic=nyc_bjc%2F2-conditionals-abstraction.topic&course=bjc4nyc.html&novideo&noassignment" title="Keeping Items from a List">Unit 2 Lab 3</a>.</li>

From 30cb49cda355a24bd55d60f51977d06dd87efe76 Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 20:43:46 -0400
Subject: [PATCH 15/29] a11y - 5.4.2 changing five H3s to H4s

---
 .../4-unsolvable-undecidable/2-halting-problem.es.html | 10 +++++-----
 .../4-unsolvable-undecidable/2-halting-problem.html    | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.es.html b/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.es.html
index d1985a187..167a154b4 100755
--- a/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.es.html
+++ b/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.es.html
@@ -28,7 +28,7 @@ <h2>Un problema indecidible</h2>
 
 
         <h3>Suposición de que existe una función <code>¿detener?</code></h3>
-        <h3 class="box-head">Realizar la suposición</h3>
+        <h4 class="box-head">Realizar la suposición</h4>
         <p>
 			<div class="sidenote">No podemos mostrar el código dentro de <code>¿detener?</code>; estamos demostrando que no se puede escribir en absoluto, sin importar qué código lo implemente.</div>
             Primero, <em>asumimos</em> que existe una función llamada <code>¿detener?</code> que determina si dado un reportero reportará un valor en un tiempo finito. (Si es así, decimos que el reportero <em>se detiene.</em>) Se necesitan dos entradas: una función y un valor de entrada para esa función. Reporta <code>verdadero</code> si la función reportase un valor cuando se le da esa entrada; y reporta <code>falso</code> si la función se ejecutase para siempre (en un bucle infinito).<br />
@@ -43,7 +43,7 @@ <h3 class="box-head">Realizar la suposición</h3>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-reporting-false.es.png" alt="¿detener?(programa con un bucle infinito ())(foo) reporta falso" title="¿detener?(programa con un bucle infinito ())(foo) reporta falso" /> porque <img class="inline" src="/bjc-r/img/5-algorithms/program-with-loop(foo).es.png" alt="programa con un bucle infinito (foo)" title="programa con un bucle infinito (foo)" /> bucles infinitamente.</p>
 
 
-        <h3 class="box-head">Revisión del plan para la prueba</h3>
+        <h4 class="box-head">Revisión del plan para la prueba</h4>
         <p>Usaremos prueba por contradicción para mostrar que la siguiente pregunta <em>no se puede</em> responder<em>en general</em>:</p>
         <p class="center"><strong>¿Un determinado programa de computadora, dada una determinada entrada, reportara un resultado en un tiempo finito?</strong></p>
         <div class="endnote">
@@ -87,7 +87,7 @@ <h3 class="box-head">Revisión del plan para la prueba</h3>
 
         <h3>Muestra de cómo esto crea una contradicción</h3>
 
-		<h3 class="box-head">Construir un programa para el cual <code>¿detener?</code> no funcionará</h3>
+		<h4 class="box-head">Construir un programa para el cual <code>¿detener?</code> no funcionará</h4>
 		<p>
             Para demostrar que no puede existir tal función, necesitamos crear una contradicción. Necesitamos demostrar que tiene que haber al menos una función y una entrada a esa función para la cual <code>¿detener?</code> no funciona de la manera que asumimos. Por lo tanto, podemos hacer un bloque <code>prueba</code>, específicamente con el propósito de romper <code>¿detener?</code>:<br />
             <div class="sidenoteBig">
@@ -105,7 +105,7 @@ <h3 class="box-head">Construir un programa para el cual <code>¿detener?</code>
             Este <em>es</em> desafiante. ¡Quédate con eso! Estamos <em>creando una contradicción</em> para demostrar que no puede existir la función <code>¿detener?</code> a la que se llama dentro de <code>prueba</code>.
         </div>
 
-        <h3 class="box-head">Uso de autorreferencia para conducir a la contradicción</h3>
+        <h4 class="box-head">Uso de autorreferencia para conducir a la contradicción</h4>
         <p>
             Para hacer que la situación sea <em>exactamente</em> como lo que dijo Betsy ("La declaración que estoy haciendo <em>en este momento</em> es falsa"), llamaremos a <code>prueba</code> dentro de <em>sí mismo</em>:<br />
             <img class="indent" src="/bjc-r/img/5-algorithms/testertester.es.png" alt="prueba(prueba())" title="prueba(prueba())" /><br />
@@ -117,7 +117,7 @@ <h3 class="box-head">Uso de autorreferencia para conducir a la contradicción</h
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-tester-tester-reporting-true.es.png" alt="¿detener? (prueba) (prueba) reporta verdadero" title="¿detener? (prueba) (prueba) reporta verdadero" /> significaría que <img class="inline" src="/bjc-r/img/5-algorithms/testertester.es.png" alt="prueba(prueba())" title="prueba(prueba())" /> devuelve un valor.</p>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-tester-tester-reporting-false.es.png" alt="¿detener? (prueba) (prueba) reporta falso" title="¿detener? (prueba) (prueba) reporta falso" /> significaría que <img class="inline" src="/bjc-r/img/5-algorithms/testertester.es.png" alt="prueba(prueba())" title="prueba(prueba())" /> bucles infinitamente.</p>
 
-        <h3 class="box-head">Entender la contradicción</h3>
+        <h4 class="box-head">Entender la contradicción</h4>
         <p>
             Cuando llamamos <img class="inline" src="/bjc-r/img/5-algorithms/testertester.es.png" alt="prueba(prueba())" title="prueba(prueba())" />, nos encontramos con la contradicción. Para ver cómo, mire hacia atrás en la definición de <code>prueba</code>:<br />
             <img class="indent" src="/bjc-r/img/5-algorithms/tester-halting.es.png" alt="prueba(reportero){si(¿detener?(reportero)(reportero){por siempre{}}sino{reportar(verdadero)}}" title="prueba(reportero){si(¿detener?(reportero)(reportero){por siempre{}}sino{reportar(verdadero)}}">
diff --git a/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.html b/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.html
index cc45a5d6f..b6b9f1734 100755
--- a/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.html
+++ b/cur/programming/5-algorithms/4-unsolvable-undecidable/2-halting-problem.html
@@ -28,7 +28,7 @@ <h2>An Undecidable Problem</h2>
 
 
         <h3>Assuming That a <code>Halts?</code> Function Exists</h3>
-        <h3 class="box-head">Making the Assumption</h3>
+        <h4 class="box-head">Making the Assumption</h4>
         <p>
 			<div class="sidenote">We can't show the code inside <code>halts?</code>; we are proving that it can't be written at all, no matter what code implements it.</div>
             First, we <em>assume</em> there exists a function called <code>halts?</code> that determines whether a given reporter will report a value in a finite time. (If so, we say that the reporter <em>halts.</em>) It takes two inputs: a function and an input value for that function. It reports <code>true</code> if the function would report a value when given that input;  it reports <code>false</code> if the function would run forever (in an infinite loop).<br />
@@ -43,7 +43,7 @@ <h3 class="box-head">Making the Assumption</h3>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-reporting-false.png" alt="halts?(program with an infinite loop ())(foo) reporting false" title="halts?(program with an infinite loop ())(foo) reporting false" /> because <img class="inline" src="/bjc-r/img/5-algorithms/program-with-loop(foo).png" alt="program with an infinite loop (foo)" title="program with an infinite loop (foo)" /> loops infinitely.</p>
 
 
-        <h3 class="box-head">Reviewing the Plan for the Proof</h3>
+        <h4 class="box-head">Reviewing the Plan for the Proof</h4>
         <p>We'll use proof by contradiction to show that the following question <em>can't</em> be answered <em>in general</em>:</p>
         <p class="center"><strong>Will a certain computer program, given a certain input, report a result in a finite amount of time?</strong></p>
         <div class="endnote">
@@ -87,7 +87,7 @@ <h3 class="box-head">Reviewing the Plan for the Proof</h3>
 
         <h3>Showing How This Creates a Contradiction</h3>
 
-		<h3 class="box-head">Constructing a Program For Which <code>Halts?</code> Won't Work</h3>
+		<h4 class="box-head">Constructing a Program For Which <code>Halts?</code> Won't Work</h4>
 		<p>
             To prove there can be no such function, we need to create a contradiction. We need to show that there has to be at least one function and one input to that function for which <code>halts?</code> fails to work the way we assumed it does. So, we can make up a block, <code>tester</code>, specifically for the purpose of breaking <code>halts?</code>:<br />
             <div class="sidenoteBig">
@@ -105,7 +105,7 @@ <h3 class="box-head">Constructing a Program For Which <code>Halts?</code> Won't
             This <em>is</em> challenging. Stick with it! We are <em>creating a contradiction</em> to prove that the <code>halts?</code> function called inside <code>tester</code> can't exist.
         </div>
 
-        <h3 class="box-head">Using Self-Reference to Lead to Contradiction</h3>
+        <h4 class="box-head">Using Self-Reference to Lead to Contradiction</h4>
         <p>
             To make the situation <em>exactly</em> like what Betsy said ("The statement I'm making <em>right now </em>is false."), we'll call <code>tester</code> on <em>itself</em>:<br />
             <img class="indent" src="/bjc-r/img/5-algorithms/testertester.png" alt="tester(tester())" title="tester(tester())" /><br />
@@ -117,7 +117,7 @@ <h3 class="box-head">Using Self-Reference to Lead to Contradiction</h3>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-tester-tester-reporting-true.png" alt="halts (tester) (tester) reporting true" title="halts (tester) (tester) reporting true" /> would mean that <img class="inline" src="/bjc-r/img/5-algorithms/testertester.png" alt="tester(tester())" title="tester(tester())" /> returns a value.</p>
         <p class="indent"><img class="inline" src="/bjc-r/img/5-algorithms/halts-tester-tester-reporting-false.png" alt="halts (tester) (tester) reporting false" title="halts (tester) (tester) reporting false" /> would mean that <img class="inline" src="/bjc-r/img/5-algorithms/testertester.png" alt="tester(tester())" title="tester(tester())" /> loops infinitely.</p>
 
-        <h3 class="box-head">Understanding the Contradiction</h3>
+        <h4 class="box-head">Understanding the Contradiction</h4>
         <p>
         	When we call <img class="inline" src="/bjc-r/img/5-algorithms/testertester.png" alt="tester(tester())" title="tester(tester())" />, we run into the contradiction. To see how, look back at the <code>tester</code> definition:<br />
             <img class="indent" src="/bjc-r/img/5-algorithms/tester-halting.png" alt="tester(reporter){if(halts?(reporter)(reporter){forever{}}else{report(true)}}" title="tester(reporter){if(halts?(reporter)(reporter){forever{}}else{report(true)}}">

From 0df419421040e5d24754037ace1e83a205c00703 Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 20:45:25 -0400
Subject: [PATCH 16/29] a11y - 5.6.1 removing old comments from Spanish page

---
 .../5-algorithms/6-tic-tac-toe/1-review.es.html       | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/cur/programming/5-algorithms/6-tic-tac-toe/1-review.es.html b/cur/programming/5-algorithms/6-tic-tac-toe/1-review.es.html
index 98cf5983b..53b0e09d6 100644
--- a/cur/programming/5-algorithms/6-tic-tac-toe/1-review.es.html
+++ b/cur/programming/5-algorithms/6-tic-tac-toe/1-review.es.html
@@ -8,17 +8,6 @@
 
     <body>
         <h2>Revisa tu proyecto de tres en l&iacute;nea</h2>
-        <div class="todo">
-            <h3 class="box-head">NEXT YEAR</h3>
-            <p>I was looking for ways to scaffold this project without excessive hand-holding, and I decided to have them implement a randomly playing computer player first, then give it a little strategy (using the final "best empty square" rule), and then build in the advanced strategy later. As a result, <strong>this first lab doesn't have to wait until U5</strong>. For example, it might be nice to have it at the end of U3 or the beginning of U4 <em>before TCP</em> since that project uses <code>broadcast</code> and this first is easier to understand than that project. --MF, 6/7/18</p>
-            <p>If we go with this approach <strong>next year</strong>, we need to update the link at the bottom of <a href="/bjc-r/cur/programming/3-lists/3-tic-tac-toe/2-find-wins.es.html?topic=nyc_bjc%2F3-lists.es.topic&amp;course=bjc4nyc.es.html&amp;novideo&amp;noassignment">3.2.2</a>. --MF, 6/8/18</p>
-        </div>
-        <div class="todo">
-            <p>PG: I think we need this entire lab as part of the "message" of our course. I'd rather it be main than optional. How can we handle our tight time constraints? /Can/ we?</p>
-            <p>BH: Move to non-optional!</p>
-            <p>MF: Project still needs to be wrapped up and updated online</p>
-        </div>
-
         <div class="learn">
             <p><strong>En este laboratorio</strong>, ampliar&aacute;s tu <a href="/bjc-r/cur/programming/3-lists/3-tic-tac-toe/1-find-ties.es.html?topic=nyc_bjc%2F3-lists.es.topic&amp;course=bjc4nyc.es.html&amp;novideo&amp;noassignment" title="Programa de tres en línea">programa de tres en l&iacute;nea&nbsp;</a> para hacer que la computadora juegue contra ti.</p>
             <p><strong>En esta p&aacute;gina</strong>, revisar&aacute;s los bloques de tu anterior proyecto del juego de tres en l&iacute;nea.</p>

From 1964fdd2c07a5c4c35bf896e2bb5c6bc4ec645d4 Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 20:49:27 -0400
Subject: [PATCH 17/29] a11y - 6.1.3 changing three H3s to H4s

---
 .../6-computers/1-abstraction/03-software-languages.es.html | 6 +++---
 .../6-computers/1-abstraction/03-software-languages.html    | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/cur/programming/6-computers/1-abstraction/03-software-languages.es.html b/cur/programming/6-computers/1-abstraction/03-software-languages.es.html
index 58fd206b0..e553873c5 100644
--- a/cur/programming/6-computers/1-abstraction/03-software-languages.es.html
+++ b/cur/programming/6-computers/1-abstraction/03-software-languages.es.html
@@ -17,7 +17,7 @@ <h3>Lenguajes de alto y bajo nivel</h3>
         <img class="imageRight noshadow" src="/bjc-r/img/6-computers/language-continuum.es.png" alt="diagrama de lenguajes de programación comunes enumerados en orden de nivel de abstracción; hay una flecha vertical de doble cabeza a la derecha que indica que la primera fila de lenguajes (Snap!, Scheme, Prolog, Ruby, Lisp) son 'lenguajes de alto nivel', la segunda fila (JavaScript, Python, Java, Alice, Scratch) se encuentra en el medio, y la tercera fila (C, C++) son 'lenguajes de bajo nivel'" title="diagrama de lenguajes de programación comunes enumerados en orden de nivel de abstracción; hay una flecha vertical de doble cabeza a la derecha que indica que la primera fila de lenguajes (Snap!, Scheme, Prolog, Ruby, Lisp) son 'lenguajes de alto nivel', la segunda fila (JavaScript, Python, Java, Alice, Scratch) se encuentra en el medio, y la tercera fila (C, C++) son 'lenguajes de bajo nivel'" width="400">
         <p>Un <em>lenguaje de nivel alto</em> (como Snap<em>!</em> o Scheme) incluye muchas abstracciones incorporadas que hacen m&aacute;s f&aacute;cil centrarse en el problema que se quiere resolver en lugar de en c&oacute;mo funciona el hardware de la computadora. Un <em>lenguaje de bajo nivel </em>(como C) tiene menos abstracciones, requiriendo que sepas mucho sobre la arquitectura de tu computadora para escribir un programa.</p>
 
-        <h3 class="box-head">&iquest;Por qu&eacute; los programadores usan lenguajes de alto nivel?</h3>
+        <h4 class="box-head">&iquest;Por qu&eacute; los programadores usan lenguajes de alto nivel?</h4>
         <p>Los lenguajes de nivel alto pueden producir programas m&aacute;s <em>seguros</em> &mdash;los que son menos propensos a tener errores&mdash;porque las abstracciones manejan detalles desordenados que pueden hacer fracasar a los programadores. </p>
         <div class="endnote">
             <p>Los lenguajes de nivel alto reducen los errores en el uso de la memoria. Los lenguajes m&aacute;s antiguos y de bajo nivel requer&iacute;an que el programador manejara el uso de la memoria de la computadora con instrucciones que dijeran "cons&iacute;gueme un bloque de memoria lo suficientemente grande para contener 100 n&uacute;meros" y otras instrucciones que dijeran "bien, ya termin&eacute; de usar este bloque de memoria; puede ser asignado para alg&uacute;n otro prop&oacute;sito."</p>
@@ -74,7 +74,7 @@ <h3 class="box-head">&iquest;Por qu&eacute; los programadores usan lenguajes de
             <img class="indent" src="/bjc-r/img/6-computers/map-s.es.png" alt="reportar (mapar (unir () (s)) sobre (palabras))" title="reportar (mapar (unir () (s)) sobre (palabras))">
         </p>
 
-        <h3 class="box-head">&iquest;Por qu&eacute; los programadores usan lenguajes de bajo nivel?</h3>
+        <h4 class="box-head">&iquest;Por qu&eacute; los programadores usan lenguajes de bajo nivel?</h4>
 		<p>La mejor raz&oacute;n para usar lenguajes de bajo nivel es para escribir sistemas operativos (como Windows, Mac OS X, Android, o iOS).&nbsp; Aprender&aacute;s m&aacute;s acerca de sistemas operativos en la p&aacute;gina <a href="/bjc-r/cur/programming/6-computers/1-abstraction/05-software-OS.es.html?topic=nyc_bjc%2F6-how-computers-work.es.topic&amp;course=bjc4nyc.es.html&amp;novideo&amp;noassignment" title="The Software Domain: Operating Systems">Dominio de software: Sistemas operativos</a>.</p>
         <div class="endnote">
             <a href="#hint-low-level-lang" data-toggle="collapse" title="Why else would a programmer use a low-level language?">&iquest;Por que otra raz&oacute;n un programador usar&iacute;a un lenguaje de bajo nivel?</a>
@@ -86,7 +86,7 @@ <h3 class="box-head">&iquest;Por qu&eacute; los programadores usan lenguajes de
             </div>
         </div>
 
-        <h3 class="box-head">&iquest;Qu&eacute; es el lenguaje de m&aacute;quina?</h3>
+        <h4 class="box-head">&iquest;Qu&eacute; es el lenguaje de m&aacute;quina?</h4>
         <p>Tanto los idiomas de alto como de bajo nivel son utilizados por <em>personas</em> para escribir programas de m&aacute;quina. El hardware de la computadora entiende una especie de lenguaje de nivel ultra bajo, llamado <em>lenguaje de m&aacute;quina.</em> Programas especiales llamados <em>compiladores</em> e <em>int&eacute;rpretes </em>se utilizan para traducir los lenguajes de programaci&oacute;n de humanos a lenguaje de m&aacute;quina para ser ejecutado por la computadora.</p>
         <div class="endnote">
             <a href="#hint-compilers" data-toggle="collapse" title="Read more about compilers and interpreters">Lee m&aacute;s acerca de compiladores e int&eacute;rpretes.</a>
diff --git a/cur/programming/6-computers/1-abstraction/03-software-languages.html b/cur/programming/6-computers/1-abstraction/03-software-languages.html
index 094113b15..ed346aa09 100644
--- a/cur/programming/6-computers/1-abstraction/03-software-languages.html
+++ b/cur/programming/6-computers/1-abstraction/03-software-languages.html
@@ -24,7 +24,7 @@ <h3>High-Level and Low-Level Languages</h3>
         <img class="imageRight noshadow" src="/bjc-r/img/6-computers/language-continuum.png" width="400" alt="diagram of common programming languages listed in order of abstraction level; there is a vertical double-headed arrow on the right indicating that the first row of languages (Snap!, Scheme, Prolog, Ruby, Lisp) are 'high level languages,' the second row (JavaScript, Python, Java, Alice, Scratch) falls between, and the third row (C, C++) are 'low level languages'" title="diagram of common programming languages listed in order of abstraction level; there is a vertical double-headed arrow on the right indicating that the first row of languages (Snap!, Scheme, Prolog, Ruby, Lisp) are 'high level languages,' the second row (JavaScript, Python, Java, Alice, Scratch) falls between, and the third row (C, C++) are 'low level languages'" />
         <p>A <em>high-level language</em> (like Snap<em>!</em> or Scheme) includes many built-in abstractions that make it easier to focus on the problem you want to solve rather than on how computer hardware works. A <em>low-level language</em> (like C) has fewer abstractions, requiring you to know a lot about your computer's architecture to write a program.</p>
 
-        <h3 class="box-head">Why do programmers use high-level languages?</h3>
+        <h4 class="box-head">Why do programmers use high-level languages?</h4>
         <p>High-level languages can produce <em>safer</em> programs&mdash;ones that are less likely to have bugs&mdash;because the abstractions manage messy details that can trip up programmers. </p>
         <div class="endnote">
             <p>High-level languages reduce bugs in memory use. Older, low-level languages required the programmer to manage the use of the computer's memory with instructions saying "get me a block of memory big enough to hold 100 numbers" and other instructions saying "okay, I'm finished using this block of memory; it can be allocated for some other purpose."</p>
@@ -82,7 +82,7 @@ <h3 class="box-head">Why do programmers use high-level languages?</h3>
             <img class="indent" src="/bjc-r/img/6-computers/map-s.png" alt="report (map (join () (s)) over (words))" title="report (map (join () (s)) over (words))" />
         </p>
 
-        <h3 class="box-head">Why do programmers use low-level languages?</h3>
+        <h4 class="box-head">Why do programmers use low-level languages?</h4>
 		<p>The best reason to use low-level languages is to write operating systems (like Windows, Mac OS X, Android, or iOS). You'll learn more about Operating systems on the <a href="/bjc-r/cur/programming/6-computers/1-abstraction/05-software-OS.html?topic=nyc_bjc%2F6-how-computers-work.topic&course=bjc4nyc.html&novideo&noassignment" title="The Software Domain: Operating Systems">The Software Domain: Operating Systems</a> page.</p>
         <div class="endnote">
             <a href="#hint-low-level-lang" data-toggle="collapse" title="Why else would a programmer use a low-level language?">Why else would a programmer use a low-level language?</a>
@@ -100,7 +100,7 @@ <h3 class="box-head">Why do programmers use low-level languages?</h3>
             </div>
         </div>
 
-        <h3 class="box-head">What is machine language?</h3>
+        <h4 class="box-head">What is machine language?</h4>
         <p>Both high- and low-level languages are used by <em>people</em> to write computer programs. Computer hardware understands a sort of ultra-low-level language, called <em>machine language.</em> Special programs called <em>compilers</em> and <em>interpreters</em> are used to translate human programming languages into machine language to be run by the computer.</p>
         <div class="endnote">
             <a href="#hint-compilers" data-toggle="collapse" title="Read more about compilers and interpreters">Read more about compilers and interpreters.</a>

From d90ec6d7aec8e925cf433b05b5bae27d8709da06 Mon Sep 17 00:00:00 2001
From: Mary Fries <mfries@edc.org>
Date: Fri, 9 Aug 2024 21:02:46 -0400
Subject: [PATCH 18/29] a11y - 6.1.6 changing H3s to H4s, changing H4s to
 box-heads, editing old comment

---
 .../1-abstraction/06-digital-architecture.es.html      |  8 ++++----
 .../1-abstraction/06-digital-architecture.html         | 10 +++++-----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/cur/programming/6-computers/1-abstraction/06-digital-architecture.es.html b/cur/programming/6-computers/1-abstraction/06-digital-architecture.es.html
index 3c873bb13..c537996d6 100644
--- a/cur/programming/6-computers/1-abstraction/06-digital-architecture.es.html
+++ b/cur/programming/6-computers/1-abstraction/06-digital-architecture.es.html
@@ -19,7 +19,7 @@ <h3>La computadora del programa almacenado</h3>
             <p>Como verás en el Laboratorio 2, ha habido máquinas para realizar cálculos durante miles de años. Pero los inicios de la computadora moderna <em>programable</em> se remontan a principios de 1800 con el trabajo de Charles Babbage.</p>
             <p>Babbage era principalmente un matemático, pero contribuyó a campos tan variados como la astronomía y la economía. Babbage vivió hace unos 150 años de 1791-1871. La electricidad como fuente de energía era desconocida. La máquina de vapor entró en uso generalizado en la época en que nació. La maquinaria más precisa de su tiempo era el mecanismo de relojería/engranajes.</p>
 
-            <h3 class="box-head">Máquina diferencial</h3>
+            <h4 class="box-head">Máquina diferencial</h4>
             <p>La primera computadora de Babbage fue la máquina diferencial. Utilizó engranajes para diseñar una máquina compleja que calcularía e imprimiría tablas de números (como las tablas de registro o funciones trigonométricas que puede tener en la parte posterior un libro de texto de matemáticas). Pero estos engranajes debían ser tan precisos que cada uno tenía que ser hecho a mano. El proyecto se volvió tan costoso que el gobierno dejó de financiarlo y Babbage nunca terminó una versión a gran escala.</p>
             <table class="indent">
                 <tr>
@@ -49,7 +49,7 @@ <h3 class="box-head">Máquina diferencial</h3>
                 </div>
             </p>
 
-            <h3 class="box-head">La máquina analítica</h3>
+            <h4 class="box-head">La máquina analítica</h4>
             <p>
             	La máquina diferencial podría usarse para calcular muchas funciones diferentes configurando manualmente la posición de inicio de varios engranajes. Pero tenía <strong>solo un algoritmo</strong>: el construido en el diseño de hardware. En 1833, Babbage comenzó a trabajar en la máquina analítica, que se basaba en la idea general de la máquina diferencial, pero <strong>podía llevar a cabo instrucciones</strong> en un lenguaje de programación primitivo preparado en tarjetas perforadas.<br />
                 <div class="sidenote">
@@ -222,11 +222,11 @@ <h3>¿Qué es una arquitectura?</h3>
         <div class="endnote">
         	<a href="#hint-architecture-general" data-toggle="collapse" title="Aprende más acerca de la arquitectura de computadoras en general">Aprende más acerca de la arquitectura de computadoras en general.</a>
             <div id="hint-architecture-general" class="collapse">
-                <h4>La jerarquía de memoria</h4>
+                <h4 class="box-head">La jerarquía de memoria</h4>
                 <p>Por un costo determinado de circuito hardware, <strong>cuanto más grande es la memoria, más lento funciona.</strong> Por esta razón, las computadoras no solo tienen una gran cantidad de memoria. Habrá un pequeño número de <em>registros</em> dentro del procesador, generalmente entre 8 y 16 de ellos. El "tamaño" (número de bits) de un registro de datos es igual al ancho de la arquitectura.</p>
                 <p>La memoria principal de la computadora, en estos días, se mide en GB (gigabytes o miles de millones de bytes). Una memoria de ese tamaño no puede ser lo suficientemente rápida como para llevarle el paso a un procesador moderno. Afortunadamente, los programas de computadora generalmente tienen <em>localidad de referencia</em>, lo que significa que si el programa acaba de usar una ubicación de memoria particular, probablemente usará una ubicación cercana a continuación. Por lo tanto, un programa completo puede ser muy grande, pero en el transcurso de un segundo más o menos solo se necesitará una pequeña parte. Por lo tanto, las computadoras modernas están diseñadas con una o más memorias <em>caché</em>, mucho más pequeñas y, por lo tanto, más rápidas, entre el procesador y la memoria principal. El procesador se asegura de que la memoria utilizada más recientemente se copie en la memoria caché.</p>
                 <p>Un procesador x86 de 64 bits reciente tiene un caché de primer nivel (L1) de 64 KB (miles de bytes) dentro del chip del procesador, un caché L2 más grande pero más lento de 256 KB, también dentro del procesador, y un caché L3 de hasta 2 MB (megabytes, millones de bytes) fuera del procesador. Cada nivel de caché tiene una copia de las partes usadas más recientemente del siguiente nivel hacia afuera: el caché L1 copia parte del caché L2, que copia parte del caché L3, que copia parte de la memoria principal. El procesador puede acceder a los datos en el caché L1 casi tan rápido como sus registros internos, y cada nivel externo es un poco más lento. El hardware en el procesador maneja toda esta complejidad, de modo que los programadores pueden escribir programas como si el procesador estuviera directamente conectado a la memoria principal.</p>
-                <h4>Segundo abastecimiento</h4>
+                <h4 class="box-head">Segundo abastecimiento</h4>
                 <p>Intel otorga licencias a otros fabricantes de chips para fabricar procesadores que usen la misma arquitectura que los procesadores de Intel. ¿Por qué hacen eso? ¿No ganarían más dinero si la gente tuviera que comprarle a Intel? La razón es que los fabricantes de computadoras, como Dell, Apple y Lenovo, no construirán sus sistemas alrededor de una arquitectura que solo esté disponible en una compañía. No les preocupa que Intel vaya a la quiebra; La preocupación es que puede haber una demanda mayor de la esperada para un procesador en particular, e Intel puede no ser capaz de completar los pedidos a tiempo. Pero si ese procesador también está disponible en otras compañías como AMD y Cyrix, un retraso en Intel no se convertirá en un retraso en Dell. Esos otros fabricantes de chips pueden no usar el mismo circuito que la versión Intel, siempre y cuando se comporten de la misma manera a nivel de arquitectura.</p>
             </div>
         </div>
diff --git a/cur/programming/6-computers/1-abstraction/06-digital-architecture.html b/cur/programming/6-computers/1-abstraction/06-digital-architecture.html
index cb51c129b..1b8145d87 100644
--- a/cur/programming/6-computers/1-abstraction/06-digital-architecture.html
+++ b/cur/programming/6-computers/1-abstraction/06-digital-architecture.html
@@ -23,9 +23,9 @@ <h3>The Stored Program Computer</h3>
             <p>As you'll see in Lab 2, there have been machines to carry out computations for thousands of years. But the modern, <em>programmable</em> computer had its roots in the work of Charles Babbage in the early 1800s.</p>
             <p>Babbage was mainly a mathematician, but he contributed to fields as varied as astronomy and economics. Babbage lived about 150 years ago from  1791-1871. Electricity as a source of energy was unknown. The steam engine came into widespread use around the time he was born. The most precise machinery of his time was clockwork—gears.</p>
 
-            <h3 class="box-head">Difference Engine</h3>
+            <h4 class="box-head">Difference Engine</h4>
             <p>Babbage's first computer was the Difference Engine. He used gears to design a complex machine that would compute and print tables of numbers (like the tables of log or trig functions you may have in the back of a math textbook). But these gears needed to be so precise that each one had to be handmade. The project became so expensive that the government stopped funding it, and Babbage never finished a full-scale version.</p>
-            <div class="comment">Bad Mary. ;) We need a CSS solution for this instead of using tables. --MF, 12/4/17</div>
+            <div class="comment">We need a CSS solution for this instead of using tables. --MF, 12/4/17</div>
             <table class="indent">
                 <tr>
                     <td>
@@ -54,7 +54,7 @@ <h3 class="box-head">Difference Engine</h3>
                 </div>
             </p>
 
-            <h3 class="box-head">The Analytical Engine</h3>
+            <h4 class="box-head">The Analytical Engine</h4>
             <p>
             	The Difference Engine could be used to compute many different functions by manually setting the starting position of various gears.  But it had <strong>only one algorithm</strong>: the one built into the hardware design. In 1833, Babbage began working on the Analytical Engine, which was based on the general idea of the Difference Engine but <strong>could carry out instructions</strong> in a primitive programming language prepared on punched cards.<br />
                 <div class="sidenote">
@@ -229,11 +229,11 @@ <h3>What's an Architecture?</h3>
         	<a href="#hint-architecture-general" data-toggle="collapse" title="Learn more about computer architecture in general">Learn more about computer architecture in general.</a>
             <div id="hint-architecture-general" class="collapse">
                 <div class="todo" style="color:grey">This needs some heavy edits. For example, perhaps the whole third paragraph, "One recent 64-bit x86..." could be cut. --MF, 11/8/17 </div>
-                <h4>The memory hierarchy</h4>
+                <h4 class="box-head">The memory hierarchy</h4>
                 <p>For a given cost of circuit hardware, <strong>the bigger the memory, the slower it works.</strong> For this reason, computers don't just have one big chunk of memory. There will be a small number of <em>registers</em> inside the processor itself, usually between 8 and 16 of them. The "size" (number of bits) of a data register is  equal to the width of the architecture.</p>
                 <p>The computer's main memory, these days, is measured in GB (gigabytes, or billions of bytes). A memory of that size can't be fast enough to keep up with a modern processor. Luckily, computer programs generally have <em>locality of reference,</em> which means that if the program has just made use of a particular memory location, it's probably going to use a nearby location next. So a complete program may be very big, but over the course of a second or so only a small part of it will be needed. Therefore,  modern computers are designed with one or more <em>cache</em> memories—much smaller  and therefore faster—between the processor and the main memory. The processor makes sure that the most recently used memory is copied into the cache. </p>
                 <p>One recent 64-bit x86 processor has a first level (L1) cache of 64KB (thousands of bytes) inside the processor chip, a larger but slower L2 cache of 256 KB, also inside the processor, and an L3 cache of up to 2 MB (megabytes, millions of bytes) outside the processor. Each level of cache has a copy of the most recently used parts of the next level outward: the L1 cache copies part of the L2 cache, which copies part of the L3 cache, which copies part of the main memory. Data in the L1 cache can be accessed by the processor about as fast as its internal registers, and each level outward is a little slower. Hardware in the processor handles all this complexity, so that programmers can write programs as if the processor were directly connected to the main memory.</p>
-                <h4>Second sourcing</h4>
+                <h4 class="box-head">Second sourcing</h4>
                 <p>Intel licenses other chip manufacturers to build processors that use the same architecture as Intel's processors. Why do they do that? Wouldn't they make more money if people had to buy from Intel? The reason is that computer manufacturers, such as Dell, Apple, and Lenovo, won't build their systems around an architecture that is only available from one company. They're not worried that Intel will go out of business; the worry is that there may be a larger-than-expected demand for a particular processor, and Intel may not be able to fill orders on time. But if that processor is also available from other companies such as AMD and Cyrix, then a delay at Intel won't turn into a delay at Dell. Those other chip manufacturers may not use the same circuitry as the Intel version, as long as they behave the same at the architecture level.</p>
             </div>
         </div>

From c8574bef7dacfb8cd0b8a9bfcbd32cc6f6c6b957 Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Wed, 14 Aug 2024 20:02:57 -0700
Subject: [PATCH 19/29] tidy test comments

---
 utilities/specs/spec_helper.rb | 2 --
 1 file changed, 2 deletions(-)

diff --git a/utilities/specs/spec_helper.rb b/utilities/specs/spec_helper.rb
index 6ae576c26..5bd924de8 100644
--- a/utilities/specs/spec_helper.rb
+++ b/utilities/specs/spec_helper.rb
@@ -78,7 +78,6 @@ def load_all_urls_in_course(course)
 class StaticSite
   attr_reader :root, :server
 
-  # TODO: Rack::File will be deprecated soon. Find a better solution.
   def initialize(root)
     @root = root
     @server = Rack::File.new(root)
@@ -108,7 +107,6 @@ def exists?(path)
 
 Capybara::Screenshot.prune_strategy = :keep_last_run
 
-# Setup for Capybara to serve static files served by Rack
 Capybara.server = :webrick
 Capybara.app = Rack::Builder.new do
   map '/' do

From b7b2dce90013a6f30c97e19d17a715f88c8c21b2 Mon Sep 17 00:00:00 2001
From: jkangEDC <jkang@edc.org>
Date: Wed, 18 Sep 2024 12:30:18 -0400
Subject: [PATCH 20/29] A11y - U1L1 list edits - both en & es

---
 .../1-start-your-first-snap-app.es.html           | 15 ++++++++-------
 .../1-start-your-first-snap-app.html              | 15 ++++++++-------
 .../3-loading-mobile-device.es.html               | 12 +++++++-----
 .../3-loading-mobile-device.html                  | 10 ++++++----
 .../1-building-an-app/4-keeping-score.es.html     |  9 +++++----
 .../1-building-an-app/4-keeping-score.html        |  5 +++--
 6 files changed, 37 insertions(+), 29 deletions(-)

diff --git a/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html b/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html
index ffbd5712b..0d844f5ea 100644
--- a/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html
+++ b/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html
@@ -55,13 +55,14 @@ <h3>Hagamos que el personaje se mueva</h3>
                   <div class="ap-standard">CRD-2.B.1</div>
                   <p>Este es un programa de computadora, también conocido como <em>software</em>. Aunque este es muy pequeño, pronto se va a poner mucho más interesante.</p>
                 </li>
-                <li>Probemos el programa. Haz clic varias veces en el personaje de Alonzo sobre el escenario. Si el programa funciona, Alonzo debería moverse a una posición aleatoria en el escenario cada vez que se le presiona con un clic.</li>
-                <div class="endnote">Si tu programa no funciona, vuelve a mirar la imagen del código y asegúrate que el tuyo coincida exactamente.
-                    <ul>
-                        <li>Asegúrate que los dos bloques estén unidos entre sí moviendo el bloque <code>cuando me (hagan clic)</code> y comprobando que el bloque <code>ir a</code> se mueve con él.</li>
-                        <li>Asegúrate que el primer bloque diga <code>cuando me (hagan clic)</code> y no otra cosa, y el segundo bloque <code>ir a (cualquier posición)</code> y no otra cosa.</li>
-                    </ul>
-				</div>
+                <li>Probemos el programa. Haz clic varias veces en el personaje de Alonzo sobre el escenario. Si el programa funciona, Alonzo debería moverse a una posición aleatoria en el escenario cada vez que se le presiona con un clic.
+                    <div class="endnote">Si tu programa no funciona, vuelve a mirar la imagen del código y asegúrate que el tuyo coincida exactamente.
+                        <ul>
+                            <li>Asegúrate que los dos bloques estén unidos entre sí moviendo el bloque <code>cuando me (hagan clic)</code> y comprobando que el bloque <code>ir a</code> se mueve con él.</li>
+                            <li>Asegúrate que el primer bloque diga <code>cuando me (hagan clic)</code> y no otra cosa, y el segundo bloque <code>ir a (cualquier posición)</code> y no otra cosa.</li>
+                        </ul>
+                    </div>
+                </li>
 			</ol>
 		</div>
 
diff --git a/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.html b/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.html
index d22cc6dbb..77d68b914 100644
--- a/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.html
+++ b/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.html
@@ -53,13 +53,14 @@ <h3>Making a Character Move</h3>
                     <div class="ap-standard">CRD-2.B.1</div>
                     <p>This is a computer program, also known as <em>software</em>.  It's a very short one, but it'll get more interesting soon.</p>
                 </li>
-                <li>Test your program: Click on the Alonzo sprite on the stage several times. If your program works, Alonzo should move to a random position on the stage each time you click him.</li>
-                <div class="endnote">If your program doesn't work, look back at the picture of the code and make sure yours matches exactly.
-                <ul>
-                    <li>Make sure the two blocks are attached to each other by moving the <code>when I am clicked</code> block and checking that the <code>go to</code> block moves with it.</li>
-                    <li>Make sure that the first block says <code>when I am (clicked)</code> and not something else, and make sure that the second block says <code>go to (random position)</code> and not something else.</li>
-                </ul>
-                </div>
+                <li>Test your program: Click on the Alonzo sprite on the stage several times. If your program works, Alonzo should move to a random position on the stage each time you click him.
+                    <div class="endnote">If your program doesn't work, look back at the picture of the code and make sure yours matches exactly.
+                    <ul>
+                        <li>Make sure the two blocks are attached to each other by moving the <code>when I am clicked</code> block and checking that the <code>go to</code> block moves with it.</li>
+                        <li>Make sure that the first block says <code>when I am (clicked)</code> and not something else, and make sure that the second block says <code>go to (random position)</code> and not something else.</li>
+                    </ul>
+                    </div>
+                </li>
             </ol>
         </div>
 		
diff --git a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
index c3a8513ee..6e2e5a6f3 100644
--- a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
+++ b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.es.html
@@ -12,7 +12,7 @@ <h2>Compartir tu juego</h2>
 		<div class="forYouToDo">
 			<ol>
 
-				<li>Puedes utilizar cualquiera de las opciones siguientes si tienes una cuenta de Snap<em>!</em> Si no tiene una cuenta de Snap!, deberá utilizar la opción A.</li>
+				<li>Puedes utilizar cualquiera de las opciones siguientes si tienes una cuenta de Snap<em>!</em> Si no tiene una cuenta de Snap!, deberá utilizar la opción A.
 
 				<div class="narrower">
 					<h3 class="box-head">Opción A: Comparte tu proyecto como archivo</h3>
@@ -54,9 +54,10 @@ <h4 class="box-head">Crear el enlace</h4>
 											</div>
 										</li>
 									</ul>
-								</li>
 								<p>Si realizas cambios en el proyecto después de compartirlo, estos cambios se reflejan en lo que otras personas ven, así que no tienes que compartirlo de nuevo.</p>
-							</ol>
+                                </li>
+							</li>
+                            </ol>
 						</div>
 					</div>
 				</div>
@@ -65,8 +66,9 @@ <h4 class="box-head">Crear el enlace</h4>
 					<div class="narrower">
 						<h3 class="box-head">Guardar una copia de un proyecto</h3>
 						<ul>
-							<li>Tanto si comparte su proyecto como un archivo o un enlace, siempre que el segundo socio guarde el proyecto (en su computadora o en su cuenta), estará guardando una <em>copia</em>&mdash; no un archivo compartido. Si el segundo socio modifica el proyecto, deberá volver a guardarlo y compartirlo (como archivo o enlace) con el primer socio para que éste pueda ver el cambio.</li>
-							<div class="endnote">Si tu y tu compañero tienen cuentas de Snap!, el proyecto se guardará en la cuenta de la persona que haya iniciado sesión. Para cambiar quién ha iniciado sesión en Snap<em>!</em>, abra el menú Nube (<img src="/bjc-r/img/1-introduction/cloud_button.png" alt="botón del menú Nube">) y elija "Cerrar sesión". Deja que tu compañero inicie sesión en Snap<em>!</em>. </div>
+							<li>Tanto si comparte su proyecto como un archivo o un enlace, siempre que el segundo socio guarde el proyecto (en su computadora o en su cuenta), estará guardando una <em>copia</em>&mdash; no un archivo compartido. Si el segundo socio modifica el proyecto, deberá volver a guardarlo y compartirlo (como archivo o enlace) con el primer socio para que éste pueda ver el cambio.
+                                <div class="endnote">Si tu y tu compañero tienen cuentas de Snap!, el proyecto se guardará en la cuenta de la persona que haya iniciado sesión. Para cambiar quién ha iniciado sesión en Snap<em>!</em>, abra el menú Nube (<img src="/bjc-r/img/1-introduction/cloud_button.png" alt="botón del menú Nube">) y elija "Cerrar sesión". Deja que tu compañero inicie sesión en Snap<em>!</em>. </div>
+                            </li>	
 						</ul>
 					</div>
 				</li>
diff --git a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
index d6c47370c..78b82d6f2 100644
--- a/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
+++ b/cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
@@ -12,7 +12,7 @@ <h2>Sharing Your Game</h2>
 		<div class="forYouToDo">
 			<ol>
 
-				<li>You can use either option below if you have a Snap<em>!</em> account. If you do not have a Snap<em>!</em> account, you need to use Option A.</li>
+				<li>You can use either option below if you have a Snap<em>!</em> account. If you do not have a Snap<em>!</em> account, you need to use Option A.
 
 				<div class="narrower">
 					<h3 class="box-head">Option A: Share your project as a file</h3>
@@ -54,19 +54,21 @@ <h4 class="box-head">Creating a Link</h4>
 											</div>
 										</li>
 									</ul>
-								</li>
 								<p>If you save a change to your project after sharing it, the changes will be visible at the URL you have already shared. (The other person may need to refresh their screen.) You don't have to re-share it.</p>
+                                </li>
 							</ol>
 						</div>
 					</div>
 				</div>
+                </li>
 				<li>
 					If you are working with a partner, make sure you both have a copy.
 					<div class="narrower">
 						<h3 class="box-head">Saving a Copy of a Project</h3>
 						<ul>
-							<li>Whether you share your project as a file or a link, whenever the second partner saves the project (to their computer or to their account), they will be saving a <em>copy</em>&mdash;not a shared file. If the second partner changes the project, they need to save and share the project (as a file or a link) again with the first partner for the first partner to see the change.</li>
-							<div class="endnote">If you and your partner have Snap<em>!</em> accounts, the project will save to the account of the person who is logged in. To change who is logged in to Snap<em>!</em>, open the Cloud menu (<img src="/bjc-r/img/1-introduction/cloud_button.png" alt="cloud menu button">) and choose "Logout." Let your partner log in to Snap<em>!</em>. </div>
+							<li>Whether you share your project as a file or a link, whenever the second partner saves the project (to their computer or to their account), they will be saving a <em>copy</em>&mdash;not a shared file. If the second partner changes the project, they need to save and share the project (as a file or a link) again with the first partner for the first partner to see the change.
+                                <div class="endnote">If you and your partner have Snap<em>!</em> accounts, the project will save to the account of the person who is logged in. To change who is logged in to Snap<em>!</em>, open the Cloud menu (<img src="/bjc-r/img/1-introduction/cloud_button.png" alt="cloud menu button">) and choose "Logout." Let your partner log in to Snap<em>!</em>. </div>
+                            </li>
 						</ul>
 					</div>
 				</li>
diff --git a/cur/programming/1-introduction/1-building-an-app/4-keeping-score.es.html b/cur/programming/1-introduction/1-building-an-app/4-keeping-score.es.html
index d94165908..0ab70835f 100644
--- a/cur/programming/1-introduction/1-building-an-app/4-keeping-score.es.html
+++ b/cur/programming/1-introduction/1-building-an-app/4-keeping-score.es.html
@@ -57,19 +57,20 @@ <h3>Guardar la puntuación</h3>
         <h3>Agregar más retos al juego</h3>
         <p>Hasta ahora, incluso el jugador más novato <em>eventualmente</em> va a hacer que Alonzo desaparezca para ganar. El juego va a ser mucho más interesante si penalizamos al jugador si falla al hacer clic.</p>
         <div class="forYouToDo">
-            <ol start="4">
+            <ol start="5">
                 <li>
                     Piensa en qué lugar debemos agregar a nuestro programa el bloque con la instrucción <code>cambiar efecto (fantasma) en (-5)</code>, con el objetivo que Alonzo restablezca su color cada vez que se mueve <em>sin</em> que el jugador logre hacer un clic.
                 </li>
-                <li>Prueba tu juego varias veces y ajusta tu programa para que refleje el nivel de dificultad deseado.</li>
-                <div class="endnote">Podemos cambiar tanto el valor del <code>efecto fantasma</code> como el <code>tiempo de espera</code> para hacer el juego más fácil o más difícil.</div>
+                <li>Prueba tu juego varias veces y ajusta tu programa para que refleje el nivel de dificultad deseado.
+                    <div class="endnote">Podemos cambiar tanto el valor del <code>efecto fantasma</code> como el <code>tiempo de espera</code> para hacer el juego más fácil o más difícil.</div>
+                </li>
             </ol>
         </div>
 
         <h3>Terminar el juego</h3>
         <div class="forYouToDo">
             <p>En el momento que Alonzo sea completamente transparente, el juego debería <em>terminar.</em></p>
-            <ol start="6">
+            <ol start="7">
     			<li>
                     Agrega el siguiente bloque en el lugar apropiado en tu programa para terminar el juego.<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/if-done-stop.es.png"  alt="si ((efecto fantasma) = 100) [quitar efectos gráficos] [detener todos]" title="si ((efecto fantasma) = 100) [quitar efectos gráficos] [detener todos]">
diff --git a/cur/programming/1-introduction/1-building-an-app/4-keeping-score.html b/cur/programming/1-introduction/1-building-an-app/4-keeping-score.html
index 0795fdc53..ae3190f89 100644
--- a/cur/programming/1-introduction/1-building-an-app/4-keeping-score.html
+++ b/cur/programming/1-introduction/1-building-an-app/4-keeping-score.html
@@ -54,8 +54,9 @@ <h3>Making the Game More Challenging</h3>
         <div class="forYouToDo">
             <ol start="5">
                 <li>Figure out where to add a <code>change (ghost) effect by (-5)</code> block to your script to make Alonzo get less transparent any time he moves <em>without</em> being clicked. </li>
-                <li>Play your game a few times, and adjust your code to get a level of difficulty that you like.</li>
-                <div class="endnote">You can change the <code>change effect</code> input number (for either instance of the block) and/or the <code>wait</code> time to make the game easier or harder.</div>
+                <li>Play your game a few times, and adjust your code to get a level of difficulty that you like.
+                     <div class="endnote">You can change the <code>change effect</code> input number (for either instance of the block) and/or the <code>wait</code> time to make the game easier or harder.</div>
+                </li>
             </ol>
         </div>
 

From ddc1d80a5556ae9b20bb471882b57e919f35ff03 Mon Sep 17 00:00:00 2001
From: jkangEDC <jkang@edc.org>
Date: Wed, 18 Sep 2024 13:25:49 -0400
Subject: [PATCH 21/29] A11y - U1L2 list edits - both en & es

---
 .../2-gossip-and-greet/2-gossip.es.html       | 28 ++++++++-------
 .../2-gossip-and-greet/2-gossip.html          | 30 ++++++++--------
 .../2-gossip-and-greet/3-customizing.es.html  | 36 ++++++++++---------
 .../2-gossip-and-greet/3-customizing.html     | 16 +++++----
 .../4-making-a-new-block.es.html              | 35 +++++++++---------
 .../4-making-a-new-block.html                 | 20 ++++++-----
 .../2-gossip-and-greet/5-if-else.es.html      | 10 +++---
 .../2-gossip-and-greet/5-if-else.html         |  8 +++--
 8 files changed, 100 insertions(+), 83 deletions(-)

diff --git a/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html b/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html
index b746ea453..2518e7f3a 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html
@@ -20,8 +20,9 @@ <h2>Hacer que los programas hablen</h2>
         <h3>Explorar bloques personalizados</h3>
         <div class="forYouToDo" id="first">
             <ol>
-                <li><a href="/bjc-r/prog/1-introduction/U1L2-Gossip.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a></li>
-                <div class="endnote">Debes tener una sesión iniciada en tu cuenta de Snap! para guardar tu trabajo. Para revisar cómo iniciar sesión, visita la página <a href="/bjc-r/cur/programming/1-introduction/1-building-an-app/1-creating-a-snap-account.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment#login" title="Primeros pasos con Snap!">Unidad 1 Laboratorio 1 Página 1: Primeros pasos con Snap<em>!</em></a> </div>
+                <li><a href="/bjc-r/prog/1-introduction/U1L2-Gossip.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a>
+                    <div class="endnote">Debes tener una sesión iniciada en tu cuenta de Snap! para guardar tu trabajo. Para revisar cómo iniciar sesión, visita la página <a href="/bjc-r/cur/programming/1-introduction/1-building-an-app/1-creating-a-snap-account.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment#login" title="Primeros pasos con Snap!">Unidad 1 Laboratorio 1 Página 1: Primeros pasos con Snap<em>!</em></a> </div>
+                </li>
                 <li>Realiza cada experimento (A-D), presionando cada bloque varias veces.</li>
                 <li>
                     <img class="inline" src="/bjc-r/img/icons/talk-with-your-partner.es.png" alt="Habla con tu compañero" title="Habla con tu compañero" />
@@ -82,18 +83,19 @@ <h3>Explorar con un segundo personaje<a name="second" class="anchor">&nbsp;</a><
                 </li>
                 <li>
                     Programa el código para que el objeto Sprite(2)/Objeto(2) le diga al objeto que responda. ¿Qué sucede?
+                
+                    <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Es momento de guardar tu trabajo" title="Es momento de guardar tu trabajo" />
+                    <div class="endnote">
+                        <p>
+                            El bloque <code>enviar mensaje</code> se encarga de comunicar un mensaje a todos los objetos. Para definir un mensaje haz clic en la flecha de opciones desplegable y selecciona "nuevo mensaje..."<br />
+                            <img class="indent" src="/bjc-r/img/1-introduction/broadcast-dropdown.es.png" alt="bloque de enviar mensaje con un menú de dos opciones: tu turno, nuevo mensaje..." title="bloque de enviar mensaje con un menú de dos opciones: tu turno, nuevo mensaje..." />
+                        </p>
+                        <p>
+                            Para más información acerca del bloque <code>cuando me llegue</code>, haz clic con el botón derecho en el bloque (o control-clic en una Mac) y selecciona la opción "ayuda...".<br />
+                            <img class="indent" src="/bjc-r/img/1-introduction/when-i-receive-dropdown.es.png" alt="clic con el botón derecho en el bloque cuando me llegue para mostrar menú de cuatro opciones: ayuda..., duplicar, eliminar, imagen de programa..." title="clic con el botón derecho en el bloque cuando me llegue para mostrar menú de cuatro opciones: ayuda..., duplicar, eliminar, imagen de programa..." />
+                        </p>
+                    </div>
                 </li>
-                <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Es momento de guardar tu trabajo" title="Es momento de guardar tu trabajo" />
-                <div class="endnote">
-                    <p>
-                        El bloque <code>enviar mensaje</code> se encarga de comunicar un mensaje a todos los objetos. Para definir un mensaje haz clic en la flecha de opciones desplegable y selecciona "nuevo mensaje..."<br />
-                        <img class="indent" src="/bjc-r/img/1-introduction/broadcast-dropdown.es.png" alt="bloque de enviar mensaje con un menú de dos opciones: tu turno, nuevo mensaje..." title="bloque de enviar mensaje con un menú de dos opciones: tu turno, nuevo mensaje..." />
-                    </p>
-                    <p>
-                        Para más información acerca del bloque <code>cuando me llegue</code>, haz clic con el botón derecho en el bloque (o control-clic en una Mac) y selecciona la opción "ayuda...".<br />
-                        <img class="indent" src="/bjc-r/img/1-introduction/when-i-receive-dropdown.es.png" alt="clic con el botón derecho en el bloque cuando me llegue para mostrar menú de cuatro opciones: ayuda..., duplicar, eliminar, imagen de programa..." title="clic con el botón derecho en el bloque cuando me llegue para mostrar menú de cuatro opciones: ayuda..., duplicar, eliminar, imagen de programa..." />
-                    </p>
-                </div>
             </ol>
         </div>
 
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.html b/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.html
index f866df3a1..c1a9c6464 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.html
@@ -19,8 +19,9 @@ <h2>Making Programs Talk</h2>
         <h3>Exploring Custom Blocks</h3>
         <div class="forYouToDo" id="first">
             <ol>
-                <li><a href="/bjc-r/prog/1-introduction/U1L2-Gossip.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load a starter project. Then save it." title="Click here to load a starter project. Then save it."></a></li>
-                <div class="endnote">You'll need to be logged in to save to your account. You may wish to review how to log in at <a href="/bjc-r/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment#login" title="Unit 1 Lab 1 Page 2: Saving Snap! Projects">Unit 1 Lab 1 Page 2: Saving Snap<em>!</em> Projects</a> </div>
+                <li><a href="/bjc-r/prog/1-introduction/U1L2-Gossip.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load a starter project. Then save it." title="Click here to load a starter project. Then save it."></a>
+                     <div class="endnote">You'll need to be logged in to save to your account. You may wish to review how to log in at <a href="/bjc-r/cur/programming/1-introduction/1-building-an-app/2-creating-a-snap-account.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment#login" title="Unit 1 Lab 1 Page 2: Saving Snap! Projects">Unit 1 Lab 1 Page 2: Saving Snap<em>!</em> Projects</a> </div>
+                </li>
                 <li>Perform each experiment (A-D) several times.</li>
                 <li>
                     <img class="inline" src="/bjc-r/img/icons/talk-with-your-partner.png" alt="Talk with Your Partner" title="Talk with Your Partner" />
@@ -35,7 +36,6 @@ <h3>Exploring Custom Blocks</h3>
                             What happens when you click this script (labeled D)?<br />
                             <img class="indent" src="/bjc-r/img/1-introduction/say-broadcast.png" alt="say (gossip) broadcast (your turn)" title="say (gossip) broadcast (your turn)" />
                         </li>
-
                     </ul>
                 </li>
             </ol>
@@ -83,20 +83,22 @@ <h3>Exploring a Second Sprite<a name="second" class="anchor">&nbsp;</a></h3>
                 <li>
                     <img class="imageRight" src="/bjc-r/img/icons/save-now.png" alt="Save your work" title="Save your work" />
                     Make Sprite(2) tell Sprite to respond. What happens?
+               
+                    <div id="broadcast">&nbsp;</div>
+                    <div class="endnote">
+                        <p>
+                            The <code>broadcast</code><!--class="index-term anchor"--><!--<img class="inline nopadtb" src="/bjc-r/img/blocks/broadcast.png" alt="broadcast ()" title="broadcast ()" />--> block sends a message to all the sprites. To set the message, click the down arrow and select "new..."<br />
+                            <img class="indent" src="/bjc-r/img/1-introduction/broadcast-dropdown.png" alt="broadcast block with menu open showing two options: your turn, new..." title="broadcast block with menu open showing two options: your turn, new..." />
+                        </p>
+                        <p>
+                            For more information about the <code>when I receive</code> block, right-click (or control-click on a Mac) the block and select "help..."<br />
+                            <img class="indent" src="/bjc-r/img/1-introduction/when-i-receive-dropdown.png" alt="when I receive block with right-click menu open showing four options: help..., duplicate, delete, script pic..." title="when I receive block with right-click menu open showing four options: help..., duplicate, delete, script pic..." />
+                        </p>
+                    </div>
                 </li>
 
 				<!--<div class="index-term anchor" id="when I receive</code>">&nbsp;</div>-->
-				<div id="broadcast">&nbsp;</div>
-                <div class="endnote">
-                    <p>
-                        The <code>broadcast</code><!--class="index-term anchor"--><!--<img class="inline nopadtb" src="/bjc-r/img/blocks/broadcast.png" alt="broadcast ()" title="broadcast ()" />--> block sends a message to all the sprites. To set the message, click the down arrow and select "new..."<br />
-                        <img class="indent" src="/bjc-r/img/1-introduction/broadcast-dropdown.png" alt="broadcast block with menu open showing two options: your turn, new..." title="broadcast block with menu open showing two options: your turn, new..." />
-                    </p>
-                    <p>
-                        For more information about the <code>when I receive</code> block, right-click (or control-click on a Mac) the block and select "help..."<br />
-                        <img class="indent" src="/bjc-r/img/1-introduction/when-i-receive-dropdown.png" alt="when I receive block with right-click menu open showing four options: help..., duplicate, delete, script pic..." title="when I receive block with right-click menu open showing four options: help..., duplicate, delete, script pic..." />
-                    </p>
-                </div>
+				
             </ol>
         </div>
 
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
index c0dcb6924..3a3dad2a0 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html
@@ -48,32 +48,34 @@ <h3 class="box-head">¿Cómo editar un bloque?</h3>
 
 		<div class="vocabFullWidth">: <strong>Listas</strong>, <strong>cadenas</strong> y <strong>concatenación</strong>
 			<ul>
-				<div class="ap-standard">AAP-1.C.1 first sentence</div>
-				<div class="sidenoteBig">
-					<a href="#ordered" data-toggle="collapse" title="¿Qué significa 'ordenado'?">¿Qué significa "ordenado?"</a>
-					<div id="ordered" class="collapse">
-						No quiere decir que los elementos tienen que aparecer en orden alfabético
-						o numérico.  Solo significa que
-						<img src="/bjc-r/img/1-introduction/list-a-b.es.png" alt="(lista a b)" title="(lista a b)">
-						es una lista diferente a
-						<img src="/bjc-r/img/1-introduction/list-b-a.es.png" alt="(lista b a)" title="(lista b a)">.
-					</div>
-				</div>
+				
 				<li>
+                    <div class="ap-standard">AAP-1.C.1 first sentence</div>
+                    <div class="sidenoteBig">
+                        <a href="#ordered" data-toggle="collapse" title="¿Qué significa 'ordenado'?">¿Qué significa "ordenado?"</a>
+                        <div id="ordered" class="collapse">
+                            No quiere decir que los elementos tienen que aparecer en orden alfabético
+                            o numérico.  Solo significa que
+                            <img src="/bjc-r/img/1-introduction/list-a-b.es.png" alt="(lista a b)" title="(lista a b)">
+                            es una lista diferente a
+                            <img src="/bjc-r/img/1-introduction/list-b-a.es.png" alt="(lista b a)" title="(lista b a)">.
+                        </div>
+                    </div>
 					Una <strong>lista</strong> (<em>list</em>) es un conjunto ordenado de elementos. Ya has visto una en el siguiente ejemplo:<br />
 					<img class="indent" src="/bjc-r/img/1-introduction/list-from-who-result.es.png" alt="lista{Señora, Sra. C, mi gato, Hannah, Jake}" title="lista{Señora, Sra. C, mi gato, Hannah, Jake}" />
-				</li>
-				<div class="ap-standard">AAP-2.D.1, AAP-2.D.2</div>
-				<li>Los elementos en esta lista son <em>cadenas</em>. Una <strong>cadena</strong> (<em>string</em>) es una secuencia de caracteres (letras, dígitos, signos de puntuación, etc.). Una <strong>sub-cadena</strong> (<em>substring</em>) es sub-conjunto de una cadena existente. Por ejemplo: "Hanna," "anna", y "nnah" son cada una de ellas sub-cadenas de la cadena madre "Hannah." (Ten en cuenta que la cadena vacía, y la cadena original, son también sub-cadenas de la cadena madre.)</li>
+                </li>
+				<li>
+                    <div class="ap-standard">AAP-2.D.1, AAP-2.D.2</div>
+                    Los elementos en esta lista son <em>cadenas</em>. Una <strong>cadena</strong> (<em>string</em>) es una secuencia de caracteres (letras, dígitos, signos de puntuación, etc.). Una <strong>sub-cadena</strong> (<em>substring</em>) es sub-conjunto de una cadena existente. Por ejemplo: "Hanna," "anna", y "nnah" son cada una de ellas sub-cadenas de la cadena madre "Hannah." (Ten en cuenta que la cadena vacía, y la cadena original, son también sub-cadenas de la cadena madre.)</li>
 				<li><strong>Concatenar</strong> (<em>concatenate</em>) cadenas significa hacer más grande una cadena mediante la conexión de dos o más cadenas. En Snap<em>!</em>, el bloque <img class="inline nopadtb" src="/bjc-r/img/blocks/join()().es.png" alt="unir () ()" title="unir () ()" /> es utilizado para concatenar cadenas.</li>
 			</ul>
 		</div>
 
 		<div class="forYouToDo">
-			<ol start="2">
-				<div class="vocabBig">
+			<div class="vocabBig">
 					<p>El proceso de probar, buscar problemas y arreglarlos se llama <strong>depuración</strong> (<em>debugging</em>). Utilizaremos también el término en inglés, <em>debugging</em>, que viene de la palabra "bug" o "error" y representa la acción de buscar errores en nuestro programa.</p>
-				</div>
+            </div>
+            <ol start="2">
 				<li>
 					Debes asegurarte que tu programa funciona. Prueba cada bloque de forma individual y también el programa completo en su conjunto. En el caso que algo no funcione, no debes seguir adelante hasta resolverlo.<br />
 					<img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" />
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
index 5e7931e7d..57e2ae5a3 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html
@@ -54,9 +54,10 @@ <h3 class="box-head">How to Edit a Block</h3>
         <div class="vocabFullWidth">: <strong>Lists</strong>, <strong>Strings</strong>, and <strong>Concatenation</strong>
             <ul>
 				<!--<div class="index-term" id="report</code>"></div>-->
-                <div class="ap-standard">AAP-1.C.1 first sentence</div>
+                
                 <li>
-					<div class="sidenoteBig">
+					<div class="ap-standard">AAP-1.C.1 first sentence</div>
+                    <div class="sidenoteBig">
 						<a href="#ordered" data-toggle="collapse" title="What does 'ordered' mean?">What does "ordered" mean?</a>
 						<div id="ordered" class="collapse">
 							It doesn't mean that the items have to appear in alphabetical
@@ -69,8 +70,9 @@ <h3 class="box-head">How to Edit a Block</h3>
                     A <strong>list</strong> is an ordered sequence of items. You've seen this example:<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/list-from-who-result.png" alt="list{Senora, Ms. C, my cat, Hannah, Jake}" title="list{Senora, Ms. C, my cat, Hannah, Jake}" />
                 </li>
-                <div class="ap-standard">AAP-2.D.1, AAP-2.D.2</div>
-                <li>The items of this list are <em>strings</em>. A <strong>string</strong> is a sequence of characters (letters, digits, punctuation, etc.). A <strong>substring</strong> is just a piece of some existing string. For example, "Hanna," "anna", and "nnah" are each substrings of the string "Hannah." (The empty string as well as the original string are both also substrings.)</li>
+                <li>
+                    <div class="ap-standard">AAP-2.D.1, AAP-2.D.2</div>
+                    The items of this list are <em>strings</em>. A <strong>string</strong> is a sequence of characters (letters, digits, punctuation, etc.). A <strong>substring</strong> is just a piece of some existing string. For example, "Hanna," "anna", and "nnah" are each substrings of the string "Hannah." (The empty string as well as the original string are both also substrings.)</li>
                 <li>To <strong>concatenate</strong> strings means to make a bigger string by connecting two or more smaller strings. In Snap<em>!</em>, the <img class="inline nopadtb" src="/bjc-r/img/blocks/join()().png" alt="join () ()" title="join () ()" /> block lets you concatenate strings.</li>
             </ul>
         </div>
@@ -78,10 +80,10 @@ <h3 class="box-head">How to Edit a Block</h3>
         <div class="forYouToDo">
 			<!--<div class="index-term" id="list</code>"></div>
 			<div class="index-term" id="join</code>"></div>-->
-            <ol start="2">
-                <div class="vocabBig">
+            <div class="vocabBig">
                     <p>The process of testing, finding problems, and fixing them is called <strong>debugging</strong>.</p>
-                </div>
+            </div>
+            <ol start="2">
                 <li>
                 	Make sure your program works. Test each block as well as the program as a whole. If something doesn't work, don't go on without fixing it.<br />
 	                <img class="inline" src="/bjc-r/img/icons/save-now.png" alt="Save your work" title="Save your work" />
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html b/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html
index cdeb65162..fc2f668c9 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html
@@ -24,12 +24,12 @@ <h2>Crear un bloque personalizado</h2>
 
             <div class="narrower">
                 <h3 class="box-head">Crear un nuevo bloque</h3>
+                    <img class="indent noshadow" src="/bjc-r/img/1-introduction/make-a-block-labeled.es.png" alt="imagen de la pantalla 'Crea un bloque' con la paleta de los 10 menús (Movimiento, Apariencia, Sonido, Lápiz, Listas, Control, Sensores, Operadores, Variables, Otros) con los siguientes textos: 'Elige un color (una paleta)' y 'Escribe un título para tu bloque'; tres opciones en forma de bloque (en forma de rompecabezas/'Comando', óvalo/'Reportero', y hexagonal/'Predicado'), texto: 'Selecciona la forma'; dos botones de selección (para todos los objetos, que está seleccionado, y solo para este objeto, que no está seleccionado) sin etiqueta; y dos botones (Aceptar y Cancelar) con el texto 'Haz clic en Cancelar'" title="imagen de la pantalla 'Crea un bloque' con la paleta de los 10 menús (Movimiento, Apariencia, Sonido, Lápiz, Listas, Control, Sensores, Operadores, Variables, Otros) con los siguientes textos: 'Elige un color (una paleta)' y 'Escribe un título para tu bloque'; tres opciones en forma de bloque (en forma de rompecabezas/'Comando', óvalo/'Reportero', y hexagonal/'Predicado'), texto: 'Selecciona la forma'; dos botones de selección (para todos los objetos, que está seleccionado, y solo para este objeto, que no está seleccionado) sin etiqueta; y dos botones (Aceptar y Cancelar) con el texto 'Haz clic en Cancelar'" />
                 <ol type="a">
-                    <img class="imageRight noshadow" src="/bjc-r/img/1-introduction/make-a-block-labeled.es.png" alt="imagen de la pantalla 'Crea un bloque' con la paleta de los 10 menús (Movimiento, Apariencia, Sonido, Lápiz, Listas, Control, Sensores, Operadores, Variables, Otros) con los siguientes textos: 'Elige un color (una paleta)' y 'Escribe un título para tu bloque'; tres opciones en forma de bloque (en forma de rompecabezas/'Comando', óvalo/'Reportero', y hexagonal/'Predicado'), texto: 'Selecciona la forma'; dos botones de selección (para todos los objetos, que está seleccionado, y solo para este objeto, que no está seleccionado) sin etiqueta; y dos botones (Aceptar y Cancelar) con el texto 'Haz clic en Cancelar'" title="imagen de la pantalla 'Crea un bloque' con la paleta de los 10 menús (Movimiento, Apariencia, Sonido, Lápiz, Listas, Control, Sensores, Operadores, Variables, Otros) con los siguientes textos: 'Elige un color (una paleta)' y 'Escribe un título para tu bloque'; tres opciones en forma de bloque (en forma de rompecabezas/'Comando', óvalo/'Reportero', y hexagonal/'Predicado'), texto: 'Selecciona la forma'; dos botones de selección (para todos los objetos, que está seleccionado, y solo para este objeto, que no está seleccionado) sin etiqueta; y dos botones (Aceptar y Cancelar) con el texto 'Haz clic en Cancelar'" />
                     <li>
-                        Para crear un nuevo bloque tienes tres opciones: La primera es hacer clic en el botón <img class="inline" src="/bjc-r/img/1-introduction/make-a-block.es.png" height= 50px alt="botón crear bloque" title="botón crear bloque" /> que se encuentra al final de la paleta de funciones en el lado izquierdo de la pantalla. La segunda opción es hacer clic en el botón <b>+</b> en la esquina superior derecha de la paleta de funciones (como se muestra en la figura más abajo). La tercera opción es hacer clic con el botón derecho (o control-clic en Mac) en un espacio vacío en el área de trabajo y luego seleccionando la opción "crear bloque..." (ver toma de pantalla abajo).<br />
-                        <img class="indent" src="/bjc-r/img/1-introduction/plus-sign.es.png" height= 100px alt="signo de suma encima de la paleta" title="signo de suma encima de la paleta" />
-                        <img class="indent" src="/bjc-r/img/1-introduction/make-a-block.es.jpg" height= 100px alt="opción de crear un bloque" title="opción de crear un bloque" />
+                        Para crear un nuevo bloque tienes tres opciones: La primera es hacer clic en el botón <img class="inline" src="/bjc-r/img/1-introduction/make-a-block.es.png" height="50px" alt="botón crear bloque" title="botón crear bloque" /> que se encuentra al final de la paleta de funciones en el lado izquierdo de la pantalla. La segunda opción es hacer clic en el botón <b>+</b> en la esquina superior derecha de la paleta de funciones (como se muestra en la figura más abajo). La tercera opción es hacer clic con el botón derecho (o control-clic en Mac) en un espacio vacío en el área de trabajo y luego seleccionando la opción "crear bloque..." (ver toma de pantalla abajo).<br />
+                        <img class="indent" src="/bjc-r/img/1-introduction/plus-sign.es.png" height="100px" alt="signo de suma encima de la paleta" title="signo de suma encima de la paleta" />
+                        <img class="indent" src="/bjc-r/img/1-introduction/make-a-block.es.jpg" height="100px" alt="opción de crear un bloque" title="opción de crear un bloque" />
                     </li>
                     <li><strong>Debes seleccionar un color</strong> de acuerdo con la categoría de la funcionalidad.</li>
                     <li><strong>Debes escribir el título </strong> del bloque: <code>respuesta de chisme</code>.</li>
@@ -83,8 +83,8 @@ <h3 class="box-head">Codificar el nuevo bloque</h3>
         </div>
 
         <div class="examFullWidth">
-            <ul>
-                <div class="ap-standard">AAP-3.A.7, AAP-3.C.2</div>
+            <div class="ap-standard">AAP-3.A.7, AAP-3.C.2</div>
+            <ul>   
                 <li>
                     El procedimiento <img class="inline" src="/bjc-r/img/1-introduction/double-block-definition.es.png" alt="doble número
 {
@@ -104,19 +104,21 @@ <h3 class="box-head">Codificar el nuevo bloque</h3>
 }" />.
                     <p>Varios lenguajes de programación (y la notación del AP CS Principles Exam) usan la palabra <code>return</code> (devolver) en lugar de <code>report</code> (reportar) para representar el comando para retornar un valor al final de la llamada de una función.</p>
                 </li>
-                <div class="ap-standard">AAP-3.A.9</div>
-                <li>Se utiliza el término "valor de un procedimiento" para representar el valor de retorno cuando el mismo es llamado. Por ejemplo, "el valor de <pre class="inline">doble(5)</pre>" es 10.</li>
+                <li>Se utiliza el término "valor de un procedimiento" para representar el valor de retorno cuando el mismo es llamado. Por ejemplo, "el valor de <pre class="inline">doble(5)</pre>" es 10.
+                    <div class="ap-standard">AAP-3.A.9</div>
+                </li>
             </ul>
         </div>
 
 
         <h3>Depuración (<em>debugging</em>)</h3>
         <div class="forYouToDo">
-			<ol start="3">
-                <img class="imageRight" src="/bjc-r/img/icons/pair-programming-swap.es.png" alt="Intercambio de pareja de programación" title="Intercambio de pareja de programación" />
+            <img class="imageRight" src="/bjc-r/img/icons/pair-programming-swap.es.png" alt="Intercambio de pareja de programación" title="Intercambio de pareja de programación" />
+            <ol start="3">
                 <li>Prueba el nuevo bloque personalizado <code>respuesta de chisme</code> haciendo clic sobre él varias veces. Debe comportarse de la misma forma que lo hacen los bloques <code>quién</code>, <code>hace</code>, y <code>quién2</code>.</li>
-                <li>Depura cualquier problema antes de seguir adelante.</li>
-                <div class="sidenote">Recuerda cómo editar un bloque en <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Personalizar y depurar errores (<em>debugging</em>)">Unidad 1 Laboratorio 2 Página 2: Personalizar y depuración errores (<em>debugging</em>)</a>.</div>
+                <li>Depura cualquier problema antes de seguir adelante.
+                    <div class="sidenote">Recuerda cómo editar un bloque en <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Personalizar y depurar errores (<em>debugging</em>)">Unidad 1 Laboratorio 2 Página 2: Personalizar y depuración errores (<em>debugging</em>)</a>.</div>
+                </li>
                 <li>
                     Usa el nuevo bloque: Edita el código de <code>chisme 2</code> e inserta el bloque  <code>respuesta de chisme</code> en lugar del texto "Ahh, pero...."<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/gossip2-definition.es.png" alt="chisme 2 {
@@ -124,14 +126,15 @@ <h3>Depuración (<em>debugging</em>)</h3>
 }" title="chisme 2 {
     reportar (unir (respuesta de chisme) ( ) (quién2) ( ) (hace) ( ) (quién) )
 }" />
-                </li>
                 <div class="endnote">
                     <p><a href="#hint-plus-signs" data-toggle="collapse" title="¿Por qué veo signos de suma alrededor de chisme 2 en Snap! que no aparecen en esta imagen?">¿Por qué veo signos de suma alrededor de <code>chisme 2</code> en Snap<em>!</em> que no aparecen en esta imagen?</a></p>
                     <div id="hint-plus-signs" class="collapse">Normalmente, cuando usas el editor de bloques, ves signos de suma porque tienes que hacer clic sobre ellos para añadir entradas a tus bloques. Sin embargo, para mostrar el código final aquí, resulta más limpio hacerlo sin los signos de sumar.</div>
-            </div>
+                </div>
+                </li>
                 <li>Realiza pruebas y depura el código de <code>chisme 2</code>.</li>
-                <li>Luego prueba el programa completo haciendo clic en la secuencia D varias veces, y luego arregla cualquier incidencia detectada.</li>
-                <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" />
+                <li>Luego prueba el programa completo haciendo clic en la secuencia D varias veces, y luego arregla cualquier incidencia detectada.
+                    <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" />
+                </li>
             </ol>
         </div>
 
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html b/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html
index 0bf960dca..1447322aa 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html
@@ -27,8 +27,8 @@ <h2>Making Your Own Block</h2>
 
             <div class="narrower">
                 <h3 class="box-head">Making a New Block</h3>
-                <ol type="a">
                        <img class="indent noshadow" src="/bjc-r/img/1-introduction/make-a-block-labeled.png" alt="image of 'Make a block' dialog box with 10 palette menus (Motion, Looks, Pen, Sound, Lists, Control, Sensing, Operation, Variables, Other) labeled 'Choose a color (a palette)'; a text box labeled 'Type a title for your block.'; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.'; two radio boxes (for all sprites, which is checked, and for this sprite only, which is not checked) with no label; and two buttons ('OK' and 'Cancel') labeled 'Click OK.'" title="image of 'Make a block' dialog box with 10 palette menus (Motion, Looks, Pen, Sound, Lists, Control, Sensing, Operation, Variables, Other) labeled 'Choose a color (a palette)'; a text box labeled 'Type a title for your block.'; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.'; two radio boxes (for all sprites, which is checked, and for this sprite only, which is not checked) with no label; and two buttons ('OK' and 'Cancel') labeled 'Click OK.'" />
+                <ol type="a">
                     <li>
                         Create a new block by either clicking <img class="inline" src="/bjc-r/img/1-introduction/make-a-block.png" alt="make a block button" title="make a block button" /> near the end of the palette, clicking the <b>+</b> sign in the top right corner of the palette (shown below), or right-clicking (or control-clicking on a Mac) in an empty spot in the scripting area and choosing "make a block..." (shown below).<br />
                         <img class="indent" src="/bjc-r/img/1-introduction/plus-sign.png" alt="plus sign atop palette" title="plus sign atop palette" />
@@ -87,8 +87,8 @@ <h3 class="box-head">Coding the Block's Script</h3>
         </div>
 
         <div class="examFullWidth">
+            <div class="ap-standard">AAP-3.A.7, AAP-3.C.2</div>
             <ul>
-                <div class="ap-standard">AAP-3.A.7, AAP-3.C.2</div>
                 <li>
                     The procedure <img class="inline" src="/bjc-r/img/1-introduction/double-block-definition.png" alt="PROCEDURE double (x)
 {
@@ -108,18 +108,20 @@ <h3 class="box-head">Coding the Block's Script</h3>
 }" />.
                     <p>Many languages (and the AP CS Principles Exam) use <code>return</code> instead of <code>report</code> as the name of the command to give a value back at the end of a function call.</p>
                 </li>
-                <div class="ap-standard">AAP-3.A.9</div>
-                <li>The exam uses "value of a procedure" to mean the value the procedure returns when called. For example, "the value of <pre class="inline">double(5)</pre>" means 10.</li>
+                <li>The exam uses "value of a procedure" to mean the value the procedure returns when called. For example, "the value of <pre class="inline">double(5)</pre>" means 10.
+                    <div class="ap-standard">AAP-3.A.9</div>
+                </li>
             </ul>
         </div>
 
 
         <h3>Debugging</h3>
         <div class="forYouToDo">
-			<ol start="3">
-                <img class="imageRight" src="/bjc-r/img/icons/pair-programming-swap.png" alt="Pair Programming Swap" title="Pair Programming Swap" />
-                <li>Test your custom <code>gossip response</code> block by clicking it several times. It should behave like the <code>who</code>, <code>does what</code>, and <code>who 2</code> blocks. Debug any problems before moving on.</li>
-                <div class="sidenote">Review how to edit a block in <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Customizing and Debugging">Unit 1 Lab 2 Page 2: Customizing and Debugging</a>, if needed.</div>
+			<img class="imageRight" src="/bjc-r/img/icons/pair-programming-swap.png" alt="Pair Programming Swap" title="Pair Programming Swap" />
+            <ol start="3">    
+                <li>Test your custom <code>gossip response</code> block by clicking it several times. It should behave like the <code>who</code>, <code>does what</code>, and <code>who 2</code> blocks. Debug any problems before moving on.
+                    <div class="sidenote">Review how to edit a block in <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/3-customizing.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Customizing and Debugging">Unit 1 Lab 2 Page 2: Customizing and Debugging</a>, if needed.</div>
+                </li>
                 <li>
                     Use your new block: Edit <code>gossip 2</code>, and insert  <code>gossip response</code> in place of the text "Oh, but...."<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/gossip2-definition.png" alt="gossip 2 {
@@ -127,11 +129,11 @@ <h3>Debugging</h3>
 }" title="gossip 2 {
     report (join (gossip response) ( ) (who 2) ( ) (does what) ( ) (who) )
 }" />
-                </li>
                 <div class="endnote">
                         <p><a href="#hint-plus-signs" data-toggle="collapse" title="Why do I see plus signs around gossip2 in Snap! but they're not in this picture?">Why do I see plus signs around <code>gossip 2</code> in Snap<em>!</em> but they're not in this picture?</a></p>
                         <div id="hint-plus-signs" class="collapse">Normally, when you are using the Block Editor, you see plus signs because you have to click on them to add inputs to your blocks. But to show you the finished code here, it looks cleaner without the plus signs.</div>
                 </div>
+                </li>
                 <li>Test and debug <code>gossip 2</code> also.</li>
                 <li>
                     Then test the whole program by clicking script D several times, and fix any bugs.
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.es.html b/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.es.html
index bd740f149..12226d47c 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.es.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.es.html
@@ -238,8 +238,9 @@ <h2>Agregar variedad a <code>chisme</code></h2>
                 </li>
 
                 <li>Crea un nuevo bloque llamado <img class="inline nopadtb" src="/bjc-r/img/1-introduction/complicated-gossip.es.png" alt="chisme complicado" title="chisme complicado" /> que sea similar a <code>chisme</code> pero que use el bloque <code>más complicado quién</code> en lugar de <code>quién</code>. (Puedes elegir para sustituir cualquiera de los dos bloques <code>quién</code>, o bien reemplazar ambos) </li>
-                <li>Cambia el guion para que el objeto use <code>chisme complicado</code> en lugar de <code>chisme</code>. Ejecuta el código y arregla cualquier posible problema.</li>
-                <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Ahora es un buen momento de guardar tu trabajo" title="Ahora es un buen momento de guardar tu trabajo" />
+                <li>Cambia el guion para que el objeto use <code>chisme complicado</code> en lugar de <code>chisme</code>. Ejecuta el código y arregla cualquier posible problema.
+                    <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Ahora es un buen momento de guardar tu trabajo" title="Ahora es un buen momento de guardar tu trabajo" />
+                </li>
             </ol>
         </div>
 
@@ -247,8 +248,9 @@ <h3>Haciendo que un bloque se llame a sí mismo</h3>
         <div class="forYouToDo">
 			<ol start="8">
                 <li>Edita el código del bloque <code>más complicado quién</code>. Reemplaza <em>uno</em> de los bloques <code>quién</code> con una copia nueva del bloque <code>más complicado quién</code> luego de tomarla de la paleta de bloques. Haz clic en el bloque <code>más complicado quién</code> varias veces para ver qué ha cambiado.</li>
-                <div class="ap-standard">CRD-2.B</div>
-                <li><img class="inline" src="/bjc-r/img/icons/write-out-thoughts.es.png" alt="Anota tus pensamientos" title="Anota tus pensamientos" /> Describe los nuevos resultados al realizar el cambio y explica cuál es la razón por la que suceden. </li>
+                <li><img class="inline" src="/bjc-r/img/icons/write-out-thoughts.es.png" alt="Anota tus pensamientos" title="Anota tus pensamientos" /> Describe los nuevos resultados al realizar el cambio y explica cuál es la razón por la que suceden. 
+                    <div class="ap-standard">CRD-2.B</div>
+                </li>
 			</ol>
 		</div>
 
diff --git a/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.html b/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.html
index 624c31f3c..1b25f985d 100644
--- a/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.html
+++ b/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.html
@@ -239,8 +239,9 @@ <h2>Adding Variety to <code>Gossip</code></h2>
                 </li>
 
                 <li>Create a new block <img class="inline nopadtb" src="/bjc-r/img/1-introduction/complicated-gossip.png" alt="complicated gossip" title="complicated gossip" /> that is similar to <code>gossip</code> but that uses <code>more complicated who</code> instead of <code>who</code>. (You can choose which <code>who</code> to replace, or you could replace both.) </li>
-                <li>Change the script for Sprite to use <code>complicated gossip</code> instead of <code>gossip</code>. Run your code, and fix any problems.</li>
-                <img class="inline" src="/bjc-r/img/icons/save-now.png" alt="Save your work" title="Save your work" />
+                <li>Change the script for Sprite to use <code>complicated gossip</code> instead of <code>gossip</code>. Run your code, and fix any problems.
+                    <img class="inline" src="/bjc-r/img/icons/save-now.png" alt="Save your work" title="Save your work" />
+                </li>
             </ol>
         </div>
 
@@ -248,8 +249,9 @@ <h3>Making a Block Call Itself</h3>
         <div class="forYouToDo">
 			<ol start="8">
                 <li>Edit <code>more complicated who</code>. Replace <em>one</em> of the <code>who</code> blocks with a fresh copy of <code>more complicated who</code> that you drag in from the palette. Click <code>more complicated who</code> enough times to see how it has changed.</li>
+                <li><img class="inline" src="/bjc-r/img/icons/write-out-thoughts.png" alt="Write Out Your Thoughts" title="Write Out Your Thoughts" /> Describe the change in behavior, and explain what you think is causing it. 
                 <div class="ap-standard">CRD-2.B</div>
-                <li><img class="inline" src="/bjc-r/img/icons/write-out-thoughts.png" alt="Write Out Your Thoughts" title="Write Out Your Thoughts" /> Describe the change in behavior, and explain what you think is causing it. </li>
+                </li>
 			</ol>
 		</div>
 

From 6bab9c781aa1473acb16c812e0879aec1b737cf3 Mon Sep 17 00:00:00 2001
From: jkangEDC <jkang@edc.org>
Date: Wed, 18 Sep 2024 14:24:05 -0400
Subject: [PATCH 22/29] A11y - U1L3 list edits - both en & es

---
 .../3-drawing/1-exploring-motion.es.html      | 61 ++++++++++---------
 .../3-drawing/1-exploring-motion.html         | 59 +++++++++---------
 .../3-drawing/3-blocks-with-inputs.es.html    | 11 ++--
 .../3-drawing/3-blocks-with-inputs.html       | 11 ++--
 .../3-drawing/4-modify-your-pinwheel.es.html  | 45 +++++++-------
 .../3-drawing/4-modify-your-pinwheel.html     | 19 +++---
 .../3-drawing/5-remix-your-pinwheel.es.html   | 13 ++--
 .../3-drawing/5-remix-your-pinwheel.html      | 10 +--
 .../3-drawing/6-the-for-block.es.html         | 44 +++++++------
 .../3-drawing/6-the-for-block.html            | 61 +++++++++----------
 10 files changed, 177 insertions(+), 157 deletions(-)

diff --git a/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html b/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html
index 166575431..249dd06b6 100644
--- a/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html
+++ b/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html
@@ -47,8 +47,8 @@ <h2>Explorar el movimiento</h2>
         </div>
 
         <div class="forYouToDo" id="first">
-			<ol>
-                <div class="ap-standard">AAP-2.A, AAP-3.A part b</div>
+			<div class="ap-standard">AAP-2.A, AAP-3.A part b</div>
+            <ol>
 				<li>
                     <img class="inline" src="/bjc-r/img/icons/work-with-a-partner.es.png" alt="Trabaja con tu compañero" title="Trabaja con tu compañero" />
                     <img class="inline" src="/bjc-r/img/icons/write-out-thoughts.es.png" alt="Escribe tus ideas" title="Escribe tus ideas" />
@@ -60,10 +60,10 @@ <h2>Explorar el movimiento</h2>
                     	<li>Haz clic para ejecutar y observa qué hace el objeto. </li>
                         <li>Haz clic en el bloque <img src="/bjc-r/img/1-introduction/pen-down.es.png" alt="bajar lápiz" title="bajar lápiz"> y luego haz clic en el código para ejecutarlo de nuevo.</li>
                 	</ol>
+                    <div class="endnote">Se puede hacer clic en el bloque <code>bajar lápiz</code> (o en cualquier bloque) en la paleta de bloques que se encuentra al lado izquierdo del área de trabajo, o bien cualquier bloque dentro del área de trabajo para ejecutarlo. Si se hace clic dentro del código, el programa completo es ejecutado.</div>
                 </li>
-                <div class="endnote">Se puede hacer clic en el bloque <code>bajar lápiz</code> (o en cualquier bloque) en la paleta de bloques que se encuentra al lado izquierdo del área de trabajo, o bien cualquier bloque dentro del área de trabajo para ejecutarlo. Si se hace clic dentro del código, el programa completo es ejecutado.</div>
                 <li><img class="inline" src="/bjc-r/img/icons/talk-with-your-partner-mini.png" alt="Habla con tu compañero" title="Habla con tu compañero"> Analiza <em>por qué</em> el código hace lo que se muestra en pantalla.</li>
-                <li><img class="inline" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Habla con otra pareja" title="Hbla con otra pareja" />Compara tu trabajo con otro compañero. En el caso que tu código se comporte de forma diferente, revisa ambos.</li>
+                <li><img class="inline" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Habla con otra pareja" title="Hbla con otra pareja" />Compara tu trabajo con otro compañero. En el caso que tu código se comporte de forma diferente, revisa ambos.
                 <div class="takeNote">
                     <h3 class="box-head">Usar pasos visibles</h3>
                     <p>Snap<em>!</em> cuenta con una herramienta llamada <strong>Pasos visibles</strong>, que permite controlar la velocidad de ejecución de los bloques dentro del código. </p>
@@ -89,17 +89,19 @@ <h3 class="box-head">Usar pasos visibles</h3>
                     </ul>
                     <p>Usar Pasos visibles es de utilidad si se necesita analizar el código de alguien más ya que es posible ver la ejecución en velocidad humana en lugar de velocidad de máquina. Es una funcionalidad muy útil para la depuración (<em>debugging</em>) cuando se busca identificar qué va mal en nuestro código.</p>
                 </div>
+                </li>
                 <li>
                     <img class="inline" src="/bjc-r/img/icons/pair-programming-swap-mini.png" alt="Intercambio de parejas" title="Intercambio de parejas" /> Intercambia los puestos si trabajas en pareja. Luego realiza el siguiente experimento:<br />
-                    <ol>
                         <div class="sidenote">Se puede colocar el objeto en el centro del escenario con el bloque <img class="inline" src="/bjc-r/img/blocks/go-to-x-y-0-0.es.png" alt="ir a x: (0) y: (0)" title="ir a x: (0) y: (0)" /> y se puede restablecer la dirección a la que apunta con el bloque <img class="inline" src="/bjc-r/img/blocks/point-in-direction-90.es.png" alt="apuntar en dirección (90)" title="apuntar en dirección (90)" />.</div>
+                    <ol>
                         <li>Cambia el valor 100 por 50 en el bloque <code>mover</code> haciendo clic en 100 y escribiendo 50 en su lugar. Luego haz clic en el código de nuevo para ejecutarlo con el nuevo valor.</li>
                         <li>Haz clic en el bloque <img class="inline" src="/bjc-r/img/blocks/clear-full-size.es.png"  alt="quitar" title="quitar" /> en la paleta de bloques: "Lápiz".</li>
                         <li>Cambia el número en el bloque <code>girar</code> y ejecuta el programa otra vez... y otra... y otra más.</li>
                         <li><code>Limpia</code> el escenario de nuevo, ahora cambia el número en el bloque repetir. <img class="inline" src="/bjc-r/img/1-introduction/repeat-4.es.png" alt="repetir (4){}" title="repetir (4){}" /></li>
                         <li>Experimenta con los valores en los bloques <code>girar</code> y <code>repetir</code>. Intenta dibujar un triángulo con los tres lados iguales.</li>
-                        <li> Usa el bloque <span class="center"><img class="inline" src="/bjc-r/img/blocks/set-pen-size-to-blank.es.png" alt="fijar tamaño de lápiz a ()" title="fijar tamaño de lápiz a ()" /></span> para ajustar el tamaño del lápiz a diferentes valores como 4, 10 o 50. Luego haz clic de nuevo en los bloques <code>repetir</code>, <code>mover</code>, <code>girar</code>. </li>
-                        <div class="endnote">Para cambiar el tamaño del lápiz se debe hacer <em>clic</em> en el bloque <code>cambiar tamaño del lápiz</code>.</div>
+                        <li> Usa el bloque <span class="center"><img class="inline" src="/bjc-r/img/blocks/set-pen-size-to-blank.es.png" alt="fijar tamaño de lápiz a ()" title="fijar tamaño de lápiz a ()" /></span> para ajustar el tamaño del lápiz a diferentes valores como 4, 10 o 50. Luego haz clic de nuevo en los bloques <code>repetir</code>, <code>mover</code>, <code>girar</code>.
+                            <div class="endnote">Para cambiar el tamaño del lápiz se debe hacer <em>clic</em> en el bloque <code>cambiar tamaño del lápiz</code>.</div>
+                        </li>
                         <li> Usa el bloque <img class="inline" src="/bjc-r/img/blocks/set-pen-color-full-size.es.png" alt="fijar tonalidad del lápiz a 'cuadrado color magenta'" title="fijar tonalidad del lápiz a 'cuadrado color magenta'" /> para experimentar con el color del lápiz.</li>
 					</ol>
 				</li>
@@ -116,8 +118,10 @@ <h3 class="box-head">Usar pasos visibles</h3>
                         <li>¿Hacer clic en el bloque <img class="inline" src="/bjc-r/img/blocks/go-to-x-y-0-0.es.png" alt="ir a x:(0) y:(0)" title="ir a x:(0) y:(0)" /> deja algún trazo?</li>
                     </ol>
                 </li>
-                <img class="imageRight" src="/bjc-r/img/1-introduction/sphere.png" height="100" alt="esfera">
-                <li>Asegúrate de guardar tu otro trabajo, luego <a href="/bjc-r/prog/1-introduction/U1L3-Sphere.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a><br />
+                
+                <li>
+                    <img class="imageRight" src="/bjc-r/img/1-introduction/sphere.png" height="100" alt="esfera">
+                    Asegúrate de guardar tu otro trabajo, luego <a href="/bjc-r/prog/1-introduction/U1L3-Sphere.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a><br />
                 Experimenta con las secuencias y mira dentro de ellas para averiguar cómo funcionan. ¿Podrías cambiar los tamaños o los colores para hacerlo más interesante?
                 </li>
             </ol>
@@ -139,30 +143,29 @@ <h3 class="box-head">Usar pasos visibles</h3>
 				<li>
                     <strong>Familias de colores.</strong> Haz clic en el ícono de Archivo en el menú y luego selecciona la opción "Bibliotecas..."  Luego busca la biblioteca titulada "Colores and Crayones" y haz clic en "Importar."<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/libs.es.png" alt='Menú de Archivo de Snap!' title='Menú de Archivo de Snap!' />
-                    <img src="/bjc-r/img/1-introduction/color-lib.es.png" alt='Cuadro de diálogo para improtar la biblioteca de "Colores y pinturas"' title='Cuadro de diálogo para improtar la biblioteca de "Colores y pinturas"'' /><br />
+                    <img src="/bjc-r/img/1-introduction/color-lib.es.png" alt='Cuadro de diálogo para improtar la biblioteca de "Colores y pinturas"' title='Cuadro de diálogo para improtar la biblioteca de "Colores y pinturas"' /><br />
                     En la paleta "Lápiz" se puede encontrar ahora el bloque <code>fijar color de lápiz a</code>.  Las computadoras pueden desplegar millones de colores, pero a menos que sea necesario hacer coincidir exáctamente con un color en específico, no hace falta complicarse por hacerlo coincidir a menos que tengas la combinación correcta. La biblioteca de colores fuciona como una caja de crayones, brinda una selección de los colores más utilizados y se encuentran clasificados en familias. De esta forma si deseas incluir una variedad de tonos marrones, selecciona un número entre 30 y 39.<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/brown.png" alt='bloque de fijar el color del lápiz con la opción de "marrones" seleccionada y que muestra un submenú donde se selecciona la opcón "34 chestnut #954535"' title='bloque de fijar el color del lápiz con la opción de "marrones" seleccionada y que muestra un submenú donde se selecciona la opcón "34 chestnut #954535"' />
 				</li>
-
-				<img class="imageRight" src="/bjc-r/img/1-introduction/1024px-Suprematist_Composition_-_Kazimir_Malevich.jpg" height="180" alt=" pintura de Malevich" title="pintura de Malevich" />
-				<li>En el lado derecho se presenta una pintura del artista Kazimir Malevich. Los elementos en la pintura son rectángulos, tanto de forma horizontal como en un ángulo de 45 grados, en ocasiones unos grados más y otras unos grados menos. Se pueden posicionar los rectángulos de forma aleatoria. El resultado de tu trabajo no necesariamente se debe ver así. Eres un artista, ¡inténtalo!
-					<div class="dialogue">
-						<div>
-							<span>Alphie:</span> Si se despliegan rectángulos de forma aleatoria, los cuadrados más grandes van a cubrir a los más pequeños. Se deberían desplegar los rectángulos grandes primero y dejar los pequeños para el final.
-						</div>
-						<div>
-							<span>Gamal:</span> Sé que nuestro trabajo no se parece a la versión original, pero me gusta la forma en que aparece el rectángulo grande de color negro. Pienso que da una estructura a la pintura, con una parte superior y una parte inferior. Me gustaría incluir uno igual en mi trabajo.
-						</div>
-						<div>
-							<span>Betty:</span> Me gusta la idea de dibujar líneas muy gruesas <em>sin</em> usar el bloque <code>punta de lápiz plana</code> y obtener resultados interesantes como aparecen a continuación:
-						</div>
-					    <img class="indent" src="/bjc-r/img/1-introduction/curl.png" alt="forma de cuerno curvado hecha de círculos superpuestos en diferentes colores" title="forma de cuerno curvado hecha de círculos superpuestos en diferentes colores" />
-                    </div>
+                <li>
+                    <img class="imageRight" src="/bjc-r/img/1-introduction/1024px-Suprematist_Composition_-_Kazimir_Malevich.jpg" height="180" alt=" pintura de Malevich" title="pintura de Malevich" />
+                    En el lado derecho se presenta una pintura del artista Kazimir Malevich. Los elementos en la pintura son rectángulos, tanto de forma horizontal como en un ángulo de 45 grados, en ocasiones unos grados más y otras unos grados menos. Se pueden posicionar los rectángulos de forma aleatoria. El resultado de tu trabajo no necesariamente se debe ver así. Eres un artista, ¡inténtalo!
+                        <div class="dialogue">
+                            <div>
+                                <span>Alphie:</span> Si se despliegan rectángulos de forma aleatoria, los cuadrados más grandes van a cubrir a los más pequeños. Se deberían desplegar los rectángulos grandes primero y dejar los pequeños para el final.
+                            </div>
+                            <div>
+                                <span>Gamal:</span> Sé que nuestro trabajo no se parece a la versión original, pero me gusta la forma en que aparece el rectángulo grande de color negro. Pienso que da una estructura a la pintura, con una parte superior y una parte inferior. Me gustaría incluir uno igual en mi trabajo.
+                            </div>
+                            <div>
+                                <span>Betty:</span> Me gusta la idea de dibujar líneas muy gruesas <em>sin</em> usar el bloque <code>punta de lápiz plana</code> y obtener resultados interesantes como aparecen a continuación:
+                            </div>
+                            <img class="indent" src="/bjc-r/img/1-introduction/curl.png" alt="forma de cuerno curvado hecha de círculos superpuestos en diferentes colores" title="forma de cuerno curvado hecha de círculos superpuestos en diferentes colores" />
+                        </div>
 				</li>
-
-                <img class="imageRight" src="/bjc-r/img/1-introduction/Theo_van_Doesburg_Composition_VII_(the_three_graces).jpg" height="130" alt="pintura de van Doesburg" title="pintura de van Doesburg" />
-				<li>
-				Hacia el lado derecho se presenta una pintura de Theo van Doesburg. Se pueden apreciar detalles en común con la pintura de Malevich, principalmente el uso de rectángulos como elementos de diseño. Sin embargo no tiene rectángulos inclinados, en su lugar se necesita que los rectángulos no estén encima unos de otros por lo que deben ser reducidos para evitar colisiones.  Se puede usar el bloque <img src="/bjc-r/img/1-introduction/blackp.es.png" alt="((brillo) en (mí mismo)) = 0" title="((brillo) en (mí mismo)) = 0" /> para identificar si el fondo detrás del elemento es negro y no el color de otro objeto.
+                <li>
+                    <img class="imageRight" src="/bjc-r/img/1-introduction/Theo_van_Doesburg_Composition_VII_(the_three_graces).jpg" height="130" alt="pintura de van Doesburg" title="pintura de van Doesburg" />
+                    Hacia el lado derecho se presenta una pintura de Theo van Doesburg. Se pueden apreciar detalles en común con la pintura de Malevich, principalmente el uso de rectángulos como elementos de diseño. Sin embargo no tiene rectángulos inclinados, en su lugar se necesita que los rectángulos no estén encima unos de otros por lo que deben ser reducidos para evitar colisiones.  Se puede usar el bloque <img src="/bjc-r/img/1-introduction/blackp.es.png" alt="((brillo) en (mí mismo)) = 0" title="((brillo) en (mí mismo)) = 0" /> para identificar si el fondo detrás del elemento es negro y no el color de otro objeto.
 				</li>
 			</ol>
 		</div>
diff --git a/cur/programming/1-introduction/3-drawing/1-exploring-motion.html b/cur/programming/1-introduction/3-drawing/1-exploring-motion.html
index 4998af472..59f1e1c72 100644
--- a/cur/programming/1-introduction/3-drawing/1-exploring-motion.html
+++ b/cur/programming/1-introduction/3-drawing/1-exploring-motion.html
@@ -47,8 +47,9 @@ <h2>Exploring Motion</h2>
         </div>
 
         <div class="forYouToDo" id="first">
-			<ol>
-                <div class="ap-standard">AAP-2.A, AAP-3.A part b</div>
+			<div class="ap-standard">AAP-2.A, AAP-3.A part b</div>
+            <ol>
+                
 				<!-- <div class="sidenote">
                     <img class="imageCenter" src="/bjc-r/img/1-introduction/motion-palette-categories.jpg" alt="Motion palette categories: Motion, Looks, Sound, Pen, Control, Sensing, Operators, and Variables" title="Motion palette categories: Motion, Looks, Sound, Pen, Control, Sensing, Operators, and Variables" /><br />
                     The blocks' colors match their palettes: blue for Motion, green for Pen, etc.
@@ -64,10 +65,10 @@ <h2>Exploring Motion</h2>
                     	<li>Click it, and watch what the sprite does. </li>
                         <li>Click <img src="/bjc-r/img/blocks/pen-down-full-size.png" alt="pen down" title="pen down">, and then click your script to run it again.</li>
                 	</ol>
+                    <div class="endnote">You can click <code>pen down</code> (or any block) in the palette on the left or in the scripting area to run it. If you click a block inside a script, the whole script runs.</div>
                 </li>
-                <div class="endnote">You can click <code>pen down</code> (or any block) in the palette on the left or in the scripting area to run it. If you click a block inside a script, the whole script runs.</div>
                 <li><img class="inline" src="/bjc-r/img/icons/talk-with-your-partner-mini.png" alt="Talk with Your Partner" title="Talk with Your Partner"> Analyze <em>why</em> that script does what it does.</li>
-                <li><img class="inline" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Talk with Another Pair" title="Talk with Another Pair" />Compare your work with another pair. If your script behaves differently from theirs, check both.</li>
+                <li><img class="inline" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Talk with Another Pair" title="Talk with Another Pair" />Compare your work with another pair. If your script behaves differently from theirs, check both.
                 <div class="takeNote">
                     <h3 class="box-head">Using Visible Stepping</h3>
                     <p>Snap<em>!</em> has a tool called <strong>Visible Stepping</strong> that allows you to control how quickly Snap<em>!</em> steps through the blocks of your code. </p>
@@ -93,17 +94,19 @@ <h3 class="box-head">Using Visible Stepping</h3>
                     </ul>
                     <p>Visible stepping can be useful as you read someone else's code because you can watch it at human speed instead of computer speed. It's also useful in debugging (fixing problems with) your own code when it's doing something wrong.</p>
                 </div>
+                </li>
                 <li>
                     <img class="inline" src="/bjc-r/img/icons/pair-programming-swap-mini.png" alt="Pair Programming Swap" title="Pair Programming Swap" /> Switch who is sitting at the keyboard. Then experiment:<br />
-                    <ol>
                         <div class="sidenote">You can put your sprite back in the center of the screen with <img class="inline" src="/bjc-r/img/blocks/go-to-x-y-0-0.png" alt="go to x: (0) y: (0)" title="go to x: (0) y: (0)" /> and you can reset the direction it's pointing with <img class="inline" src="/bjc-r/img/blocks/point-in-direction-90.png" alt="point in direction (90)" title="point in direction (90)" />.</div>
+                    <ol>
                         <li>Change 100 to 50 in the <code>move</code> block <em>of your script</em> by clicking on the 100 and typing 50. Then click the script again to run it with the new input value.</li>
                         <li>Click the <img class="inline" src="/bjc-r/img/blocks/clear-full-size.png" alt="clear" title="clear" /> block in the green Pen palette.</li>
                         <li>Change the number in the <code>turn</code> block and run the script again... and again... and again.</li>
                         <li><code>Clear</code> the stage again, and change the number in the <img class="inline" src="/bjc-r/img/1-introduction/repeat-4.png" alt="repeat (4){}" title="repeat (4){}" /> block.</li>
                         <li>Experiment with the input numbers in the <code>turn</code> and <code>repeat</code> blocks. Try to draw a triangle with equal sides.</li>
-                        <li> Use <span class="center"><img class="inline" src="/bjc-r/img/blocks/set-pen-size-to-blank.png" alt="set pen size to ()" title="set pen size to ()" /></span> to set the pen size to something like 4 or 10 or 50. Then click your <code>repeat</code>, <code>move</code>, <code>turn</code> script again. </li>
-                        <div class="endnote">To change the pen size you must <em>click</em> the <code>set pen size</code> block to run it after you've entered the number you want.</div>
+                        <li> Use <span class="center"><img class="inline" src="/bjc-r/img/blocks/set-pen-size-to-blank.png" alt="set pen size to ()" title="set pen size to ()" /></span> to set the pen size to something like 4 or 10 or 50. Then click your <code>repeat</code>, <code>move</code>, <code>turn</code> script again. 
+                            <div class="endnote">To change the pen size you must <em>click</em> the <code>set pen size</code> block to run it after you've entered the number you want.</div>
+                        </li>
                         <li> Use <img class="inline" src="/bjc-r/img/blocks/set-pen-color-full-size.png" alt="set pen color to 'magenta colored square'" title="set pen color to 'magenta colored square'" /> to experiment with the pen color.</li>
 					</ol>
 				</li>
@@ -120,8 +123,9 @@ <h3 class="box-head">Using Visible Stepping</h3>
                         <li>Does clicking <img class="inline" src="/bjc-r/img/blocks/go-to-x-y-0-0.png" alt="go to x:(0) y:(0)" title="go to x:(0) y:(0)" /> leave a trace?</li>
                     </ol>
                 </li>
-                <img class="imageRight" src="/bjc-r/img/1-introduction/sphere.png" height="100" alt="sphere">
-                <li>Make sure your other work has been saved, then <a href="/bjc-r/prog/1-introduction/U1L3-Sphere.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load a starter project. Then save it." title=" Click here to load a starter project. Then save it."></a><br />
+                <li>
+                    <img class="imageRight" src="/bjc-r/img/1-introduction/sphere.png" height="100" alt="sphere">
+                    Make sure your other work has been saved, then <a href="/bjc-r/prog/1-introduction/U1L3-Sphere.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load a starter project. Then save it." title=" Click here to load a starter project. Then save it."></a><br />
                 Experiment with the scripts and look inside them to figure out how they work. Could you change the sizes or colors to make it more interesting?
                 </li>
             </ol>
@@ -148,26 +152,25 @@ <h3 class="box-head">Using Visible Stepping</h3>
                     In the Pen menu you'll find the <code>set pen to crayon</code> block.  Computers can display billions of colors, but unless you have to match the paint on your wall very precisely, finding your way through all those colors may be more trouble than it's worth.  The crayon library, just like a box of crayons, gives you a small set of vibrant colors, arranged in families.  So if you want a lot of browns in your picture, you could pick a random number between 30 and 39.<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/brown.png" alt='Set pen to crayon block with menu of color families, selecting "browns" and showing submenu of ten brownish named colors, highlighting "34 chestnut #954535"' title='Set pen to crayon block with menu of color families, selecting "browns" and showing submenu of ten brownish named colors, highlighting "34 chestnut #954535"' />
 				</li>
-
-				<img class="imageRight" src="/bjc-r/img/1-introduction/1024px-Suprematist_Composition_-_Kazimir_Malevich.jpg" height="180" alt="painting-by-Malevich" title="painting-by-Malevich" />
-				<li>At the right is a painting by Kazimir Malevich.  Its elements are rectangles, either horizontal or at a 45-degree angle, plus or minus a few degrees.  You can position rectangles randomly.  Your picture doesn't have to look like his&mdash;you're the artist!
-					<div class="dialogue">
-						<div>
-							<span>Alphie:</span> If we just put rectangles in randomly, the tiny square dots will often be covered by larger ones.  Maybe we should do big ones first and smaller ones later.
-						</div>
-						<div>
-							<span>Gamal:</span> I know ours don't have to look like the original, but I really like that huge black horizontal rectangle.  It gives the painting a structure, with a top part and a bottom part, even though it doesn't go all the way across.  I want to make sure to have one like that.
-						</div>
-						<div>
-							<span>Betsy:</span> I bet we can use the idea of drawing really thick lines <em>without</em> using <code>flat line ends</code> and get interesting results:
-						</div>
-					    <img class="indent" src="/bjc-r/img/1-introduction/curl.png" alt="curved horn shape made of overlapping circles in different colors" title="curved horn shape made of overlapping circles in different colors" />
-                    </div>
+                <li>
+                    <img class="imageRight" src="/bjc-r/img/1-introduction/1024px-Suprematist_Composition_-_Kazimir_Malevich.jpg" height="180" alt="painting-by-Malevich" title="painting-by-Malevich" />
+                    At the right is a painting by Kazimir Malevich.  Its elements are rectangles, either horizontal or at a 45-degree angle, plus or minus a few degrees.  You can position rectangles randomly.  Your picture doesn't have to look like his&mdash;you're the artist!
+                        <div class="dialogue">
+                            <div>
+                                <span>Alphie:</span> If we just put rectangles in randomly, the tiny square dots will often be covered by larger ones.  Maybe we should do big ones first and smaller ones later.
+                            </div>
+                            <div>
+                                <span>Gamal:</span> I know ours don't have to look like the original, but I really like that huge black horizontal rectangle.  It gives the painting a structure, with a top part and a bottom part, even though it doesn't go all the way across.  I want to make sure to have one like that.
+                            </div>
+                            <div>
+                                <span>Betsy:</span> I bet we can use the idea of drawing really thick lines <em>without</em> using <code>flat line ends</code> and get interesting results:
+                            </div>
+                            <img class="indent" src="/bjc-r/img/1-introduction/curl.png" alt="curved horn shape made of overlapping circles in different colors" title="curved horn shape made of overlapping circles in different colors" />
+                        </div>
 				</li>
-
-                <img class="imageRight" src="/bjc-r/img/1-introduction/Theo_van_Doesburg_Composition_VII_(the_three_graces).jpg" height="130" alt="art by van Doesburg" title="art by van Doesburg" />
-				<li>
-				At the right is a painting by Theo van Doesburg.  It has some things in common with the Malevich picture, mainly the use of rectangles as the design elements.  But there are no 45-degree rectangles; instead, the constraint is that rectangles may not overlap, so if you want to place a random rectangle in the picture, each end may have to be shortened to avoid collisions.  You can use <img src="/bjc-r/img/1-introduction/blackp.png" alt="((brightness) at (myself)) = 0" title="((brightness) at (myself)) = 0" /> to find out if the point behind the sprite's rotation center is black.
+                <li>
+                    <img class="imageRight" src="/bjc-r/img/1-introduction/Theo_van_Doesburg_Composition_VII_(the_three_graces).jpg" height="130" alt="art by van Doesburg" title="art by van Doesburg" />
+                    At the right is a painting by Theo van Doesburg.  It has some things in common with the Malevich picture, mainly the use of rectangles as the design elements.  But there are no 45-degree rectangles; instead, the constraint is that rectangles may not overlap, so if you want to place a random rectangle in the picture, each end may have to be shortened to avoid collisions.  You can use <img src="/bjc-r/img/1-introduction/blackp.png" alt="((brightness) at (myself)) = 0" title="((brightness) at (myself)) = 0" /> to find out if the point behind the sprite's rotation center is black.
 				</li>
 			</ol>
 		</div>
diff --git a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
index 9dd056d78..8581048ab 100644
--- a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
+++ b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html
@@ -120,9 +120,9 @@ <h3 class="box-head">¿Qué tipo de datos puede ser utilizado como campo de entr
 
         <div class="forYouToDo">
 			<div class="ap-standard">CRD-2.G</div>
-			<ol start="4">
-                <img class="imageRight" src="/bjc-r/img/icons/save-mini.png" alt="Guarda tu trabajo." title="Guarda tu trabajo." />
-                <li>Comenta tu código.</li>
+			<img class="imageRight" src="/bjc-r/img/icons/save-mini.png" alt="Guarda tu trabajo." title="Guarda tu trabajo." />
+            <ol start="4">
+                <li>Comenta tu código.
                 <div class="takeNote">
                     <h3 class="box-head">Consejos de depuración: Comentar tu código</h3>
 					<div class="ap-standard">CRD-2.G.2</div>
@@ -151,6 +151,7 @@ <h3 class="box-head">Consejos de depuración: Comentar tu código</h3>
 
 					<p>Parte de la razón por la que algunas personas enfatizan la importancia de comentarios detallados es que están programando en lenguajes de texto, que desaconsejan nombres largos para variables y procedimientos. (Normalmente, no se pueden incluir espacios en los nombres, y debes escribir el nombre completo cada vez que uses esa variable o procedimiento). Es por eso que es común ver nombres como <code>substLcUc</code> en lugar de <code>substituir todas las palabras en minúscula por mayúscula en una cadena</code> (en ingles, <code>substitute lower case letters for upper case letters in string</code>). En el caso que un programa esté lleno de nombres abreviados para variables y procedimientos, es muy importante que el código tenga una buena documentación. En Snap<em>!,</em> los nombres del programa pueden autoexplicativos.</p>
                 </div>
+                </li>
 			</ol>
 		</div>
 
@@ -165,8 +166,8 @@ <h3>Más acerca de la documentación de un programa</h3>
 		<p>Es recomendable que el primer intento de documentar un código se haga antes de empezar a programar. La documentación expresa la funcionalidad esperada del programa (externo) y la estructura planeada (interna). Estos documentos pueden ser usados posteriormente para probar el código y asegurarse que se comporta según el plan.</p>
 
 		<div class="forYouToDo">
-			<ol start="5">
-		        <div class="ap-standard">AAP-3.A part a</div>
+			<div class="ap-standard">AAP-3.A part a</div>
+            <ol start="5">
                 <li>Crea un programa que dibuje en el escenario dos molinetes con diferente número de ramas.</li>
             </ol>
         </div>
diff --git a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
index 43b9e62fe..166b83e35 100644
--- a/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
+++ b/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html
@@ -119,9 +119,9 @@ <h3 class="box-head">What kind of data can be an input?</h3>
 
         <div class="forYouToDo">
 			<div class="ap-standard">CRD-2.G</div>
-			<ol start="4">
-                <img class="imageRight" src="/bjc-r/img/icons/save-mini.png" alt="Save Your Work" title="Save Your Work" />
-                <li>Comment your code.</li>
+            <img class="imageRight" src="/bjc-r/img/icons/save-mini.png" alt="Save Your Work" title="Save Your Work" />
+            <ol start="4">
+                <li>Comment your code.
                 <div class="takeNote">
                     <h3 class="box-head">Debugging Tip: Commenting Your Code</h3>
 					<div class="ap-standard">CRD-2.G.2</div>
@@ -148,6 +148,7 @@ <h3 class="box-head">Debugging Tip: Commenting Your Code</h3>
                     </div>
 					<p>Part of the reason some people emphasize the importance of detailed comments is that they are programming in text languages, which discourage long variable and procedure names.  (Typically, you can't include spaces in the names, and you have to type the entire name every time you use that variable or procedure.)  So you see names like <code>substLcUc</code> instead of <code>substitute lower case letters for upper case letters in string</code>.  If a program is full of drastically abbreviated names for procedures and variables, it's no surprise if the code needs documentation.  In Snap<em>!,</em> the names in the program can be self-documenting.</p>
                 </div>
+                </li>
 			</ol>
 		</div>
 
@@ -162,8 +163,8 @@ <h3>More About Program Documentation</h3>
 		<p>It's best if the first attempt at documentation is made even before starting to code.  The documentation will specify the desired program behavior (external) and the intended program structure (internal).  These documents can be used in testing the code to ensure that it behaves as planned.</p>
 
 		<div class="forYouToDo">
-			<ol start="5">
-		        <div class="ap-standard">AAP-3.A part a</div>
+			<div class="ap-standard">AAP-3.A part a</div>
+            <ol start="5">
                 <li>Create a script that draws two pinwheels on the stage, with different numbers of spokes.</li>
             </ol>
         </div>
diff --git a/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html b/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html
index a7d6a1df1..e7c4fe32f 100644
--- a/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html
+++ b/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html
@@ -25,8 +25,8 @@ <h3>Agregar múltiples entradas</h3>
                     	<li>
                         	<img class="inline" src="/bjc-r/img/icons/talk-with-your-partner.es.png" alt="Habla con tu pareja" title="Habla con tu pareja" />
                         	En primer lugar, hagamos una predicción. ¿Qué crees que pasará al hacer cambios en dicho valor?
+    						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-change-second-move-input.es.png" alt="bloque de molinete con un comentario que pide a los estudiantes que experimenten con esta entrada para el segundo bloque mover" title="bloque de molinete con un comentario que pide a los estudiantes que experimenten con esta entrada para el segundo bloque mover" />
                         </li>
-						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-change-second-move-input.es.png" alt="bloque de molinete con un comentario que pide a los estudiantes que experimenten con esta entrada para el segundo bloque mover" title="bloque de molinete con un comentario que pide a los estudiantes que experimenten con esta entrada para el segundo bloque mover" />
                         <li>Luego prueba con varios valores entre -100 y 0.</li>
                         <li>
                         	<img class="inline" src="/bjc-r/img/icons/talk-with-your-partner-mini.png" alt="Habla con tu compañero" title="Habla con tu compañero" />
@@ -39,31 +39,34 @@ <h3>Agregar múltiples entradas</h3>
                     <div class="sidenoteBig">En el caso de ser necesario, revisa el procedimiento para agregar un campo de entrada en <a href="/bjc-r/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Unidad 1 Laboratorio 3 Página 3: Bloques con entradas">Unidad 1 Laboratorio 3 Página 3: Bloques con entradas</a>.</div>
                     Agrega un <em>segundo campo de entrada</em> para controlar la cantidad de "espera" que el cursor realiza antes de cada giro para llegar a la vuelta completa a 360&deg;.
                 	<ol>
-                        <li>Edita el bloque <code>molinete</code>, haz clic en el signo "+" que se encuentra al final y agrega un <strong>parámetro</strong> (<strong>elige la etiqueta "Texto"</strong>). Escribe <code>respaldo:</code> como se muestra más abajo y haz clic en "Aceptar".</li>
-                        <div class="endnote">
-                            <a href="#hint-target" data-toggle="collapse" title="Mira un video de los pasos a y b para añdir una segunda entrada al bloque molinete.">Mira un video de los pasos a y b.</a>
-                            <div id="hint-target" class="collapse">
-                                <img class="inline" src="/bjc-r/img/1-introduction/create-input-name.es.gif" alt="un video sobre cómo editar el bloque 'molinete, ramas: ()',haciendo clic sobre el signo de sumar a la derecha del bloque sombrero, escribiendo 'respaldo' en el texto de título, haciendo clic en 'Aceptar', haciendo clic sobre el signo de sumar a la derecha al final del bloque sombrero de nuevo, escribiendo 'respaldo' como nombre de la entrada, haciendo clic en 'Aceptar', mostrando el bloque ahora  que aparece como 'molinete, ramas: () respaldo: ()' " title="un video sobre cómo editar el bloque 'molinete, ramas: ()',haciendo clic sobre el signo de sumar a la derecha del bloque sombrero, escribiendo 'respaldo' en el texto de título, haciendo clic en 'Aceptar', haciendo clic sobre el signo de sumar a la derecha al final del bloque sombrero de nuevo, escribiendo 'respaldo' como nombre de la entrada, haciendo clic en 'Aceptar', mostrando el bloque ahora  que aparece como 'molinete, ramas: () respaldo: ()' " />
-                            </div>
-                        </div> 
+                        <li>Edita el bloque <code>molinete</code>, haz clic en el signo "+" que se encuentra al final y agrega un <strong>parámetro</strong> (<strong>elige la etiqueta "Texto"</strong>). Escribe <code>respaldo:</code> como se muestra más abajo y haz clic en "Aceptar".
+                            <div class="endnote">
+                                <a href="#hint-target" data-toggle="collapse" title="Mira un video de los pasos a y b para añdir una segunda entrada al bloque molinete.">Mira un video de los pasos a y b.</a>
+                                <div id="hint-target" class="collapse">
+                                    <img class="inline" src="/bjc-r/img/1-introduction/create-input-name.es.gif" alt="un video sobre cómo editar el bloque 'molinete, ramas: ()',haciendo clic sobre el signo de sumar a la derecha del bloque sombrero, escribiendo 'respaldo' en el texto de título, haciendo clic en 'Aceptar', haciendo clic sobre el signo de sumar a la derecha al final del bloque sombrero de nuevo, escribiendo 'respaldo' como nombre de la entrada, haciendo clic en 'Aceptar', mostrando el bloque ahora  que aparece como 'molinete, ramas: () respaldo: ()' " title="un video sobre cómo editar el bloque 'molinete, ramas: ()',haciendo clic sobre el signo de sumar a la derecha del bloque sombrero, escribiendo 'respaldo' en el texto de título, haciendo clic en 'Aceptar', haciendo clic sobre el signo de sumar a la derecha al final del bloque sombrero de nuevo, escribiendo 'respaldo' como nombre de la entrada, haciendo clic en 'Aceptar', mostrando el bloque ahora  que aparece como 'molinete, ramas: () respaldo: ()' " />
+                                </div>
+                            </div> 
+                        </li>
                         <li>Luego haz clic en el signo "+" hacia el final y agrega un parámetro (elige "Parámetro"), y ponle nombre <var>respaldo</var>.</li>
                         <li>Arrastra el nuevo parámetro <var>respaldo</var>, luego colócalo en el lugar que le corresponde en el código de <code>molinete</code>. Luego presiona en "Aceptar" o "Aplicar."</li>
                         <li>Revisa que el cambio efectuado con el campo de entrada <var>respaldo</var> funcione correctamente al ejecutar el bloque <code>molinete</code>. Revisa que se obtenga el resultado esperado. Depura cualquier problema de ser necesario.</li>
                     </ol>
                 </li>
-	            <div class="sidenote">Usa un bloque de la categoría: "Operadores".</div>
-                <li>Cambia el código de <code>molinete</code> para que el campo de entrada <var>respaldo</var> acepte únicamente valores <em>positivos</em> (entre 0 y 100).</li>
-				<div class="endnote">
-					<a href="#hint-positivebackup" data-toggle="collapse" title="Clic para abrir ejemplos de de entradas para probar que el campo respaldo acepte valores positivos.">Clic para ejemplos de entradas para probar.</a>
-					<div id="hint-positivebackup" class="collapse">
-						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-20.es.png" alt="molinete, ramas: (6) respaldo: (20)" title="molinete, ramas: (6) respaldo: (20)" />
-						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-20-result.png" alt="Un hexágono grande con el extremo derecho extendido 20 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." title="Un hexágono grande con el extremo derecho extendido 20 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." /><br />
-						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-50.es.png" alt="molinete, ramas: (6) respaldo: (50)" title="molinete, ramas: (6) respaldo: (50)" />
-						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-50-result.png" alt="Un hexágono mediano con el extremo derecho extendido 50 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." title="Un hexágono mediano con el extremo derecho extendido 50 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." /><br />
-						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-80.es.png" alt="molinete, ramas: (6) respaldo: (80)" title="molinete, ramas: (6) respaldo: (80)" />
-						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-80-result.png" alt="Un hexágono pequeño con el extremo derecho extendido 80 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." title="Un hexágono pequeño con el extremo derecho extendido 90 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." />
-					</div>
-				</div>
+	            <li>
+                    <div class="sidenote">Usa un bloque de la categoría: "Operadores".</div>
+                    Cambia el código de <code>molinete</code> para que el campo de entrada <var>respaldo</var> acepte únicamente valores <em>positivos</em> (entre 0 y 100).
+                    <div class="endnote">
+                        <a href="#hint-positivebackup" data-toggle="collapse" title="Clic para abrir ejemplos de de entradas para probar que el campo respaldo acepte valores positivos.">Clic para ejemplos de entradas para probar.</a>
+                        <div id="hint-positivebackup" class="collapse">
+                            <img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-20.es.png" alt="molinete, ramas: (6) respaldo: (20)" title="molinete, ramas: (6) respaldo: (20)" />
+                            <img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-20-result.png" alt="Un hexágono grande con el extremo derecho extendido 20 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." title="Un hexágono grande con el extremo derecho extendido 20 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." /><br />
+                            <img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-50.es.png" alt="molinete, ramas: (6) respaldo: (50)" title="molinete, ramas: (6) respaldo: (50)" />
+                            <img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-50-result.png" alt="Un hexágono mediano con el extremo derecho extendido 50 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." title="Un hexágono mediano con el extremo derecho extendido 50 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." /><br />
+                            <img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-80.es.png" alt="molinete, ramas: (6) respaldo: (80)" title="molinete, ramas: (6) respaldo: (80)" />
+                            <img class="indent" src="/bjc-r/img/1-introduction/pinwheel-branches-6-backup-80-result.png" alt="Un hexágono pequeño con el extremo derecho extendido 80 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." title="Un hexágono pequeño con el extremo derecho extendido 90 pasos fuera del hexágono. La longitud total de cada lado es 100 pasos." />
+                        </div>
+                    </div>
+                </li>
             </ol>
         </div>
 
diff --git a/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html b/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html
index 1ef0e3460..3cf87d148 100644
--- a/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html
+++ b/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html
@@ -25,8 +25,8 @@ <h3>Adding Multiple Inputs</h3>
                     	<li>
                         	<img class="inline" src="/bjc-r/img/icons/talk-with-your-partner.png" alt="Talk with Your Partner" title="Talk with Your Partner" />
                         	First predict. What do you think will happen?
+						    <img class="indent" src="/bjc-r/img/1-introduction/pinwheel-change-second-move-input.png" alt="pinwheel block definition with comment asking students to experiment with the input for the second move block" title="pinwheel block definition with comment asking students to experiment with the input for the second move block" />
                         </li>
-						<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-change-second-move-input.png" alt="pinwheel block definition with comment asking students to experiment with the input for the second move block" title="pinwheel block definition with comment asking students to experiment with the input for the second move block" />
                         <li>Then try several inputs between -100 and 0.</li>
                         <li>
                         	<img class="inline" src="/bjc-r/img/icons/talk-with-your-partner-mini.png" alt="Talk with Your Partner" title="Talk with Your Partner" />
@@ -39,20 +39,21 @@ <h3>Adding Multiple Inputs</h3>
                     <div class="sidenoteBig">Review how to add an input at <a href="/bjc-r/cur/programming/1-introduction/3-drawing/3-blocks-with-inputs.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Blocks with Inputs">Unit 1 Lab 3 Page 3: Blocks with Input</a>, if needed.</div>
                     Add a <em>second input</em> to control the amount of "backing up" that the sprite does before each turn through the full 360&deg;.
                 	<ol>
-                        <li>Edit your <code>pinwheel</code> block, then click the "+" sign at the end to add an input <strong>label</strong> (<strong>choose "Title text"</strong>). Type <code>backup:</code> as shown below, and click "OK".</li>
-                        <div class="endnote">
-                            <a href="#hint-target" data-toggle="collapse" title="Watch a video of steps a and b for adding the second input to the pinwheel block.">Watch a video of steps a and b.</a>
-                            <div id="hint-target" class="collapse">
-                                <img class="inline" src="/bjc-r/img/1-introduction/create-input-name.gif" alt="a video of editing the 'pinwheel, branches: ()' block, clicking the plus sign on the right end of the hat block, typing 'backup:' as the Title text, clicking 'OK,' clicking the plus sign on the right end of the hat block again, typing 'backup' as the Input name, clicking 'OK,' clicking 'OK' again, and showing the block now appearing as 'pinwheel, branches: () backup: ()' " title="a video of editting the 'pinwheel, branches: ()' block, clicking the plus sign on the right end of the hat block, typing 'backup:' as the Title text, clicking 'OK,' clicking the plus sign on the right end of the hat block again, typing 'backup' as the Input name, clicking 'OK,' clicking 'OK' again, and showing the block now appearing as 'pinwheel, branches: () backup: ()' " />
+                        <li>Edit your <code>pinwheel</code> block, then click the "+" sign at the end to add an input <strong>label</strong> (<strong>choose "Title text"</strong>). Type <code>backup:</code> as shown below, and click "OK".
+                            <div class="endnote">
+                                <a href="#hint-target" data-toggle="collapse" title="Watch a video of steps a and b for adding the second input to the pinwheel block.">Watch a video of steps a and b.</a>
+                                <div id="hint-target" class="collapse">
+                                    <img class="inline" src="/bjc-r/img/1-introduction/create-input-name.gif" alt="a video of editing the 'pinwheel, branches: ()' block, clicking the plus sign on the right end of the hat block, typing 'backup:' as the Title text, clicking 'OK,' clicking the plus sign on the right end of the hat block again, typing 'backup' as the Input name, clicking 'OK,' clicking 'OK' again, and showing the block now appearing as 'pinwheel, branches: () backup: ()' " title="a video of editting the 'pinwheel, branches: ()' block, clicking the plus sign on the right end of the hat block, typing 'backup:' as the Title text, clicking 'OK,' clicking the plus sign on the right end of the hat block again, typing 'backup' as the Input name, clicking 'OK,' clicking 'OK' again, and showing the block now appearing as 'pinwheel, branches: () backup: ()' " />
+                                </div>
                             </div>
-                        </div>
+                        </li>
                         <li>Then click the "+" sign at the end <em>again</em> to add an input (choose "Input name"), and call it <var>backup</var>.</li>
                         <li>Drag off the new <var>backup</var> input, place it where it belongs in the <code>pinwheel</code> code, and press "OK" or "Apply."</li>
                         <li>Check that changing the <var>backup</var> input value when running the <code>pinwheel</code> block gives the correct result. Debug any problems.</li>
                     </ol>
                 </li>
-	            <div class="sidenote">Use an Operator block.</div>
-                <li>
+	            <li>
+                    <div class="sidenote">Use an Operator block.</div>
                     Change the <code>pinwheel</code> script so that it will accept a <em>positive</em> value (between 0 and 100) for <var>backup</var>, and test it with a variety of inputs.
                     <div class="endnote">
                         <a href="#hint-positivebackup" data-toggle="collapse" title="Click for example inputs to test accepting a positive value for backup.">Click for example inputs to test.</a>
diff --git a/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.es.html b/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.es.html
index c05cee103..100477d39 100644
--- a/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.es.html
+++ b/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.es.html
@@ -22,12 +22,13 @@ <h2>Usar el <code>molinete</code> para crear un <code>polígono</code></h2>
                 <li>
                     Usa el código del bloque <code>molinete</code> para crear un bloque más especializado llamado <code>asterisco</code>.
                     <ol>
-                        <li>El primer paso es crear un nuevo bloque llamado <code>asterisco</code> con dos parámetros: uno es <var>número de ramas</var> y otro llamado <var>largo</var> de cada rama. Para recordar la forma de crear un nuevo bloque visitar: <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Unidad 1 Laboratorio 2 Página 4: Crear un nuevo bloque">Unidad 1 Laboratorio 2 Página 4: Crear un nuevo bloque</a>.</li>
-                        <img src="/bjc-r/img/1-introduction/asterisk-using-pinwheel.es.png" alt="asterisco, ramas:(ramas) longitud de la rama:(longitud){molinete, ramas: ( ) tamaño( ) respaldo:( )}" title="asterisco, ramas:(ramas) longitud de la rama:(longitud){molinete, ramas: ( ) tamaño( ) respaldo:( )}"/>
+                        <li>El primer paso es crear un nuevo bloque llamado <code>asterisco</code> con dos parámetros: uno es <var>número de ramas</var> y otro llamado <var>largo</var> de cada rama. Para recordar la forma de crear un nuevo bloque visitar: <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Unidad 1 Laboratorio 2 Página 4: Crear un nuevo bloque">Unidad 1 Laboratorio 2 Página 4: Crear un nuevo bloque</a>.
+                            <img src="/bjc-r/img/1-introduction/asterisk-using-pinwheel.es.png" alt="asterisco, ramas:(ramas) longitud de la rama:(longitud){molinete, ramas: ( ) tamaño( ) respaldo:( )}" title="asterisco, ramas:(ramas) longitud de la rama:(longitud){molinete, ramas: ( ) tamaño( ) respaldo:( )}"/>
+                        </li>
                         <li>Ahora introduce los valores a <code>molinete</code> para que pueda dibujar correctamente un asterisco.</li>
                     </ol>
+                    <img class="inline" src="/bjc-r/img/icons/pair-programming-swap.es.png" alt="Intercambio de parejas" title="Intercambio de parejas" />
                 </li>
-                <img class="inline" src="/bjc-r/img/icons/pair-programming-swap.es.png" alt="Intercambio de parejas" title="Intercambio de parejas" />
                 <li>
                 	De forma similar, ahora es el turno de escribir un bloque <code>polígono</code> que haga uso de <code>molinete</code> con los valores apropiados para dibujar un polígono que reciba el número de lados y el largo del lado.<br />
                 </li>
@@ -50,15 +51,17 @@ <h3 class="box-head">Depurar con <img src="/bjc-r/img/2-complexity/Debugging/pau
 
 		<div class="forYouToDo">
 			<ol start="4">
-                <li>Si miras detenidamente dentro del código de <code>molinete</code> y analizas la forma en que se usa en <code>polígono</code>, es posible que te des cuenta que hay algunos pasos que no son necesarios realizarlos para este caso en particular. Escribe otra versión de <code>polígono</code> que sea construido directamente de los bloques primitivos (<code>mover</code>, <code>girar</code> y similares). ¿Qué tan simple lo puedes hacer?</li>
+                <li>Si miras detenidamente dentro del código de <code>molinete</code> y analizas la forma en que se usa en <code>polígono</code>, es posible que te des cuenta que hay algunos pasos que no son necesarios realizarlos para este caso en particular. Escribe otra versión de <code>polígono</code> que sea construido directamente de los bloques primitivos (<code>mover</code>, <code>girar</code> y similares). ¿Qué tan simple lo puedes hacer?
                 <div class="takeNote">
                     <div class="ap-standard">AAP-3.B.7</div>
                     Una vez que el bloque <code>polígono</code> dibuje la figura correcta, no es de mayor importancia para el resto del proyecto conocer que hay dentro de él.
                 </div>
+                    <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" />
+                </li>
 			</ol>
 		</div>
 
-		<img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" />
+		
 
         <div class="ifTime">
             <ol start="5">
diff --git a/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.html b/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.html
index db29327bf..ce5f30f7c 100644
--- a/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.html
+++ b/cur/programming/1-introduction/3-drawing/5-remix-your-pinwheel.html
@@ -25,12 +25,13 @@ <h2>Using <code>Pinwheel</code> to Make <code>Polygon</code></h2>
                 <li>
                     Use your <code>pinwheel</code> block to create a more specialized <code>asterisk</code> block.
                     <ol>
-                        <li>First, make a new block called <code>asterisk</code> with two inputs: one for the <var>number of branches</var> and one for the <var>length</var> of each branch.  You may wish to review how to make a new block at <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Unit 1 Lab 2 Page 4: Making Your Own Block">Unit 1 Lab 2 Page 4: Making Your Own Block</a>.</li>
-                        <img src="/bjc-r/img/1-introduction/asterisk-using-pinwheel.png" alt="asterisk, branches:(branches) branch length:(length){pinwheel, branches: ( ) size:( ) backup:( )}" title="asterisk, branches:(branches) branch length:(length){pinwheel, branches: ( ) size:( ) backup:( )}"/>
+                        <li>First, make a new block called <code>asterisk</code> with two inputs: one for the <var>number of branches</var> and one for the <var>length</var> of each branch.  You may wish to review how to make a new block at <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Unit 1 Lab 2 Page 4: Making Your Own Block">Unit 1 Lab 2 Page 4: Making Your Own Block</a>.
+                            <img src="/bjc-r/img/1-introduction/asterisk-using-pinwheel.png" alt="asterisk, branches:(branches) branch length:(length){pinwheel, branches: ( ) size:( ) backup:( )}" title="asterisk, branches:(branches) branch length:(length){pinwheel, branches: ( ) size:( ) backup:( )}"/>
+                        </li>
                         <li>Now fill in the three inputs to <code>pinwheel</code> so that it correctly draws an asterisk.</li>
                     </ol>
+ 		            <img class="inline" src="/bjc-r/img/icons/pair-programming-swap.png" alt="Pair Programming Swap" title="Pair Programming Swap" />
                 </li>
- 		        <img class="inline" src="/bjc-r/img/icons/pair-programming-swap.png" alt="Pair Programming Swap" title="Pair Programming Swap" />
                 <li>
                 	Similarly, write a <code>polygon</code> block that uses <code>pinwheel</code> with appropriate inputs to draw a polygon with a given number of sides and side length.<br />
                 </li>
@@ -53,12 +54,13 @@ <h3 class="box-head">Debugging with <img src="/bjc-r/img/2-complexity/Debugging/
 
 		<div class="forYouToDo">
 			<ol start="4">
-                <li>If you look inside of <code>pinwheel</code> and see how you're using it in <code>polygon</code>, you'll see that there are steps that you don't really need for the case of a polygon.  Write another version of <code>polygon</code> built directly out of primitive blocks (<code>move</code>, <code>turn</code> and so on).  How simple can you make it?</li>
+                <li>If you look inside of <code>pinwheel</code> and see how you're using it in <code>polygon</code>, you'll see that there are steps that you don't really need for the case of a polygon.  Write another version of <code>polygon</code> built directly out of primitive blocks (<code>move</code>, <code>turn</code> and so on).  How simple can you make it?
                 <div class="takeNote">
                     <div class="ap-standard">AAP-3.B.7</div>
                     As long as your <code>polygon</code> block draws the right picture, it doesn't matter to the rest of the project what's inside it.
                 </div>
         		<img class="inline" src="/bjc-r/img/icons/save-now.png" alt="Save your work" title="Save your work" />
+                </li>
 			</ol>
 		</div>
 
diff --git a/cur/programming/1-introduction/3-drawing/6-the-for-block.es.html b/cur/programming/1-introduction/3-drawing/6-the-for-block.es.html
index 0dde826f5..6bbfd04b4 100755
--- a/cur/programming/1-introduction/3-drawing/6-the-for-block.es.html
+++ b/cur/programming/1-introduction/3-drawing/6-the-for-block.es.html
@@ -18,8 +18,8 @@ <h2>Iterar con un contador</h2>
 
         <p>
         	Ya conoces las siguientes formas de repetir un grupo de comandos:
-			<ul>
                 <div class="sidenoteBig">El bloque <code>por siempre</code> genera un <em>ciclo infinito</em> que funciona por siempre. Un ciclo infinito puede ser a veces el resultado de un error, aunque en algunos programas interactivos se <em>desea</em> que el programa se mantenga ejecutándose hasta que es detenido por el usuario.</div>
+            <ul>
 				<li><img class="inline" src="/bjc-r/img/blocks/forever.es.png" alt="bloque por siempre" title="bloque por siempre" /> repite los bloques que se encuentran en su interior <em>por siempre</em>. (Se usó este bloque para hacer que Alonzo se mantuviera moviéndose en el laboratorio <a href="/bjc-r/cur/programming/1-introduction/1-building-an-app/4-keeping-score.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Unidad 1 Laboratorio 1 Página 3: Programar un juego">Unidad 1 Laboratorio 1 Página 3: Programar un juego</a>)</li>
                 <li><img class="inline" src="/bjc-r/img/1-introduction/repeat.es.png" alt="bloque repetir" title="bloque repetir" /> repite los bloques en su interior un <em>número específico de veces</em>. (Se usó este bloque para dibujar formas en el laboratorio <a href="/bjc-r/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html?topic=nyc_bjc%2F1-intro-loops.es.topic&course=bjc4nyc.es.html&novideo&noassignment" title="Unidad 1 Laboratorio 3 Página 1: Explorar el movimiento">Unidad 1 Laboratorio 3 Página 1: Explorar el movimiento</a>)</li>
             </ul>
@@ -108,11 +108,13 @@ <h2>Iterar con un contador</h2>
 						<p>El código que se presenta a continuación puede darte la idea de cómo crear animaciones. El bloque <code>unificar</code> permite dibujar el molinete de inmediato.</p>
 						<img class="indent" src="/bjc-r/img/1-introduction/Blockswith-Inputs_img/animationCode.es.png" alt="repetir y repetir{para(i)=(0) hasta (50){borrar;unificar{molinete, ramas:(12) tamaño:(50) respaldo:(i)}}}" title="repetir y repetir{para(i)=(0) hasta (50){borrar;unificar{molinete, ramas:(12) tamaño:(50) respaldo:(i)}}}"/>
 					</div>
-				</li>
-				<img class="imageRight" height="180" src="/bjc-r/img/1-introduction/mini-Albers-picture.png" alt="cuadro al estilo de mini Albers" />
-				<li>Asegúrate de guardar tu otro trabajo, luego <a href="/bjc-r/prog/1-introduction/U1L3-mini-Albers.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a><br />Experimenta con la secuencia. ¿Podrías cambiar los tamaños o los colores para hacerlo más interesante?</li>
-				<p style="clear: both; height: 0px;"></p>
+                </li>
+				<li>
+                    <img class="imageRight" height="180" src="/bjc-r/img/1-introduction/mini-Albers-picture.png" alt="cuadro al estilo de mini Albers" />
+                    Asegúrate de guardar tu otro trabajo, luego <a href="/bjc-r/prog/1-introduction/U1L3-mini-Albers.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a><br />Experimenta con la secuencia. ¿Podrías cambiar los tamaños o los colores para hacerlo más interesante?
+                </li>
 			</ol>
+            <p style="clear: both; height: 0px;"></p>
 		</div>
 
 		<div class="takeItTeaser">
@@ -134,21 +136,23 @@ <h2>Iterar con un contador</h2>
 			<img class="imageRight" src="/bjc-r/img/1-introduction/Josef_Albers's_painting_'Homage_to_the_Square',_1965.jpg" height="150" alt="Pintura de Josef Albers" title="Pintura de Josef Albers" />
 			<p>A la derecha se muestra una pintura de Josef Albers.  A este pintor le interesaba experimentar con una variación de colores dentro de una "familia" de colores similares. Snap<i>!</i> permite hacer experimentos similares.</p>
 
-			<ol type="A" start="2"> <li>¿Cuál es el color favorito del autor para esta actividad?</li> <li>En el caso que no hayas comletado la actividad basada en el trabajo de Kazimir Malevich
-			<img src="/bjc-r/img/1-introduction/Malevich-tiny.jpg" alt="pintura de Malevich" title="pintura de Malevich">
-			entonces <a href="/bjc-r/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html">debes leerla ahora</a>
-			para aprender las funcionalidades de Snap<em>!</em> para <em>rectángulos sólidos</em> y <em>familia de colores</em>.</li>
-			<li>Si todavía no has completado la actividad Si hay tiempo núm. 10, debes hacerla para conocer cómo una versión simple de la idea de este proyecto.
-            <li>Muy bien, ahora entremos en detalles.</li>
-			<div class="narrowpurple">
-				<strong>Aleatoriedad:</strong> Los cuatro ejemplos que se presentan arriba son
-				diferentes a la pintura de Albers en el sentido que incluyen colores ocasionales
-                que no son de la misma familia. Esto puede hacer las pinturas más interesantes para
-                alguien que no comparta el interés de Albers en diferencias nínimas de color.
-				<em>Demasiada</em> aleatoriedad puede, en cambio, hacer la pintura
-				<em>menos</em> interesante.  Compara los ejemplos que se presentan arriba; a la izquierda uno de ellos está basado claramente en la familia naranja. Otro de ellos tiene colores en violeta, verde, naranja, un poco de caos en el que se presenta en cuarta posición. Revisa de nuevo el proyecto "Conversando" en el caso que no recuerdes la forma de elegir algo en especial una de cada seis veces, o una de cada catorce veces.
-                Otras opciones aleatorias que se pueden tomar son el número de cuadrados, la cantidad que se reducirá el tamaño del mismo en comparación con el siguiente, la posición horizontal y vertical de uno de los cuadrados en relación al siguiente (la figura es más interesante en las que la posición es diferente, con el resultado que el cuardado más pequeño no se encuentra necesariamente en el centro).
-				</div>
+			<ol type="A" start="2"> 
+                <li>¿Cuál es el color favorito del autor para esta actividad?</li> 
+                <li>En el caso que no hayas comletado la actividad basada en el trabajo de Kazimir Malevich
+                    <img src="/bjc-r/img/1-introduction/Malevich-tiny.jpg" alt="pintura de Malevich" title="pintura de Malevich">
+                    entonces <a href="/bjc-r/cur/programming/1-introduction/3-drawing/1-exploring-motion.es.html">debes leerla ahora</a>
+                    para aprender las funcionalidades de Snap<em>!</em> para <em>rectángulos sólidos</em> y <em>familia de colores</em>.</li>
+			    <li>Si todavía no has completado la actividad Si hay tiempo núm. 10, debes hacerla para conocer cómo una versión simple de la idea de este proyecto.</li>
+                <li>Muy bien, ahora entremos en detalles.
+                    <div class="narrowpurple">
+                        <strong>Aleatoriedad:</strong> Los cuatro ejemplos que se presentan arriba son
+                        diferentes a la pintura de Albers en el sentido que incluyen colores ocasionales
+                        que no son de la misma familia. Esto puede hacer las pinturas más interesantes para
+                        alguien que no comparta el interés de Albers en diferencias nínimas de color.
+                        <em>Demasiada</em> aleatoriedad puede, en cambio, hacer la pintura
+                        <em>menos</em> interesante.  Compara los ejemplos que se presentan arriba; a la izquierda uno de ellos está basado claramente en la familia naranja. Otro de ellos tiene colores en violeta, verde, naranja, un poco de caos en el que se presenta en cuarta posición. Revisa de nuevo el proyecto "Conversando" en el caso que no recuerdes la forma de elegir algo en especial una de cada seis veces, o una de cada catorce veces.
+                        Otras opciones aleatorias que se pueden tomar son el número de cuadrados, la cantidad que se reducirá el tamaño del mismo en comparación con el siguiente, la posición horizontal y vertical de uno de los cuadrados en relación al siguiente (la figura es más interesante en las que la posición es diferente, con el resultado que el cuardado más pequeño no se encuentra necesariamente en el centro).
+                    </div>
 				</li>
 				<li>
                     <img src="/bjc-r/img/icons/tough-stuff-mini.png" alt="Ícono de actividades desafiantes" title="Ícono de actividades desafiantes" />
diff --git a/cur/programming/1-introduction/3-drawing/6-the-for-block.html b/cur/programming/1-introduction/3-drawing/6-the-for-block.html
index e1e7d49e8..595822292 100755
--- a/cur/programming/1-introduction/3-drawing/6-the-for-block.html
+++ b/cur/programming/1-introduction/3-drawing/6-the-for-block.html
@@ -18,8 +18,8 @@ <h2>Looping with a Counter</h2>
 
         <p>
         	You've seen these ways to repeat a set of commands:
-			<ul>
                 <div class="sidenoteBig">The <code>forever</code> block generates an <em>infinite loop</em> that goes on forever.  An infinite loop can sometimes be the result of a bug, but in some interactive programs, you <em>want</em> the program to keep running until stopped by the user.</div>
+            <ul>
 				<li><img class="inline" src="/bjc-r/img/blocks/forever.png" alt="the forever block" title="the forever block" />  repeats the same commands <em>forever</em>. (You used it to make Alonzo keep moving in <a href="/bjc-r/cur/programming/1-introduction/1-building-an-app/4-keeping-score.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Unit 1 Lab 1 Page 3: Make It a Game">Unit 1 Lab 1 Page 3: Make It a Game</a>.)</li>
                 <li><img class="inline" src="/bjc-r/img/1-introduction/repeat.png" alt="the repeat block" title="the repeat block" />  repeats them <em>a specific number of times</em>. (You used it to draw shapes in <a href="/bjc-r/cur/programming/1-introduction/3-drawing/1-exploring-motion.html?topic=nyc_bjc%2F1-intro-loops.topic&course=bjc4nyc.html&novideo&noassignment" title="Unit 1 Lab 3 Page 1: Exploring Motion">Unit 1 Lab 3 Page 1: Exploring Motion</a>.)</li>
 				<!--<li><img src="/bjc-r/img/blocks/repeat-until.png" alt="repeat until" title="repeat until" /> repeats until <em>some special condition</em> occurs.</li>-->
@@ -111,11 +111,12 @@ <h2>Looping with a Counter</h2>
                         <img class="indent" src="/bjc-r/img/1-introduction/Blockswith-Inputs_img/animationCode.png"  alt="forever{for(i)=(0) to (50){clear;warp{pinwheel, branches:(12) size:(50) backup:(i)}}}" title="forever{for(i)=(0) to (50){clear;warp{pinwheel, branches:(12) size:(50) backup:(i)}}}"/>
                     </div>
                 </li>
-              <img class="imageRight" height="180" src="/bjc-r/img/1-introduction/mini-Albers-picture.png" alt="mini-Albers-style picture" />
-                <li>Make sure your other work has been saved, then <a href="/bjc-r/prog/1-introduction/U1L3-mini-Albers.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load a starter project. Then save it." title=" Click here to load a starter project. Then save it."></a><br />Experiment with the script. Could you change the sizes or colors to make it more interesting?
-              </li>
-              <p style="clear: both; height: 0px;"></p>
+                <li>
+                    <img class="imageRight" height="180" src="/bjc-r/img/1-introduction/mini-Albers-picture.png" alt="mini-Albers-style picture" />
+                    Make sure your other work has been saved, then <a href="/bjc-r/prog/1-introduction/U1L3-mini-Albers.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load a starter project. Then save it." title=" Click here to load a starter project. Then save it."></a><br />Experiment with the script. Could you change the sizes or colors to make it more interesting?
+                </li>
             </ol>
+            <p style="clear: both; height: 0px;"></p>
         </div>
 
 		<div class="takeItTeaser">
@@ -139,32 +140,30 @@ <h2>Looping with a Counter</h2>
 		experimenting with variations of color within a "family" of similar
 		colors.  Snap<i>!</i> will let you make similar experiments.</p>
 
-			<ol type="A" start="2"> <li>What is the favorite color of the
-			author of this activity?</li> <li>If you didn't do the Take It
-			Further activity based on this Kazimir Malevich picture <img src="/bjc-r/img/1-introduction/Malevich-tiny.jpg">
-			then <a href="/bjc-r/cur/programming/1-introduction/3-drawing/1-exploring-motion.html">read it now</a>
-			to learn about Snap<em>!</em> features for <em>solid rectangles</em> and <em>color families</em>.</li>
-			<li>If you haven't already, do If There Is Time #10, which shows a simple version of this project idea.</li>
-			<li>Okay, now dig in.
-			<div class="narrowpurple">
-				<strong>Randomness:</strong> The four examples above are
-				different from the actual Albers picture in that they include
-				occasional colors that aren't from the same family.  This can
-				make the pictures more interesting to someone who doesn't
-				share Albers's interest in subtle differences in color.  (Albers himself, in fact, had more color variation in other pictures of this type.)
-				<em>Too much</em> randomness, though, can make the picture
-				<em>less</em> interesting.  Compare the last two examples
-				above; the left one of those two is clearly based on the orange family, with rainbow-neighbors red and yellow, but
-				the right one has violets, greens, oranges, a yellow&mdash;too
-				much chaos, maybe.  Look back at the Gossip project if you
-				don't remember how to choose something special once out of six
-				times, or once out of 14 times.  Other random choices you can
-				make are the number of squares, how much to shrink the size
-				from one square to the next, and how much to move the corner of
-				the next square horizontally and vertically (the picture is more
-				interesting if those two numbers are different, so the smallest
-				square isn't exactly in the center).
-				</div>
+			<ol type="A" start="2"> 
+                <li>What is the favorite color of the author of this activity?</li> 
+                <li>If you didn't do the Take It Further activity based on this Kazimir Malevich picture <img src="/bjc-r/img/1-introduction/Malevich-tiny.jpg" alt="painting-by-Malevich"> then <a href="/bjc-r/cur/programming/1-introduction/3-drawing/1-exploring-motion.html">read it now</a> to learn about Snap<em>!</em> features for <em>solid rectangles</em> and <em>color families</em>.</li>
+			    <li>If you haven't already, do If There Is Time #10, which shows a simple version of this project idea.</li>
+			    <li>Okay, now dig in.
+                    <div class="narrowpurple">
+                        <strong>Randomness:</strong> The four examples above are
+                        different from the actual Albers picture in that they include
+                        occasional colors that aren't from the same family.  This can
+                        make the pictures more interesting to someone who doesn't
+                        share Albers's interest in subtle differences in color.  (Albers himself, in fact, had more color variation in other pictures of this type.)
+                        <em>Too much</em> randomness, though, can make the picture
+                        <em>less</em> interesting.  Compare the last two examples
+                        above; the left one of those two is clearly based on the orange family, with rainbow-neighbors red and yellow, but
+                        the right one has violets, greens, oranges, a yellow&mdash;too
+                        much chaos, maybe.  Look back at the Gossip project if you
+                        don't remember how to choose something special once out of six
+                        times, or once out of 14 times.  Other random choices you can
+                        make are the number of squares, how much to shrink the size
+                        from one square to the next, and how much to move the corner of
+                        the next square horizontally and vertically (the picture is more
+                        interesting if those two numbers are different, so the smallest
+                        square isn't exactly in the center).
+                        </div>
 				</li>
 				<li>
                     <img src="/bjc-r/img/icons/tough-stuff-mini.png" alt="Tough Stuff" title="Tough Stuff" />

From b40144a2327ee991d8ce3eec8a1693e675f9e325 Mon Sep 17 00:00:00 2001
From: jkangEDC <jkang@edc.org>
Date: Wed, 18 Sep 2024 14:47:05 -0400
Subject: [PATCH 23/29] A11y - U1L4 & 5 list edits - both en & es

---
 .../4-privacy/2-examining-privacy.es.html     | 35 +++++++++---------
 .../4-privacy/2-examining-privacy.html        | 37 ++++++++++---------
 .../4-privacy/4-privacy-affected.es.html      | 10 +++--
 .../4-privacy/4-privacy-affected.html         | 10 +++--
 .../1-following-sprites.es.html               |  2 +-
 .../1-following-sprites.html                  |  2 +-
 .../2-sprite-interaction.es.html              | 13 ++++---
 .../2-sprite-interaction.html                 | 13 ++++---
 8 files changed, 67 insertions(+), 55 deletions(-)

diff --git a/cur/programming/1-introduction/4-privacy/2-examining-privacy.es.html b/cur/programming/1-introduction/4-privacy/2-examining-privacy.es.html
index fbe064423..937e2804d 100644
--- a/cur/programming/1-introduction/4-privacy/2-examining-privacy.es.html
+++ b/cur/programming/1-introduction/4-privacy/2-examining-privacy.es.html
@@ -53,25 +53,26 @@ <h2>Examinar la privacidad</h2>
 				<li>
                 	Discute:
                     <ol>
-                        <li><strong>¿Cuáles son algunas razones para renunciar a la privacidad en ciertas áreas?</strong> Identifica un área de tu vida en la que renuncias deliberadamente a la privacidad.</li>
+                        <li><strong>¿Cuáles son algunas razones para renunciar a la privacidad en ciertas áreas?</strong> Identifica un área de tu vida en la que renuncias deliberadamente a la privacidad.
+                            <div class="endnote">
+                                <a href="#hint-giveup" data-toggle="collapse" title="¿Necesitas ejemplos de algunas razones para renunciar a la privacidad en ciertas áreas?">¿Necesitas algunos ejemplos?</a>
+                                <div id="hint-giveup" class="collapse">
+                                    <p>
+                                        Aquí hay algunas razones por las que las personas renuncian a la privacidad:
+                                        <ul>
+                                            <li>Algún sitio web quiere que visitas requiere que te registres y te envía un correo electrónico para verificar que realmente eres tú.</li>
+                                            <li>Te resulta conveniente obtener anuncios personalizados y servicios de ubicación.</li>
+                                            <li>La gente de hoy se preocupa más por las amistades en línea.</li>
+                                            <li>Los gobiernos necesitan protegernos contra los malos.</li>
+                                            <li>Las empresas deben verificar la elegibilidad (por ejemplo, puntajes de crédito).</li>
+                                            <li>"Si no estoy haciendo nada malo, no tengo nada que ocultar".</li>
+                                        </ul>
+                                    </p>
+                                </div>
+                            </div>
+                        </li>
                         <li><strong>¿Cuáles son los riesgos?</strong> ¿Por qué <em>tú</em> has decidido que los beneficios superan los riesgos?</li>
                     </ol>
-                    <div class="endnote">
-                        <a href="#hint-giveup" data-toggle="collapse" title="¿Necesitas ejemplos de algunas razones para renunciar a la privacidad en ciertas áreas?">¿Necesitas algunos ejemplos?</a>
-                        <div id="hint-giveup" class="collapse">
-                            <p>
-                                Aquí hay algunas razones por las que las personas renuncian a la privacidad:
-                                <ul>
-                                    <li>Algún sitio web quiere que visitas requiere que te registres y te envía un correo electrónico para verificar que realmente eres tú.</li>
-                                    <li>Te resulta conveniente obtener anuncios personalizados y servicios de ubicación.</li>
-                                    <li>La gente de hoy se preocupa más por las amistades en línea.</li>
-                                    <li>Los gobiernos necesitan protegernos contra los malos.</li>
-                                    <li>Las empresas deben verificar la elegibilidad (por ejemplo, puntajes de crédito).</li>
-                                    <li>"Si no estoy haciendo nada malo, no tengo nada que ocultar".</li>
-                                </ul>
-                            </p>
-                        </div>
-                    </div>
                 </li>
 			</ol>
 		</div>
diff --git a/cur/programming/1-introduction/4-privacy/2-examining-privacy.html b/cur/programming/1-introduction/4-privacy/2-examining-privacy.html
index 99d19a470..84b340ca9 100644
--- a/cur/programming/1-introduction/4-privacy/2-examining-privacy.html
+++ b/cur/programming/1-introduction/4-privacy/2-examining-privacy.html
@@ -53,25 +53,26 @@ <h2>Examining Privacy</h2>
 				<li>
                 	Discuss:
                     <ol>
-                        <li><strong>What are some reasons for giving up privacy in certain areas?</strong> Identify one area in your life in which you purposely give up privacy.</li>
-                    <div class="endnote">
-                        <a href="#hint-giveup" data-toggle="collapse" title="Need examples of some reasons for giving up privacy in certain areas?">Need some examples?</a>
-                        <div id="hint-giveup" class="collapse">
-                            <p>
-                                Here are a few reasons people give up privacy:
-                                <ul>
-				  <li>Some website you want to visit requires you to sign up, and sends you an email to verify that it's really you.</li>
-                                    <li>You gain convenience from tailored ads and location services.</li>
-                                    <li>People today care more about online friendships.</li>
-                                    <li>Governments need to protect us against bad guys.</li>
-                                    <li>Businesses must verify eligibility (e.g., credit scores).</li>
-                                    <li>"If I'm doing nothing wrong, I have nothing to hide."</li>
-                                </ul>
-                            </p>
-                        </div>
-                   </div>                        <li><strong>What are the risks?</strong> Why have <em>you</em> decided that the benefits outweigh the risks?</li>
+                        <li><strong>What are some reasons for giving up privacy in certain areas?</strong> Identify one area in your life in which you purposely give up privacy.
+                            <div class="endnote">
+                                <a href="#hint-giveup" data-toggle="collapse" title="Need examples of some reasons for giving up privacy in certain areas?">Need some examples?</a>
+                                <div id="hint-giveup" class="collapse">
+                                    <p>
+                                        Here are a few reasons people give up privacy:
+                                        <ul>
+                                            <li>Some website you want to visit requires you to sign up, and sends you an email to verify that it's really you.</li>
+                                            <li>You gain convenience from tailored ads and location services.</li>
+                                            <li>People today care more about online friendships.</li>
+                                            <li>Governments need to protect us against bad guys.</li>
+                                            <li>Businesses must verify eligibility (e.g., credit scores).</li>
+                                            <li>"If I'm doing nothing wrong, I have nothing to hide."</li>
+                                        </ul>
+                                    </p>
+                                </div>
+                           </div>
+                        </li>
+                        <li><strong>What are the risks?</strong> Why have <em>you</em> decided that the benefits outweigh the risks?</li>
                     </ol>
-
                 </li>
 			</ol>
 		</div>
diff --git a/cur/programming/1-introduction/4-privacy/4-privacy-affected.es.html b/cur/programming/1-introduction/4-privacy/4-privacy-affected.es.html
index e3ac219ba..f81225184 100644
--- a/cur/programming/1-introduction/4-privacy/4-privacy-affected.es.html
+++ b/cur/programming/1-introduction/4-privacy/4-privacy-affected.es.html
@@ -33,16 +33,18 @@ <h2>Innovación y privacidad</h2>
                     <p>En grupos de cuatro, dividan la lectura de <a href="http://www.bitsbook.com/wp-content/uploads/2008/12/B2B_3.pdf#page=40" target="_blank" title="Blown to Bits páginas 22-35"><em>Blown to Bits</em> páginas 22-35</a>. Cada persona debe elegir dos secciones para leer de la lista de la derecha. (Asegúrense de que alguien lea cada sección).</p>
                     Mientras lees, usa estas preguntas como guía:
                     <ol type="a">
-                        <li><strong>¿Cuáles son las <em>innovaciones</em> descritas en cada sección?</strong></li>
-                        <div class="ap-standard">IOC-1.A.4</div>
+                        <li><strong>¿Cuáles son las <em>innovaciones</em> descritas en cada sección?</strong>
+                            <div class="ap-standard">IOC-1.A.4</div>
+                        </li>
                         <li><strong>¿Cómo son estas innovaciones <em>beneficiosas</em>?</strong></li>
                         <li><strong>¿Cómo <em>amenazan la privacidad</em>?</strong></li>
                     </ol>
                 </li>
                 <li>Enseña a los otros miembros de su grupo lo que aprendiste en las secciones que leiste.</li>
                 <li>Lee la caja <a href="http://www.bitsbook.com/wp-content/uploads/2008/12/B2B_3.pdf#page=58" target="_blank" title="How Sites Know Who You Are (Blown to Bits) [Cómo los sitios saben quién eres (página 40)]" >How Sites Know Who You Are (Blown to Bits) [Cómo los sitios saben quién eres (página 40)]</a>.</li>
-                <div class="ap-standard">IOC-1.F</div>
-                <li>Además de la privacidad, ¿qué otras cuestiones legales o éticas están relacionadas con la informática? Haz una lluvia de ideas para hacer una lista, luego elige una para investigar y escribir una página sobre ella.</li>
+                <li>
+                    <div class="ap-standard">IOC-1.F</div>
+                    Además de la privacidad, ¿qué otras cuestiones legales o éticas están relacionadas con la informática? Haz una lluvia de ideas para hacer una lista, luego elige una para investigar y escribir una página sobre ella.</li>
                 <li>
 					<img src="/bjc-r/img/icons/write-out-thoughts-mini.png" alt="Escribe tus ideas">
                     Elige una innnovación de la informática (un sitio web, un método de pago como Paypal, un inicio de sesión en línea indirecto como "iniciar sesión con Google", etc.) y explica las preocupaciones en cuanto a la privacidad que generan.
diff --git a/cur/programming/1-introduction/4-privacy/4-privacy-affected.html b/cur/programming/1-introduction/4-privacy/4-privacy-affected.html
index d015fa4de..730d9893e 100644
--- a/cur/programming/1-introduction/4-privacy/4-privacy-affected.html
+++ b/cur/programming/1-introduction/4-privacy/4-privacy-affected.html
@@ -36,16 +36,18 @@ <h2>Innovations and Privacy</h2>
                     <p>In groups of four, split up the reading in <a href="http://www.bitsbook.com/wp-content/uploads/2008/12/B2B_3.pdf#page=40" target="_blank" title="Blown to Bits, Footprints and Fingerprints"><em>Blown to Bits</em> pages 22-35</a>. Each person should pick two sections to read from the list at right. (Make sure someone reads each section).</p>
                     As you read, use these guiding questions:
                     <ol type="a">
-                        <li><strong>What are the <em>innovations</em> described in each section?</strong></li>
-                        <div class="ap-standard">IOC-1.A.4</div>
+                        <li><strong>What are the <em>innovations</em> described in each section?</strong>
+                            <div class="ap-standard">IOC-1.A.4</div>
+                        </li>
                         <li><strong>How are these innovations <em>beneficial</em>?</strong></li>
                         <li><strong>How do they <em>threaten privacy</em>?</strong></li>
                     </ol>
                 </li>
                 <li>Teach the other members of your group what you learned in the sections you read.</li>
                 <li>Read the box <a href="http://www.bitsbook.com/wp-content/uploads/2008/12/B2B_3.pdf#page=58" target="_blank" title="Blown to Bits, How Sites Know Who You Are" >How Sites Know Who You Are (<em>Blown to Bits</em> page 40)</a>.</li>
-                <div class="ap-standard">IOC-1.F</div>
-                <li>Besides privacy, what other legal or ethical issues are related to computing?  Brainstorm a list, then pick one to research and write a page about.</li>
+                <li>
+                    <div class="ap-standard">IOC-1.F</div>
+                    Besides privacy, what other legal or ethical issues are related to computing?  Brainstorm a list, then pick one to research and write a page about.</li>
                 <li>
 					<img src="/bjc-r/img/icons/write-out-thoughts-mini.png" alt="write out your thoughts">
             		Pick a computing innovation (a website, a payment method like Paypal, an online indirect login manager like &quot;log in via Google,&quot; etc.) and explain privacy concerns that it raises.
diff --git a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
index 13d500c34..5440cc768 100644
--- a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
+++ b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.es.html
@@ -88,8 +88,8 @@ <h4 class="box-head">Cambiar el nombre de un personaje</h4>
 						<li>El <strong>líder</strong> siempre sigue el movimiento del puntero de tu ratón.</li>
 						<li>El <strong>seguidor</strong> permanece en un lugar, pero siempre apunta hacia el <strong>líder</strong>.</li>
 					</ul>
-				</li>
 				<img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Guarda tu trabajo" title="Guarda tu trabajo" />
+                </li>
 			</ol>
 		</div>
 
diff --git a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
index a9c8d955e..d1d746158 100644
--- a/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
+++ b/cur/programming/1-introduction/5-follow-the-leader/1-following-sprites.html
@@ -89,8 +89,8 @@ <h4 class="box-head">Changing the Name of a Sprite</h4>
 						<li><strong>Leader</strong> always follows your mouse when you move your mouse around.</li>
 						<li><strong>Follower</strong> stays in one place, but always points toward <strong>Leader</strong>.</li>
 					</ul>
-				</li>
 				<img class="inline" src="/bjc-r/img/icons/save-now.png" alt="Save your work" title="Save your work" />
+                </li>
 			</ol>
 		</div>
   </body>
diff --git a/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.es.html b/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.es.html
index 2e121682b..dbcef8d26 100644
--- a/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.es.html
+++ b/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.es.html
@@ -55,10 +55,12 @@ <h2>Seguir a otro objeto</h2>
     mover () pasos ← Comentario: Escribe un número bajo en este espacio vacío.
 }">
                         </li>
-                        <div class="ap-standard">AAP-2.K.5</div>
-                        <li>¿Qué sucede si los personajes ya se están tocando? Es decir, ¿qué sucede si arrastras un personaje encima del otro y luego haces clic en la bandera verde? ¿Por qué?</li>
-                        <div class="ap-standard">AAP-2.K.4</div>
-                        <li>¿Qué sucede si la entrada para <code>mover</code> es 0?</li>
+                        <li>¿Qué sucede si los personajes ya se están tocando? Es decir, ¿qué sucede si arrastras un personaje encima del otro y luego haces clic en la bandera verde? ¿Por qué?
+                            <div class="ap-standard">AAP-2.K.5</div>
+                        </li>
+                        <li>¿Qué sucede si la entrada para <code>mover</code> es 0?
+                            <div class="ap-standard">AAP-2.K.4</div>
+                        </li>
                     </ol>
                     <div class="vocabFullWidth">
                         <p>Cuando un programa sigue haciendo lo mismo y nunca se detiene, se llama <strong>bucle infinito</strong> (<em>infinite loop</em>).</p>
@@ -89,8 +91,9 @@ <h2>Seguir a otro objeto</h2>
 
         <div class="forYouToDo">
 			<ol start="5">
-				<li>Prueba tu programa varias veces. </li>
+				<li>Prueba tu programa varias veces. 
             	<img class="inline" src="/bjc-r/img/icons/pair-programming-swap.es.png" alt="Intercambio de parejas de programación" title="Intercambio de parejas de programación" />
+                </li>
                 <li>
                 	<p>En este momento, cuando los personajes se encuentran, simplemente se detienen. Haz que tengan una conversación cuando se detengan. Puedes hacerlo agregando un código como este a la secuencia de comandos del <strong>Líder</strong>. Inventa tu propia conversación. Puedes utilizar cualquier idioma en el que sepas escribir.</p>
                     <div class="sidenoteBig">El <strong>Líder</strong> hace las cosas por sí mismo. También le dice al <strong>Seguidor</strong> qué hacer y cuándo hacerlo. Este código pone al <strong>Líder</strong> a cargo de <strong>Seguidor</strong>.</div>
diff --git a/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.html b/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.html
index 2c402442f..611c4320d 100644
--- a/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.html
+++ b/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.html
@@ -79,10 +79,12 @@ <h2>Sprite Following a Sprite</h2>
     move () steps ← Comment: Type a small value in this empty input slot.
 }">
                         </li>
-                        <div class="ap-standard">AAP-2.K.5</div>
-                        <li>What happens if the sprites are already touching? That is, what happens if you drag one sprite on top of the other and then click the green flag? Why?</li>
-                        <div class="ap-standard">AAP-2.K.4</div>
-                        <li>Experiment. What happens if the input to <code>move</code> is 0?</li>
+                        <li>What happens if the sprites are already touching? That is, what happens if you drag one sprite on top of the other and then click the green flag? Why?
+                            <div class="ap-standard">AAP-2.K.5</div>
+                        </li>
+                        <li>Experiment. What happens if the input to <code>move</code> is 0?
+                            <div class="ap-standard">AAP-2.K.4</div>
+                        </li>
                     </ol>
                     <div class="vocabFullWidth">
                         <p>When a program keeps running forever, that's called an <strong>infinite loop</strong>.</p>
@@ -113,8 +115,9 @@ <h2>Sprite Following a Sprite</h2>
 
         <div class="forYouToDo">
 			<ol start="5">
-				<li>Test your program a few times. </li>
+				<li>Test your program a few times. 
             	<img class="inline" src="/bjc-r/img/icons/pair-programming-swap.png" alt="Pair Programming Swap" title="Pair Programming Swap" />
+                </li>
                 <li>
                 	<p>Right now, when the sprites meet, they just stop. Make them have a conversation when they stop. You can do that by adding code like this to <strong>Leader</strong>'s script. Make up your own conversation. You can use any language you can type. Here's an example using several languages.</p>
                     <div class="sidenoteBig"><strong>Leader</strong> does things itself. It also tells <strong>Follower</strong> what to do and when to do it. This code puts <strong>Leader</strong> in charge of <strong>Follower</strong>.</div>

From 59a5b2c996d7f9131b5a7a6af8718150e24923f2 Mon Sep 17 00:00:00 2001
From: jkangEDC <jkang@edc.org>
Date: Wed, 18 Sep 2024 14:56:25 -0400
Subject: [PATCH 24/29] A11y - U1 OpProjects list edits - both en & es

---
 .../1-introduction/optional-projects/3-pong.es.html |  6 ++++--
 .../1-introduction/optional-projects/3-pong.html    |  6 ++++--
 .../optional-projects/4-daisy.es.html               |  3 ++-
 .../1-introduction/optional-projects/4-daisy.html   | 13 +++++++------
 .../optional-projects/5-sentence-builder.es.html    |  9 +++++----
 .../optional-projects/5-sentence-builder.html       | 11 ++++++-----
 6 files changed, 28 insertions(+), 20 deletions(-)

diff --git a/cur/programming/1-introduction/optional-projects/3-pong.es.html b/cur/programming/1-introduction/optional-projects/3-pong.es.html
index b074e89cd..10c7e520e 100644
--- a/cur/programming/1-introduction/optional-projects/3-pong.es.html
+++ b/cur/programming/1-introduction/optional-projects/3-pong.es.html
@@ -21,8 +21,10 @@ <h2>El juego de Pong</h2>
                     <img class="indent" src="/bjc-r/img/1-introduction/Pong_img/Bounce.png" height="346" alt="Direcciones inicial y final de la pelota." title="Direcciones inicial y final de la pelota." />
                 </li>
                 <li>Crea los objetos de la paleta y la pelota y dales sus disfraces (rectángulo y círculo rellenos).</li>
-                <div class="sidenote">Haz esto por tu cuenta, pero si te quedas atascado, mira estos <a href="/bjc-r/cur/programming/1-introduction/optional-projects/3b-pong-hints.es.html" target="_blank" title="Consejos para el juego de Pong">pistas para el juego de Pong</a> sobre cómo proceder.</div>
-                <li>Escribe el código para que la paleta se mueva hacia arriba y hacia abajo cuando el usuario presione las teclas de flecha hacia arriba y hacia abajo. No dejes que la paleta se mueva más allá de los bordes del escenario.</li>
+                <li>
+                    <div class="sidenote">Haz esto por tu cuenta, pero si te quedas atascado, mira estos <a href="/bjc-r/cur/programming/1-introduction/optional-projects/3b-pong-hints.es.html" target="_blank" title="Consejos para el juego de Pong">pistas para el juego de Pong</a> sobre cómo proceder.</div>
+                    Escribe el código para que la paleta se mueva hacia arriba y hacia abajo cuando el usuario presione las teclas de flecha hacia arriba y hacia abajo. No dejes que la paleta se mueva más allá de los bordes del escenario.
+                </li>
                 <li>Escribe el código para que la pelota comience a moverse cuando se pulse la bandera verde y para que rebote en los bordes del escenario y la paleta. Ten en cuenta que hay un bloque incorporado para rebotar en los bordes.</li>
             </ol> 
         </div>
diff --git a/cur/programming/1-introduction/optional-projects/3-pong.html b/cur/programming/1-introduction/optional-projects/3-pong.html
index ab3e64690..42e29716a 100644
--- a/cur/programming/1-introduction/optional-projects/3-pong.html
+++ b/cur/programming/1-introduction/optional-projects/3-pong.html
@@ -22,8 +22,10 @@ <h2>The Game of Pong</h2>
                     <img class="indent" src="/bjc-r/img/1-introduction/Pong_img/Bounce.png" height="346" alt="Initial and final directions of ball" title="Initial and final directions of ball" />
                 </li>
                 <li>Create the paddle and the ball sprites and give them their costumes (filled rectangle and circle).</li>
-                <div class="sidenote">Do this on your own but if you get stuck, look at these <a href="/bjc-r/cur/programming/1-introduction/optional-projects/3b-pong-hints.html" target="_blank" title="Hints for the Game of Pong">hints for the Game of Pong</a> on how to proceed.</div>
-                <li>Write the code to have the paddle move up and down when the user presses the up arrow and down arrow keys. Don't let the paddle move beyond the edges of the stage.</li>
+                <li>
+                    <div class="sidenote">Do this on your own but if you get stuck, look at these <a href="/bjc-r/cur/programming/1-introduction/optional-projects/3b-pong-hints.html" target="_blank" title="Hints for the Game of Pong">hints for the Game of Pong</a> on how to proceed.</div>
+                    Write the code to have the paddle move up and down when the user presses the up arrow and down arrow keys. Don't let the paddle move beyond the edges of the stage.          
+                </li>
                 <li>Write the code to start the ball moving when green flag is clicked and to bounce off the stage edges and the paddle. Note that there is a built in block to bounce off the edges.</li>
             </ol> 
         </div>
diff --git a/cur/programming/1-introduction/optional-projects/4-daisy.es.html b/cur/programming/1-introduction/optional-projects/4-daisy.es.html
index afcd26cf0..88c014a4d 100644
--- a/cur/programming/1-introduction/optional-projects/4-daisy.es.html
+++ b/cur/programming/1-introduction/optional-projects/4-daisy.es.html
@@ -16,13 +16,14 @@ <h2>Diseño margarita</h2>
 
         <div class="forYouToDo" id="first">
             <ol>
-                <li>Reflexiona sobre cómo se creó este diseño. ¿Cuáles son los bloques de construcción fundamentales? ¿Cómo se organizan estos?</li>
+                <li>Reflexiona sobre cómo se creó este diseño. ¿Cuáles son los bloques de construcción fundamentales? ¿Cómo se organizan estos?
                     <div class="endnote">
                         <p>Puedes ver <a href="#hint-animation" data-toggle="collapse" title="Puedes ver la animación para tomar algunas ideas.">la animación </a> para tomar algunas ideas.</p>
                         <div id="hint-animation" class="collapse">
                             <img class="center indent" src="/bjc-r/img/1-introduction/Daisy_img/DaisyAnimation.es.gif"  height="400" alt="Animación que muestra la creación del diseño margarita mediante la rotación de un círculo" title="Animación que muestra la creación del diseño margarita mediante la rotación de un círculo"/>
                         </div>
                     </div>
+                </li>
                 <li>Todo el diseño se compone de círculos. Entonces, lo primero que debes hacer es escribir código que creará un círculo. Para hacer esto, crea un bloque personalizado <code>dibujar círculo</code> utilizando la opción "Crear un bloque" del menú "Variables". Pista: Un polígono regular con 30 lados o más es una buena aproximación para un círculo.</li>
                 <li>Ahora que sabes dibujar un círculo, puedes generar el diseño de la margarita girando un poco tu personaje al final de cada círculo dibujado. En el diseño de arriba hay 24 círculos. ¿Cuánto debe girar el personaje cada vez que se dibuja un círculo para hacer un ciclo completo de 360&deg; cuando todos los círculos están dibujados? Crea un bloque personalizado <code>dibujar margarita</code> para hacer esto.</li>
             </ol>
diff --git a/cur/programming/1-introduction/optional-projects/4-daisy.html b/cur/programming/1-introduction/optional-projects/4-daisy.html
index 32abbc388..4bdba9f47 100644
--- a/cur/programming/1-introduction/optional-projects/4-daisy.html
+++ b/cur/programming/1-introduction/optional-projects/4-daisy.html
@@ -17,13 +17,14 @@ <h2>Daisy Design</h2>
 
         <div class="forYouToDo" id="first">
             <ol>
-                <li>Discuss how this design was created.  What are the fundamental building blocks?  How are these arranged?</li>
-                <div class="endnote">
-                    <p>You can watch <a href="#hint-animation" data-toggle="collapse" title="You can watch this animation to get some ideas.">this animation</a> to get some ideas.</p>
-                    <div id="hint-animation" class="collapse">
-                        <img class="center indent" src="/bjc-r/img/1-introduction/Daisy_img/DaisyAnimation.gif"  height="400" alt="Animation showing the creation of the Daisy design by rotation of a circle" title="Animation showing the creation of the Daisy design by rotation of a circle"/>
+                <li>Discuss how this design was created.  What are the fundamental building blocks?  How are these arranged?
+                    <div class="endnote">
+                        <p>You can watch <a href="#hint-animation" data-toggle="collapse" title="You can watch this animation to get some ideas.">this animation</a> to get some ideas.</p>
+                        <div id="hint-animation" class="collapse">
+                            <img class="center indent" src="/bjc-r/img/1-introduction/Daisy_img/DaisyAnimation.gif"  height="400" alt="Animation showing the creation of the Daisy design by rotation of a circle" title="Animation showing the creation of the Daisy design by rotation of a circle"/>
+                        </div>
                     </div>
-                </div>
+                </li>
                 <li>The entire design is made up of circles.  So the first thing to do is to write code that will create a circle. To do this, create a custom block <code>Draw Circle</code> via the “Variables” menu “Make a block” option.  Hint: A regular polygon with 30 or more sides is a good approximation for a circle. </li>
                 <li>Now that you can draw a circle, you can generate the Daisy Design by rotating your sprite a bit at the end of each circle drawn.  In the design above there are 24 circles.  How much must the sprite turn each time a circle is drawn in order to make a full cycle of 360&deg; when all the circles are drawn?  Create a custom block <code>Draw Daisy</code> to do this.</li>
                 <!-- <div class="endnote">If you get stuck in any of the previous steps, you can look at <a href="/bjc-r/cur/programming/1-introduction/5-projects/3b-daisy-hints.html" target="_blank">this page </a>for hints.</div>-->
diff --git a/cur/programming/1-introduction/optional-projects/5-sentence-builder.es.html b/cur/programming/1-introduction/optional-projects/5-sentence-builder.es.html
index d135e0fd4..680a9a8d1 100644
--- a/cur/programming/1-introduction/optional-projects/5-sentence-builder.es.html
+++ b/cur/programming/1-introduction/optional-projects/5-sentence-builder.es.html
@@ -10,7 +10,6 @@
         <h2>Modelar el lenguaje</h2>
 		<div class="learn"><p><strong>En este proyecto</strong>, usarás reporteros y listas para crear un programa capaz de crear un lenguaje más complicado que el proyecto Chisme.</p></div>
         <div class="forYouToDo" id="first">
-			<ol>
 				<div class="sidenote">
                     <ul>
                         <li><strong>sustantivos</strong> (cosas)</li>
@@ -21,6 +20,7 @@ <h2>Modelar el lenguaje</h2>
                         <li><strong>preposiciones</strong> (indican relaciones)</li>
                     </ul>
                 </div>
+            <ol>
                 <li>
                     <a href="/bjc-r/prog/1-introduction/U1-ModelingLanguage.es.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.es.png" alt="Haz clic para cargar un proyecto nuevo. Entonces guárdalo." title="Haz clic para cargar un proyecto nuevo. Entonces guárdalo."></a>
                     <p>Contiene seis reporteros, cada uno de los cuales reporta una palabra aleatoria de una lista de palabras en esa categoría.</p>
@@ -34,12 +34,13 @@ <h2>Modelar el lenguaje</h2>
                     Se pueden construir oraciones más complicadas a partir de varios sintagmas. Crea estos reporteros de sintagmas:
                       <ol>
                         <li><img border="0" src="/bjc-r/img/3-lists/noun_phrase.es.png" alt="bloque reportero verde de sintagma nominal verde" title="bloque reportero verde de sintagma nominal"> debe unir palabras de dos categorías para formar sintagmas como "el sándwich" o "una jirafa", o de tres categorías para crear sintagmas como "el niño pequeño", "una jirafa verde" o "nuestro viejo sándwich".</li>
-                        <li><img border="0" src="/bjc-r/img/3-lists/prep_phrase.es.png" alt="bloque reportero verde de sintagma preposicional" title="bloque reportero verde de sintagma preposicional"> debe combinar una preposición con un <code>sintagma nominal</code> para crear sintagmas como "cerca del niño pequeño" o "sobre una pizza sabia". </li>
-                        <div class="takeNote">Usar <code>sintagma nominal</code> para definir <code>sintagma preposicional</code> es un buen ejemplo de abstracción. Si luego cambia <code>sintagma nominal</code> para incluir nombres de personas, <code>sintagma preposicional</code> seguirá funcionando.</div>
+                        <li><img border="0" src="/bjc-r/img/3-lists/prep_phrase.es.png" alt="bloque reportero verde de sintagma preposicional" title="bloque reportero verde de sintagma preposicional"> debe combinar una preposición con un <code>sintagma nominal</code> para crear sintagmas como "cerca del niño pequeño" o "sobre una pizza sabia". 
+                            <div class="takeNote">Usar <code>sintagma nominal</code> para definir <code>sintagma preposicional</code> es un buen ejemplo de abstracción. Si luego cambia <code>sintagma nominal</code> para incluir nombres de personas, <code>sintagma preposicional</code> seguirá funcionando.</div>
+                        </li>
                         <li><img border="0" src="/bjc-r/img/3-lists/verb_phrase.es.png" alt="bloque reportero verde de sintagma verbal" title="bloque reportero verde de sintagma verbal"> debe reportar solo un verbo como &quot;salta&quot; o une un verbo y un adverbio para crear combinaciones como "salta tristemente", "duerme la siesta rápidamente" o "piensa con sueño".</li>
 					</ol>
+                    <div class="endnote">Estos sintagmas serán correctos gramaticalmente, pero no necesariamente tendrán sentido. Por ejemplo, <code>sintagma nominal</code> podría generar "una pizza cansada".</div>
                 </li>
-                <div class="endnote">Estos sintagmas serán correctos gramaticalmente, pero no necesariamente tendrán sentido. Por ejemplo, <code>sintagma nominal</code> podría generar "una pizza cansada".</div>
                 <li>
                     Luego, haz una <code>oración complicada</code> de reportero que combine un sintagma nominal, un sintagma verbal y un sintagma preposicional.
                     <img class="indent" src="/bjc-r/img/1-introduction/complicated-sentence-reporting.es.png" alt="oración complicada que reporta 'mi elefante tonto frente a tu elefante cansado se sienta rápidamente'" title="oración complicada que reporta 'mi elefante tonto frente a tu elefante cansado se sienta rápidamente'" />
diff --git a/cur/programming/1-introduction/optional-projects/5-sentence-builder.html b/cur/programming/1-introduction/optional-projects/5-sentence-builder.html
index 3d3ac16a6..9093c9cf9 100644
--- a/cur/programming/1-introduction/optional-projects/5-sentence-builder.html
+++ b/cur/programming/1-introduction/optional-projects/5-sentence-builder.html
@@ -10,7 +10,6 @@
         <h2>Modeling Language</h2>
 		<div class="learn"><p><strong>In this project</strong>, you will create a program capable of creating more complicated language than the Gossip project.</p></div>
         <div class="forYouToDo" id="first">
-			<ol>
 				<div class="sidenote">
                     <ul>
                         <li><strong>nouns</strong> (things)</li>
@@ -21,6 +20,7 @@ <h2>Modeling Language</h2>
                         <li><strong>prepositions</strong> (relationship indicators)</li>
                     </ul>
                 </div>
+             <ol>
                 <li>
                     <a href="/bjc-r/prog/1-introduction/U1-ModelingLanguage.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load a starter project. Then save it." title="Click here to load a starter project. Then save it."></a>
                     <p>It contains six reporters that each report a random word from a list of words in that category.</p>
@@ -34,13 +34,14 @@ <h2>Modeling Language</h2>
                     More complicated sentences can be built up from multiple phrases. Create these phrase reporters:
                       <ol>
                         <li><img border="0" src="/bjc-r/img/3-lists/noun_phrase.png" alt="green noun phrase reporter block" title="green noun phrase reporter block"> should join words from two categories to make phrases like "the sandwich" or "a giraffe," or from three categories to create phrases like "the little boy," "a green giraffe," or "our old sandwich." </li>
-                        <li><img border="0" src="/bjc-r/img/3-lists/prep_phrase.png" alt="green prepositional phrase reporter block" title="green prepositional phrase reporter block"> should combine a preposition with a <code>noun phrase</code> to create phrases like "near the little boy" or "over a wise pizza." </li>
-                        <div class="takeNote">Using <code>noun phrase</code> to define <code>prepositional phrase</code> is a good example of abstraction. If you later change <code>noun phrase</code> to include people's names, <code>prepositional phrase</code> will still work.</div>
+                        <li><img border="0" src="/bjc-r/img/3-lists/prep_phrase.png" alt="green prepositional phrase reporter block" title="green prepositional phrase reporter block"> should combine a preposition with a <code>noun phrase</code> to create phrases like "near the little boy" or "over a wise pizza." 
+                            <div class="takeNote">Using <code>noun phrase</code> to define <code>prepositional phrase</code> is a good example of abstraction. If you later change <code>noun phrase</code> to include people's names, <code>prepositional phrase</code> will still work.</div>
+                        </li>
                         <li><img border="0" src="/bjc-r/img/3-lists/verb_phrase.png" alt="green verb phrase reporter block" title="green verb phrase reporter block"> should report either just a verb like &quot;jumps&quot; or join a verb and an adverb to create combinations like "jumps sadly," "naps quickly," or "thinks sleepily."</li>
 					</ol>
+                    <div class="endnote">These phrases will be grammatically correct, but they won't necessarily make sense. For example, <code>noun phrase</code> might generate "a tired pizza."</div>
                 </li>
-                <div class="endnote">These phrases will be grammatically correct, but they won't necessarily make sense. For example, <code>noun phrase</code> might generate "a tired pizza."</div>
-                <li>
+                 <li>
                     Then, make a reporter <code>complicated sentence</code> that combines a noun phrase, a verb phrase, and a prepositional phrase.
                     <img class="indent" src="/bjc-r/img/1-introduction/complicated-sentence-reporting.png" alt="complicated sentence reporting 'my silly elephant in front of your tired elephant sits down quickly'" title="complicated sentence reporting 'my silly elephant in front of your tired elephant sits down quickly'" />
                 </li>

From 9e27440453b58993dfc6113fbff0da91f1b87ca7 Mon Sep 17 00:00:00 2001
From: jkangEDC <jkang@edc.org>
Date: Tue, 24 Sep 2024 15:27:12 -0400
Subject: [PATCH 25/29] A11y - remaining U1 edits

---
 .../1-start-your-first-snap-app.es.html                  | 9 +++++----
 .../5-finish-your-first-snap-app.es.html                 | 3 ++-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html b/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html
index 0d844f5ea..9c32b802a 100644
--- a/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html
+++ b/cur/programming/1-introduction/1-building-an-app/1-start-your-first-snap-app.es.html
@@ -89,10 +89,11 @@ <h3>Hagamos el juego más interesante</h3>
                         </div>
                     </div>
                 </li>
-                <li>Alonzo se mueve muy rápido. Utiliza el bloque <img src="/bjc-r/img/blocks/wait-1-secs.es.png" alt="esperar 1 segundo" title="esperar 1 segundo" /> para hacerlo más lento. Puedes probar tu programa reduciendo o incrementando el tiempo de espera.</li>
-                <div class="endnote">
-                    El lugar donde va el bloque de <code>espera</code> en tu secuencia de comandos es importante. ¿Quieres que el guion espere una vez o cada vez que Alonzo se mueva?
-                </div>
+                <li>Alonzo se mueve muy rápido. Utiliza el bloque <img src="/bjc-r/img/blocks/wait-1-secs.es.png" alt="esperar 1 segundo" title="esperar 1 segundo" /> para hacerlo más lento. Puedes probar tu programa reduciendo o incrementando el tiempo de espera.
+                    <div class="endnote">
+                        El lugar donde va el bloque de <code>espera</code> en tu secuencia de comandos es importante. ¿Quieres que el guion espere una vez o cada vez que Alonzo se mueva?
+                    </div>
+                </li>
                 <li>Antes de continuar, la siguiente página le mostrará cómo guardar un Snap<em>!</em> proyecto para no perder lo que has ganado hasta ahora. Puede utilizar la flecha derecha (en la parte superior derecha o inferior derecha de esta página web) para continuar.</li>
             </ol>
         </div>
diff --git a/cur/programming/1-introduction/1-building-an-app/5-finish-your-first-snap-app.es.html b/cur/programming/1-introduction/1-building-an-app/5-finish-your-first-snap-app.es.html
index 95de8b427..bd4c45197 100644
--- a/cur/programming/1-introduction/1-building-an-app/5-finish-your-first-snap-app.es.html
+++ b/cur/programming/1-introduction/1-building-an-app/5-finish-your-first-snap-app.es.html
@@ -38,7 +38,8 @@ <h2>Mejorar tu juego</h2>
                         <li>Alonzo debería empezar a recuperar su color, y no debería mirar hacia al lado contrario, cada vez que el jugador falle en su intento de hacer clic sobre él.</li>
                     </ul>
                 </li>
-                <img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Ahora es un buen momento para guardar" title="Ahora es un buen momento para guardar" />
+                <li><img class="inline" src="/bjc-r/img/icons/save-now.es.png" alt="Ahora es un buen momento para guardar" title="Ahora es un buen momento para guardar" />
+                </li>
  			</ol>
 		</div>
 

From 83afed42b40cf53c0edbec7503e4a0370ef01cf9 Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Wed, 25 Sep 2024 11:24:49 -0700
Subject: [PATCH 26/29] Minor tweaks

---
 Gemfile                               |  21 +--
 Gemfile.lock                          | 236 +-------------------------
 utilities/specs/accessibility_spec.rb |   2 +-
 3 files changed, 3 insertions(+), 256 deletions(-)
 mode change 100644 => 120000 Gemfile
 mode change 100644 => 120000 Gemfile.lock

diff --git a/Gemfile b/Gemfile
deleted file mode 100644
index 6dbbaa855..000000000
--- a/Gemfile
+++ /dev/null
@@ -1,20 +0,0 @@
-# frozen_string_literal: true
-
-# This Gemfile is for tests inside this repo.
-# The `build-tools` directory has its own Gemfile for the build tools.
-
-# Install with: bundle install
-source 'https://rubygems.org'
-
-ruby file: '.ruby-version'
-
-gem 'axe-core-capybara'
-gem 'axe-core-rspec'
-gem 'capybara'
-gem 'capybara-screenshot'
-gem 'nokogiri'
-gem 'rack-jekyll'
-gem 'rspec'
-gem 'selenium-webdriver'
-gem 'webdrivers'
-gem 'webrick'
diff --git a/Gemfile b/Gemfile
new file mode 120000
index 000000000..e9e778af8
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1 @@
+utilities/build-tools/Gemfile
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 100644
index b920e8339..000000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1,235 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    addressable (2.8.6)
-      public_suffix (>= 2.0.2, < 6.0)
-    axe-core-api (4.9.1)
-      dumb_delegator
-      virtus
-    axe-core-capybara (4.9.1)
-      axe-core-api (= 4.9.1)
-      dumb_delegator
-    axe-core-rspec (4.9.1)
-      axe-core-api (= 4.9.1)
-      dumb_delegator
-      virtus
-    axiom-types (0.1.1)
-      descendants_tracker (~> 0.0.4)
-      ice_nine (~> 0.11.0)
-      thread_safe (~> 0.3, >= 0.3.1)
-    bigdecimal (3.1.8)
-    capybara (3.40.0)
-      addressable
-      matrix
-      mini_mime (>= 0.1.3)
-      nokogiri (~> 1.11)
-      rack (>= 1.6.0)
-      rack-test (>= 0.6.3)
-      regexp_parser (>= 1.5, < 3.0)
-      xpath (~> 3.2)
-    capybara-screenshot (1.0.26)
-      capybara (>= 1.0, < 4)
-      launchy
-    childprocess (5.0.0)
-    coercible (1.0.0)
-      descendants_tracker (~> 0.0.1)
-    colorator (1.1.0)
-    concurrent-ruby (1.3.3)
-    descendants_tracker (0.0.4)
-      thread_safe (~> 0.3, >= 0.3.1)
-    diff-lcs (1.5.1)
-    dumb_delegator (1.0.0)
-    em-websocket (0.5.3)
-      eventmachine (>= 0.12.9)
-      http_parser.rb (~> 0)
-    eventmachine (1.2.7)
-    ffi (1.17.0-aarch64-linux-gnu)
-    ffi (1.17.0-aarch64-linux-musl)
-    ffi (1.17.0-arm-linux-gnu)
-    ffi (1.17.0-arm-linux-musl)
-    ffi (1.17.0-arm64-darwin)
-    ffi (1.17.0-x86-linux-gnu)
-    ffi (1.17.0-x86-linux-musl)
-    ffi (1.17.0-x86_64-darwin)
-    ffi (1.17.0-x86_64-linux-gnu)
-    ffi (1.17.0-x86_64-linux-musl)
-    forwardable-extended (2.6.0)
-    google-protobuf (4.27.1)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.27.1-aarch64-linux)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.27.1-arm64-darwin)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.27.1-x86-linux)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.27.1-x86_64-darwin)
-      bigdecimal
-      rake (>= 13)
-    google-protobuf (4.27.1-x86_64-linux)
-      bigdecimal
-      rake (>= 13)
-    http_parser.rb (0.8.0)
-    i18n (1.14.5)
-      concurrent-ruby (~> 1.0)
-    ice_nine (0.11.2)
-    jekyll (4.3.3)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      em-websocket (~> 0.5)
-      i18n (~> 1.0)
-      jekyll-sass-converter (>= 2.0, < 4.0)
-      jekyll-watch (~> 2.0)
-      kramdown (~> 2.3, >= 2.3.1)
-      kramdown-parser-gfm (~> 1.0)
-      liquid (~> 4.0)
-      mercenary (>= 0.3.6, < 0.5)
-      pathutil (~> 0.9)
-      rouge (>= 3.0, < 5.0)
-      safe_yaml (~> 1.0)
-      terminal-table (>= 1.8, < 4.0)
-      webrick (~> 1.7)
-    jekyll-sass-converter (3.0.0)
-      sass-embedded (~> 1.54)
-    jekyll-watch (2.2.1)
-      listen (~> 3.0)
-    kramdown (2.4.0)
-      rexml
-    kramdown-parser-gfm (1.1.0)
-      kramdown (~> 2.0)
-    launchy (3.0.1)
-      addressable (~> 2.8)
-      childprocess (~> 5.0)
-    liquid (4.0.4)
-    listen (3.9.0)
-      rb-fsevent (~> 0.10, >= 0.10.3)
-      rb-inotify (~> 0.9, >= 0.9.10)
-    matrix (0.4.2)
-    mercenary (0.4.0)
-    mini_mime (1.1.5)
-    nokogiri (1.16.6-aarch64-linux)
-      racc (~> 1.4)
-    nokogiri (1.16.6-arm-linux)
-      racc (~> 1.4)
-    nokogiri (1.16.6-arm64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.16.6-x86-linux)
-      racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-darwin)
-      racc (~> 1.4)
-    nokogiri (1.16.6-x86_64-linux)
-      racc (~> 1.4)
-    pathutil (0.16.2)
-      forwardable-extended (~> 2.6)
-    public_suffix (5.1.1)
-    racc (1.8.0)
-    rack (1.6.13)
-    rack-jekyll (0.5.0)
-      jekyll (>= 1.3)
-      listen (>= 1.3)
-      rack (~> 1.5)
-    rack-test (2.1.0)
-      rack (>= 1.3)
-    rake (13.2.1)
-    rb-fsevent (0.11.2)
-    rb-inotify (0.11.1)
-      ffi (~> 1.0)
-    regexp_parser (2.9.2)
-    rexml (3.3.2)
-      strscan
-    rouge (4.3.0)
-    rspec (3.13.0)
-      rspec-core (~> 3.13.0)
-      rspec-expectations (~> 3.13.0)
-      rspec-mocks (~> 3.13.0)
-    rspec-core (3.13.0)
-      rspec-support (~> 3.13.0)
-    rspec-expectations (3.13.1)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
-    rspec-mocks (3.13.1)
-      diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.13.0)
-    rspec-support (3.13.1)
-    rubyzip (2.3.2)
-    safe_yaml (1.0.5)
-    sass-embedded (1.77.5-aarch64-linux-gnu)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-aarch64-linux-musl)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-arm-linux-gnueabihf)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-arm-linux-musleabihf)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-arm64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-x86-linux-gnu)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-x86-linux-musl)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-x86_64-darwin)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-x86_64-linux-gnu)
-      google-protobuf (>= 3.25, < 5.0)
-    sass-embedded (1.77.5-x86_64-linux-musl)
-      google-protobuf (>= 3.25, < 5.0)
-    selenium-webdriver (4.10.0)
-      rexml (~> 3.2, >= 3.2.5)
-      rubyzip (>= 1.2.2, < 3.0)
-      websocket (~> 1.0)
-    strscan (3.1.0)
-    terminal-table (3.0.2)
-      unicode-display_width (>= 1.1.1, < 3)
-    thread_safe (0.3.6)
-    unicode-display_width (2.5.0)
-    virtus (2.0.0)
-      axiom-types (~> 0.1)
-      coercible (~> 1.0)
-      descendants_tracker (~> 0.0, >= 0.0.3)
-    webdrivers (5.3.1)
-      nokogiri (~> 1.6)
-      rubyzip (>= 1.3.0)
-      selenium-webdriver (~> 4.0, < 4.11)
-    webrick (1.8.1)
-    websocket (1.2.10)
-    xpath (3.2.0)
-      nokogiri (~> 1.8)
-
-PLATFORMS
-  aarch64-linux
-  aarch64-linux-gnu
-  aarch64-linux-musl
-  arm-linux
-  arm-linux-gnu
-  arm-linux-gnueabihf
-  arm-linux-musl
-  arm-linux-musleabihf
-  arm64-darwin
-  x86-linux
-  x86-linux-gnu
-  x86-linux-musl
-  x86_64-darwin
-  x86_64-linux
-  x86_64-linux-gnu
-  x86_64-linux-musl
-
-DEPENDENCIES
-  axe-core-capybara
-  axe-core-rspec
-  capybara
-  capybara-screenshot
-  nokogiri
-  rack-jekyll
-  rspec
-  selenium-webdriver
-  webdrivers
-  webrick
-
-RUBY VERSION
-   ruby 3.2.2p53
-
-BUNDLED WITH
-   2.5.6
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 120000
index 000000000..969152c47
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1 @@
+utilities/build-tools/Gemfile.lock
\ No newline at end of file
diff --git a/utilities/specs/accessibility_spec.rb b/utilities/specs/accessibility_spec.rb
index ae87cdf2b..4995c5618 100644
--- a/utilities/specs/accessibility_spec.rb
+++ b/utilities/specs/accessibility_spec.rb
@@ -3,7 +3,7 @@
 # Run accessibility specs for all pages in the webiste.
 # This runs the axe accessibility checker on each page in a headless browser.
 
-  require 'nokogiri'
+require 'nokogiri'
 
 # Load our custom BJC tools
 require_relative '../build-tools/bjc_helpers'

From c10b800226149b5b534913d92d9223738a04290f Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Wed, 25 Sep 2024 11:30:20 -0700
Subject: [PATCH 27/29] regen lockfile

---
 utilities/build-tools/Gemfile.lock | 1 +
 1 file changed, 1 insertion(+)

diff --git a/utilities/build-tools/Gemfile.lock b/utilities/build-tools/Gemfile.lock
index 8be49f567..f42450692 100644
--- a/utilities/build-tools/Gemfile.lock
+++ b/utilities/build-tools/Gemfile.lock
@@ -73,6 +73,7 @@ PLATFORMS
   arm64-darwin-23
   x86_64-darwin-22
   x86_64-darwin-23
+  x86_64-darwin-24
   x86_64-linux
 
 DEPENDENCIES

From 52de8f3e991e971eae4c556cd509fc6e3c4d3fec Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Wed, 25 Sep 2024 11:40:32 -0700
Subject: [PATCH 28/29] Reset Gemfiles

---
 Gemfile      |  21 ++++-
 Gemfile.lock | 236 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 255 insertions(+), 2 deletions(-)
 mode change 120000 => 100644 Gemfile
 mode change 120000 => 100644 Gemfile.lock

diff --git a/Gemfile b/Gemfile
deleted file mode 120000
index e9e778af8..000000000
--- a/Gemfile
+++ /dev/null
@@ -1 +0,0 @@
-utilities/build-tools/Gemfile
\ No newline at end of file
diff --git a/Gemfile b/Gemfile
new file mode 100644
index 000000000..6dbbaa855
--- /dev/null
+++ b/Gemfile
@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+# This Gemfile is for tests inside this repo.
+# The `build-tools` directory has its own Gemfile for the build tools.
+
+# Install with: bundle install
+source 'https://rubygems.org'
+
+ruby file: '.ruby-version'
+
+gem 'axe-core-capybara'
+gem 'axe-core-rspec'
+gem 'capybara'
+gem 'capybara-screenshot'
+gem 'nokogiri'
+gem 'rack-jekyll'
+gem 'rspec'
+gem 'selenium-webdriver'
+gem 'webdrivers'
+gem 'webrick'
diff --git a/Gemfile.lock b/Gemfile.lock
deleted file mode 120000
index 969152c47..000000000
--- a/Gemfile.lock
+++ /dev/null
@@ -1 +0,0 @@
-utilities/build-tools/Gemfile.lock
\ No newline at end of file
diff --git a/Gemfile.lock b/Gemfile.lock
new file mode 100644
index 000000000..b920e8339
--- /dev/null
+++ b/Gemfile.lock
@@ -0,0 +1,235 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    addressable (2.8.6)
+      public_suffix (>= 2.0.2, < 6.0)
+    axe-core-api (4.9.1)
+      dumb_delegator
+      virtus
+    axe-core-capybara (4.9.1)
+      axe-core-api (= 4.9.1)
+      dumb_delegator
+    axe-core-rspec (4.9.1)
+      axe-core-api (= 4.9.1)
+      dumb_delegator
+      virtus
+    axiom-types (0.1.1)
+      descendants_tracker (~> 0.0.4)
+      ice_nine (~> 0.11.0)
+      thread_safe (~> 0.3, >= 0.3.1)
+    bigdecimal (3.1.8)
+    capybara (3.40.0)
+      addressable
+      matrix
+      mini_mime (>= 0.1.3)
+      nokogiri (~> 1.11)
+      rack (>= 1.6.0)
+      rack-test (>= 0.6.3)
+      regexp_parser (>= 1.5, < 3.0)
+      xpath (~> 3.2)
+    capybara-screenshot (1.0.26)
+      capybara (>= 1.0, < 4)
+      launchy
+    childprocess (5.0.0)
+    coercible (1.0.0)
+      descendants_tracker (~> 0.0.1)
+    colorator (1.1.0)
+    concurrent-ruby (1.3.3)
+    descendants_tracker (0.0.4)
+      thread_safe (~> 0.3, >= 0.3.1)
+    diff-lcs (1.5.1)
+    dumb_delegator (1.0.0)
+    em-websocket (0.5.3)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0)
+    eventmachine (1.2.7)
+    ffi (1.17.0-aarch64-linux-gnu)
+    ffi (1.17.0-aarch64-linux-musl)
+    ffi (1.17.0-arm-linux-gnu)
+    ffi (1.17.0-arm-linux-musl)
+    ffi (1.17.0-arm64-darwin)
+    ffi (1.17.0-x86-linux-gnu)
+    ffi (1.17.0-x86-linux-musl)
+    ffi (1.17.0-x86_64-darwin)
+    ffi (1.17.0-x86_64-linux-gnu)
+    ffi (1.17.0-x86_64-linux-musl)
+    forwardable-extended (2.6.0)
+    google-protobuf (4.27.1)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.27.1-aarch64-linux)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.27.1-arm64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.27.1-x86-linux)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.27.1-x86_64-darwin)
+      bigdecimal
+      rake (>= 13)
+    google-protobuf (4.27.1-x86_64-linux)
+      bigdecimal
+      rake (>= 13)
+    http_parser.rb (0.8.0)
+    i18n (1.14.5)
+      concurrent-ruby (~> 1.0)
+    ice_nine (0.11.2)
+    jekyll (4.3.3)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 1.0)
+      jekyll-sass-converter (>= 2.0, < 4.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 2.3, >= 2.3.1)
+      kramdown-parser-gfm (~> 1.0)
+      liquid (~> 4.0)
+      mercenary (>= 0.3.6, < 0.5)
+      pathutil (~> 0.9)
+      rouge (>= 3.0, < 5.0)
+      safe_yaml (~> 1.0)
+      terminal-table (>= 1.8, < 4.0)
+      webrick (~> 1.7)
+    jekyll-sass-converter (3.0.0)
+      sass-embedded (~> 1.54)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    kramdown (2.4.0)
+      rexml
+    kramdown-parser-gfm (1.1.0)
+      kramdown (~> 2.0)
+    launchy (3.0.1)
+      addressable (~> 2.8)
+      childprocess (~> 5.0)
+    liquid (4.0.4)
+    listen (3.9.0)
+      rb-fsevent (~> 0.10, >= 0.10.3)
+      rb-inotify (~> 0.9, >= 0.9.10)
+    matrix (0.4.2)
+    mercenary (0.4.0)
+    mini_mime (1.1.5)
+    nokogiri (1.16.6-aarch64-linux)
+      racc (~> 1.4)
+    nokogiri (1.16.6-arm-linux)
+      racc (~> 1.4)
+    nokogiri (1.16.6-arm64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.16.6-x86-linux)
+      racc (~> 1.4)
+    nokogiri (1.16.6-x86_64-darwin)
+      racc (~> 1.4)
+    nokogiri (1.16.6-x86_64-linux)
+      racc (~> 1.4)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (5.1.1)
+    racc (1.8.0)
+    rack (1.6.13)
+    rack-jekyll (0.5.0)
+      jekyll (>= 1.3)
+      listen (>= 1.3)
+      rack (~> 1.5)
+    rack-test (2.1.0)
+      rack (>= 1.3)
+    rake (13.2.1)
+    rb-fsevent (0.11.2)
+    rb-inotify (0.11.1)
+      ffi (~> 1.0)
+    regexp_parser (2.9.2)
+    rexml (3.3.2)
+      strscan
+    rouge (4.3.0)
+    rspec (3.13.0)
+      rspec-core (~> 3.13.0)
+      rspec-expectations (~> 3.13.0)
+      rspec-mocks (~> 3.13.0)
+    rspec-core (3.13.0)
+      rspec-support (~> 3.13.0)
+    rspec-expectations (3.13.1)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-mocks (3.13.1)
+      diff-lcs (>= 1.2.0, < 2.0)
+      rspec-support (~> 3.13.0)
+    rspec-support (3.13.1)
+    rubyzip (2.3.2)
+    safe_yaml (1.0.5)
+    sass-embedded (1.77.5-aarch64-linux-gnu)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-aarch64-linux-musl)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-arm-linux-gnueabihf)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-arm-linux-musleabihf)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-arm64-darwin)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-x86-linux-gnu)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-x86-linux-musl)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-x86_64-darwin)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-x86_64-linux-gnu)
+      google-protobuf (>= 3.25, < 5.0)
+    sass-embedded (1.77.5-x86_64-linux-musl)
+      google-protobuf (>= 3.25, < 5.0)
+    selenium-webdriver (4.10.0)
+      rexml (~> 3.2, >= 3.2.5)
+      rubyzip (>= 1.2.2, < 3.0)
+      websocket (~> 1.0)
+    strscan (3.1.0)
+    terminal-table (3.0.2)
+      unicode-display_width (>= 1.1.1, < 3)
+    thread_safe (0.3.6)
+    unicode-display_width (2.5.0)
+    virtus (2.0.0)
+      axiom-types (~> 0.1)
+      coercible (~> 1.0)
+      descendants_tracker (~> 0.0, >= 0.0.3)
+    webdrivers (5.3.1)
+      nokogiri (~> 1.6)
+      rubyzip (>= 1.3.0)
+      selenium-webdriver (~> 4.0, < 4.11)
+    webrick (1.8.1)
+    websocket (1.2.10)
+    xpath (3.2.0)
+      nokogiri (~> 1.8)
+
+PLATFORMS
+  aarch64-linux
+  aarch64-linux-gnu
+  aarch64-linux-musl
+  arm-linux
+  arm-linux-gnu
+  arm-linux-gnueabihf
+  arm-linux-musl
+  arm-linux-musleabihf
+  arm64-darwin
+  x86-linux
+  x86-linux-gnu
+  x86-linux-musl
+  x86_64-darwin
+  x86_64-linux
+  x86_64-linux-gnu
+  x86_64-linux-musl
+
+DEPENDENCIES
+  axe-core-capybara
+  axe-core-rspec
+  capybara
+  capybara-screenshot
+  nokogiri
+  rack-jekyll
+  rspec
+  selenium-webdriver
+  webdrivers
+  webrick
+
+RUBY VERSION
+   ruby 3.2.2p53
+
+BUNDLED WITH
+   2.5.6

From b8933da3d6ff907c82433827e4a3ee0749a0fa8b Mon Sep 17 00:00:00 2001
From: Michael Ball <michael@mball.co>
Date: Wed, 25 Sep 2024 11:43:41 -0700
Subject: [PATCH 29/29] a11y: code comment

---
 Gemfile | 1 +
 1 file changed, 1 insertion(+)

diff --git a/Gemfile b/Gemfile
index 6dbbaa855..d427b9cc0 100644
--- a/Gemfile
+++ b/Gemfile
@@ -13,6 +13,7 @@ gem 'axe-core-rspec'
 gem 'capybara'
 gem 'capybara-screenshot'
 gem 'nokogiri'
+# TODO: Replace this gem with a better default...
 gem 'rack-jekyll'
 gem 'rspec'
 gem 'selenium-webdriver'