Merge pull request #60 from bjc-edc/middle-school

Middle school

css/bjc.css

@@ -326,7 +326,7 @@ img.noshadow {
   padding: 1em;
 }
 
-.forYouToDo:before, .forYouToDoHeader, .ifTime:before, .dialogue:before, .takeItFurther:before, .takeItTeased:before, .takeNote:before, .narrower:before, .narrowblue:before, .narrowpurple:before, .endnote > div:not(.sidenote):not(.sidenoteBig):not(.sideHOM):not(.sideHOMbig):not(.todo):not(.comment):not(.commentBig):not(.takeNote):not(.collapse):not(.collapsing):not(.takeItFurther):not(.endnote):not(.vocabFullWidth):not(.vocabSummary):not(.pseudop), .time:before   { /* Shared Heading Formatting */
+.forYouToDo:before, .forYouToDoHeader, .ifTime:before, .dialogue:before, .takeItFurther:before, .takeItTeased:before, .takeNote:before, .narrower:before, .narrowblue:before, .narrowpurple:before, .endnote > div:not(.sidenote):not(.sidenoteBig):not(.sideHOM):not(.sideHOMbig):not(.todo):not(.comment):not(.commentBig):not(.takeNote):not(.collapse):not(.collapsing):not(.takeItFurther):not(.endnote):not(.vocabFullWidth):not(.vocabSummary):not(.pseudop):not(.bordered-table), .time:before   { /* Shared Heading Formatting */
   font-size: 18px;
   font-weight: bold;
   line-height: 2.5em;
@@ -660,6 +660,7 @@ table.videos td {
 .bordered-table > div {padding: 10px; border: solid 1px black;}
 .two-col {grid-template-columns: auto auto;}
 .three-col {grid-template-columns: auto auto auto;}
+.four-col {grid-template-columns: auto auto auto auto;}
 
 /* Expansion Menus*/
 a.expansion-menu h4, a.expansion-menu {color: #2a6496;}

llab/script/curriculum.js

@@ -43,8 +43,22 @@ llab.secondarySetUp = function() {
 
   // making ifTime and takeItFurther DIVs hide until clicked --MF, 2/9/18
   $('div.ifTime').each(function(i) {
-    var divcontent = this.innerHTML;
-    this.innerHTML = "&nbsp;<a style='font-size: 18px;' href='#hint-ifTime".concat(i, "' data-toggle='collapse' title='If There Is Time...'><strong>If There Is Time...</strong></a><div id='hint-ifTime", i, "' class='collapse'>", divcontent, "</div>");
+    let isVisible = Array.from(this.classList).indexOf('show') > -1;
+    let id = `hint-ifTime-${i}`;
+    this.innerHTML = `
+    <a style='font-size: 18px;' href='#${id}' data-toggle='collapse'
+      role="button" aria-controls="#${id}" aria-expanded=${isVisible}>
+      <strong>If There Is Time...</strong>
+    </a>
+    <div id='${id}' class='collapse'>
+      ${this.innerHTML}
+    </div>`;
+    // Use class "ifTime show" to show by default.
+    // BS3 uses the 'in' class to show content, TODO: update this for v5.
+    if (isVisible) {
+      $(`#${id}`).addClass('in');
+      $(this).removeClass('show');
+    }
   });
   $('div.takeItFurther').each(function(i) {
     var divcontent = this.innerHTML;

middle-school/student-pages/U1/L2/03-creating-editing-blocks.html

@@ -51,7 +51,7 @@ <h3>Editing the Story Structure</h3>
 			</ol>
 		</div>
 
-		<div class="ifTime">
+		<div class="ifTime show">
 			<ol start="7">
 				<li>
 					<div class="comment">To make the color match, choose the "Lists" as the palette in the block editor.</div>
@@ -67,4 +67,4 @@ <h3>Editing the Story Structure</h3>
 
 
 	</body>
-</html>
+</html>

middle-school/student-pages/U1/L3/02-visualizing-data.html

@@ -148,7 +148,7 @@ <h3>Visualizing Your Results</h3>
 				<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>
 			</ol>
 		</div>
-		<div class="ifTime">
+		<div class="ifTime show">
 			<ol start="9">
 				<li>
 					If you want to customize your graph, you can use the <code>sort data</code> block to order the data so that the categories are ordered by largest to smallest values, smallest to largest values, or alphabetically.<br />

middle-school/student-pages/U1/L4/02-exploring-rgb-colors.html

@@ -29,7 +29,7 @@ <h2>Exploring RGB Colors</h2>
 				</div>
 				<li>
 					The <img class="inline" src="/bjc-r/middle-school/img/U1/lab04/draw-pixel.png" alt="draw pixel 'list input slot'" title="draw pixel 'list input slot'" /> block takes a list of RGB values as input and draws a pixel with those values on the stage. Find the <code>draw pixel</code> block in the palette, drag it into the scripting area, snap the <code>RGB pixel</code> block into the open input slot, and run the script to draw a pixel with those color values.<br />
-					<img class="indent" src="/bjc-r/middle-school/img/U1/lab04/draw-pixel-rgb-85-170-255.png" alt="draw pixel (RGB pixel, red: (85) green: (170) blue: (255))" title="draw pixel (RGB pixel, red: (85) green: (170) blue: (255))" /> 
+					<img class="indent" src="/bjc-r/middle-school/img/U1/lab04/draw-pixel-rgb-85-170-255.png" alt="draw pixel (RGB pixel, red: (85) green: (170) blue: (255))" title="draw pixel (RGB pixel, red: (85) green: (170) blue: (255))" />
 				</li>
 				<li>
 					RGB pixels have integer color values from 0 to 255. Experiment with the input values to the <code>RGB pixel</code> block inside <code>draw pixel</code>, and see how it changes the pixel drawn on the stage.<br />
@@ -59,12 +59,12 @@ <h2>Exploring RGB Colors</h2>
 				<a href="#hint-white" data-toggle="collapse" title="Why can't you mix white or other light colors?">Why can't you mix white or other light colors with the <code>paint color from pixel</code> block ?</a>
 				<div id="hint-white" class="collapse">
 					<p>These aren't really pixels but are instead <em>models</em> of pixels made to show how pixels blend to make colors. They are only a third as bright as real pixels because the real pixels that display these model pixels on your screen each include only a third of their total possible brightness. (Real white pixels have 100% red, 100% green, 100% blue not just 100% red but no green or blue near a pixel with 100% green but no red or blue and a pixel with 100% blue but no red or green.)</p>
-					<p>This project also includes a <img class="inline" src="/bjc-r/middle-school/img/U1/lab04/paint-color.png" alt="paint color, red: () green: () blue ()" title="paint color, red: () green: () blue ()" /> block that doesn't use model pixels at all and instead paints with the real RGB colors. Try it out. How can you make white or another light color?</p> 
+					<p>This project also includes a <img class="inline" src="/bjc-r/middle-school/img/U1/lab04/paint-color.png" alt="paint color, red: () green: () blue ()" title="paint color, red: () green: () blue ()" /> block that doesn't use model pixels at all and instead paints with the real RGB colors. Try it out. How can you make white or another light color?</p>
 				</div>
-			</p>			
-		</div>		
+			</p>
+		</div>
 
-		<div class="ifTime">
+		<div class="ifTime show">
 			<ol start="8">
 				<li>Try to get other familiar colors like yellow, orange, gray, and brown.</li>
 			</ol>
@@ -74,14 +74,14 @@ <h2>Exploring RGB Colors</h2>
 				<a href="#hint-mix" data-toggle="collapse" title="Why do RGB colors mix differently than paint?">Why do RGB colors mix differently than paint?</a>
 				<div id="hint-mix" class="collapse">
 					<p>You might be familiar with <em>subtractive</em> color mixing where the primary colors are red, yellow, and blue and you can get secondary colors by mixing red and yellow to make orange, yellow and blue to make green, and red and blue to make purple. Mixing paints is subtractive color mixing, but mixing light (like the images on a screen) is <em>additive</em> color mixing. In additive color mixing, the primaries are red, green, and blue, and the secondary colors that you get by mixing equal parts of the primaries are yellow, cyan, and magenta.</p>
-					<p>Additive color mixing (like on a screen) is called <em>additive</em> because you start with no light and <em>add</em> light to get colors. Subtractive color mixing (like with paint) is called <em>subtractive</em> because you start with white light (which includes all the colors), and the paint <em>absorbs</em> (takes away) all the colors except the one reflected back to your eye.  (For example, when white light hits red paint, all colors are absorbed except red.)</p> 
+					<p>Additive color mixing (like on a screen) is called <em>additive</em> because you start with no light and <em>add</em> light to get colors. Subtractive color mixing (like with paint) is called <em>subtractive</em> because you start with white light (which includes all the colors), and the paint <em>absorbs</em> (takes away) all the colors except the one reflected back to your eye.  (For example, when white light hits red paint, all colors are absorbed except red.)</p>
 					<p>More optional reading: <a href="https://www.color-meanings.com/additive-subtractive-color-mixing/" title="What Is the Difference Between Additive and Subtractive Color Mixing?" target="_blank">What Is the Difference Between Additive and Subtractive Color Mixing?</a></p>
 				</div>
 			</p>
 		</div>
 
 		<div class="learn">In this activity, you used RGB color values to represent colors, used the list reported by the <code>RGB pixel</code> block as the input to the <code>draw pixel</code> block, and experimented with RGB color mixing.</div>
 
-		
+
 	</body>
 </html>

middle-school/student-pages/U1/L4/03-investigating-and-storing-images.html

@@ -56,7 +56,7 @@ <h3>Checking Out Some Pixels</h3>
 
 		<h3>Try Your Own Image</h3>
 		<p>These are optional extra steps for anyone who has access to a webcam or has a own photo of their own.</p>
-		<div class="ifTime">
+		<div class="ifTime show">
 			<ol start="4">
 				<div class="comment">Does it raise privacy issues for UCB if we have students saving photos of themselves in Snap? --MF, 8/14/21</div>
 				<li>

middle-school/student-pages/U1/L4/04-pixel-mapper.html

@@ -38,7 +38,7 @@ <h3>Selecting a Single Color</h3>
 						</div>
 					</div>
 				</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 would you change your code to report just the blue color value?</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 would you change your code to report just the blue color value?</li>
 			</ol>
 		</div>
 		<p>
@@ -55,16 +55,16 @@ <h3>Selecting a Single Color</h3>
 				</li>
 			</ol>
 		</div>
-		<div class="ifTime">
+		<div class="ifTime show">
 			<ol start="5">
 				<li>The <code>color from pixel</code> block uses the <code>item of</code> block to select the right item. To see how it works, right-click <code>color from pixel</code>, and select "edit…".</li>
 			</ol>
 		</div>
-		
-		
+
+
 		<div class="todo">I want to use the <code>draw pixel</code> block as a one-pixel segue into mapping channel edits over an image. --MF, 8/27/21</div>
 
-		
+
 		<h3><code>Map</code>ping over a List</h3>
 		<p>You can use <img class="inline" src="/bjc-r/img/blocks/map.png" alt="map 'reporter input slot' over 'list input slot'" title="map 'reporter input slot' over 'list input slot'" /> to apply any block that works on one list item every item in a list.</p>
 		<div class="forYouToDo">
@@ -121,7 +121,7 @@ <h3><code>Map</code>ping over a List</h3>
 				<p><code>Map</code> takes a function as input so it can apply that function to each item in the list. The empty input slot in the function (in this case, the pixel) is where each item from the list (in this case, the list of pixels) goes every time the function is applied.</p>
 			</div>
 		</div>
-		
+
 		<div class="todo"><hr /> <h1>Consider a page break here. --MF, 9/13/21</h1><hr /></div>
 
 		<h3>Playing with Filters</h3>
@@ -142,7 +142,7 @@ <h3>Playing with Filters</h3>
 							Run the "Mystery Filter #1." If it's not using your favorite costume, you can change the costume in the <code>use costume</code> dropdown menu.<br />
 							<img class="indent" src="/bjc-r/middle-school/img/U1/lab04/image-manipulation-filter-1.png" alt="use costume (parrots) with pixel filter ((map (RGB pixel, red: (color (red) from pixel 'empty list input slot') green: (0) blue: (0)) over (pixels of costume)))" title="use costume (parrots) with pixel filter ((map (RGB pixel, red: (color (red) from pixel 'empty list input slot') green: (0) blue: (0)) over (pixels of costume)))" />
 						</li>
-						<li>What does Mystery Filter #1 do?</li> 
+						<li>What does Mystery Filter #1 do?</li>
 						<div class="endnote">
 							<div class="todo">Image needs to be updated. --MF, 9/13/21</div>
 							<p><a href="#hint-filter-1" data-toggle="collapse" title="What does Mystery Filter #1 do?">Click for a description of what Mystery Filter #1 does.</a></p>
@@ -161,10 +161,10 @@ <h3>Playing with Filters</h3>
 							</ol>
 						</li>
 					</ol>
-				</li>						
+				</li>
 			</ol>
 		</div>
-		<div class="ifTime">
+		<div class="ifTime show">
 			<ol start="11">
 				<li>How could you make a filter that showed only the green or only the blue values?</li>
 				<li>How could you make a filter that <em>blocked</em> only the red, green, or blue values?</li>
@@ -217,7 +217,7 @@ <h3>Playing with Filters</h3>
 				</li>
 			</ol>
 		</div>
-		<div class="ifTime">
+		<div class="ifTime show">
 			<ol start="15">
 				<li>The <code>scale up</code> block won't change black pixels. Why not?</li>
 			</ol>
@@ -227,7 +227,7 @@ <h3>Playing with Filters</h3>
 				<li>Try building an image filter of your own.</li>
 			</ol>
 		</div>
-		
+
 
 		<div class="todo">Cut for now. Maybe build into an extension activity... --MF, 9/13/21
 		<div class="forYouToDo">
@@ -244,11 +244,11 @@ <h3>Playing with Filters</h3>
 					</ul>
 				</li>
 			</ol>
-		</div>	
+		</div>
 		</div>
 
 		<div class="learn">In this activity, you learned how to select a single pixel out of an image or and a single color value out of a pixel, how to apply a function to every element of a list using <code>map</code>, and used <code>map</code> to explore several filters that transformed each pixel in the image.</div>
 
-		
+
 	</body>
 </html>