Merge pull request #227 from bjc-edc/merge-2024-09-25

Merge 2024 09 25
beautyjoy · Sep 25, 2024 · b1f7480 · b1f7480
2 parents 40da2f8 + 14a5ef9
commit b1f7480
Show file tree

Hide file tree

Showing 20 changed files with 82 additions and 48 deletions.
diff --git a/cur/updates.html b/cur/updates.html
@@ -13,7 +13,8 @@ <h2>Development Updates</h2>
 
 		<div>
 			<ul>
-				<li><strong>Last site update on 06/21/24:</strong> Adjusting the first two pages of Unit 1 to start with game creation right away and to allow teachers flexibility in how their students save Snap<em>!</em> projects.</li>
+				<li><strong>Last site update on 09/25/24:</strong> Accessibility improvements, equity improvements, and minor image fixes.</li>
+				<li>Update on 06/21/24: Adjusting the first two pages of Unit 1 to start with game creation right away and to allow teachers flexibility in how their students save Snap<em>!</em> projects.</li>
 				<li>Update on 12/22/23: Adding project based assessments for Units 6&ndash;8, adding <a href="/bjc-r/course/bjc4nyc.es.html" title="Spanish translation of BJC">Spanish translation</a> of Unit 8.</li>
 				<li>Update on 11/17/23: Adding <a href="/bjc-r/course/bjc4nyc.es.html" title="Spanish translation of BJC">Spanish translation</a> of Unit 7.</li>
 				<li>Update on 11/10/23: Adding <a href="/bjc-r/course/bjc4nyc.es.html" title="Spanish translation of BJC">Spanish translation</a> of Unit 6 and AP Create Task pages (additional units forthcoming), and other minor revisions and improvements.</li>

diff --git a/docs/BJC-Pacing-Guide-First-Year.pdf b/docs/BJC-Pacing-Guide-First-Year.pdf
diff --git a/img/1-introduction/draw-house-size.png b/img/1-introduction/draw-house-size.png
diff --git a/img/1-introduction/more-complicated-who-script.png b/img/1-introduction/more-complicated-who-script.png
diff --git a/index.html b/index.html
@@ -24,9 +24,9 @@
         <div class="hero">
             <div class="background-overlay">
                 <div class="wrapper margins">
-                    <div class="large-logo" style="margin-top: 20px;" ><img src="/bjc-r/img/splash-page/bjc-logo.png" alt="BJC"/></div>
+                    <div class="large-logo" style="margin-top: 1%;" ><img src="/bjc-r/img/splash-page/bjc-logo.png" alt="BJC"/></div>
                     <div class="txtContainer">
-                        <h2>The Beauty and Joy of Computing<span class="subtitle">An AP<sup>®</sup> CS Principles Curriculum</span></h2>
+                        <h2 style="margin-bottom:16px">The Beauty and Joy of Computing<span class="subtitle">An AP<sup>®</sup> CS Principles Curriculum</span></h2>
                         <div class="btnContainer">
 							<div><a href="/bjc-r/course/bjc4nyc.html" class="btn btn2" title="BJC Curriculum">BJC Curriculum<i class="fas fa-arrow-alt-circle-right"></i></a></div>
 							<div><a href="http://snap.berkeley.edu/run" target="_blank" class="btn btn2" title="Run Snap! Now">Run <img style="height:40px; width: auto; vertical-align: middle; margin-top: -10px; margin-bottom: -10px;" src="/bjc-r/img/splash-page/snap-logo-large.png" alt="Snap!" title="Run Snap! Now" /> Now<i class="fas fa-arrow-alt-circle-right"></i></a></div>
@@ -38,7 +38,7 @@ <h2>The Beauty and Joy of Computing<span class="subtitle">An AP<sup>®</sup> CS
 							</a></div>
 							<div><a href="/bjc-r/course/bjc4nyc.es.html" class="btn btn3" title="BJC en Español">BJC en Español<i class="fas fa-arrow-alt-circle-right"></i></a></div>
                         </div>
-                    <!--<div class="sparks">Are you looking for <a href="https://bjc.berkeley.edu/bjc-r/course/middle-school.html" title="BJC Sparks curriculum for middle school and early high school" target="_blank">BJC Sparks</a> for middle school and early high school?</div>-->
+                    <div class="sparks">Looking for middle school and early high school activities? Try <a href="https://bjc.berkeley.edu/sparks" title="BJC Sparks curriculum for middle school and early high school" target="_blank">BJC Sparks</a>.</div>
 					</div>
                 </div>
             </div>

