Skip to content

Commit

Permalink
Merge pull request #54 from bjc-edc/csp
Browse files Browse the repository at this point in the history 
CSP Update with U1 Teacher Supports
  • Loading branch information
@maryfries
maryfries authored Aug 23, 2021
2 parents e2261be + 41cf295 commit 683bbc3
Show file tree
Hide file tree
Showing 256 changed files with 2,754 additions and 1,677 deletions.
3 changes: 2 additions & 1 deletion course/bjc4nyc_teacher.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@
<body>
<h2>Beauty and Joy of Computing Teacher Guide</h2>
<p>BJC was developed by the University of California, Berkeley, and Education Development Center, Inc. Teacher professional development has been a partnership with North Carolina State University, the New York City Department of Education, and the New York City Foundation for Computer Science Education. </p>
<p>You may enjoy these short videos about a <a href="https://stemforall2016.videohall.com/presentations/794" title="BJC classroom video" target="_blank">BJC classroom</a> and a <a href="https://www.edc.org/finding-beauty-and-joy-computing" title="video about former BJC student turned CS major" target="_blank">former BJC student turned CS major</a>.</p>

<div style="float:right; padding-top:0px;">
<div style="text-align:center;">
<img src="/bjc-r/img/web/bjc-logo.png" alt="Beauty and Joy of Computing" title="Beauty and Joy of Computing" />
</div>
<div class="topic_link" style="text-align:center;"><a href="/bjc-r/cur/teaching-guide/resources/tg-resources.html" title="Teacher Resources">Teacher Resources</a></div>
<div class="topic_link" style="text-align:center;"><a href="https://bjc.berkeley.edu/pd" title="Teacher PD">Teacher PD</a></div>
<div class="topic_link" style="text-align:center;"><a href="https://bjc.berkeley.edu/pd" title="Teacher PD" target="_blank">Teacher PD</a></div>
<div class="topic_link" style="text-align:center;"><a href="/bjc-r/course/bjc4nyc.html" title="Student Materials">Student Materials</a></div>
<div style="text-align:center; padding-top:10px;">To give students before the exam:<br /><span class="topic_link"><a href="/bjc-r/cur/snap-cheat-sheet.html" title="Snap! Cheat Sheet">Snap<em>!</em> Cheat Sheet</a></span></div>
<div style="text-align:center; padding-top:10px;">To get late-adding students up to speed:<br /><span class="topic_link"><a href="/bjc-r/cur/snap-crash-course.html" title="Snap! Crash Course">Snap<em>!</em> Crash Course</a></span></div>
Expand Down
2 changes: 1 addition & 1 deletion cur/compare.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ <h2>Social Implications of Computers<a name="social">&nbsp;</a></h2>
</p>
<p>We take the stand that <em>any</em> technology has risks and benefits, and that <em>people</em> decide how to minimize risks and maximize benefits. Therefore, in each topic, we have students evaluate alternate points of view. For example, rather than shut down debate on the downloading of copyrighted works (e.g., music), which many students do, we try to open the issue by eliciting honest perspectives on both the value and harm in it, and whether there are ways to protect the value and remedy the harm (e.g., by considering alternate ways to support artists and writers). Both student pages and the Teachers' Guide point to provocative readings on each topic.</p>
<p>In general, we hope to leave students feeling optimistic about the benefits of technology, but also ready to think critically about any <em>specific</em> technology. We also remind them that the decisions about how a new technology is used are made by human beings, including themselves if they pursue a career in computer science, so they shouldn't feel helpless in the face of a supposed technological imperative.</p>
<p>We use the excellent <a href="http://bitsbook.com/" target="_blank"><em>Blown to Bits</em></a> as the textbook for this part of the course. (There is no textbook for the technical parts of the course, beyond the online materials we provide.) The book is aimed at adult readers, and will be difficult especially for ESL students, so we use short excerpts and discuss alternative presentations in the Teachers' Guide. Like the rest of the course materials, this book is avaliable free online, with a Creative Commons BY-NC-SA license.</p>
<p>We use the excellent <a href="http://bitsbook.com/" target="_blank"><em>Blown to Bits</em></a> as the textbook for this part of the course. (There is no textbook for the technical parts of the course, beyond the online materials we provide.) The book is aimed at adult readers, and will be difficult especially for ESL students, so we use short excerpts and discuss alternative presentations in the Teachers' Guide. Like the rest of the course materials, this book is available free online, with a Creative Commons BY-NC-SA license.</p>
<p>The book is a few years old now, so we supplement it with current readings, looking for topics that will be relevant to students. Students choose their own topics to study in more depth; this is one way we appeal to a diverse audience. We start class meetings with "Computing in the News," presenting items from that morning's newspaper, one generally positive and one problematic. After some teacher-chosen examples to illustrate the idea, we encourage teachers to assign the selection of articles to students in rotation.</p>
</div>

