Audit and fix HTML list structures across codebase

cur/performance-tasks/create-task/1-development-process.es.html

@@ -20,8 +20,7 @@ <h2>Uso de un proceso de desarrollo para organizar tu código</h2>
         <p>
             El proceso que utilices para desarrollar tu programa puede ser organizado y estratégico o puede ser un proceso de exploración. Hay diferentes formas de programar. Aquí hay algunas fases comunes por las que pasa un programador:
             <ul>
-                <div class="comment">CRD-2.F.1</div>
-                <li>Investigar y reflexionar: averiguar los requisitos (lo que el usuario quiere que haga el programa)</li>
+                <li><div class="comment">CRD-2.F.1</div>Investigar y reflexionar: averiguar los requisitos (lo que el usuario quiere que haga el programa)</li>
                 <li>Diseño: planificación de cómo se verá la aplicación para el usuario y el enfoque general que usarás para codificarla.</li>
                 <li>Creación de prototipos: creación de un borrador del programa</li>
                 <li>Pruebas: probarlo, compartirlo con otros para obtener comentarios, corregir cualquier error y realizar las mejoras necesarias</li>

cur/performance-tasks/create-task/1-development-process.html

@@ -20,8 +20,7 @@ <h2>Using a Development Process to Organize Your Coding</h2>
         <p>
             The process you use to develop your program might be organized and strategic or it might be a process of exploration. There are different ways to program. Here are some common phases of development that a programmer goes through:
             <ul>
-                <div class="ap-standard">CRD-2.F.1</div>
-                <li>Investigating and reflecting&mdash;figuring out the requirements(what the user will want the program to do)</li>
+                <li><div class="ap-standard">CRD-2.F.1</div>Investigating and reflecting&mdash;figuring out the requirements(what the user will want the program to do)</li>
                 <li>Designing&mdash;planning what the app will look like to the user and the general approach you will use to code it</li>
                 <li>Prototyping&mdash;building a draft of the program</li>
                 <li>Testing&mdash;trying out your prototype, sharing it with others for feedback, fixing any bugs, and making any needed improvements</li>

cur/performance-tasks/create-task/3-implementing.es.html

@@ -14,8 +14,7 @@ <h2>Implementación de tu proceso de desarrollo</h2>
 
         <div class="forYouToDo">
 			<ol>
-                <div class="comment">CRD-2.F.2</div>
-				<li>Investiga y reflexiona:
+				<li><div class="comment">CRD-2.F.2</div>Investiga y reflexiona:
                     <ol>
                         <li>¿Cuáles son las limitaciones de tu programa? (¿Qué características necesita tener? ¿Cuáles son las limitaciones con las que trabajarás?) </li>
                         <div class="ap-standard">CRD-2.F.3 ("Gather information")</div>
@@ -47,8 +46,7 @@ <h2>Implementación de tu proceso de desarrollo</h2>
 		</div>
         <div class="forYouToDo">
 			<ol start="3">
-				<div class="ap-standard">CRD-2.H ("Develop a prototype")</div>
-                <li>Desarrolla un prototipo que cumpla con tus especificaciones. Mientras lo haces, toma nota de cualquier fragmento de código que haya sido escrito por otra persona (ya sea usando los comentarios de Snap<em>!</em> o en otro documento).</li>
+                <li><div class="ap-standard">CRD-2.H ("Develop a prototype")</div>Desarrolla un prototipo que cumpla con tus especificaciones. Mientras lo haces, toma nota de cualquier fragmento de código que haya sido escrito por otra persona (ya sea usando los comentarios de Snap<em>!</em> o en otro documento).</li>
 			</ol>
 		</div>
 		<div class="examFullWidth">

cur/performance-tasks/create-task/3-implementing.html

@@ -14,8 +14,7 @@ <h2>Implementing Your Development Process</h2>
 
         <div class="forYouToDo">
 			<ol>
-                <div class="ap-standard">CRD-2.F.2</div>
-				<li>Do some investigating and reflecting:
+				<li><div class="ap-standard">CRD-2.F.2</div>Do some investigating and reflecting:
                     <ol>
                         <li>What are the constraints of your program? (What features does it need to have? What are the limitations you will be working with?) </li>
                         <div class="ap-standard">CRD-2.F.3 ("Gather information")</div>
@@ -47,8 +46,7 @@ <h2>Implementing Your Development Process</h2>
 		</div>
         <div class="forYouToDo">
 			<ol start="3">