diff --git a/sparks/img/U1/lab02/plural-of.png b/sparks/img/U1/lab02/plural-of.png
diff --git a/sparks/prog/U1/lab02/super-short-stories.xml b/sparks/prog/U1/lab02/super-short-stories.xml
diff --git a/sparks/student-pages/U1/L1/03-customizing.html b/sparks/student-pages/U1/L1/03-customizing.html
@@ -3,7 +3,7 @@
 	<head>
 		<meta charset="utf-8">
 		<script type="text/javascript" src="/bjc-r/llab/loader.js"></script>
-		<title>Unit 1 Lab 1: Introduction to Snap<em>!</em>, Activity 2</title>
+		<title>Unit 1 Lab 1: Introduction to Snap<em>!</em>, Activity 3</title>
 	</head>
 
 	<body>

diff --git a/sparks/student-pages/U1/L2/05-creating-a-block.html b/sparks/student-pages/U1/L2/05-creating-a-block.html
@@ -32,20 +32,13 @@ <h4><strong>Making a Block</strong></h4>
 				</li>
 				<div class="endnote">
 					You are creating a reporter, so the block editor opens with a <img class="inline-block" src="/bjc-r/img/blocks/report.png" alt="report" title="report" /> block already attached to the <code>plural </code> hat block. Whatever input you give to the <code>report</code> block will become the value reported by your new block.<br />
-					<img class="indent" src="/bjc-r/sparks/img/U1/lab02/plural-definition-empty.png" alt="'plural of' in the block editor showing with the 'report' block attached below it" title="'plural of' in the block editor showing with the 'report' block attached below it" />
+					<img class="indent" src="/bjc-r/sparks/img/U1/lab02/plural-definition-empty.png" alt="'plural of' in the block editor showing with the 'report' block attached below it" title="'plural of' in the block editor showing with the 'report' block attached below it" /><br />
+					Your block will only look like that <em>inside the Block Editor</em> that lets you define what the block does. Once you close the Block Editor, your block will look like this: <img class="inline-block" src="/bjc-r/sparks/img/U1/lab02/plural-of.png" alt="plural of ()" title="plural of ()" />.
 				</div>
 				<li><img class="inline" src="/bjc-r/img/icons/save-now.png" alt="Save your work" title="Save your work" /></li>
 			</ol>
 			<p style="clear: both; height: 0px;"></p>
 		</div>
-		<div class="todo">The vocab box about abstraction should be cut down considerably. --MF, 2/9/22</div>			
-		<div class="vocabFullWidth"><strong>: Abstraction</strong>
-			<div class="todo"><p>Will they be watching a video on abstraction here? Or does Dan mention it in welcome? It feels so..abstract..here that I wonder what students will take from it. If I wasn't bound to use the term abstraction, I'd probably emphasize the benefit of reuse "When we realize we've developed a useful piece of functionality that we might want to use in other places, we can turn it into its own block." Anyway just musings from your local "abstraction" skeptic, feel free to delete. -- PF 8/20/21</p><p>I added your text at the beginning and am open to a Dan video and/or more discussion about teaching abstraction. :) --MF, 8/20/21</p></div>
-			<p>When you've developed a useful piece of code that you want to use in other places, you can turn it into its own block. This is a form of <em>abstraction</em>. <strong>Abstraction</strong> is an important idea in computer science. One kind of abstraction is breaking up a large problem into smaller sub-problems.</p>
-			<div class="endnote">For example, instead of putting <img class="inline-block" src="/bjc-r/sparks/img/U1/lab02/join-random-animal-s.png" alt="join (random animal) (s)" title="join (random animal) (s)" /> into an input slot of <code>super short story</code>, you can create a <img class="inline-block" src="/bjc-r/sparks/img/U1/lab02/plural-of.png" alt="plural of ()" title="plural of ()" /> block and put <code>random animal</code> in its input slot.</div>
-			<p>This makes your code easier to read, you can use the new block again in other places, and once the block is working, you don't need to think about <em>how</em> it works each time you use it.</p>
-			<!--<div class="endnote">For example, you might later improve <code>plural</code> to handle words such as "fly" and "box" that don't form their plural just by adding an "s.")</div>-->
-		</div>
 
 		<div class="learn">In this activity, you made a new block to use to add an "s" to the end of any word.</div>
 