Expand Down
4 changes: 2 additions & 2 deletions cur/performance-tasks/create-brian.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h3>Showing Your Code for the AP Create Task</h3>

<h4><strong>Creating Script Pics</strong></h4>
<p>
You can download a PNG image file of any block or script by right-clicking it (or control-clicking it on a mac) and selecting "script pic..." If a new window opens with the picture, use your browser's Save command (in the File menu) to save it. If not, look in your browser's Downloads folder for the image file.<br />
You can download a PNG image file of any block or script by right-clicking it (or control-clicking it on a Mac) and selecting "script pic..." If a new window opens with the picture, use your browser's Save command (in the File menu) to save it. If not, look in your browser's Downloads folder for the image file.<br />
<table>
<tr>
<td>
Expand Down Expand Up @@ -54,7 +54,7 @@ <h4><strong>Creating Script Pics</strong></h4>

<h4><strong>Exporting All the Images at Once</strong></h4>
<p>
You can download an HTML file of all of the blocks in your whole project as well as a picture of the stage by selecting "Export summary..." from the Snap<em>!</em> File menu (<img class="inline" src="/bjc-r/img/1-introduction/file_button.png" style="height:1.6em;" alt="File button" title="File button"/>). The HTML file also land in your browser's Downloads folder. Open it (in a browser), right-click (or control-click on a mac) to copy the images you need, and paste them into the document where you are describing your code.<br />
You can download an HTML file of all of the blocks in your whole project as well as a picture of the stage by selecting "Export summary..." from the Snap<em>!</em> File menu (<img class="inline" src="/bjc-r/img/1-introduction/file_button.png" style="height:1.6em;" alt="File button" title="File button"/>). The HTML file also land in your browser's Downloads folder. Open it (in a browser), right-click (or control-click on a Mac) to copy the images you need, and paste them into the document where you are describing your code.<br />
<img class="indent" src="/bjc-r/img/ap-support/export-summary.png" alt="image of Snap! file menu open with mouse over 'Export summary...' There is a balloon showing above the pointer that says, 'open a new browser browser window with a summary of the project'" title="image of Snap! file menu open with mouse over 'Export summary...' There is a balloon showing above the pointer that says, 'open a new browser browser window with a summary of the project'" />
</p>

Expand Down
8 changes: 5 additions & 3 deletions cur/performance-tasks/create-task/3-implementing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,15 +43,17 @@ <h2>Implementing Your Development Process</h2>

<div class="comment">CRD-2.H.1, CRD-2.H.2 ("The College Board is very particular")</div>
<div class="examFullWidth">
<div class="todo">Brian, you made this an "exam" box, and I have no problem with that characterization, in theory, but this isn't about the "exam;" it's about the "create task," and I don't want to confuse people. --MF, 9/2/19<br />
Orange boxes are for important computer science ideas. This isn't important, isn't computer science, and isn't an idea. The create task is part of the exam! -bh</div>
The College Board is very particular about acknowledging content that you did not develop yourself. You are probably familiar with using quotation marks around text that you didn't write and with creating a bibliography, but for the Create Task, you also need to acknowledge <em>code</em> that other people wrote or even helped you write. This acknowledgment must include either where you got the code or who wrote it, and it should be included in your program documentation.</div>
<p>The College Board is very particular about acknowledging content that you did not develop yourself. You are probably familiar with using quotation marks around text that you didn't write and with creating a bibliography, but for the Create Task, you also need to acknowledge <em>code</em> that other people wrote or even helped you write. This acknowledgment must include either where you got the code or who wrote it, and it should be included in your program documentation.</p>
</div>
<div class="forYouToDo">
<ol start="3">
<div class="comment">CRD-2.H ("Develop a prototype")</div>
<li>Develop a prototype to meet your specifications. As you do, keep track of any pieces of code that were written by someone else (either using Snap<em>!</em> comments or in another document).</li>
</ol>
</div>
<div class="examFullWidth">
<p>The Create Task requires you to <strong>include a list and identify it by name</strong>, but in Snap<em>!</em>, lists aren't necessarily named. To receive full credit, be sure to make a variable to store your list and refer to your list by its variable name in your written response. The exam graders need to understand what you are referring to.</p>
</div>


