sparks-a11y: replace all h4 elements as div.box-head

sparks/student-pages/U1/L2/05-creating-a-block.html

@@ -16,7 +16,7 @@ <h2>Creating a Block</h2>
 					Make a new block: <img class="inline-block" src="/bjc-r/sparks/img/U1/lab02/plural-of.png" alt="plural of ()" title="plural of ()" />
 					<div class="narrower">
 						<img class="imageRight noshadow" src="/bjc-r/sparks/img/U1/lab02/make-a-block-plural.jpg" alt="image of 'Make a block' dialog box with 10 palette menus (Motion, Looks, Sound, Pen, Lists, Control, Sensing, Operators, Variables, Other) of which Operators is selected; a text box labeled 'Type a title for your block.' in which 'plural of' has been written; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.' of which 'Reporter' is selected; two radio boxes ('for all sprites', which is checked, and 'for this sprite only', which is not checked) with no label of which 'for all sprites' is selected; and two buttons ('OK' and 'Cancel')" title="image of 'Make a block' dialog box with 10 palette menus (Motion, Looks, Sound, Pen, Lists, Control, Sensing, Operators, Variables, Other) of which Operators is selected; a text box labeled 'Type a title for your block.' in which 'plural of' has been written; three block shape options (puzzle-shaped/'Command', oval/'Reporter', and hexagonal/'Predicate') labeled 'Select a shape.' of which 'Reporter' is selected; two radio boxes ('for all sprites', which is checked, and 'for this sprite only', which is not checked) with no label of which 'for all sprites' is selected; and two buttons ('OK' and 'Cancel')" />
-						<h4><strong>Making a Block</strong></h4>
+						<div class="box-head">Making a Block</div>
 						<ol style="list-style-type: lower-alpha">
 							<li>
 								Right-click (or control-click on a Mac) in an empty spot in the Scripts area and choose "make a block..." <br />
@@ -39,8 +39,8 @@ <h4><strong>Making a Block</strong></h4>
 			</ol>
 			<p style="clear: both; height: 0px;"></p>
 		</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>
-		
+
 	</body>
 </html>

sparks/student-pages/U1/L2/07-creating-editing-blocks.html

@@ -29,7 +29,7 @@ <h2>Editing the Story Structure</h2>
 				<li><img class="inline" src="/bjc-r/img/icons/talk-with-your-partner.png" alt="Talk with Your Partner" title="Talk with Your Partner" /> Discuss the code inside the <code>report</code> block and how it works to create the output of <code>super short story</code>.</li>
 				<li>
 					<div class="sidenoteBig">
-						For example: 
+						For example:
 						<ol style="list-style-type: lower-alpha">
 							<li>Story: Fifteen students are in the park.</li>
 							<li>Words to vary: fifteen, students, park</li>
@@ -44,36 +44,36 @@ <h2>Editing the Story Structure</h2>
 					</ol>
 				</li>
 			</ol>
-			<p style="clear: both; height: 0px;"></p> 
+			<p style="clear: both; height: 0px;"></p>
 		</div>
