bjc-edc · cycomachead · Nov 2, 2023 · Nov 2, 2023 · Nov 2, 2023 · Nov 2, 2023
diff --git a/.tool-versions b/.tool-versions
@@ -0,0 +1,2 @@
+python 3.11.11
+ruby   3.3.8
diff --git a/Gemfile b/Gemfile
diff --git a/README.md b/README.md
@@ -67,9 +67,17 @@ To contribute:
 
 Of course, submitting issues is always welcome and encouraged! These issues can be bugs, questions, improvements or anything you'd like to share.
 
+## Index and Summary Pages
+
+See `utilties/build-tools/README.md` for information on how to build the index and summary pages.
+
+```sh
+ruby utilities/build-tools/rebuild-all.rb
+```
+
 ## UC Berkeley Deployment Process
 
-The UC Berkeley version is the `live` branch of the repo beautyjoy/bjc-r on GitHub.
+@beautyjoy/bjc-r serves bjc.berkeley.edu/bjc-r from the `main` branch.
 
 ## License
 [CC-BY-NC-SA 3.0][cc]

diff --git a/css/bjc.css b/css/bjc.css
@@ -706,6 +706,26 @@ table.truth tr td {
   width: 40%;
 }
 
+/* These boxes are used on idex/summary pages for all vocab, AP exam, atwork, etc. *
+  We should use `.vacab.summaryBox` instead of `.vocabSummary` and so on. */
+.summaryBox {
+  width: 95%;
+  margin-left: auto;
+  margin-top: 0.5em;
+  padding: 20px;
+  text-indent: 0em;
+  overflow: hidden;
+}
+
+/* Content labelling is redundant on summary pages. */
+.vocab.summaryBox:before
+.exam.summaryBox:before
+.atwork.summaryBox:before {
+  content: "";
+}
+
+/* TODO-MB: We need to separate these into multiple composable classes. */
+/* TODO: After merging in new sumamries remove vocabSummary, examSummary, etc. */
 .vocabFullWidth,
 .examFullWidth,
 .vocabSummary,
@@ -718,11 +738,15 @@ table.truth tr td {
   text-indent: 0em;
   overflow: hidden;
 }
+
 .vocabSummary,
 .examSummary {
   margin-right: auto;
 }
 
+.summary .todo,
+.summary .comment,
+.summary .commentBig,
 .vocabSummary .todo,
 .vocabSummary .comment,
 .vocabSummary .commentBig,
