A11y - U1 OpProjects list edits - both en & es

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>

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>

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>

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>-->

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'" />

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>