-		
+
 		<div class="vocabFullWidth"><strong>: Variables</strong>
 			<div class="todo">Revisit how to do this better for the middle school level. --MF, 7/23/23</div>
 			<p>Block inputs (such as <var>job</var>, <var>action</var>, <var>number</var>, and <var>plural animal</var>) are a type of <strong>variable</strong> because the value that they provide to the <code>join</code> block <em>varies</em> based on what is typed into the input slots of the <code>super short story</code> block<!-- but they only can be used in this <em>local</em> context (you can't drag them out of the block editor and expect them to work in other parts of your code)-->.</p>
 			<div class="todo">Should this mention that block/script local is different from sprite local? -bh 2/6/22</div>
 		</div>
-		
+
 		<div class="forYouToDo">
 			<ol start="5">
 				<li>
 					<div class="sidenote">
 						<p>You learned how to create a new block in <a href="/bjc-r/sparks/student-pages/U1/L2/05-creating-a-block.html?topic=sparks%2F1-functions-data.topic&course=sparks.html" title="Activity 5: Creating a Block">Activity 5: Creating a Block</a>.</p>
 						<p>You learned how to edit an existing block on <a href="/bjc-r/sparks/student-pages/U1/L2/02-editing-a-block.html?topic=sparks%2F1-functions-data.topic&course=sparks.html" title="Activity 2: Editing a Block">Activity 2: Editing a Block</a>.</p>
 					</div>
-					Decide whether you want to edit the <code>super short story</code> block or create your own new block. If creating your own block, make the new block now. 
+					Decide whether you want to edit the <code>super short story</code> block or create your own new block. If creating your own block, make the new block now.
 				</li>
 				<li>
 					Either way, set up the hat block inside the Block Editor by adding your variables and labels for them. For example, you might want your hat block to look something like this:<br />
 					<img  class="indent" src="/bjc-r/sparks/img/U1/lab02/edited-super-short-story-block-editor1.png" alt="super short story, number: (number) people: (people) place: (place)" title="super short story, number: (number) people: (people) place: (place)" /><br />
 					<div class="narrower">
-						<h4><strong>Editing, Adding, and Removing Labels and Variables in the Block Editor<!-- (like <img class="inline" src="/bjc-r/sparks/img/U1/lab02/job-label.png" alt="'job:' label" title="'job:' label" />) and Variables (like <img class="inline" src="/bjc-r/sparks/img/U1/lab02/job-variable.png" alt="'job' variable name" title="'job' variable name" />)--></strong></h4>
+						<div class="box-head">Editing, Adding, and Removing Labels and Variables in the Block Editor<!-- (like <img class="inline" src="/bjc-r/sparks/img/U1/lab02/job-label.png" alt="'job:' label" title="'job:' label" />) and Variables (like <img class="inline" src="/bjc-r/sparks/img/U1/lab02/job-variable.png" alt="'job' variable name" title="'job' variable name" />)--></div>
 						<ul>
 							<li>
 								To <strong>edit</strong> a label or variable: Click the label or variable, change it to your variable name, and click "OK".<br />
 								<img class="imageRight" src="/bjc-r/sparks/img/U1/lab02/edit-label-fragment.png" alt="" title="" />
 							</li>
 							<li>
-								To <strong>add</strong> a label or variable: 
+								To <strong>add</strong> a label or variable:
 								<ol>
 									<li>
 										Click the plus sign where you want to add something. The plus sign might be invisible until you hold the mouse pointer there.<br />
@@ -95,7 +95,7 @@ <h4><strong>Editing, Adding, and Removing Labels and Variables in the Block Edit
 					<div class="comment"><a href="https://piazza.com/class/h8yx482idav52y?cid=3568" title="https://piazza.com/class/h8yx482idav52y?cid=3568" target="_blank">https://piazza.com/class/h8yx482idav52y?cid=3568</a></div>
 					Set up the text and drag in the variables to tell your story using a <code>join</code> block inside the <code>report</code> block. For example, yours might look something like this: <br />
 					<img class="indent" src="/bjc-r/sparks/img/U1/lab02/super-short-story-definition.png" alt="" title="" />
-					
+
 
 				</li>
 			</ol>
@@ -124,10 +124,10 @@ <h4><strong>Editing, Adding, and Removing Labels and Variables in the Block Edit
 						</div>
 					</div>
 				</li>
-				
+
 			</ol>
 		</div>
-		
+
 
 		<div class="learn">In this activity, you changed the labels and variables in the <code>super short story</code> block to match the categories in your own story and edited the structure of the story to make it your own.</div>
 

sparks/student-pages/U1/L2/08-sharing.html

@@ -10,7 +10,7 @@
 		<h2>Sharing Your Project</h2>
 		<div class="todo">We need to teach sharing early. --MF, 12/28/21</div>
 		<div class="todo">Sharing on New Page? From PD: "The info I received from Dan on this process yesterday was very complete and should be added to Unit 1 Lab 2 Activity 2, step 10 especially when the title turns bold. "</div>
-		
+
 		<div class="learn">In this activity, you'll you will share your project so others can play with your super short study builder.</div>
 
 		<div class="forYouToDo">
@@ -20,7 +20,7 @@ <h2>Sharing Your Project</h2>
                 </li>
             </ol>
 					<div class="narrower">
-						<h4><strong>Option A: Share your project as a file</strong></h4>
+						<div class="box-head">Option A: Share your project as a file</div>
 						<div class="endnote">
 							<a href="#hint-share-file" data-toggle="collapse" title="Send an XML file">Send an XML file.</a>
 							<div id="hint-share-file" class="collapse">
@@ -31,11 +31,11 @@ <h4><strong>Option A: Share your project as a file</strong></h4>
 								</ul>
 							</div>
 						</div>
-                        <h4><strong>Option B: Share your project as a link</strong></h4>
+                        <div class="box-head">Option B: Share your project as a link</div>
 						<div class="endnote">
 							<p><a href="#hint-share-link" data-toggle="collapse" title="Sharing your project will create a link that will let others see the most recently saved version of your project.">"Sharing" your project will create a link that will let others see the most recently saved version of your project.</a></p>
 							<div id="hint-share-link" class="collapse">
-								<h4><strong>Creating a Link</strong></h4>
+								<div class="box-head">Creating a Link</div>
 								<ol type="a">
 									<li>Make sure your project is saved.</li>
 									<li>Choose "Open..." from the Snap<em>!</em> File menu (<img src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>).</li>
@@ -48,7 +48,7 @@ <h4><strong>Creating a Link</strong></h4>
 								</ol>
 							</div>
                         </div>
-						
+
 		</div>
 
 		<div class="learn">In this activity, you'll edit the structure of the story itself to make it your own story.</div>

sparks/student-pages/U1/L6/02-l33t-text.html

@@ -159,7 +159,7 @@ <h3><code>Map</code>ping the Letter-Changing Function Over All the Letters</h3>
 					<img class="indent" src="/bjc-r/sparks/img/U1/lab06/l33t-change-s-to-5-reporting.png" alt="l33t (I have dance class at eight on Tuesday.) reporting 'I have dance cla55 at eight on Tue5day.'" title="l33t (I have dance class at eight on Tuesday.) reporting 'I have dance cla55 at eight on Tue5day.'" />
 				</li>
 				<div class="endnote">
-					<h4><strong>Duplicating a Block</strong></h4>
+					<div class="box-head">Duplicating a Block</div>
 					<p>To easily make a new block that is similar to your letter-changing function (such as <code>change e to 3 for letter</code>), you don't need to start all over again. Instead, just right-click on the block name <em>in the palette on the left</em> and select "duplicate".</p>
 					<p>That will create a new block (such as <code>change e to 3 for letter (2)</code>) and open it for you in the block editor. You can click the text in the hat block to change the name. Then create the code for your new block.</p>
 				</div>

sparks/student-pages/U2/L1/06-storing-songs.html

@@ -33,7 +33,7 @@ <h2>Storing Songs</h2>
 				<li>
 					Create a global variable to store your song. Here's how...
 					<div class="narrower">
-						<h4><strong>Making a Global Variable</strong></h4>
+						<div class="box-head">Making a Global Variable</div>
 						<ol type="a">
 							<li>Click <img class="inline" src="/bjc-r/img/1-introduction/make-a-variable.png" alt="make a variable button" title="make a variable button" />  in the Variables palette. (It's not a block; you can't drag it into the scripting area.)</li>
 							<li>Type the name for your variable. (Use the name of the song or something else to help you remember it. Don't forget that the name can have spaces in it—it doesn't have to be just one word.)</li>
@@ -44,7 +44,7 @@ <h4><strong>Making a Global Variable</strong></h4>
 				<li>
 					Set your global variable to store your song. Here's how...
 					<div class="narrower">
-						<h4><strong>Setting a Global Variable</strong></h4>
+						<div class="box-head">Setting a Global Variable</div>
 						<ol type="a">
 							<li>Drag the <code>set variable</code> block out of the Variables palette and into the scripting area.</li>
 							<li>In the first input slot, select the name of your global variable by clicking the triangle (▼) to open the menu.</li>

sparks/student-pages/U2/L2/02-planning-project.html

@@ -45,7 +45,7 @@ <h3>Making Your Plan</h3>
 				</li>
 				<li>Review the feedback you've collected and make any improvements your project plan that make sense to you.</li>
 				<div class="endnote">
-					<h4><strong>Why gather feedback?</strong></h4>
+					<div class="box-head">Why gather feedback?</div>
 					<p>Have you ever used an app that it was annoying or hard to use? The programmers may not have had those problems when they used it, but you are a different person. Creating good software requires getting input from different kinds of people.</p>
 				</div>
 			</ol>

sparks/student-pages/U2/L2/03-adding-backgrounds.html

@@ -35,7 +35,7 @@ <h3>Adding a Stage Background</h3>
 					<img class="indent" style="height: 150px;" src="/bjc-r/sparks/img/U2/lab02/background_Night_City_with_Street.png" alt="example sprite background: cartoon of a cityscape at night with a street in front; in Snap!, this costume is called 'Night City with Street'" title="example sprite background: cartoon of a cityscape at night with a street in front; in Snap!, this costume is called 'Night City with Street'" />
 					<img class="indent" style="height: 150px;" src="/bjc-r/sparks/img/U2/lab02/background_Party_Room.png" alt="example sprite background: cartoon of a room with a disco ball, speakers, colorful lights, a projection screen, and a microphone; in Snap!, this costume is called 'Party Room'" title="example sprite background: cartoon of a room with a disco ball, speakers, colorful lights, a projection screen, and a microphone; in Snap!, this costume is called 'Party Room'" />
                     <div class="narrower">
-						<h4><strong><a href="#hint-adding-background" data-toggle="collapse" title="Adding a Built-in Stage Background">Adding a Built-in Stage Background</a></strong></h4>
+						<div class="box-head"><a href="#hint-adding-background" data-toggle="collapse" title="Adding a Built-in Stage Background">Adding a Built-in Stage Background</a></div>
 						<div id="hint-adding-background" class="collapse">
 							<img class="imageRight" src="/bjc-r/sparks/img/U2/lab02/icon-stage.png" alt="image of the lower right corner of the Snap! window with the Stage icon circled" title="image of the lower right corner of the Snap! window with the Stage icon circled" />
 							<ol type="a">
@@ -58,7 +58,7 @@ <h4><strong><a href="#hint-adding-background" data-toggle="collapse" title="Addi
 				<li>
 					If you add more backgrounds, change the background to the first background that you want to appear.
                     <div class="narrowblue">
-                        <h4><strong>Changing the Stage Background</strong></h4>
+                        <div class="box-head">Changing the Stage Background</div>
                         <ol type="a">
 							<li>If it isn't selected already, Select the <strong>Stage</strong> icon in the lower right corner of the Snap<em>!</em> window.</li>
                             <div class="sidenoteBig">The "Backgrounds" tab isn't always visible. It replaces the "Costumes" tab when the stage icon is selected.</div>

sparks/student-pages/U2/L2/04-adding-costumes.html

@@ -36,7 +36,7 @@ <h3>Adding a Costume</h3>
 					<img class="indent" src="/bjc-r/sparks/img/U2/lab02/costume_dragon1_b.svg" alt="example sprite costume: cartoon of a dragon breathing fire; in Snap!, this costume is called 'dragon1 b'" title="example sprite costume: cartoon of a dragon breathing fire; in Snap!, this costume is called 'dragon1 b'" />
 		            <div class="endnote">You add a costume almost the same way you add a stage background! The only differences are in <strong>bold</strong> below.</div>
                     <div class="narrower">
-						<h4><strong><a href="#hint-adding-costume" data-toggle="collapse" title="Adding a Built-in Sprite Costume">Adding a Built-in Sprite Costume</a></strong></h4>
+						<div class="box-head"><a href="#hint-adding-costume" data-toggle="collapse" title="Adding a Built-in Sprite Costume">Adding a Built-in Sprite Costume</a></div>
 						<div id="hint-adding-costume" class="collapse">
 							<img class="imageRight" src="/bjc-r/sparks/img/U2/lab02/icon-sprite.png" alt="image of the lower right corner of the Snap! window with the Sprite icon circled" title="image of the lower right corner of the Snap! window with the Sprite icon circled" />
 							<ol type="a">
@@ -53,7 +53,7 @@ <h4><strong><a href="#hint-adding-costume" data-toggle="collapse" title="Adding
 				<li>
                     Set the size, position, and orientation of your sprite.
                     <div class="narrower">
-                        <h4><strong><a href="#hint-adjusting-costume" data-toggle="collapse" title="Adjusting a Costume">Adjusting a Costume</a></strong></h4>
+                        <div class="box-head"><a href="#hint-adjusting-costume" data-toggle="collapse" title="Adjusting a Costume">Adjusting a Costume</a></div>
 						<div id="hint-adjusting-costume" class="collapse">
 							<ul>
 								<div style="width: 20%; float: right; margin: 0px; padding: 0px; clear: both; text-indent: 0em;">

sparks/student-pages/U2/L2/04-importing-code.html

@@ -35,7 +35,7 @@ <h2>Importing Code</h2>
 				<li>
                     Export the blocks you want.
                     <div class="narrower">
-                      <h4><strong>Exporting Blocks</strong></h4>
+                      <div class="box-head">Exporting Blocks</div>
                         <ol type="a">
                             <li><strong>Open the Snap<em>!</em> project</strong> from which you want to export blocks.</li>
                             <li><strong>Choose "Export blocks..."</strong> from the Snap<em>!</em> file menu (<img class="inline" src="/bjc-r/img/1-introduction/file_button.png" alt="File menu button" title="File menu button"/>).</li>
@@ -53,7 +53,7 @@ <h4><strong>Exporting Blocks</strong></h4>
                 <li>
                     Import these blocks, test them and resolve any issues, and save.
                     <div class="narrower">
-                        <h4><strong>Importing Blocks</strong></h4>
+                        <div class="box-head">Importing Blocks</div>
                         <ol type="a">
                             <li><strong>Open the Snap<em>!</em> project</strong> into which you want to import blocks.</li>
                             <li>