@@ -762,8 +786,7 @@ table.truth tr td {
 
 html[lang="es"] .exam:before,
 html[lang="es"] .examBig:before,
-html[lang="es"] .examFullWidth:before,
-html[lang="es"] .examSummary:before {
+html[lang="es"] .examFullWidth:before {
   content: "En el examen AP...";
 }
 
@@ -774,8 +797,7 @@ html[lang="es"] .atworkFullWidth:before {
 
 html[lang="es"] .vocab:before,
 html[lang="es"] .vocabBig:before,
-html[lang="es"] .vocabFullWidth:before,
-html[lang="es"] .vocabSummary:before {
+html[lang="es"] .vocabFullWidth:before {
   content: "Vocabulario";
 }
 

diff --git a/cur/programming/1-introduction/unit-1-exam-reference.es.html b/cur/programming/1-introduction/unit-1-exam-reference.es.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+
+<html lang="es">
+
+	<head>
+
+		<meta charset="utf-8">
+
+		<script type="text/javascript" src="/bjc-r/llab/loader.js"></script>
+
+<title>Unidad 1 Examen AP</title>
+	</head>
+
+
+
+<h2>Unidad 1: Introducción a la programación</h2>
+<h3>Laboratorio 2: Conversaciones</h3>
+<div class="examFullWidth" style="width: 95%">from <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/2-gossip.es.html?topic=nyc_bjc/1-intro-loops.es.topic&course=bjc4nyc.html&novideo&noassignment#box1"><strong>1.2.2</strong></a>
+            <div class="ap-standard">AAP-3.A.6</div>
+            <div class="pseudop">
+                En el examen AP no hay un bloque exactamente igual a <img class="nopadtb" src="/bjc-r/img/1-introduction/say-gossip.es.png" alt="decir (chisme)" title="decir (chisme)"> o <img class="nopadtb" src="/bjc-r/img/1-introduction/say-gossip-for-3-secs.es.png" alt="decir (chisme) por (3) segundos" title="decir (chisme) por (3) segundos"> ya que no tienen personajes o globos de conversación. En su lugar, la forma correcta de presentar texto al usuario es utilizar, en inglés,
+                <pre class="inline">DISPLAY(chisme())</pre>, en el caso que esté escrito como texto, o de la forma <img class="nopadtb" src="/bjc-r/img/1-introduction/display(gossip).es.png" alt="un rectángulo blanco con dos palabras, la primera es 'DISPLAY' en mayúsculas y la segunda 'gossip' en minúsculas" title="un rectángulo blanco con dos palabras, la primera es 'DISPLAY' en mayúsculas y la segunda 'gossip' en minúsculas"> si está representado como un bloque.
+            </div>
+            <p>No sería necesario que sepas <em>escribir</em> código utilizando esta notación en el examen AP. Solo debes ser capaz de <em>leerlo</em> para que puedas responder a las preguntas relacionadas con dicha funcionalidad.</p>
+        </div><div class="examFullWidth" style="width: 95%">from <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.es.html?topic=nyc_bjc/1-intro-loops.es.topic&course=bjc4nyc.html&novideo&noassignment#box3"><strong>1.2.4</strong></a>
+            <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
+{
+    reportar (2 * x (número))
+}" title="doble número
+{
+    reportar (2 * x (número))
+}"> estará escrito de la siguiente forma <div class="pre-container"><pre class="inline">PROCEDURE doble(x)
+{
+    RETURN(2 * x)
+}</pre></div> o <img class="" src="/bjc-r/img/1-introduction/double-blocktran.es.png" alt="PROCEDURE doble(x)
+{
+    RETURN(2 * x)
+}" title="PROCEDURE doble(x)
+{
+    RETURN(2 * x)
+}">.
+                    <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>
+                <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><div class="examFullWidth" style="width: 95%">from <a href="/bjc-r/cur/programming/1-introduction/2-gossip-and-greet/5-if-else.es.html?topic=nyc_bjc/1-intro-loops.es.topic&course=bjc4nyc.html&novideo&noassignment#box8"><strong>1.2.5</strong></a>
+            <div class="ap-standard">AAP-3.E.1</div>
+            <div class="ap-standard">AAP-3.E.2</div>
+            <div class="pseudop">La expresión <img class="inline" src="/bjc-r/img/blocks/pick-random-1-to-10-full-size.es.png" alt="número al azar entre (1) y (10)" title="número al azar entre (1) y (10)"> será presentada con la notación en inglés <pre class="inline">RANDOM(1, 10)</pre> or <img class="inline" src="/bjc-r/img/1-introduction/random-blocktran.png" alt="RANDOM(1, 10)" title="RANDOM(1, 10)">. Cada vez que se ejecuta este código, vas a obtener un número aleatorio entre 1 y 10.</div>
+        </div><div class="examFullWidth" style="width: 95%">from <a href="/bjc-r/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html?topic=nyc_bjc/1-intro-loops.es.topic&course=bjc4nyc.html&novideo&noassignment#box13"><strong>1.3.4</strong></a>
+			<div class="ap-standard">AAP-3.C.1, AAP-2.K.2</div>
+			<div class="pseudop">
+                La definición del comando personalizado <code>molinete</code> que se muestra a continuación <br>
+                <img class="indent" src="/bjc-r/img/1-introduction/pinwheel-definition.es.png" alt="molinete, ramas: (número de ramas)
+{
+    repetir(número de ramas)
+    {
+        mover (100) pasos
+        mover (-37) pasos
+        girar (360 / número de ramas) grados
+    }
+}" title="molinete, ramas: (número de ramas)
+{
+    repetir(número de ramas)
+    {
+        mover (100) pasos
+        mover (-37) pasos
+        girar (360 / número de ramas) grados
+    }
+}"><br>
+                se escribe en inglés con la siguiente notación<br>
+                <div class="pre-container indent"><pre>PROCEDURE molinete(numeroDeRamas)
+{
+    REPEAT numeroDeRamas TIMES
+    {
+        mover(100)
+        mover(-37)
+        girar_sentidodelreloj(360 / numeroDeRamas)
+    }
+}</pre></div> or <img class="inline" src="/bjc-r/img/1-introduction/pinwheel-blocktran-definition.es.png" alt="PROCEDURE molinete(numeroDeRamas)
+{
+    REPEAT numeroDeRamas TIMES
+    {
+        mover(100)
+        mover(-37)
+        girar_sentidodelreloj(360 / numeroDeRamas)
+    }
+}" title="PROCEDURE molinete(numeroDeRamas)
+{
+    REPEAT numeroDeRamas TIMES
+    {
+        mover(100)
+        mover(-37)
+        girar_sentidodelreloj(360 / numeroDeRamas)
+    }
+}">
+            </div>
+            <div class="endnote">
+                <div class="pseudop">Los procedimientos <pre class="inline">mover()</pre> y <pre class="inline">girar_sentidodelreloj()</pre> no forman parte del lenguaje AP, por lo que están escrito en minúsculas, de la misma forma que otros procedimientos definidos por el programador.</div>
+            <div class="pseudop">Ten en cuenta que el bloque sombrero, <img class="inline nopadtb" src="/bjc-r/img/1-introduction/pinwheel-hat-block.es.png" alt="molinete, ramas: (número de ramas)" title="molinete, ramas: (número de ramas)">, se escribiría como <pre class="inline">PROCEDURE molinete(numeroDeRamas)</pre>. La palabra <pre class="inline">procedure</pre> (procedimiento) te indica que la línea de código es como un bloque sombrero; el nombre de la variable entre paréntesis en esa línea es la entrada que toma el procedimiento.</div>
+            </div>
+        </div><div class="examFullWidth" style="width: 95%">from <a href="/bjc-r/cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.es.html?topic=nyc_bjc/1-intro-loops.es.topic&course=bjc4nyc.html&novideo&noassignment#box14"><strong>1.3.4</strong></a>
+            <div class="ap-standard">AAP-3.A.5</div>
+            <div class="pseudop">La siguiente instrucción <img class="inline" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L3-PinwheelwithInputs1.es.png" alt="molinete, ramas: (6) tamaño: (80) respaldo: (20)" title=" molinete, ramas: (6) tamaño: (80) respaldo: (20)"> tendría la siguiente notación <pre class="inline">molinete(6, 80, 20)</pre> o <img class="nopadtb" src="/bjc-r/img/1-introduction/pinwheel-blocktran.es.png" alt="un rectángulo blanco que contiene la palabra 'molinete' en mayúsculas seguida de un rectángulo más pequeño que contiene las entradas'6, 80, 20'" title="un rectángulo blanco que contiene la palabra 'molinete' en mayúsculas seguida de un rectángulo más pequeño que contiene las entradas'6, 80, 20'">.</div>
+            <p>Posiblemente has escuchado que algunas personas utilizan el término "pseudocódigo" para referirse a este pseudo-lenguaje usado en el examen de principios AP CS, pero esto <em>no</em> es pseudocódigo. El pseudocódigo no es un lenguaje de programación, se usa cómo un lenguaje humano natural para describir un algoritmo.</p>
+        </div><div class="examFullWidth" style="width: 95%">from <a href="/bjc-r/cur/programming/1-introduction/5-follow-the-leader/2-sprite-interaction.es.html?topic=nyc_bjc/1-intro-loops.es.topic&course=bjc4nyc.html&novideo&noassignment#box25"><strong>1.5.2</strong></a>
+            <div class="ap-standard">AAP-2.K.3</div>
+            <div class="sidenoteBig">
+                <div class="pseudop">El lenguaje utilizado en el examen AP no permite espacios en los nombres de las entradas (como <var>número de peces</var>) o en los procedimientos definidos por el programador (como <code>ratón y</code>, que no está integrado en su idioma). Así que este ejemplo los traduce a <pre class="inline">numPeces</pre> y <pre class="inline">ratónY()</pre>.</div>
+                <div class="pseudop">El motivo de incluir <pre class="inline">()</pre> o un cuadro después de <pre class="inline">ratónY</pre> se debe a que <pre class="inline">ratónY()</pre> es una llamada de procedimiento a pesar de que no toma ninguna entrada. </div>
+            </div>
+            <p>
+                El guion<br>
+                <img class="indent" src="/bjc-r/img/1-introduction/example-repeat-until.es.png" alt="repetir hasta que (ratón y < 0) {decir (número de peces)}" title="repetir hasta que (ratón y < 0) {decir (número de peces)}"><br>
+                se escribiría como<br>
+                </p><div class="pre-container indent"><pre>REPEAT UNTIL (ratónY() &lt; 0)
+{
+    DISPLAY(numPeces)
+}</pre></div>
+                o
+                <img class="inline" src="/bjc-r/img/1-introduction/repeat-until-blocktran.es.png" alt="un rectángulo gris con bordes redondeados que contiene todo lo siguiente: en la primera línea, primero las palabras 'REPEAT UNTIL' en mayúsculas y después un rectángulo más pequeño que contiene 'MouseY () < 0' y en la segunda lína un rectángulo blanco con bordes redondeados que contiene en la primera línea la palabra 'DISPLAY' en mayúsculas y luego un rectángulo blanco más pequeño que contiene 'numFish'" title="un rectángulo gris con bordes redondeados que contiene todo lo siguiente: en la primera línea, primero las palabras 'REPEAT UNTIL' en mayúsculas y después un rectángulo más pequeño que contiene 'MouseY () < 0' y en la segunda lína un rectángulo blanco con bordes redondeados que contiene en la primera línea la palabra 'DISPLAY' en mayúsculas y luego un rectángulo blanco más pequeño que contiene 'numFish'">
+            <p></p>
+            <p>Recuerda, no necesitas aprender a escribir el idioma inventado que se usa en el examen AP. Solo tienes que ser capaz de leer y responder preguntas al respecto.</p>
+        </div>