Skip to content

Make all IDs more semantic #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
illicitonion wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Make all IDs more semantic #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5451c7
Make all IDs more semantic
illicitonion Jan 24, 2022
e4d22fb
Fix up a few references to IDs
illicitonion Jan 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions blockly-dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ Blockly.defineBlocksWithJsonArray([
{
type: "field_input",
name: "ID",
text: "button",
text: "save-button",
},
{
type: "field_label_serializable",
Expand Down Expand Up @@ -299,7 +299,7 @@ Blockly.defineBlocksWithJsonArray([
{
type: "field_input",
name: "ID",
text: "text",
text: "new-todo",
},
],
output: "String",
Expand Down Expand Up @@ -507,7 +507,7 @@ Blockly.Blocks["with_element_by_id"] = {
this.setColour(45);
this.appendDummyInput()
.appendField("find the element with id")
.appendField(new Blockly.FieldTextInput("list"), "ID");
.appendField(new Blockly.FieldTextInput("fruits"), "ID");
this.appendStatementInput("STACK").appendField("and");
},
};
Expand All @@ -534,7 +534,7 @@ Blockly.Blocks["with_element_by_selector"] = {
this.setColour(45);
this.appendDummyInput()
.appendField("find the element using css selector")
.appendField(new Blockly.FieldTextInput("#list"), "QUERY");
.appendField(new Blockly.FieldTextInput("#fruits"), "QUERY");
this.appendStatementInput("STACK").appendField("and");
},
};
Expand All @@ -561,7 +561,7 @@ Blockly.Blocks["with_elements_by_selector"] = {
this.setColour(45);
this.appendDummyInput()
.appendField("find all the elements using css selector")
.appendField(new Blockly.FieldTextInput("#list"), "QUERY");
.appendField(new Blockly.FieldTextInput("#fruits"), "QUERY");
this.appendStatementInput("STACK").appendField("and with each");
},
};
Expand Down
28 changes: 14 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,13 +301,13 @@ <h2>Creating html dynamically: lists of fruit</h2>
<ol>
<li>Let's start with an html list with a single apple in the "Static html"
<ol>
<li>Note the list has an id ("list") so that we can refer to it from our program.</li>
<li>for example: <code class="start_code">&lt;ul id="list"&gt;<br>&lt;li&gt;Apple&lt;/li&gt;<br>&lt;/ul&gt;</code></li>
<li>Note the list has an id ("fruits") so that we can refer to it from our program.</li>
<li>for example: <code class="start_code">&lt;ul id="fruits"&gt;<br>&lt;li&gt;Apple&lt;/li&gt;<br>&lt;/ul&gt;</code></li>
</ol>
<li>Add one more fruit dynamically
<ol>
<li>Add an <span class="blockname">"at the start"</span> block</li>
<li>Inside this block, add a <span class="blockname">"find the element with id"</span> block using the id for the ul element (<code>list</code>)</li>
<li>Inside this block, add a <span class="blockname">"find the element with id"</span> block using the id for the ul element (<code>fruits</code>)</li>
<li>Inside this block, add a <span class="blockname">"create a new ... element"</span> block and select "&lt;li&gt;"</li>
<li>Inside this block, add a <span class="blockname">"set the text content"</span> block and set the value to "Banana"</li>
<li id="exercise_add_fruit_1">Click "run" to check the output looks like
Expand Down Expand Up @@ -362,7 +362,7 @@ <h2>Creating html dynamically: lists of links</h2>
This exercise consolidates the use of the blocks we learned about in the previous exercises.
</p>
<ol>
<li>Start with an empty unordered html list (<code class="start_code">&lt;ul id="list"&gt;&lt;/ul&gt;</code>) in the static html.
<li>Start with an empty unordered html list (<code class="start_code">&lt;ul id="links"&gt;&lt;/ul&gt;</code>) in the static html.
<li>Dynamically add your favourite links to the html list
<ol>
<li>Find the URLs of your three favourite websites (they look something like: <code>http://www.codeyourfuture.io</code>)</li>
Expand Down Expand Up @@ -436,7 +436,7 @@ <h2>Buttons and clicks: A button to add apples</h2>
<ol>
<li>Start with an empty unordered html list (<code>&lt;ul&gt;</code>) and a button to add apples to the list (<code>&lt;button&gt;</code>) in the static html.
<ol>
<li>for example: <code class="start_code">&lt;ul id="list"&gt;&lt;/ul&gt;<br>&lt;button id="button"&gt;add an apple&lt;/button&gt;</code></li>
<li>for example: <code class="start_code">&lt;ul id="fruits"&gt;&lt;/ul&gt;<br>&lt;button id="add-apple-button"&gt;add an apple&lt;/button&gt;</code></li>
Copy link
Collaborator

@gregdyke gregdyke Jan 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

are dashed ids a good practice (I know classnames are often dashed)? I would probably underscore them, to avoid teaching identifiers with - in them

Copy link
Member Author

@illicitonion illicitonion Feb 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't have a super strong preference - I started dashing somewhat at random, so changed a few _s to -s because I'd done most of them, but happy to change them all to _s if you'd prefer :)

</ol>
<li>When we click on the "add an apple" button, let's add an apple to the list
<ol>
Expand Down Expand Up @@ -480,7 +480,7 @@ <h2>Inputs and clicks: say something</h2>
<ol>
<li>Start with a text input box list (<code>&lt;input /&gt;</code>) and a button to that says "speak" in the static html.
<ol>
<li>for example: <code class="start_code">&lt;input id="text" /&gt;<br>&lt;button id="button"&gt;speak&lt;/button&gt;</code></li>
<li>for example: <code class="start_code">&lt;input id="text-to-say" /&gt;<br>&lt;button id="speak-button"&gt;speak&lt;/button&gt;</code></li>
</ol>
</li>
<li>We want to do two things in order when the button is clicked. First we get the value entered by the user, then we pass it to a block that will say it out loud. A common strategy in problem solving for programming is to solve the visible (or in this case, audible) thing first: have the browser say something.
Expand Down Expand Up @@ -530,7 +530,7 @@ <h2>Buttons, inputs and clicks: a todo list</h2>
We're going to create a list of things to do.
</p>
<ol>
<li>Start with an empty list, an input, and a button "add Todo Item" in the static html. <code class="start_code">&lt;p&gt;Things to do:&lt;/p&gt;<br>&lt;ul id="list"&gt;&lt;/ul&gt;<br>&lt;input id="text" /&gt;<br>&lt;button id="button"&gt;add Todo Item&lt;/button&gt;</code></li>
<li>Start with an empty list, an input, and a button "add Todo Item" in the static html. <code class="start_code">&lt;p&gt;Things to do:&lt;/p&gt;<br>&lt;ul id="todo-list"&gt;&lt;/ul&gt;<br>&lt;input id="new-todo" /&gt;<br>&lt;button id="add-todo"&gt;add Todo Item&lt;/button&gt;</code></li>
<li>When the button is clicked, we are going to do two things: get the value of the input box and add a new <code>&lt;li&gt;</code> with that value to the list. To do the visible outcome first, we're going to do these in reverse order.</li>
<ol>
<li>Add an <span class="blockname">"when the element with id ... is clicked"</span> block.</li>
Expand Down Expand Up @@ -609,7 +609,7 @@ <h2>Variables: keeping track of the number of clicks</h2>
A variable is a name into which a value can be stored. There are several reasons for which we might want to do this. The first is when we want to keep track of a value that changes over time. Let's keep track of the number of times a button is clicked.
</p>
<ol>
<li>Start with a button (<code>&lt;button&gt;</code>) that has been clicked 0 times in the static html. <code class="start_code">&lt;button id="button"&gt;0&lt;/button&gt;</code></li>
<li>Start with a button (<code>&lt;button&gt;</code>) that has been clicked 0 times in the static html. <code class="start_code">&lt;button id="counting-button"&gt;0&lt;/button&gt;</code></li>
<li>Add an <span class="blockname">"at the start"</span> block. Inside we are going to add a variable that will keep track of the number of times the button was clicked.</li>
<ol>
<li>In the Variables menu, click "create variable..." to create a variable called <code>click_count</code></li>
Expand Down Expand Up @@ -659,7 +659,7 @@ <h2>Variables consolidation: counting sheep</h2>
Let's combine our variables to track state with some of the other blocks we have learned about. We would like to track how many times the user adds the word "sheep" and how many times they add any other word.
</p>
<ol>
<li>Let's start with the following static html. <code class="start_code">&lt;p&gt;There have been &lt;span id="sheep_count"&gt;0&lt;/span&gt; sheep 🐑 and &lt;span id="other_count"&gt;0&lt;/span&gt; others.&lt;/p&gt;<br>&lt;input id="text" /&gt;<br>&lt;button id="button"&gt;add animal&lt;/button&gt;</code></li>
<li>Let's start with the following static html. <code class="start_code">&lt;p&gt;There have been &lt;span id="sheep_count"&gt;0&lt;/span&gt; sheep 🐑 and &lt;span id="other_count"&gt;0&lt;/span&gt; others.&lt;/p&gt;<br>&lt;input id="animal-kind" /&gt;<br>&lt;button id="add-animal-button"&gt;add animal&lt;/button&gt;</code></li>
<li>The following things should happen (use variables where necessary to keep track of various values, and the blocks you need from the Logic menu). Don't forget to break down your implementation into steps where you first add blocks that make a visible difference and test that it works.</li>
<ol>
<li>When the user clicks "add animal", if the word in the text input is "sheep", the number of sheep displayed in the <code>&lt;span&gt</code> with id <code>sheep_count</code> should increase by one.</li>
Expand Down Expand Up @@ -800,7 +800,7 @@ <h2>Arrays and loops</h2>
Another use for an array is when we want to do the same thing with each element in an array (for example, create a <code>&lt;li&gt;</code>).
</p>
<ol>
<li>Start with an empty unordered html list with the id "list" (<code class="start_code">&lt;ul id="list"&gt;&lt;/ul&gt;</code>) in the static html.</li>
<li>Start with an empty unordered html list with the id "fruits" (<code class="start_code">&lt;ul id="fruits"&gt;&lt;/ul&gt;</code>) in the static html.</li>
<li>Add an <span class="blockname">"at the start"</span> block</li>
<li>We'll now create an array of fruits and assign it to a variable <ol>
<li>From the "Arrays" menu, add a <span class="blockname">"Set ... to, create array with"</span> block to the <span class="blockname">"at the start"</span> block</li>
Expand Down Expand Up @@ -945,7 +945,7 @@ <h2>Arrays and buttons</h2>
<div class="instructions">
<p>The most common something with all the items in an array is to use a loop, as we saw in the previous exercise. Sometimes, a loop just doesn't do what we need, for example if we wanted to make the list of fruit appear gradually.</p>
<ol>
<li>Create an empty unordered html list (as usual) and a "reveal next fruit" button (<code class="start_code">&lt;ul id="list"&gt;&lt;/ul&gt;<br>&lt;button id="button"&gt;reveal next fruit&lt;/button&gt;</code>)</li>
<li>Create an empty unordered html list (as usual) and a "reveal next fruit" button (<code class="start_code">&lt;ul id="fruits"&gt;&lt;/ul&gt;<br>&lt;button id="reveal-fruit-button"&gt;reveal next fruit&lt;/button&gt;</code>)</li>
<li>Create an array of your favourite fruit inside an <span class="blockname">"at the start"</span> block</li>
<li>We'll now make it so each click of the button reveals the next fruit.
<ul>
Expand Down Expand Up @@ -1067,7 +1067,7 @@ <h2>Loops and arrays: more fun with fruit</h2>
<div class="instructions">
<p>Using the blocks from the previous exercise and a different kind of loop gives us an alternative way to loop through all the items of an array. Let's see a case where it might be useful.</p>
<ol>
<li>Start with an empty unordered html list with the id "list" (<code class="start_code">&lt;ul id="list"&gt;&lt;/ul&gt;</code>) in the static html.</li>
<li>Start with an empty unordered html list with the id "fruits" (<code class="start_code">&lt;ul id="fruits"&gt;&lt;/ul&gt;</code>) in the static html.</li>
<li>As with before, create an array called "fruits" of your favourite fruit inside an <span class="blockname">"at the start"</span> block.</li>
<li>Instead of the <span class="blockname">"for each item in array"</span> block, we will use the <span class="blockname">"repeat while"</span> block and the <span class="blockname">"... is empty"</span> block together<ol>
<li>As usual, add a <span class="blockname">"find the element with id"</span> block to find the html list</li>
Expand Down Expand Up @@ -1187,7 +1187,7 @@ <h2>Arrays: Adding, removing, and summing elements</h2>
<p>We are now going to learn how to add items to, remove items from, and get the sum of, an array of numbers. We're going to keep a running sum of the last five numbers (this can be a way of keeping track of how a value trends over time, e.g. the last 5 times you weighed yourself, or the last 5 times you went running).
</p>
<ol>
<li>Start with an input box, a button to add numbers, and a span to display the total. (<code class="start_code">&lt;p&gt;Total of the last 5 numbers: &lt;span id="total"&gt;&lt;/span&gt; &lt;/p&gt;<br>&lt;input id="number" /&gt;<br>&lt;button id="add_number"&gt;add value&lt;/button&gt;</code></li>
<li>Start with an input box, a button to add numbers, and a span to display the total. (<code class="start_code">&lt;p&gt;Total of the last 5 numbers: &lt;span id="total"&gt;&lt;/span&gt; &lt;/p&gt;<br>&lt;input id="number" /&gt;<br>&lt;button id="add-number"&gt;add value&lt;/button&gt;</code></li>
<li>Let's start with an array of elements and show their sum<ol>
<li>In an <span class="blockname">"at the start"</span> block, create a new array called "numbers" with 5 items, all set to the value 0</li>
<li>Find the span with id "total" and set its text content to the sum of the numbers array, using the <span class="blockname">"get the sum of the numbers in array"</span> block</li>
Expand Down Expand Up @@ -1290,7 +1290,7 @@ <h2>Project: Don't go higher than 11!</h2>
<p>We are now going to use all the array blocks we have learned about. We're going to create a game where you roll dice and your goal is to not total more than 11.
</p>
<ol>
<li>Start with an empty list (where we will display our rolls), a place to put a total, and a few buttons (<code class="start_code">&lt;p&gt;So far you have rolled:&lt;/p&gt;<br>&lt;ul id="list"&gt;&lt;/ul&gt;<br>&lt;button id="button_roll"&gt;Roll the dice&lt;/button&gt;<br>&lt;p&gt;Total: &lt;span id="total"&gt;0&lt;/span&gt;. &lt;span id="info"&gt;Keep playing!&lt;/span&gt;&lt;/p&gt;<br>&lt;button id="button_remove"&gt;Remove the last roll&lt;/button&gt;<br>&lt;button id="button_restart"&gt;Start again&lt;/button&gt;</code></li>
<li>Start with an empty list (where we will display our rolls), a place to put a total, and a few buttons (<code class="start_code">&lt;p&gt;So far you have rolled:&lt;/p&gt;<br>&lt;ul id="previous-rolls"&gt;&lt;/ul&gt;<br>&lt;button id="roll-button"&gt;Roll the dice&lt;/button&gt;<br>&lt;p&gt;Total: &lt;span id="total"&gt;0&lt;/span&gt;. &lt;span id="info"&gt;Keep playing!&lt;/span&gt;&lt;/p&gt;<br>&lt;button id="remove-roll-button"&gt;Remove the last roll&lt;/button&gt;<br>&lt;button id="restart-button"&gt;Start again&lt;/button&gt;</code></li>
Copy link
Collaborator

@gregdyke gregdyke Jan 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

pretty sure all these ids are referred to later

Copy link
Member Author

@illicitonion illicitonion Feb 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I couldn't see any... Do you see any specifically?

<li>The game has the following requirements. Before reading further, how would you break down and implement these requirements into steps? Think through what steps need to happen after each button click. In what order would you implement these steps so as to test each step as early as possible?<ul>
<li>When "roll the dice" is clicked, a new random number between 1 and 6 should be generated and added</li>
<li>If the total of all the dice rolls is exactly 11, display "You won" in the <code>&lt;span id="info"&gt;</code></li>
Expand Down