-				<div class="ap-standard">CRD-2.H ("Develop a prototype")</div>
-                <li>Use Snap<em>!</em> to develop a prototype to meet your specifications. As you do, keep track of any pieces of code that were written by someone else (either using Snap<em>!</em> comments or in another document).</li>
+                <li><div class="ap-standard">CRD-2.H ("Develop a prototype")</div>Use Snap<em>!</em> to develop a prototype to meet your specifications. As you do, keep track of any pieces of code that were written by someone else (either using Snap<em>!</em> comments or in another document).</li>
 			</ol>
 		</div>
 		<div class="examFullWidth">

cur/performance-tasks/create-task/4-testing.es.html

@@ -16,8 +16,7 @@ <h2>Probar tu proyecto</h2>
         <p>Después de desarrollar un prototipo, deberás probarlo y revisarlo en función de los resultados. Pero probar es más que "simplemente jugar con el programa como usuario". La mejor forma de probar es hacerlo de manera sistemática y requiere consultar los requisitos del programa para identificar una variedad de entradas para probar diferentes posibilidades de comportamiento del usuario (incluidos casos extremos, como palabras muy largas, números muy pequeños, clics muy rápidos, etc.) e identificar los resultados esperados para estas entradas.</p>
         <div class="forYouToDo">
 			<ol>
-				<div class="comment">CRD-2.J</div>
-                <li>Volviendo a tus especificaciones, identifica: los tipos de entradas que toma tu programa, una variedad de casos diferentes y extremos para estas entradas, y los resultados esperados para cada caso. Registra estas entradas de prueba y sus resultados esperados.</li>
+                <li><div class="comment">CRD-2.J</div>Volviendo a tus especificaciones, identifica: los tipos de entradas que toma tu programa, una variedad de casos diferentes y extremos para estas entradas, y los resultados esperados para cada caso. Registra estas entradas de prueba y sus resultados esperados.</li>
 			</ol>
 		</div>
         <p>
@@ -52,8 +51,7 @@ <h2>Probar tu proyecto</h2>
 
         <div class="forYouToDo">
 			<ol start="2">
-				<div class="ap-standard">CRD-2.I parts a and b</div>
-                <li>Comprueba si hay errores en tu programa. Prueba las entradas que has seleccionado y registra sus resultados. ¿Hubo alguna discrepancia entre lo que esperabas y lo que sucedió? Resuelve cualquier problema y vuelve a probar. </li>
+                <li><div class="ap-standard">CRD-2.I parts a and b</div>Comprueba si hay errores en tu programa. Prueba las entradas que has seleccionado y registra sus resultados. ¿Hubo alguna discrepancia entre lo que esperabas y lo que sucedió? Resuelve cualquier problema y vuelve a probar. </li>
 			</ol>
 		</div>
 

cur/performance-tasks/create-task/4-testing.html

@@ -16,8 +16,7 @@ <h2>Testing Your Project</h2>
         <p>After you develop a prototype, you'll need to test it and revise it based on the results. But testing is more than "just playing with the program as a user." Good testing is <em>systematic</em> (it follows a system). It also requires referring back to the program specifications you wrote to identify a variety of inputs that will test different possibilities for user behavior (including extreme cases, such as very long words, very small numbers, very fast clicks, etc.) and to identify the expected outcomes for these inputs.</p>
         <div class="forYouToDo">
 			<ol>
-				<div class="ap-standard">CRD-2.J</div>
-                <li>Looking back at your specifications, identify: the types of inputs your program takes, a variety of different and extreme cases for these inputs, and the expected outcomes for each case. Record your plan for the testing inputs and their expected outcomes.</li>
+                <li><div class="ap-standard">CRD-2.J</div>Looking back at your specifications, identify: the types of inputs your program takes, a variety of different and extreme cases for these inputs, and the expected outcomes for each case. Record your plan for the testing inputs and their expected outcomes.</li>
 			</ol>
 		</div>
         <p>
@@ -51,8 +50,7 @@ <h2>Testing Your Project</h2>
 
         <div class="forYouToDo">
 			<ol start="2">
-				<div class="ap-standard">CRD-2.I parts a and b</div>
-                <li>Test for errors in your program. Try out the inputs you have selected and record their outcomes. Were there any discrepancies between what you expected and what happened? Resolve any problems and test again. </li>
+                <li><div class="ap-standard">CRD-2.I parts a and b</div>Test for errors in your program. Try out the inputs you have selected and record their outcomes. Were there any discrepancies between what you expected and what happened? Resolve any problems and test again. </li>
 			</ol>
 		</div>
 