</body>
Expand Down
4 changes: 2 additions & 2 deletions cur/programming/1-introduction/1-building-an-app/1-creating-a-snap-account.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,12 @@ <h3>Creating an Account</h3>
<ol>
<li>If you haven't already opened <span class="snap">snap</span>, open it now: <a href="http://snap.berkeley.edu/run" title="Snap! Build Your Own Blocks" target="_blank"><strong>http://snap.berkeley.edu/run</strong></a></li>
<li>
In the Snap<em>!</em> window, click the Cloud menu, <img src="/bjc-r/img/1-introduction/cloud_button.png" alt="Cloud button"/>, select "Signup...", and follow the instructions. <br />
In the Snap<em>!</em> window, click the Cloud menu, <img src="/bjc-r/img/1-introduction/cloud_button.png" alt="Cloud menu button" title="Cloud menu button" />, select "Signup...", and follow the instructions. <br />
<img class="indent" src="/bjc-r/img/sys/button-cloud-with-context.png" alt="cloud icon" title="cloud icon"/>
</li>
<div class="endnote">
<p>You'll be asked to click a link in your email to verify your account, but you don't have to do that right now.</p>
<p>You may change your password at any time using the Cloud menu, <img src="/bjc-r/img/1-introduction/cloud_button.png" alt="Cloud button" title="Cloud button"/>.</p>
<p>You may change your password at any time using the Cloud menu, <img src="/bjc-r/img/1-introduction/cloud_button.png" alt="Cloud menu button" title="Cloud menu button"/>.</p>
</div>
</ol>
</div>
Expand Down
16 changes: 8 additions & 8 deletions cur/programming/1-introduction/1-building-an-app/2-start-your-first-snap-app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ <h3>Making a Character Move</h3>
<a href="/bjc-r/prog/1-introduction/U1L1-ClickAlonzo.xml" class="run"><img class="inline" src="/bjc-r/img/icons/load-save.png" alt="Click here to load this file. Then save it to your Snap! account." title="Click here to load this file. Then save it to your Snap! account."></a>
<div class="narrower">
<h4><strong>Saving a Snap<em>!</em> Project</strong></h4>
<p>Choose "Save" from the Snap<em>!</em> File menu, <img src="/bjc-r/img/1-introduction/file_button.png" alt="File button" title="File button"/>.</p>
<p>Choose "Save" 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"/>.</p>
</div>
</li>
</ol>
Expand All @@ -47,8 +47,8 @@ <h4><strong>Saving a Snap<em>!</em> Project</strong></h4>
<div class="forYouToDo">
<ol start="3">
<li>
<div class="index-term" id="when I am</code>"></div>
<div class="index-term" id="go to</code>"></div>
<!--<div class="index-term" id="when I am</code>"></div>
<div class="index-term" id="go to</code>"></div>-->
As a first step, make Alonzo jump someplace else on the stage when he's clicked. Drag these two blocks into the scripting area (the center area of the window):<br />
<div class="sidenoteBig">
<img class="imageRight" src="/bjc-r/img/1-introduction/motion-palette-categories.jpg" alt="Palette categories: Motion, Looks, Sound, Pen, Control, Sensing, Operators, and Variables" title="Palette categories: Motion, Looks, Sound, Pen, Control, Sensing, Operators, and Variables" />
Expand All @@ -68,8 +68,8 @@ <h4><strong>Saving a Snap<em>!</em> Project</strong></h4>
</div>
</ol>
</div>
<div class="index-term" id="when green flag clicked</code>"></div>
<div class="index-term" id="when key pressed</code>"></div>
<!--<div class="index-term" id="when green flag clicked</code>"></div>
<div class="index-term" id="when key pressed</code>"></div>-->
<div class="takeNote">
<p>Orange boxes contain the ideas you should still remember three years from now. </p>
<img class="indent" src="/bjc-r/img/blocks/when-i-am-clicked.png" alt="when i am (clicked)" title="when i am (clicked)" />
Expand All @@ -89,13 +89,13 @@ <h4><strong>Saving a Snap<em>!</em> Project</strong></h4>
<div class="forYouToDo">
<ol start="6">
<li>
Choose "Save" from the Snap<em>!</em> File menu, <img src="/bjc-r/img/1-introduction/file_button.png" alt="File button" title="File button"/>.
Choose "Save" 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>
</ol>
</div>

