Added 4 examples

README_CJ.md

@@ -4,12 +4,11 @@ Mainly added examples to demonstrate how to use **Html blocks** and **Variables*
 
 ### New files ###
 - `examples.html`
-  - Copy of index.html, with exercises replaced by examples.
-  - class="exercise" is replaced by class="example"
+  - Copy of `index.html`, with exercises replaced by examples.
   - Introduced an attribute `start_code` to `<zero-md>`.
     The value of the attribute represents the initial HTML code and Code Blocks.
     The value can be obtained from the URL generated by clicking the SHARE button; 
-    it is the string that appears after `https://blocks.codeyourfuture.io/share.html?v=`.
+    it is the string that appears after `https://DOMAIN/share.html?v=`.
 
 - `examples/`
   - Contains descriptions of example as .md files.

examples/adding_child_element.md

@@ -15,6 +15,9 @@ When creating a new element, we can immediately set its attributes and text cont
 We can also add another element inside a newly created element.
 In this example, the program adds an `<a>` element inside the second `<li>` element.
 
+Please note that inside a **`create a new ... element`** block, the newly created element is considered the selected element. As a result, in this example, the `<a>` element is created inside the second `<li>` element (and not 
+inside the `<ul>` element). 
+
 
 ### Conceptual View
 The blockly program changes

examples/array_add_remove_item.md

@@ -0,0 +1,29 @@
+## Array: Adding and Removing items
+
+This example demonstrates how to
+- remove an item from an array 
+- add an item to an array
+- show the content of an array as text
+
+
+### The blocks 
+
+- **`[get/remove] the [first/last] item from the array {<array variable>}`**
+  - This block has three settings:
+    1. **`get`**: Get the value of the first/last item of an array.
+    1. **`remove`**: Remove the first/last item from an array.
+    1. **`get and remove`**: Perform both **`get`** and **`remove`** in one operation. 
+
+
+- **`add {value} at the [start/end] of {<array variable>}`**
+  - Add a new item to the front or rear of an array.
+
+### What does this blockly program do?
+
+The program performs the following two operations to array `fruits`:
+  - removes its first item 
+  - add "Orange" to the end of the array
+
+The program then displays the content of the resulting array as text, providing
+a convenient way to visualise the data stored in the array.
+To display array items in an HTML list one by one, please refer to the next example.

examples/array_basics.md

@@ -0,0 +1,41 @@
+## Array: The Basics
+
+This example gives an overview of ***array*** and demonstrates how to 
+- create an **array** 
+- get a random element from an array
+
+### Overview
+
+An array is a container that stores data sequentially.
+
+Here is a conceptual view of an array that stores three string values:
+
+`["Apple", "Banana", "Peach"]`
+
+We say "Apple" is the first ***item*** and "Banana" is the second item in the array.
+"Peach" is the third item and is also the last item in the array.
+
+We use the terms ***size*** or ***length*** to describe the number of items in an array.
+In this example, the size of the array is three.
+
+
+### The blocks (from the Arrays category)
+- **`set [<variable name>] to : create array with {values}`**
+  - This combination of blocks creates an array and stores the array in the named variable.
+  - When creating an array, we need to manually assign a value to each item in the array.
+  - We can adjust the initial size of an array in the following way
+    - Step 1: Click the "cog" icon in the **`create array with`** block to activate an array configuration interface
+    - Step 2: Drag **`item`** in or out the **`array`** block to adjust the array size
+    - Step 3: Click the "cog" icon again to close the configuration interface
+
+- **`get a random item from the array {<array variable>}`**
+  - It gets a random item from the specified array.
+
+### What does this blockly program do?
+
+It creates an array variable named `fruits` with three items and then displays 
+a random value selected from `fruits`.
+
+Note: You need to click the "RUN" button several times to see the random effect.
+
+

examples/array_processing_items.md

