Skip to content

Commit c1fd27b

Browse files
authored
Merge pull request #266 from bjc-edc/csp
5.3.3 revisions for CORGIS changes
2 parents b412632 + 41d1549 commit c1fd27b

26 files changed

Lines changed: 256 additions & 72 deletions

css/bjc.css

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -279,8 +279,7 @@ var {
279279
font-weight: bold;
280280
}
281281

282-
.python {
283-
display:none;
282+
div.python {
284283
font-size: 1em;
285284
float: right;
286285
margin-right: 20px;
@@ -289,13 +288,18 @@ var {
289288
padding: 10px;
290289
clear: both;
291290
text-indent: 0em;
292-
width: 20%;
291+
width: max-content;
293292
border-style: solid;
294293
border-width: 0px;
295294
background-color: lightcyan;
296295
border-color: #e6a822;
297296
}
298297

298+
div.python pre {
299+
width: max-content;
300+
font-size: 1em;
301+
}
302+
299303
.sidenote,
300304
.sidenoteBig,
301305
.endnote {
@@ -550,20 +554,23 @@ div.comment,
550554
.narrower:before,
551555
.narrowblue:before,
552556
.narrowpurple:before,
553-
.endnote
554-
> div:not(.sidenote):not(.sidenoteBig):not(.sideHOM):not(.sideHOMbig):not(
555-
.todo
556-
):not(.comment):not(.commentBig):not(.takeNote):not(.collapse):not(
557-
.collapsing
558-
):not(.takeItFurther):not(.endnote):not(.vocabFullWidth):not(
559-
.vocabSummary
560-
):not(.pseudop):not(.bordered-table),
561557
.time:before {
562558
font-size: 20px;
563559
font-weight: bold;
564560
line-height: 2.5em;
565561
}
566562

563+
/* This should probably be deleted, but Michael and I left it just in case. Enabling this breaks python code blocks inside endnotes. --MF, 2/20/25 */
564+
/* .endnote
565+
> div:not(.sidenote):not(.sidenoteBig):not(.sideHOM):not(.sideHOMbig)
566+
:not(.todo):not(.comment):not(.commentBig):not(.takeNote):not(.collapse)
567+
:not(.collapsing):not(.takeItFurther):not(.endnote):not(.vocabFullWidth)
568+
:not(.vocabSummary):not(.pseudop):not(.bordered-table):not(.python){
569+
font-size: 20px;
570+
font-weight: bold;
571+
line-height: 2.5em;
572+
} */
573+
567574
.dialogue:before {
568575
content: "Thinking Out Loud";
569576
}

cur/programming/1-introduction/2-gossip-and-greet/2-gossip.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,9 +43,12 @@ <h3>Exploring Custom Blocks</h3>
4343

4444
<div class="examFullWidth">
4545
<!--<div class="index-term anchor" id="say</code>">&nbsp;</div>-->
46-
<div class="python">In Python, this would be written as:<br /> <pre><code>print(gossip())</code></pre></div>
4746
<div class="ap-standard">AAP-3.A.6</div>
4847
<div class="pseudop">
48+
<div class="python">
49+
<a href="#hint-python1" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
50+
<div id="hint-python1" class="collapse"><pre><code>print(gossip())</code></pre></div>
51+
</div>
4952
There is nothing exactly like <img class="nopadtb" src="/bjc-r/img/1-introduction/say-gossip.png" alt="say (gossip)" title="say (gossip)" /> or <img class="nopadtb" src="/bjc-r/img/1-introduction/say-gossip-for-3-secs.png" alt="say (gossip) for (3) secs" title="say (gossip) for (3) secs" /> on the AP Exam because they don't have sprites and speech balloons, but their way of showing this text to the user is
5053
<pre class="inline">DISPLAY(gossip())</pre> if it's written as text or <img class="nopadtb" src="/bjc-r/img/1-introduction/display(gossip).png" alt="a white rounded rectangle containing first the word 'DISPLAY' in all caps and then a smaller white rectangle containing the word 'gossip' in lower case" title="a white rounded rectangle containing first the word 'DISPLAY' in all caps and then a smaller white rectangle containing the word 'gossip' in lower case" /> if it's shown as blocks.
5154
</div>

cur/programming/1-introduction/2-gossip-and-greet/4-making-a-new-block.html

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,15 @@ <h3 class="box-head">Coding the Block's Script</h3>
8787
</div>
8888

8989
<div class="examFullWidth">
90-
<div class="python">In Python, this would be written as:<br /> <code>def double(number):
91-
return (2 * number)
92-
</code></div>
90+
<div class="python">
91+
<a href="#hint-python1" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
92+
<div id="hint-python1" class="collapse">
93+
<pre><code>
94+
def double(number):
95+
return 2 * number
96+
</code></pre>
97+
</div>
98+
</div>
9399
<div class="ap-standard">AAP-3.A.7, AAP-3.C.2</div>
94100
<ul>
95101
<li>

cur/programming/1-introduction/2-gossip-and-greet/5-if-else.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -150,9 +150,17 @@ <h2>Adding Variety to <code>Gossip</code></h2>
150150
</div>
151151
<div class="examFullWidth">
152152
<!--<div class="index-term" id="pick random</code>"></div>-->
153-
<div class="python">In Python, this would be written as:<br /> <code>random(1, 10)</code></div>
154153
<div class="ap-standard">AAP-3.E.1, AAP-3.E.2</div>
155154
<div class="pseudop">The expression <img class="inline" src="/bjc-r/img/blocks/pick-random-1-to-10-full-size.png" alt="pick random (1) to (10)" title="pick random (1) to (10)" /> would be written as <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)" />. Every time you run this code, you will get a different random number between 1 and 10.</div>
155+
<div class="python" style="width:90%">
156+
<a href="#hint-python1" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
157+
<div id="hint-python1" class="collapse">
158+
<pre><code>
159+
from random import randint
160+
randint(1, 10)</code></pre>
161+
(Notice that the <code>random</code> library isn't loaded by default in Python and has to be imported. The <code>randint</code> function returns only integers. You can view the <a href="https://docs.python.org/3/library/random.html" title="Python documentation: random" target="_blank">Python documentation</a> to learn more.)
162+
</div>
163+
</div>
156164
</div>
157165

158166
<div class="forYouToDo">

cur/programming/1-introduction/3-drawing/4-modify-your-pinwheel.html

Lines changed: 32 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,14 +71,20 @@ <h3>Adding Multiple Inputs</h3>
7171
</div>
7272

7373
<div class="examFullWidth">
74-
<div class="python" style="width:300px">In Python, this would be written as:<br /> <code>def pinwheel(number_of_branches):
75-
for i in range(0, number_of_branches):
76-
move(100)
77-
move(37)
78-
turn_clockwise(360 / number_of_branches)
79-
</code></div>
8074
<div class="ap-standard">AAP-3.C.1, AAP-2.K.2</div>
8175
<div class="pseudop">
76+
<div class="python">
77+
<a href="#hint-python1" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
78+
<div id="hint-python1" class="collapse">
79+
<pre><code>
80+
def pinwheel(number_of_branches):
81+
for i in range(0, number_of_branches):
82+
move(100)
83+
move(37)
84+
turn_clockwise(360 / number_of_branches)
85+
</code></pre>
86+
</div>
87+
</div>
8288
The procedure definition for the custom <code>pinwheel</code> command<br />
8389
<img class="indent" src="/bjc-r/img/1-introduction/pinwheel-definition.png" alt="pinwheel, branches: (number of branches)
8490
{
@@ -127,7 +133,13 @@ <h3>Adding Multiple Inputs</h3>
127133
</div>
128134
<div class="endnote">
129135
<div class="pseudop">The procedures <pre class="inline">move()</pre> and <pre class="inline">turn_clockwise()</pre> aren't built in to the AP's language so they are written in lower case like other programmer-defined procedures.</div>
130-
<div class="python">In Python, this would be written as:<br /> <code>def pinwheel(number_of_branches):</code></div>
136+
137+
<div class="python">
138+
<a href="#hint-python2" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
139+
<div id="hint-python2" class="collapse">
140+
<pre><code>def pinwheel(number_of_branches):</code></pre>
141+
</div>
142+
</div>
131143
<div class="pseudop">Notice that the hat block, <img class="inline nopadtb" src="/bjc-r/img/1-introduction/pinwheel-hat-block.png" alt="pinwheel, branches: (number of branches)" title="pinwheel, branches: (number of branches)" />, would be written as <pre class="inline">PROCEDURE pinwheel(numberOfBranches)</pre>. The word <pre class="inline">PROCEDURE</pre> tells you that that line of the code is like a hat block; the variable name in the parentheses on that line is the input that the procedure takes.</div>
132144
</div>
133145
</div>
@@ -137,8 +149,13 @@ <h3>Adding Multiple Inputs</h3>
137149
<img class="imageRight" src="/bjc-r/img/icons/pair-programming-swap.png" alt="Pair Programming Swap" title="Pair Programming Swap" />
138150
<ol start="5">
139151
<li>
140-
<div class="python" style="width:300px">In Python, this would be written as:<br /> <code>pinwheel(number_of_branches, size, backup)</code></div>
141-
Add another input called <var>size</var> to control the input to the <em>first</em> <code>move</code> block.<br />
152+
<div class="python">
153+
<a href="#hint-python3" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
154+
<div id="hint-python3" class="collapse">
155+
<pre><code>pinwheel(number_of_branches, size, backup)</code></pre>
156+
</div>
157+
</div>
158+
Add another input called <var>size</var> to control the input to the <em>first</em> <code>move</code> block.<br />
142159
<img class="indent" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L3-PinwheelwithInputs.png" width="700" alt="pinwheel, branches: (number of branches) size: (size) backup: (backup) hat block" title="pinwheel, branches: (number of branches) size: (size) backup: (backup) hat block"/>
143160
</li>
144161
<li>
@@ -181,7 +198,12 @@ <h3 class="box-head">Debugging Tip: Organizing Your Code</h3>
181198
</div>
182199

183200
<div class="examFullWidth">
184-
<div class="python" style="width:300px">In Python, this would be written as:<br /> <code>pinwheel(6, 80, 20)</code></div>
201+
<div class="python">
202+
<a href="#hint-python4" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
203+
<div id="hint-python4" class="collapse">
204+
<pre><code>pinwheel(6, 80, 20)</code></pre>
205+
</div>
206+
</div>
185207
<div class="ap-standard">AAP-3.A.5</div>
186208
<div class="pseudop">This instruction <img class="inline" src="/bjc-r/img/1-introduction/U1ImageVideoAddendum_img/U1L3-PinwheelwithInputs1.png" height="50" alt="setup; pinwheel, branches: (6) size: (80) backup: (20)" title=" pinwheel, branches: (6) size: (80) backup: (20)" /> would be written as <pre class="inline">Pinwheel(6, 80, 20)</pre> or <img class="nopadtb" src="/bjc-r/img/1-introduction/pinwheel-blocktran.png" alt="a white rounded rectangle containing first the word 'PINWHEEL' in all caps and then a smaller white rectangle containing the inputs '6, 80, 20'" title="a white rounded rectangle containing first the word 'PINWHEEL' in all caps and then a smaller white rectangle containing the inputs '6, 80, 20'" />.</div>
187209
<p>You may hear people use the term "pseudocode" to refer to this pseudo-language used on the AP CS Principles exam, but it's <em>not</em> pseudocode. Pseudocode isn't a programming language at all, it's the use of normal human language to describe an algorithm.</p>

cur/programming/2-complexity/1-variables-games/1-number-guessing-game.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,14 @@ <h3 class="box-head">Making a Script Variable</h3>
6666
</div>
6767

6868
<div class="examFullWidth">
69-
<div class="python">In Python, this would be written as:<br /> <code>secretNumber = 7</code></div>
70-
<div class="ap-standard">AAP-1.B.2</div>
69+
<div class="python">
70+
<a href="#hint-python1" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
71+
<div id="hint-python1" class="collapse">
72+
<pre><code>secretNumber = 7</code></pre>
73+
(Python uses one equals sign to set the value of a variable.)
74+
</div>
75+
</div>
76+
<div class="ap-standard">AAP-1.B.2</div>
7177
<div class="pseudop">
7278
<img class="inline" src="/bjc-r/img/2-complexity/set-secret-number-to-7.png" alt="set (secret number) to (7)" title="set (secret number) to (7)" /> would be written as <pre class="inline">secretNumber &leftarrow; 7</pre> or <img class="nopadtb" src="/bjc-r/img/2-complexity/secret-number-assignment-blocktran.png" alt="a white rounded rectangle containing the text 'secretNumber &leftarrow; 7'" title="a white rounded rectangle containing the text 'secretNumber &leftarrow; 7'" />.
7379
</div>

cur/programming/2-complexity/1-variables-games/2-checking-player-guess.html

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,14 @@ <h2>Checking the Player's Guess</h2>
4444
</div>
4545
<div class="ap-standard">AAP-3.A.8, AAP-3.A.9</div>
4646
<div class="pseudop">Notice that the procedure <pre class="inline">INPUT()</pre> accepts the value from the user and returns that input value, which is then assigned to the variable <pre class="inline">userResponse</pre> with the <pre class="inline">&leftarrow;</pre> syntax. In Snap<em>!</em>, this is just like how <code>answer</code> accepts a value from the user and reports it, and that report is what the computer <code>set</code>s the variable <var>user response</var> to.</div>
47-
<div class="python" style="width:90%">In Python, this would be written as:<br /> <code>input = prompt("Why did the chicken cross the road?")
48-
userResponse = input</code></div>
47+
<div class="python" style="width:90%">
48+
<a href="#hint-python1" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
49+
<div id="hint-python1" class="collapse">
50+
<pre><code>
51+
input = prompt("Why did the chicken cross the road?")
52+
userResponse = input</code></pre>
53+
</div>
54+
</div>
4955
</div>
5056

5157
<div class="forYouToDo">

cur/programming/2-complexity/1-variables-games/4-keeping-score.html

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@ <h3 class="box-head">Making a Global Variable</h3>
5050
<li>Make the program <code>change</code> the score by 1 whenever the sprite is clicked.
5151
<div class="examFullWidth">
5252
<div class="pseudop">
53-
<div class="python">In Python, this would be written as:<br /> <code>score = score + 1</code></div>
53+
<div class="python">
54+
<a href="#hint-python1" data-toggle="collapse" title="What would this look like in Python?">What would this look like in Python?</a>
55+
<div id="hint-python1" class="collapse">
56+
<pre><code>score = score + 1</code></pre>
57+
</div>
58+
</div>
5459
<img class="inline nopadtb" src="/bjc-r/img/2-complexity/change-score-by-1.png" alt="change (score) by (1)" title="change (score) by (1)" /> (which means <img src="/bjc-r/img/2-complexity/set-score-to-score-plus-one.png" alt="set(score) to (score+1)" title="set(score) to (score+1)">) would be written as <pre class="inline">score &leftarrow; score + 1</pre> or <img class="inline" src="/bjc-r/img/2-complexity/score-increment-blocktran.png" alt="score ← score + 1" title="score ← score + 1" />.
5560
</div>
5661
</div>

cur/programming/2-complexity/1-variables-games/5-choosing-avatar.html

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,19 @@ <h2>Choosing a Costume</h2>
5353
<p>And you can use <code>item of</code> together with <code>my</code> to select a costume in a specific position in the list.</p>
5454

5555
<div class="endnote">
56-
Some blocks (such as <code>item of</code>) have input slots that expect a list. You can tell because the input slot looks kind of like a list:<br />
56+
<div class="python">
57+
<a href="#hint-python1" data-toggle="collapse" title="What would these look like in Python?">What would these look like in Python?</a>
58+
<div id="hint-python1" class="collapse">
59+
<pre><code>
60+
costumes[1]
61+
len(costumes)
62+
</code></pre>
63+
</div>
64+
</div>
65+
Some blocks (such as <code>item of</code>) have input slots that expect a list. You can tell because the input slot looks kind of like a list:<br />
5766
<img class="indent" src="/bjc-r/img/blocks/item.png" alt="item (1) of 'list input slot'" title="item (1) of 'list input slot'" />
5867
<img class="indent" src="/bjc-r/img/2-complexity/listpic.png" alt="picture of 2-item list">
59-
<div class="python" style="width:90%">In Python, these expressions would be written as: <code>costumes[1]</code> and <code>len(costumes)</code></div>
68+
6069
</div>
6170

6271
<div class="forYouToDo">

0 commit comments

Comments
 (0)