<h3>Making the Game Challenging</h3>
<div class="index-term" id="forever</code> loop" />
<!--<div class="index-term" id="forever</code> loop" />-->
<p>
The game isn't much fun if Alonzo just sits there waiting to be clicked. Once you've clicked him, he should keep jumping around on his own. To make Alonzo keep moving around, you need a block that says "do this <code>forever</code>." And there is a block that does it:<br />
<img class="indent" src="/bjc-r/img/1-introduction/forever.png" alt="forever" title="forever" />
Expand All @@ -119,7 +119,7 @@ <h3>Making the Game Challenging</h3>
</div>
</li>
<li>
<div class="index-term" id="wait</code>"></div>
<!--<div class="index-term" id="wait</code>"></div>-->
Alonzo moves too fast. Use the <img src="/bjc-r/img/blocks/wait-1-secs.png" alt="wait 1 secs" title="wait 1 secs" /> block to slow him down. Try your program, and increase or reduce the wait time if you like.
<div class="endnote">
Where the <code>wait</code> block goes in your script matters. Do you want the script to wait one time or each time Alonzo moves?
Expand Down
2 changes: 1 addition & 1 deletion cur/programming/1-introduction/1-building-an-app/3-loading-mobile-device.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ <h4><strong>Creating a Link</strong></h4>
<img class="imageRight" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L1P7_OpenFile.png" height="350" alt="Open Project dialog box" title="Open Project dialog box"/>
<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 button" title="File button"/>.</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>
<li>Select the project you want to share from the project list (your current project is likely named "U1L1-ClickAlonzo").</li>
<div class="endnote">To locate a file, you can type in the search bar at the top to see only a list of matching files (see the example on the right, where only "U1" files are shown).</div>
<li>Click "Share," and then click "Yes" to share. Then click "Cancel" to close the menu.</li>
Expand Down
6 changes: 3 additions & 3 deletions cur/programming/1-introduction/1-building-an-app/4-keeping-score.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@ <h3>Confirming Whether Alonzo Was Clicked</h3>
Program Alonzo to face the other way when clicked.
<img src="/bjc-r/img/1-introduction/alonzo.png" alt="Alonzo character" title="Alonzo character" height="60">
<img src="/bjc-r/img/1-introduction/alonzo-flipped-other-way.png" alt="Alonzo character flipped to face the other way" title="Alonzo character flipped to face the other way" height="60">
<div class="index-term" id="next costume</code>"></div>
<!--<a class="index-term anchor" id="next costume</code>">&nbsp;</a>-->
<ol>
<li>The project you loaded has two Alonzo costumes&mdash;one facing right and the other facing left&mdash;so you can use the <img src="/bjc-r/img/blocks/next-costume.png" alt="next costume"> block to make the sprite face the other way. Add the <code>next costume</code> block to the place in your program where the user has just clicked on Alonzo.</li>
<li>Test your program. Make sure Alonzo faces the other way when he is clicked but not when he jumps without being clicked.</li>
</ol>
</div>

<h3>Keeping Score</h3>
<div class="index-term" id="change effect</code>"></div>
<!--<a class="index-term anchor" id="change effect</code>">&nbsp;</a>-->
<p>The player will also want to know how much progress they have made in the game. The command <img src="/bjc-r/img/1-introduction/ghosteffect.png" alt="change (ghost) effect by ()" title="change (ghost) effect by ()" /> can control Alonzo's <em>transparency</em>.</p>
<div class="vocabFullWidth">
<p>
Expand All @@ -45,7 +45,7 @@ <h3>Keeping Score</h3>
</div>
<div class="forYouToDo">
<p>Use transparency to tell the user how close they are to winning: every time they click, Alonzo gets more invisible, and when he disappears completely, they win the game.</p>
<div class="index-term" id="clear graphics effects</code>"></div>
<!--<a class="index-term anchor" id="clear graphics effects</code>">&nbsp;</a>-->
<ol start="3">
<li> Drag the <code>change (ghost) effect</code> block into the center scripting area, and experiment with different input numbers (clicking it repeatedly after each change) to see exactly what it does. At what ghost effect value does Alonzo become completely invisible? You can use the command <img src="/bjc-r/img/1-introduction/clear-graphic-effects.png" alt="clear graphic effects"> to make Alonzo fully opaque again.</li>
<li>Then, modify your script so that every time Alonzo is clicked, he gets a little more ghostly. Think about how the input you use affects the length of the game. Try out your game.</li>
Expand Down
2 changes: 1 addition & 1 deletion cur/programming/1-introduction/1-building-an-app/5-finish-your-first-snap-app.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ <h2>Improving Your Game</h2>
</p>
<div class="forYouToDo">
<ol start="2">
<div class="index-term" id="say</code>"></div>
<!--<div class="index-term" id="say</code>"></div>-->
<li>
Create a second script that makes Alonzo <img src="/bjc-r/img/blocks/say-empty.png" alt="say ()" title="say ()" /> a welcome message when the green flag is clicked. (Alonzo might say, "Welcome to 'Click Alonzo!' Keep clicking me if you can!")
</li>
Expand Down
Loading

0 comments on commit 683bbc3

Please sign in to comment.