@@ -0,0 +1,41 @@
+## Processing array items one by one
+
+This example demonstrates how to use a loop to iterate through the items in an array one by one. 
+
+### The blocks 
+
+- **`for each item [item] in array {<array variable>}`**
+  - This block iterates through the items in an array one by one.
+  - If the array has `N` items, then the loop will iterate `N` times. 
+  - In each iteration, the variable `item` takes the value of an array item, 
+    starting from the first item.
+
+### What does this blockly program do?
+
+The program displays the array items one by one in an unordered list.
+
+It accomplishes this by using the **`for each item in array`** block to iterate through 
+the array items one by one:
+- In the first iteration, `item` takes the value "Apple", so the program add
+`<li>Apple</li>` to the selected list.
+- In the second iteration, `item` takes the value "Banana", so the program add
+`<li>Banana</li>` to the selected list.
+- In the third iteration, `item` takes the value "Peach", so the program add
+`<li>Peach</li>` to the selected list.
+
+
+Conceptually, the program changes
+```
+<ul id="list"></ul>
+```
+to
+```
+<ul id="list">
+<li>Apple</li>
+<li>Banana</li>
+<li>Peach</li>
+</ul>
+```
+
+
+

examples/if_else.md

@@ -0,0 +1,32 @@
+## Checking if a number is positive, negative, or zero
+
+This example demonstrates how to use an **`if-else`** block to determine whether 
+a number is positive, negative, or zero. 
+
+### The blocks
+
+- **`{  }[=]{  }`** (In **Logic** category)
+  - This is a ***logical*** block that can be used to compare two values.
+    - The result of a comparison is either `true` or `false`.
+  - The empty space **`{  }`** in the block can be a variable or a value.
+  - A logical block is usually used with an **`if do`** block.
+
+- **`if {logical block} do {blocks to be executed}`** (In **Logic** category)
+  - This block allows a program to execute **`blocks to be executed`** only 
+    if `logical block` evaluates to `true`.
+
+  - This block can also be configured to support "if-else" or "if-elseif-else" logical statements.
+    For more information, see <a href="https://github.com/google/blockly/wiki/IfElse" target="_blank">IfElse blockly block</a>.
+
+- **`get the [numerical] value of input with id [<id value>]`** (In **Html** category)
+  - It gets the numerical value from the `<input id="id value">` element.
+
+  **Note**: If we need an input value for arithmetic calculations, we must select a `numerical` 
+  input type instead of `text`.
+
+### What does this blockly program do?
+
+Whenever the "CHECK" button is clicked, the program
+- gets the numerical value from the `<input>` element and store it in the variable `num`
+- sets the value of the variable `numberType` to one of "Positive", "Negative", or "Zero" (based on the value of `num`)
+- displays the value of the variable `numberType`

exercises/arrays_buttons.md

@@ -1,5 +1,10 @@
 ## Arrays and buttons
 
+### Preparation ###
+You may want to study the following example to prepare for this exercise.
+- <a href="../examples.html#example_if_else" target=_blank>Using an "if" block to check whether a number is positive, negative, or zero</a>
+
+---
 
 One of the most common things we do with an array is loop through all its items, performing a task each time. Sometimes, a loop doesn't do what we need, for example, if we wanted to make the list of fruit appear gradually.
 

exercises/arrays_foreach.md

@@ -1,5 +1,11 @@
 ## Arrays and loops
 
+### Preparation ###
+You may want to study the following examples to prepare for this exercise.
+- <a href="../examples.html#example_array_add_remove_item" target=_blank>Adding/removing items to/from an array</a>
+- <a href="../examples.html#example_array_processing_items" target=_blank>Processing array items one by one</a>
+
+---
 
 In this series of exercises, we have so far used one `create a new ... element` for each `<li>` we want to create.
 

exercises/arrays_random.md

@@ -1,5 +1,11 @@
 ##  Arrays: Mad lib revisited
 
+### Preparation ###
+You may want to study the following example to prepare for this exercise.
+- <a href="../examples.html#example_array_basics" target=_blank>Array basics</a>
+
+---
+
 In the first Mad Libs exercise, we were unable to make our own list of words. We could only pick a category (noun, adjective, verb).
 We will now introduce a data structure called an **array**. An array represents a list of data, often numbers or text.