diff --git a/sparks/student-pages/U1/L2/06-adding-an-input.html b/sparks/student-pages/U1/L2/06-adding-an-input.html
@@ -52,6 +52,15 @@ <h2>Adding an Input to Your Block</h2>
 				<li><img class="inline" src="/bjc-r/img/icons/save-now.png" alt="Save your work" title="Save your work" /></li>
 			</ol>
 		</div>
+		<div class="todo">The vocab box about abstraction should be cut down considerably. --MF, 2/9/22</div>			
+		<div class="vocabFullWidth"><strong>: Abstraction</strong>
+			<div class="todo"><p>Will they be watching a video on abstraction here? Or does Dan mention it in welcome? It feels so..abstract..here that I wonder what students will take from it. If I wasn't bound to use the term abstraction, I'd probably emphasize the benefit of reuse "When we realize we've developed a useful piece of functionality that we might want to use in other places, we can turn it into its own block." Anyway just musings from your local "abstraction" skeptic, feel free to delete. -- PF 8/20/21</p><p>I added your text at the beginning and am open to a Dan video and/or more discussion about teaching abstraction. :) --MF, 8/20/21</p></div>
+			<p>When you've developed a useful piece of code that you want to use in other places, you can turn it into its own block. This is a form of <em>abstraction</em>. <strong>Abstraction</strong> is an important idea in computer science. One kind of abstraction is breaking up a large problem into smaller sub-problems.</p>
+			<div class="endnote">For example, instead of putting <img class="inline-block" src="/bjc-r/sparks/img/U1/lab02/join-random-animal-s.png" alt="join (random animal) (s)" title="join (random animal) (s)" /> into an input slot of <code>super short story</code>, you can create a <img class="inline-block" src="/bjc-r/sparks/img/U1/lab02/plural-of.png" alt="plural of ()" title="plural of ()" /> block and put <code>random animal</code> in its input slot.</div>
+			<p>This makes your code easier to read, you can use the new block again in other places, and once the block is working, you don't need to think about <em>how</em> it works each time you use it.</p>
+			<!--<div class="endnote">For example, you might later improve <code>plural</code> to handle words such as "fly" and "box" that don't form their plural just by adding an "s.")</div>-->
+		</div>
+
 
 		<div class="learn">In this activity, you created a new block to perform a specific task and used it in your story.</div>
 

diff --git a/sparks/student-pages/U1/L3/02-visualizing-data.html b/sparks/student-pages/U1/L3/02-visualizing-data.html
@@ -9,6 +9,7 @@
 		<h2>Visualizing Data</h2>
 		<div class="todo">When we revisit, I suggest renaming <code>sort data</code> to <code>sort counted data</code> (for example) as that's the only input it seems to accept. Also, we should update our block names to newer format (so the resulting expressions are sentence readable) and without all the colons. --MF, 12/10/21</div>
 		<div class="todo">I changed every "we" on this page to "you."  This is probably an issue on all the other pages, too, but this is where it really hit me hard, in "We don't need to type..." after 1.3.2.2. --bh</div>
+		<div class="todo">Consider splitting into two pages. --MF 7/22/24</div>
 		<div class="learn">In this activity, you'll input your cleaned research data in Snap<em>!</em> and create a visualization of the results.</div>
 		<p>
 			So far, you've defined your research question, collected data, and cleaned up the data. Before you can analyze your data, you'll need to import the data into Snap<em>!</em>.<br />
@@ -153,7 +154,7 @@ <h3>Visualizing Your Results</h3>
 		<div class="forYouToDo">
 			<ol start="7">
 				<li>Click on the block to see your pictograph. It should show up on the stage instead of in a bubble, since this is a command block. A command block changes something about the environment, like drawing on the stage, but doesn't directly report a value.</li>
-				<li><img class="imageRight" src="/bjc-r/img/icons/talk-with-your-partner.png" alt="Talk with Your Partner" title="Talk with Your Partner" /> How does it look? Is your data as clean as you hoped? You can still clean up data now, if the graph has made some messy data more obvious than before.</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" /> How does it look? Is your data as clean as you hoped? You can still clean up data now, if the graph has made some messy data more obvious than before.</li>
 			</ol>
 		</div>
 		<div class="ifTime show">