cur/programming/1-introduction/2-gossip-and-greet/old/4-learning-names.html

@@ -61,7 +61,7 @@ <h2>Learning Player Names</h2>
         <div class="AP-only">
         <div class="vocabFullWidth">: <strong>Selection</strong>, <strong>Conditionals</strong>, and <strong>Sequencing</strong><a name="AP" class="anchor">&nbsp;</a>
             <ul>
-                <div class="todo"><h1>TODO</h1>Keep selection and conditions for new version of this page (either from 1.2.3 TIF or who2). Move sequencing and flow of control vocab to 1.1.4 between 4 and 5. --MF, 12/16/18</div>
+                <li><div class="todo"><h1>TODO</h1>Keep selection and conditions for new version of this page (either from 1.2.3 TIF or who2). Move sequencing and flow of control vocab to 1.1.4 between 4 and 5. --MF, 12/16/18</div></li>
                 <div class="todo">
                     <p>Brian wants to correct the definition of sequencing in the vocab box. --MF, 11/7/18</p>
                     <div class="todo">When this was on the greet page, we said we were going to address AAP-2.G here like we are handling AAP-2.A 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">1.3.1</a> #1. --MF, 12/17/18 </div>
@@ -95,7 +95,7 @@ <h2>Learning Player Names</h2>
 
 <!--  WAY TOO HARD FOR UNIT 1      <div class="takeItFurther">
             <ol type="A">
-                <img class="imageRight" src="/bjc-r/img/icons/tough-stuff.png" alt="Tough Stuff" title="Tough Stuff" />
+                <li><img class="imageRight" src="/bjc-r/img/icons/tough-stuff.png" alt="Tough Stuff" title="Tough Stuff" /></li>
                 <li>
                     Add some enhancements to your script. For example:
                     <ol>

cur/programming/1-introduction/3-drawing/old/7-graphics-and-art.html

@@ -34,7 +34,7 @@ <h3>Ruthless Suggestions from Al</h3>
         </div>
         <div class="forYouToDo" id="first">  
             <ol>
-                <div class="comment">remake these two images with plain prototype labels. --MF, 5/14/19</div>
+                <li><div class="comment">remake these two images with plain prototype labels. --MF, 5/14/19</div></li>
                 <li>
                     If you have not done so already, build a block to draw a regular polygon of a given number of sides and a given side length.<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/GraphicArt_img/polygonCode.png" width="500" alt="polygon, sides: (number of sides) side length: (length) { repeat(number of sides){move (length) steps; turn counterclockwise (360/number of sides) degrees}}" title="polygon, sides: (number of sides) side length: (length) { repeat(number of sides){move (length) steps; turn counterclockwise (360/number of sides) degrees}}"/>

cur/programming/1-introduction/3-drawing/semi-old/2-exploring-snap-drawing-motion.html

@@ -19,7 +19,7 @@ <h2>Angles and Turning</h2>
 
         <div class="forYouToDo" id="first">
             <ol>
-                <div class="todo">Starter project needs to be rewritten without WAIT blocks. --MF, 5/14/19</div>
+                <li><div class="todo">Starter project needs to be rewritten without WAIT blocks. --MF, 5/14/19</div></li>
                 <li><a href="/bjc-r/prog/1-introduction/U1L3-AngleExperiments1.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 />Perform the four experiments described in the file.</li>
                 <li>
                     Then, experiment with the last script (shown right):<br />

cur/programming/1-introduction/3-drawing/semi-old/3-blocks-with-inputs.html

@@ -25,9 +25,9 @@ <h2>Blocks with Inputs</h2>
 
         <div class="forYouToDo" id="first">
             <ol>
-                <div class="comment">Mary and Brian are going to figure out how to be straightforward with kids about why they are doing pinwheel at all. Perhaps a dialog of the kids getting a polygon wrong could help? --MF, 4/29/19
+                <li><div class="comment">Mary and Brian are going to figure out how to be straightforward with kids about why they are doing pinwheel at all. Perhaps a dialog of the kids getting a polygon wrong could help? --MF, 4/29/19
                     <img class="imageRight" data-gifffer="/bjc-r/img/1-introduction/PolygonalRacetracks_img/RaceTrackTracing.gif" height="150" alt="Polygonal Racetrack angles" title="Polygonal Racetrack angles" />
-                </div>
+                </div></li>
                 <div class="todo"><h1>We still need to purge the WAIT blocks. --MF, 7/19/19</h1></div>
                 <li>
                     <a href="/bjc-r/prog/1-introduction/U1L3-Pinwheel.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 /> Make 5 copies of the script and modify those copies so that they make pinwheel designs like these with 3, 4, 5, 6, and 12 branches.<br />
