CYF Blocks

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. 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. From the Variables menu, create a "set click_count to" block and place it inside the "at the start"
3. Set the value to 0 (from the Values menu)
3. When the button is clicked, we are going to do two things: increase the value of click_count by 1; and change the text of the button to the new value of click_count.
1. Add an "when the element with id ... is clicked" block.
2. Inside this block, add a "change click_count by 1" block from the Variables menu.
3. Add the necessary blocks to set the text content of the button to the value of click_count. (You can get this value by selecting the "click_count" block from the Variables menu)

Note that it will be a common pattern that you first set a variable in the "at the start" block and then modify it in at "when the element with id ... is clicked" block. This first setting of the variable is called "initialisation".

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. 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">
   • If the total of all the dice rolls is over 11, display "You lost" in the <span id="info">
   • When "remove the last roll" is clicked, we should undo the last roll (this is a cheat button so that we can always win!)
   • The list should display all the rolls so far
   • The total so far should be displayed in the <span id="total">
   • When "start again" is clicked, we should return to the initial state
3. The following steps are needed. Notice that some of them repeat, some of them are similar, and that the game has a "state" which is the array of dice rolls.
   • At the beginning:
     1. Display each roll in the array (there are currently no rolls)
     2. Display the total of all rolls (it is currently 0)
   • When "roll the dice" is clicked:
     1. Pick a random number between 1 and 6
     2. Add that number to the array of rolls
     3. Display each roll in the array
     4. Calculate the total of all rolls
        • If it is greater than 11, display "You lost"
        • If it is equal to 11, display "You won"
     5. Display the total of all rolls
   • When "Start again" is clicked: (this is the same as at the beginning)
     1. Display each roll in the array (there are currently no rolls)
     2. Display the total of all rolls (it is currently 0)
   • When "Remove the last roll" is clicked:
     1. Remove the last roll from the array of rolls
     2. Display each roll in the array
     3. Calculate the total of all rolls
        • If it is greater than 11, display "You lost"
        • If it is equal to 11, display "You won"
        • If it is less than 11, display "Keep playing"
     4. Display the total of all rolls
4. In order to check that anything is working, we need to be able to display an array of rolls and its total, so that's where we will start.
   1. In an "At the start" block, create an array called "rolls" and put 3 numbers in the array (afterwards we will start with an empty array, but for now having numbers helps)
   2. Using a loop, display each of the numbers in the array in the list. Check that your code works.
   3. Set the <span id="total"> to the sum of the numbers in the "rolls" array.
   4. We will put in the "you won"/"you lost"/"keep playing" logic in last (but you could also do it now if you like)
5. Next, let's go with the simplest: the restart button
   1. Add a "When the element with id ... is clicked" block for this button
   2. We want to set the "rolls" variable to an empty list (Use the same blocks as you did to initialise the rolls variable, then use the gear icon to remove all the items from the array)
   3. We now want to remove the displayed rolls from the list (You will need to use the "Remove the contents of the element" block)
   4. And we want to set the text <span id="total"> to 0
6. Slightly more tricky: the "roll the dice" button. Before following the instructions, can you think how we could create a dice?
   1. To create a dice, we'll create a new array in the "At the start" block, called "dice" (be careful to select the "array" variable, not the "rolls" variable before renaming to "dice"), setting the values as the numbers 1, 2, 3, 4, 5, and 6. We can select a random item from this array when we want to roll a dice.
   2. Add a "When the element with id ... is clicked" block for the button
   3. Let's roll the dice and add the result to the list. Use the "add ... to the start/end of the array" block, setting the "end" of the "rolls" array, and using a "get random item from the array" block as the value.
   4. We could now add a new <li> to the list and set the total. Instead, we are going to re-display the whole list from the array - you will see why in the next step
   5. To re-display the whole list (and set the total), we need a combination of the two previous steps: find the list, remove its contents, loop over the items in the array and add them to the list, set the total to the sum of the array.
7. Notice that at this point, we have 3 different versions of the same steps to display the list contents and total. Now imagine we want to change something (like add the "you won"/"you lost"/"keep playing" information). We would have to add it in 3 different places! (And we still have a "remove last roll" button to implement - so it would be 4 places)
   1. We can actually write this code so that is exactly the same all the times (looping over an empty array will do nothing, and it's sum will be 0). When we see a piece of code we would like to use multiple times, we create a function.
   2. From the Functions menu, select a "To do something" block and call it "to display the rolls"
   3. Take all the display code you wrote in the previous step and move it to inside this function.
   4. In the Functions menu, there is now a "display the rolls" block. You can us it as a replacement for the code you just moved. That block will "call" the function you created (this means it will execute all the blocks inside that function)
   5. You can replace the 2 other versions of your display code with the "display the rolls" block.
8. Now you can add the logic that decides what to put into the <span id="info">.
   1. Hint: You can calculate the sum of the array only once and store the result in a variable.
   2. Hint: You can add else if and else conditions to the "if" block by clicking on the gear icon.
   3. To test all the logic, put different values into the initial rolls array. Once this is working, you can set the initial rolls array to an empty list.
9. Last it's time to create our "cheat" functionality, the "Remove the last roll" button.
   1. You already know how to do remove the first item from an array. You can use the same block to remove the last item
   2. Don't forget to call the "display the rolls" function!

For this project, you should provide the user with the ability to input earnings and expenses and see the totals

1. Two lists and three totals should be shown: the earnings, the expenses, the total earnings, the total expenses and the total balance overall
2. A positive number is an earning
3. A negative number is an expense
4. If the user inputs 5, -2, 25, -10, -7, the result should look something like:
   Earnings: 30

   • 5
   • 25

   Expenses: -19

   • -2
   • -10
   • -3

   Balance: 11

Here are some additional ideas of projects that can be accomplished with the current blocks (some newer blocks haven't been properly introduced yet) and might be suitable/adaptable as landing page enhancements. They all fit generally into the "add some button or event handlers that add or modify some html" category.

• Shopping cart
  1. Create a list of products.
  2. Display each product in an html list with a "add to shopping cart" button next to it
  3. When the button is clicked, add the product to a separate html list that represents the current shopping cart
• List with a hidden 2nd level
  1. Create an html list with a second list inside each li (maybe a list of folders and the files in each folder?)
  2. Hide the inner lists
  3. Clicking the first level item toggles the visibility of the inner list (if it's hidden, show it, if it's visible, hide it)
• Hamburger menu
  1. Can be vaguely inspired by e.g. https://dev.to/devggaurav/let-s-build-a-responsive-navbar-and-hamburger-menu-using-html-css-and-javascript-4gci
  2. Display an ul of nav links as a "closed" hamburger
  3. Clicking on the hamburger makes the ul visible
  4. Clicking on the hamburger transforms the hamburger into an X
  5. Clicking on the X makes the ul invisible (and shows the hamburger)
  6. Clicking on any link makes the ul invisible (and shows the hamburger)
• Create a check list
  1. Display a list of todo items
  2. When each item is clicked, mark it in some way (strike through, invisible)
  3. Note: this is basically a variant of the shopping cart
• Create a todo list
  1. Display an input and an "add todo" button (currently the input and means of accessing the input don't exist, so would have to add some blocks)
  2. When the "add todo" is clicked, add the item to an html list
  3. Stretch goal: combine with the exercise above