diff --git a/sparks/student-pages/U1/L5/01-numbers-computers.html b/sparks/student-pages/U1/L5/01-numbers-computers.html
@@ -30,7 +30,8 @@ <h3>Crunching Numbers</h3>
 
 		<div class="forYouToDo">
 			<ol>
-				<li>Open this <a class="js-run snap-project" href="/bjc-r/sparks/prog/U1/lab05/numbers-bits-electricity.xml" title="Numbers Bits Electricity - Snap! project">Numbers Bits Electricity</a> project, and save it to your account.</li>
+				<div class="todo">Need to update alt text on these load-save.png images throughout Sparks. --MF 07/15/24</div>
+				<li><a class="js-run snap-project" href="/bjc-r/sparks/prog/U1/lab05/numbers-bits-electricity.xml" title="Numbers Bits Electricity - Snap! project" target="_blank"><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>
 				<li>
 					Build and run each of the following expressions:
 					<ol>
@@ -92,10 +93,17 @@ <h3>Numbers Systems for Humans vs. Machines</h3>
 		<div class="forYouToDo">
 			<ol start="5">
 				<li><img class="inline" src="/bjc-r/img/icons/talk-with-your-partner.png" alt="Talk with Your Partner" title="Talk with Your Partner" /> Describe each of the digits and their place values for the decimal numeral 2405.</li>
+				<div class="endnote">
+					<p><a href="#hint-decimal-2405" data-toggle="collapse" title="Want to see how you might describe the decimal numeral 1023 as an example?">Want to see how you might describe the decimal numeral 1023 as an example?"</a></p>
+					<div id="hint-decimal-2405" class="collapse">
+						<p>In the number 1023, there is a 1 in the thousands place, a 0 in the hundreds place, a 2 in the tens place, and a 3 in the ones place.</p>
+						<p>That means there is one thousand, the two tens make twenty, and then we have three. So, the number is one thousand twenty-three.</p>
+					</div>
+				</div>
 			</ol>
 		</div>
 
-		<p>Instead of counting on ten fingers, computers count with only <em>two</em> options: on and off. So, computers store numbers as <em>binary</em> numerals. All their calculations are in binary. They convert the decimal numerals we use to interact with computers into binary numerals before performing any calculations.</p>
+		<p>Instead of counting on ten fingers like people, computers count with only <em>two</em> options: on and off. So, computers store numbers as <em>binary</em> numerals. All their calculations are in binary. They convert the decimal numerals we use to interact with computers into binary numerals before performing any calculations.</p>
 
 		<div class="vocabFullWidth"><strong>: Binary Numerals</strong>
 			<p>A <strong>binary numeral</strong> is part of the base 2 system.</p>
@@ -120,7 +128,15 @@ <h3>Numbers Systems for Humans vs. Machines</h3>
 		</div>
 		<div class="forYouToDo">
 			<ol start="6">
-				<li><div class="comment">39</div><img class="inline" src="/bjc-r/img/icons/talk-with-your-partner.png" alt="Talk with Your Partner" title="Talk with Your Partner" /> Find the decimal representation for the binary numeral 100111.</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" /> 
+					<ol>
+						<div class="comment">13, 39, 56</div>
+						<li>Find the decimal representation for the binary numeral 1011.</li>
+						<li>Find the decimal representation for the binary numeral 100111.</li>
+						<li>Find the decimal representation for the binary numeral 111000.</li>
+					</ol>
+				</li>
 				<div class="endnote">
 					<a href="#hint-help-binary" data-toggle="collapse" title="Need help reading binary?">Need help reading binary?</a>
 					<div id="hint-help-binary" class="collapse">
@@ -139,10 +155,13 @@ <h3>Numbers Systems for Humans vs. Machines</h3>
 				</div>
 			</ol>
 		</div>
-		<div class="todo">I think the above "reading" exercise should include a few more numbers and the below ITIT needs more support for writing in binary. --MF, 9/22/21</div>
 		<div class="ifTime show">
 			<ol start="7">
 				<li>Try writing a number in binary and see if a friend can convert back to your original number. If they have trouble, go through both calculations (yours and theirs) together. If they succeed in finding your original number, try a bigger number!</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" /> 