@@ -46,7 +46,7 @@ <h2>Blocks with Inputs</h2>
 		<div class="forYouToDo">
             <img class="imageRight" src="/bjc-r/img/icons/pair-programming-swap.png" alt="Pair Programming Swap" title="Pair Programming Swap" />
             <ol start="3">
-                <div class="ap-standard">(AAP-)3.A part a</div>
+                <li><div class="ap-standard">(AAP-)3.A part a</div></li>
                 <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">
@@ -128,8 +128,7 @@ <h3 class="box-head">Making a Block with an Input</h3>
 
         <div class="forYouToDo">
 			<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>
+                <li><img class="imageRight" src="/bjc-r/img/icons/save-mini.png" alt="Save Your Work" title="Save Your Work" />Comment your code.</li>
                 <div class="takeNote">
                     <h3 class="box-head">Debugging Tip: Commenting Your Code</h3>
                     <div class="todo">

cur/programming/1-introduction/3-drawing/semi-old/6-the-for-block.html

@@ -25,7 +25,7 @@ <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>
+                <li><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></li>
 				<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>-->

cur/programming/1-introduction/3-drawing/semi-old/7-graphics-and-art.html

@@ -31,7 +31,7 @@ <h3>Ruthless Suggestions from Al</h3>
         </div>
         <div class="forYouToDo" id="first">
             <ol>
-                <div class="comment">remake these two images with plain prototype labels. --MF, 5/14/19</div>
+                <li><div class="comment">remake these two images with plain prototype labels. --MF, 5/14/19</div></li>
                 <li>
                     If you have not done so already, build a block to draw a regular polygon of a given number of sides and a given side length.<br />
                     <img class="indent" src="/bjc-r/img/1-introduction/GraphicArt_img/polygonCode.png" width="500" alt="polygon, sides: (number of sides) side length: (length) { repeat(number of sides){move (length) steps; turn counterclockwise (360/number of sides) degrees}}" title="polygon, sides: (number of sides) side length: (length) { repeat(number of sides){move (length) steps; turn counterclockwise (360/number of sides) degrees}}"/>

cur/programming/1-introduction/old/4-modularity-and-abstraction/1-custom-blocks.html

@@ -115,8 +115,7 @@ <h3 class="box-head">Optional Details on Making a Custom Block</h3>
         <!-- We can't do this yet because we've done nothing with inputs so far. --MF
         <div class="takeItFurther">
             <ol type="A">
-                <img class="imageRight" src="/bjc-r/img/drawing/flower-with-6-square-petals.png" alt="flower with 6 square petals">
-                <li>Use your <img class="inline" src="/bjc-r/img/blocks/draw-square-empty-parameter.png" alt="empty square ()" title="empty square ()" /> block to create a block <img class="block" src="/bjc-r/img/1-introduction/draw-square-petal-flower-empty-parameters.png" alt="360 divided by the number of petals"> that will draw a  flower with square petals, like the one shown here, but with any specified number of square-shaped petals of the specified size.  Calling <img class="block" src="/bjc-r/img/1-introduction/draw-square-petal-flower-6-50-parameters.png" alt="block: draw a flower with 6 petals of size 50"> should draw the example picture shown here.</li>
+                <li><img class="imageRight" src="/bjc-r/img/drawing/flower-with-6-square-petals.png" alt="flower with 6 square petals">Use your <img class="inline" src="/bjc-r/img/blocks/draw-square-empty-parameter.png" alt="empty square ()" title="empty square ()" /> block to create a block <img class="block" src="/bjc-r/img/1-introduction/draw-square-petal-flower-empty-parameters.png" alt="360 divided by the number of petals"> that will draw a  flower with square petals, like the one shown here, but with any specified number of square-shaped petals of the specified size.  Calling <img class="block" src="/bjc-r/img/1-introduction/draw-square-petal-flower-6-50-parameters.png" alt="block: draw a flower with 6 petals of size 50"> should draw the example picture shown here.</li>
                 <div class="endnote"><img class="imageRight" src="/bjc-r/img/icons/talk-with-another-pair-mini.png" alt="Talk with Another Pair" title="Talk with Another Pair" />After you've worked on this for a bit, take a moment to look at what others have done.  If you see something you like, think how you could use that idea in your program.</div>		
                 <li>
                     Now, draw a field of flowers and give each flower a different color, size, shape, position, and so forth.