diff --git a/blockly-dom.js b/blockly-dom.js index 6af800f..b9fc490 100644 --- a/blockly-dom.js +++ b/blockly-dom.js @@ -186,7 +186,7 @@ Blockly.defineBlocksWithJsonArray([ { type: "field_input", name: "ID", - text: "button", + text: "save-button", }, { type: "field_label_serializable", @@ -299,7 +299,7 @@ Blockly.defineBlocksWithJsonArray([ { type: "field_input", name: "ID", - text: "text", + text: "new-todo", }, ], output: "String", @@ -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"); }, }; @@ -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"); }, }; @@ -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"); }, }; diff --git a/index.html b/index.html index 0acdab1..f05cefc 100644 --- a/index.html +++ b/index.html @@ -301,13 +301,13 @@

Creating html dynamically: lists of fruit

  1. Let's start with an html list with a single apple in the "Static html"
      -
    1. Note the list has an id ("list") so that we can refer to it from our program.
      2. -
    2. for example: <ul id="list">
      <li>Apple</li>
      </ul>
      3. +
    3. Note the list has an id ("fruits") so that we can refer to it from our program.
      4. +
    4. for example: <ul id="fruits">
      <li>Apple</li>
      </ul>
  2. Add one more fruit dynamically
    1. Add an "at the start" block
      2. -
    2. Inside this block, add a "find the element with id" block using the id for the ul element (list)
      3. +
    3. Inside this block, add a "find the element with id" block using the id for the ul element (fruits)
    4. Inside this block, add a "create a new ... element" block and select "<li>"
    5. Inside this block, add a "set the text content" block and set the value to "Banana"
    6. Click "run" to check the output looks like @@ -362,7 +362,7 @@

      Creating html dynamically: lists of links

      This exercise consolidates the use of the blocks we learned about in the previous exercises.

        -
      1. Start with an empty unordered html list (<ul id="list"></ul>) in the static html. +
      2. Start with an empty unordered html list (<ul id="links"></ul>) in the static html.
      3. Dynamically add your favourite links to the html list
        1. Find the URLs of your three favourite websites (they look something like: http://www.codeyourfuture.io)
          2. @@ -436,7 +436,7 @@

          Buttons and clicks: A button to add apples

          1. Start with an empty unordered html list (<ul>) and a button to add apples to the list (<button>) in the static html.
              -
            1. for example: <ul id="list"></ul>
              <button id="button">add an apple</button>
              2. +
            2. for example: <ul id="fruits"></ul>
              <button id="add-apple-button">add an apple</button>
          2. When we click on the "add an apple" button, let's add an apple to the list
              @@ -480,7 +480,7 @@

              Inputs and clicks: say something

              1. Start with a text input box list (<input />) and a button to that says "speak" in the static html.
                  -
                1. for example: <input id="text" />
                  <button id="button">speak</button>
                  2. +
                2. for example: <input id="text-to-say" />
                  <button id="speak-button">speak</button>
              2. 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. @@ -530,7 +530,7 @@

                Buttons, inputs and clicks: a todo list

                We're going to create a list of things to do.

                  -
                1. Start with an empty list, an input, and a button "add Todo Item" in the static html. <p>Things to do:</p>
                  <ul id="list"></ul>
                  <input id="text" />
                  <button id="button">add Todo Item</button>
                  2. +
                2. Start with an empty list, an input, and a button "add Todo Item" in the static html. <p>Things to do:</p>
                  <ul id="todo-list"></ul>
                  <input id="new-todo" />
                  <button id="add-todo">add Todo Item</button>
                3. When the button is clicked, we are going to do two things: get the value of the input box and add a new <li> with that value to the list. To do the visible outcome first, we're going to do these in reverse order.
                  1. Add an "when the element with id ... is clicked" block.
                    2. @@ -609,7 +609,7 @@

                    Variables: keeping track of the number of clicks

                    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.

                      -
                    1. Start with a button (<button>) that has been clicked 0 times in the static html. <button id="button">0</button>
                      2. +
                    2. Start with a button (<button>) that has been clicked 0 times in the static html. <button id="counting-button">0</button>
                    3. Add an "at the start" block. Inside we are going to add a variable that will keep track of the number of times the button was clicked.
                      1. In the Variables menu, click "create variable..." to create a variable called click_count
                        2. @@ -659,7 +659,7 @@

                        Variables consolidation: counting sheep

                        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.

                          -
                        1. Let's start with the following static html. <p>There have been <span id="sheep_count">0</span> sheep 🐑 and <span id="other_count">0</span> others.</p>
                          <input id="text" />
                          <button id="button">add animal</button>
                          2. +
                        2. Let's start with the following static html. <p>There have been <span id="sheep_count">0</span> sheep 🐑 and <span id="other_count">0</span> others.</p>
                          <input id="animal-kind" />
                          <button id="add-animal-button">add animal</button>
                        3. 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.
                          1. When the user clicks "add animal", if the word in the text input is "sheep", the number of sheep displayed in the <span> with id sheep_count should increase by one.
                            2. @@ -800,7 +800,7 @@

                            Arrays and loops

                            Another use for an array is when we want to do the same thing with each element in an array (for example, create a <li>).

                              -
                            1. Start with an empty unordered html list with the id "list" (<ul id="list"></ul>) in the static html.
                              2. +
                            2. Start with an empty unordered html list with the id "fruits" (<ul id="fruits"></ul>) in the static html.
                            3. Add an "at the start" block
                            4. We'll now create an array of fruits and assign it to a variable
                              1. From the "Arrays" menu, add a "Set ... to, create array with" block to the "at the start" block
                                2. @@ -945,7 +945,7 @@

                                Arrays and buttons

                                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.

                                  -
                                1. Create an empty unordered html list (as usual) and a "reveal next fruit" button (<ul id="list"></ul>
                                  <button id="button">reveal next fruit</button>                                  )
                                  2. +
                                2. Create an empty unordered html list (as usual) and a "reveal next fruit" button (<ul id="fruits"></ul>
                                  <button id="reveal-fruit-button">reveal next fruit</button>                                  )
                                3. Create an array of your favourite fruit inside an "at the start" block
                                4. We'll now make it so each click of the button reveals the next fruit.
                                    @@ -1067,7 +1067,7 @@

                                    Loops and arrays: more fun with fruit

                                    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.

                                      -
                                    1. Start with an empty unordered html list with the id "list" (<ul id="list"></ul>) in the static html.
                                      2. +
                                    2. Start with an empty unordered html list with the id "fruits" (<ul id="fruits"></ul>) in the static html.
                                    3. As with before, create an array called "fruits" of your favourite fruit inside an "at the start" block.
                                    4. Instead of the "for each item in array" block, we will use the "repeat while" block and the "... is empty" block together
                                      1. As usual, add a "find the element with id" block to find the html list
                                        2. @@ -1187,7 +1187,7 @@

                                        Arrays: Adding, removing, and summing elements

                                        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).

                                          -
                                        1. Start with an input box, a button to add numbers, and a span to display the total. (<p>Total of the last 5 numbers: <span id="total"></span> </p>
                                          <input id="number" />
                                          <button id="add_number">add value</button>
                                          2. +
                                        2. Start with an input box, a button to add numbers, and a span to display the total. (<p>Total of the last 5 numbers: <span id="total"></span> </p>
                                          <input id="number" />
                                          <button id="add-number">add value</button>
                                        3. Let's start with an array of elements and show their sum
                                          1. In an "at the start" block, create a new array called "numbers" with 5 items, all set to the value 0
                                          2. Find the span with id "total" and set its text content to the sum of the numbers array, using the "get the sum of the numbers in array" block
                                            3. @@ -1290,7 +1290,7 @@

                                            Project: Don't go higher than 11!

                                            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.

                                              -
                                            1. Start with an empty list (where we will display our rolls), a place to put a total, and a few buttons (<p>So far you have rolled:</p>
                                              <ul id="list"></ul>
                                              <button id="button_roll">Roll the dice</button>
                                              <p>Total: <span id="total">0</span>. <span id="info">Keep playing!</span></p>
                                              <button id="button_remove">Remove the last roll</button>
                                              <button id="button_restart">Start again</button>
                                              2. +
                                            2. Start with an empty list (where we will display our rolls), a place to put a total, and a few buttons (<p>So far you have rolled:</p>
                                              <ul id="previous-rolls"></ul>
                                              <button id="roll-button">Roll the dice</button>
                                              <p>Total: <span id="total">0</span>. <span id="info">Keep playing!</span></p>
                                              <button id="remove-roll-button">Remove the last roll</button>
                                              <button id="restart-button">Start again</button>
                                            3. 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?
                                              • When "roll the dice" is clicked, a new random number between 1 and 6 should be generated and added
                                              • If the total of all the dice rolls is exactly 11, display "You won" in the <span id="info">