+					Try writing out all the binary numerals from 1 to 16. What do you notice?
+				</li>
 			</ol>
 		</div>
 

diff --git a/sparks/student-pages/U1/L5/02-bits-electricity.html b/sparks/student-pages/U1/L5/02-bits-electricity.html
@@ -35,13 +35,15 @@ <h3>Storing Numbers in Bits</h3>
 		</div>
 
 		<h3>Storing Bits as Electricity</h3>
-		<p>You might be wondering what the ones and zeros look like inside the computer, but actually, computers don't really store the digits 0 and 1. Computers store data using electricity. Generally, a 1 is stored as a positively charged electric signal and a 0 is stored as no charge at all.</p>
-		<p>
-			For example, the memory of your computer most likely stores bits by storing charge in a capacitor. Here are some capacitors of varying sizes:<br />
-			<div class="comment">Wikipedia claims image is in public domain: https://commons.wikimedia.org/wiki/File:Electronic-Component-Elec-Capacitors.jpg</div>
+		<p>Words and images are stored as numbers, and numbers are stored with bits (ones and zeros). You may be wondering what the ones and zeros look like inside the computer, but computers don't actually store the digits 0 and 1.</p>
+		<p>Computers store data <em>using electricity</em>. Generally, a 1 is stored as a charged electric signal and a 0 is stored as no charge. For example, the memory of your computer most likely stores bits by storing charge in a capacitor.</p>
+		<div class="vocabFullWidth">
+			<p><strong>Capacitors</strong> store energy in an electric field (such as between two metal plates).  Here are some capacitors of varying sizes:<br />
+			<div class="commentBig">Wikipedia claims image is in public domain: https://commons.wikimedia.org/wiki/File:Electronic-Component-Elec-Capacitors.jpg</div>
 			<img class="indent noshadow" src="/bjc-r/sparks/img/U1/lab05/capacitors.png" alt="three images of different-sized capacitors, which look like little cylinders with text and numbers on them and two wires coming out of one base" title="three images of different-sized capacitors, which look like little cylinders with text and numbers on them and two wires coming out of one base" />
-		</p>
-		<p>The bits inside your computer are teeny tiny&mdash;around 20 nanometers, and a nanometer is so small that a billion of them (1,000,000,000) are in one meter! That's why computers are able to store so much information.</p>
+			</p>
+		</div>
+		<p>The bits inside your computer are tiny&mdash;around 20 nanometers, and a nanometer is so small that a billion of them (1,000,000,000) are in one meter! That's why computers are able to store so much information.</p>
 		<p>
 			For the binary number 1010, we could imagine the computer storing it like this:<br />
 			<img class="indent noshadow" src="/bjc-r/sparks/img/U1/lab05/capacitors-1010.png" alt="four drawings of capacitors with charges: +, none, +, none" title="four pictures of drawings with charges: +, none, +, none" />

diff --git a/sparks/student-pages/U1/L5/05-caesar-cipher.html b/sparks/student-pages/U1/L5/05-caesar-cipher.html
@@ -33,7 +33,7 @@ <h3>Exploring Unicode</h3>
 			<img class="indent" src="/bjc-r/sparks/img/U1/lab05/unicode-66-reporting.png" alt="unicode (66) as letter reporting 'B'" title="unicode (66) as letter reporting 'B'" />
         </p>
 		<p>
-			You can right-click (or control-click on a Mac) either block and select "help..." from the down-down menu to see more details of how the block works.<br />
+			You can right-click (or control-click on a Mac) either block and select "help..." from the drop-down menu to see more details of how the block works.<br />
 			<img class="indent" src="/bjc-r/sparks/img/U1/lab05/unicode-of-dropdown.png" alt="unicode of block with dropdown menu open showing 'help...' menu-item selected" title="unicode of block with dropdown menu open showing 'help...' menu-item selected" />
 			<img class="indent" src="/bjc-r/sparks/img/U1/lab05/unicode-as-letter-dropdown.png" alt="unicode as letter block with dropdown menu open showing 'help...' menu-item selected" title="unicode as letter block with dropdown menu open showing 'help...' menu-item selected" />
 		</p>