From 6499f231f6f75ea51b42ab16d8603bceb018f30a Mon Sep 17 00:00:00 2001
From: tortieland <tortieland@gmail.com>
Date: Thu, 7 Nov 2024 12:58:16 +0800
Subject: [PATCH 1/3] Added more details

---
 examples/adding_child_element.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/examples/adding_child_element.md b/examples/adding_child_element.md
index 0d8371a..c58153d 100644
--- a/examples/adding_child_element.md
+++ b/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

From a342b91873a41fc4a206d74fbc87056cfde440dc Mon Sep 17 00:00:00 2001
From: tortieland <tortieland@gmail.com>
Date: Fri, 15 Nov 2024 19:14:22 +0800
Subject: [PATCH 2/3] add array examples

---
 examples.html                      | 43 +++++++++++++++++++++++++++++-
 examples/array_add_remove_item.md  | 28 +++++++++++++++++++
 examples/array_basics.md           | 41 ++++++++++++++++++++++++++++
 examples/array_processing_items.md | 26 ++++++++++++++++++
 examples/if_else.md                | 33 +++++++++++++++++++++++
 5 files changed, 170 insertions(+), 1 deletion(-)
 create mode 100644 examples/array_add_remove_item.md
 create mode 100644 examples/array_basics.md
 create mode 100644 examples/array_processing_items.md
 create mode 100644 examples/if_else.md

diff --git a/examples.html b/examples.html
index 48eb7d1..82354d0 100644
--- a/examples.html
+++ b/examples.html
@@ -225,7 +225,8 @@ <h2>Example: Using variables</h2>
       <div class="instructions">
         <zero-md src="examples/using_variables.md"
           start_code=
-          "('j!('blocks!('languageVersion!0~blocks!%5B('type!'element_clicked'~id!'Orij%25O%7C%7D%252vU%3FD%7DVx2%5EZ'~x!32~y!45~fields!('TEXT1!'when%20the%20element%20with%20id'~ID!'sumButton'~TEXT2!'is%20clicked')%C2%87HANDLER!('%C2%84set'~id!'%2C%7BR8%3B%5EW%60mZ%5DC-%7D%5EeBx)-%22%C2%81th_id'~id!'JOk4lL%3F*o%3F1VNw%3AdIY6*%C2%851'))))~next!('%C2%84set'~id!'KK2H5Fq(%40Nak0%3FQEmDwa%C2%80VAR!('%7F)%C2%81th_id'~id!'cf%3F%7CFKowVh%5EWxtrk%5E.cH%C2%852'))))~next!('%26math_change'~id!'R%2F%7C%23%40.DyG%2C'%3FKY5K%3A2'%3Aqm%22%C2%87DELTA!('shadow!('type!'math_number'~id!'%7Bo(%7B%23'%3A%7C.xyI-IMD%3DstC7%C2%80NUM!1))~%C2%84get'~id!'%2FMUFMhCoV%3F4_.7V1E%7D4K%C2%80VAR!('%7F))))~next!('%26with_element_by_id'~id!'U%24HscTvl9xN%25FBsq7g%5B.%C2%80ID!'sum')%C2%87STACK!('%26set_content'~id!'%3BR3%40%5Bk'%3AjzRo%2BpOqAXkgh'%C2%87VALUE!('shadow!('type!'text'~id!'o6OWnZEAPg15UuLGZkl%2B%C2%80TEXT!'Hello%2C%20'))~%C2%84get'~id!'%23rnd42foTOq(577Jw%5DR6%22))))))))))))))))%5D)~variables!%5B('name!'num1'~%C2%82%2C('name!'num2'~%7F%5D)~h!'%3Cinput%C2%86num1%C2%83%2B%5Cn%3Cinput%C2%86num2%C2%83%3D%5Cn%3Cspan%C2%86sum%5C'%3E%3C%2Fspan%3E%5Cn%5Cn%3Chr%3E%5Cn%3Cbutton%C2%86sumButton%5C'%3ESum%3C%2Fbutton%3E%5Cn%5Cn%5Cn%5Cn')%22%C2%80VAR!('%C2%82)%26block!('type!'%7Fid!'%3B0oB%7C%7BnA%2C)7h(%5DQ25N%7Bp')%C2%80'~fields!('%C2%81%C2%87VALUE!('%26get_input_data_wi%C2%82id!'DJ3%2B0hsEH%7DrCb%25AF%3DKM%7B')%C2%83%5C'%20type%3D%5C'number%5C'%3E%20%C2%84%26variables_%C2%85%C2%80TYPE!'number'~ID!'num%C2%86%20id%3D%5C'%C2%87~inputs!('%01%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_"        ></zero-md>
+          "('j!('blocks!('languageVersion!0~blocks!%5B('type!'element_clicked'~id!'Orij%25O%7C%7D%252vU%3FD%7DVx2%5EZ'~x!32~y!45~fields!('TEXT1!'when%20the%20element%20with%20id'~ID!'sumButton'~TEXT2!'is%20clicked')%C2%87HANDLER!('%C2%84set'~id!'%2C%7BR8%3B%5EW%60mZ%5DC-%7D%5EeBx)-%22%C2%81th_id'~id!'JOk4lL%3F*o%3F1VNw%3AdIY6*%C2%851'))))~next!('%C2%84set'~id!'KK2H5Fq(%40Nak0%3FQEmDwa%C2%80VAR!('%7F)%C2%81th_id'~id!'cf%3F%7CFKowVh%5EWxtrk%5E.cH%C2%852'))))~next!('%26math_change'~id!'R%2F%7C%23%40.DyG%2C'%3FKY5K%3A2'%3Aqm%22%C2%87DELTA!('shadow!('type!'math_number'~id!'%7Bo(%7B%23'%3A%7C.xyI-IMD%3DstC7%C2%80NUM!1))~%C2%84get'~id!'%2FMUFMhCoV%3F4_.7V1E%7D4K%C2%80VAR!('%7F))))~next!('%26with_element_by_id'~id!'U%24HscTvl9xN%25FBsq7g%5B.%C2%80ID!'sum')%C2%87STACK!('%26set_content'~id!'%3BR3%40%5Bk'%3AjzRo%2BpOqAXkgh'%C2%87VALUE!('shadow!('type!'text'~id!'o6OWnZEAPg15UuLGZkl%2B%C2%80TEXT!'Hello%2C%20'))~%C2%84get'~id!'%23rnd42foTOq(577Jw%5DR6%22))))))))))))))))%5D)~variables!%5B('name!'num1'~%C2%82%2C('name!'num2'~%7F%5D)~h!'%3Cinput%C2%86num1%C2%83%2B%5Cn%3Cinput%C2%86num2%C2%83%3D%5Cn%3Cspan%C2%86sum%5C'%3E%3C%2Fspan%3E%5Cn%5Cn%3Chr%3E%5Cn%3Cbutton%C2%86sumButton%5C'%3ESum%3C%2Fbutton%3E%5Cn%5Cn%5Cn%5Cn')%22%C2%80VAR!('%C2%82)%26block!('type!'%7Fid!'%3B0oB%7C%7BnA%2C)7h(%5DQ25N%7Bp')%C2%80'~fields!('%C2%81%C2%87VALUE!('%26get_input_data_wi%C2%82id!'DJ3%2B0hsEH%7DrCb%25AF%3DKM%7B')%C2%83%5C'%20type%3D%5C'number%5C'%3E%20%C2%84%26variables_%C2%85%C2%80TYPE!'number'~ID!'num%C2%86%20id%3D%5C'%C2%87~inputs!('%01%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_"
+        ></zero-md>
       </div>
       <xml class="toolbox" style="display: none">
         <category name="Values" colour='%{BKY_TEXTS_HUE}'>
@@ -253,6 +254,46 @@ <h2>Example: Using variables</h2>
     </div>
 
 
+    <div class="exercise" id="example_array_basics">
+      <h2>Example: Array basics</h2>
+      <div class="instructions">
+        <zero-md src="examples/array_basics.md"
+          start_code=
+          "('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start%7F2CNO)W-.13%2CG1ezsGlQ%7D'~x!20~y!38%26TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%C2%80HANDLER6variables_set%7FUa%24a5uCuxba_3lLCD*zr'%26VAR!('%22)%C2%80VALUE6lists_create_with%7F7giTF%3A%5BYx%7DE%7Dt2%7Djfz1S'~extraState!('itemCount!3)%C2%80ADD06text%7FSJ%5D%5E39et%7Cy%3Bgfii-jFAq'%26TEXT!'Apple')))~ADD16text%7F%3DLrWE%60o3%23t3K%2Ft1Idwz.'%26TEXT!'Banana')))~ADD26text%7FA0p%3A3xV_yB%2F%3DcVpViolp'%26TEXT!'Peach')))))))~next6with_element_by_id%7FNZ-8M'%3AD%7Cqkcu%3BI%40R%5E%2B%2C'%7B'%26ID!'random')%C2%80STACK6set_content%7FMeMtZGzwdKp%24SeU%7CGf%2B)'%C2%80VALUE!('shadow!('type!'text%7F%2C'feyW%2BJ20ijD%7B5uMsJwH'%26TEXT!''))~block!('type!'get_randomMember%7F%3D%3DD'%3Av%2FV4ur%2F%24VwY%3F9b59'%C2%80ARRAY6variables_get%7F%2C'iN%3A%5E(%25PgtTytr%23xI7(s'%26VAR!('%22))))))))))))))))%5D)~variables!%5B('name!'num1%7FDJ3%2B0hsEH%7DrCb%25AF%3DKM%7B')%2C('name!'num2%7F%3B0oB%7C%7BnA%2C)7h(%5DQ25N%7Bp')%2C('name!'fruits'~%22%2C('name!'array%7FqVr%25%2Bc%7Bq45Jc%23F%3D0%2C'9h5')%5D)~h!'%3Cdiv%20id%3D%5C'random%5C'%3E%3C%2Fdiv%3E%5Cn%5Cn%5Cn%5Cn')6!('block!('type!'%22id!'%2CAlz4%2Bd)h(kbj5*jWM%23f')%26~fields!('%7F'~id!'%C2%80~inputs!('%01%C2%80%7F%26%226_"
+        ></zero-md>
+      </div>
+    </div>
+
+    <div class="exercise" id="example_array_add_remove_item">
+      <h2>Example: Adding/removing items to/from an array</h2>
+      <div class="instructions">
+        <zero-md src="examples/array_add_remove_item.md"
+          start_code=
+          "('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'2CNO)W-.13%2CG1ezsGlQ%7D'~x!25~y!13%7FTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')~inputs!('HANDLER%22variables_set'~id!'Ua%24a5uCuxba_3lLCD*zr%26%C2%80%22lists_create_with'~id!'7giTF%3A%5BYx%7DE%7Dt2%7Djfz1S'~extraState!('itemCount!3)~inputs!('ADD0%C2%83SJ%5D%5E39et%7Cy%3Bgfii-jFAq%C2%84Apple')))~ADD1%C2%83%3DLrWE%60o3%23t3K%2Ft1Idwz.%C2%84Banana')))~ADD2%C2%83A0p%3A3xV_yB%2F%3DcVpViolp%C2%84Peach')))))))~next%22arrays_getFirst'~id!'G%3DPBP6o%7CN13J%7D(MqBN%7D6'~extraState!('isStatement!true)%7FMODE!'REMOVE'~WHERE!'FIRST')%C2%80%22%C2%81pV8%7Cg%3DtE%24lAPy%23t8%5EP77%26)))~next%22arrays_push'~id!'1_8%2Cs%3F%2FEt%7C(%2F%7BO3gUAhE'%7FWHERE!'END')%C2%80%C2%83U_NQp%7B%7Cmn38U%2Cwei5nk)%C2%84Orange')))~LIST%22%C2%816%3A%40mrkyOU'%3A%25%23QTNJ%23%5B%7C0%26)))~next%22with_element_by_id'~id!'J%7Dqv%5BHy%3A%5E85eZtmAZ%3D%23G'%7FID!'array')~inputs!('STACK%22set_content'~id!'%60HpgZsnjOpew1OP%7D%23'%3A9f'%C2%80!('shadow!('type!'text'~id!'%2C'feyW%2BJ20ijD%7B5uMsJwH%C2%84'))~block!('type!'%C2%817c3iOz_8Ear%2Bq0WfH(O%60%26))))))))))))))))%5D)~variables!%5B('name!'fruits'~%C2%82%2C('name!'array'~id!'nHIa.ZVF%23f%7C%3DDY8s8UN5')%5D)~h!'Array%20content%20%7Bas%20text%7D%3A%5Cn%3Cspan%20id%3D%5C'array%5C'%3E%3C%2Fspan%3E%5Cn%5Cn%5Cn')%22!('block!('type!'%26'%7FVAR!('%C2%82)%7F~fields!('%C2%80~inputs!('VALUE%C2%81variables_get'~id!'%C2%82id!'%2CAlz4%2Bd)h(kbj5*jWM%23f')%C2%83%22text'~id!'%C2%84'%7FTEXT!'%01%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_"
+        ></zero-md>
+      </div>
+    </div>
+
+    <div class="exercise" id="example_array_processing_items">
+      <h2>Example: Processing array items one by one</h2>
+      <div class="instructions">
+        <zero-md src="examples/array_processing_items.md"
+          start_code=
+          "('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'2CNO)W-.13%2CG1ezsGlQ%7D'~x!18~y!5~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D'%C2%81HANDLER%22variables_set'~id!'Ua%24a5uCuxba_3lLCD*zr%26VAR!('%C2%80%C2%81VALUE%22lists_create_with'~id!'7giTF%3A%5BYx%7DE%7Dt2%7Djfz1S'~extraState!('itemCount!3%C2%81ADD0%C2%82SJ%5D%5E39et%7Cy%3Bgfii-jFAq%26TEXT!'Apple')))~ADD1%C2%82%3DLrWE%60o3%23t3K%2Ft1Idwz.%26TEXT!'Banana')))~ADD2%C2%82A0p%3A3xV_yB%2F%3DcVpViolp%26TEXT!'Peach')))))))~next%22with_element_by_id'~id!'qRGC%2CH6sk.h%2C'6C%24%2Fvb2_%26ID!'list'%C2%81STACK%22arrays_forEach'~id!'vqm8GNYM%5E)%7D9yJj1)PP8%26VAR!('%7F%C2%81LIST%22%C2%83%5B%3ALTEQJQ%5DBju(uehw%24*b%26VAR!('%C2%80)))~DO%22add_element'~id!'Si*%2B%3AShx8l%2C%60%3AatNb%5DJg%26ELEMENT!'li'%C2%81STACK%22set_content'~id!'%3Fki(S%2CfUBtccCs%2C'8VjFI'~inputs!('VALUE!('shadow!('type!'text'~id!'UzmLlmUOw3%7Cp%60p%5B%25u%3Fa7%26TEXT!''))~block!('type!'%C2%83oLYY3'%3A44ZNL%3B8OoT%3FpX%40%26VAR!('%7F)))))))))))))))))))%5D)~variables!%5B('name!'fruits'~%C2%80%2C('name!'array'~id!'nHIa.ZVF%23f%7C%3DDY8s8UN5')%2C('name!'item'~%7F%5D)~h!'%3Cul%20id%3D%5C'list%5C'%3E%3C%2Ful%3E%5Cn%5Cn%5Cn%5Cn')%22!('block!('type!'%26'~fields!('%7Fid!'bkbmfA)02%3ABg%3D%2Ct%7DmVE(')%C2%80id!'%2CAlz4%2Bd)h(kbj5*jWM%23f')%C2%81)~inputs!('%C2%82%22text'~id!'%C2%83variables_get'~id!'%01%C2%83%C2%82%C2%81%C2%80%7F%26%22_"
+        ></zero-md>
+      </div>
+    </div>
+
+    <div class="exercise" id="example_if_else">
+      <h2>Example: Checking if a number is positive, negative, or zero</h2>
+      <div class="instructions">
+        <zero-md src="examples/if_else.md"
+        start_code=
+        "('j!('blocks!('languageVersion!0~blocks!%5B('type!'element_clicked'~id!'Orij%25O%7C%7D%252vU%3FD%7DVx2%5EZ'~x!24~y!16~fields!('TEXT1!'when%20the%20element%20with%20id'~ID!'button'~TEXT2!'is%20clicked')%C2%85HANDLER%C2%81%2C%7BR8%3B%5EW%60mZ%5DC-%7D%5EeBx)-%C2%86%C2%85VALUE%22get_input_data_with_id'~id!'JOk4lL%3F*o%3F1VNw%3AdIY6*%7FTYPE!'number'~ID!'num'))))~next%22controls_if'~id!'5i3C%7DDtaVqJSaG%7CGA%7Cf6'~extraState!('elseIfCount!1~hasElse!true)%C2%85IF0%C2%88zs%24d_%23LiW%7CxPNTh%7BoQu-%7FOP!'G%C2%84'cVX7%40EXn%3D8zKt4bzCthm%C2%86%C2%87BLcH.9%7BG%5B6J-Ow%7CBeKCs%7FNUM!0))))))~DO0%C2%81d)%2C')U0%7B599d%5Dc9v%7D%3Ac7L%26%C2%82%5B'%3ABXD%2C'%5Exv%2F5uE7fbVD%23j%7FTEXT!'Positive'))))))~IF1%C2%88dQ0%40X-F%2C'xRL%25r.%2CjwDpQ%7FOP!'L%C2%84'S%7D%3DTWa78P.)Lu%239KQpk%3A%C2%86%C2%87%2B%5BY%40dy%5D27_kg6F%7B%2F%7Bu3-%7FNUM!0))))))~DO1%C2%81Htc%5DaL4M77DDgb%2CXwI1S%26%C2%82%2C'on%2By%2C'KUO0aPBb5ui%2C'U%3F%7FTEXT!'Negative'))))))~ELSE%C2%81%7C_BF1g7e%2C'%24%7CvCtkM7b%40Q%26%C2%82%2CcN4(KL%2C'Q%23Hm7%5DP%25F7%249%7FTEXT!'Zero')))))))~next%22with_element_by_id'~id!'U%24HscTvl9xN%25FBsq7g%5B.%7FID!'numberType')%C2%85STACK%22set_content'~id!'%3BR3%40%5Bk'%3AjzRo%2BpOqAXkgh'%C2%85VALUE!('shadow!('type!'text'~id!'o6OWnZEAPg15UuLGZkl%2B%7FTEXT!'Hello%2C%20'))~block!('type!'variables_get'~id!'%23rnd42foTOq(577Jw%5DR6%26))))))))))))))%5D)~variables!%5B('name!'num'~%C2%80%2C('name!'numberType'~%C2%83%5D)~h!'%3Cinput%20id%3D%5C'num%5C'%20type%3D%5C'number%5C'%3E%5Cn%3Cspan%20id%3D%5C'numberType%5C'%3E%3C%2Fspan%3E%5Cn%3Chr%3E%5Cn%3Cbutton%20id%3D%5C'button%5C'%3ECheck%3C%2Fbutton%3E%5Cn%5Cn%5Cn%5Cn')%22!('block!('type!'%26%7FVAR!('%C2%83)%7F'~fields!('%C2%80id!'DJ3%2B0hsEH%7DrCb%25AF%3DKM%7B')%C2%81%22variables_set'~id!'%C2%82%C2%85VALUE%22text'~id!'%C2%83id!'%3B0oB%7C%7BnA%2C)7h(%5DQ25N%7Bp')%C2%84T')%C2%85A%22variables_get'~id!%C2%85~inputs!('%C2%86%7FVAR!('%C2%80)%C2%87))~B%22math_number'~id!'%C2%88%22logic_compare'~id!'%01%C2%88%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_"
+      ></zero-md>
+      </div>
+    </div>
+
 
     <footer>
       <h3>CYF Blocks is a project of <a href="https://codeyourfuture.io">Code Your Future</a></h3>
diff --git a/examples/array_add_remove_item.md b/examples/array_add_remove_item.md
new file mode 100644
index 0000000..c370ed4
--- /dev/null
+++ b/examples/array_add_remove_item.md
@@ -0,0 +1,28 @@
+## 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 array as text. This is a convenient way 
+to visualise the content in an array.
diff --git a/examples/array_basics.md b/examples/array_basics.md
new file mode 100644
index 0000000..d242334
--- /dev/null
+++ b/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 term ***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 store 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.
+
+
diff --git a/examples/array_processing_items.md b/examples/array_processing_items.md
new file mode 100644
index 0000000..0fe24a4
--- /dev/null
+++ b/examples/array_processing_items.md
@@ -0,0 +1,26 @@
+## 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.
+
diff --git a/examples/if_else.md b/examples/if_else.md
new file mode 100644
index 0000000..74268b6
--- /dev/null
+++ b/examples/if_else.md
@@ -0,0 +1,33 @@
+## Checking if a number is positive, negative, or zero
+
+This example demonstrates how to use an **`if-else`** block to check if 
+a number is positive, negative, or zero. 
+
+### The blocks
+
+- **`if {<condition>} do`**
+  - This block allows us to conditionally execute some blocks.
+  - It must be used with a "condition" block that evaluates to either `true` or `false`.
+  - The blocks specified after the `do` part will only get executed if the condition evaluates to `true`.
+
+
+
+  
+- **`get the [numerical] value of input with id [<id value>]`** 
+  - It gets the numerical value from an `<input>` element identified by the
+    attribute `id="<id value>"`.
+
+  **Note**: If we need an input value for arithmetic calculation, we have to select `numerical` 
+  instead of `text`.
+      
+- **`change [<variable name>] by {value}`**
+  - It increases the value of the named variable by the specified value.
+
+### What does this blockly program do?
+
+Whenever the SUM button is clicked, the program
+- gets the numerical values in the `<input>` elements, and store them in
+  variables **`num1`** and **`num2`**, and
+- increases the value of **`num1`** by the value of **`num2`** 
+  (to calculate **`num1`** + **`num2`**), and
+- shows the calculated sum in `<span id="sum">`.

From bba00bcf5161f822a17bd9dfcbcea15bbcf1b216 Mon Sep 17 00:00:00 2001
From: cjyuan <cjyuan00.gmail.com>
Date: Sun, 17 Nov 2024 21:06:39 +0000
Subject: [PATCH 3/3] Added 4 examples

---
 README_CJ.md                       |   5 +-
 examples.html                      | 185 ++++++++++++++++++++++++++++-
 examples/array_add_remove_item.md  |   5 +-
 examples/array_basics.md           |   8 +-
 examples/array_processing_items.md |  17 ++-
 examples/if_else.md                |  39 +++---
 exercises/arrays_buttons.md        |   5 +
 exercises/arrays_foreach.md        |   6 +
 exercises/arrays_random.md         |   6 +
 9 files changed, 245 insertions(+), 31 deletions(-)

diff --git a/README_CJ.md b/README_CJ.md
index a5303e7..74b6914 100644
--- a/README_CJ.md
+++ b/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.
diff --git a/examples.html b/examples.html
index 82354d0..9963bb3 100644
--- a/examples.html
+++ b/examples.html
@@ -259,9 +259,48 @@ <h2>Example: Array basics</h2>
       <div class="instructions">
         <zero-md src="examples/array_basics.md"
           start_code=
-          "('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start%7F2CNO)W-.13%2CG1ezsGlQ%7D'~x!20~y!38%26TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%C2%80HANDLER6variables_set%7FUa%24a5uCuxba_3lLCD*zr'%26VAR!('%22)%C2%80VALUE6lists_create_with%7F7giTF%3A%5BYx%7DE%7Dt2%7Djfz1S'~extraState!('itemCount!3)%C2%80ADD06text%7FSJ%5D%5E39et%7Cy%3Bgfii-jFAq'%26TEXT!'Apple')))~ADD16text%7F%3DLrWE%60o3%23t3K%2Ft1Idwz.'%26TEXT!'Banana')))~ADD26text%7FA0p%3A3xV_yB%2F%3DcVpViolp'%26TEXT!'Peach')))))))~next6with_element_by_id%7FNZ-8M'%3AD%7Cqkcu%3BI%40R%5E%2B%2C'%7B'%26ID!'random')%C2%80STACK6set_content%7FMeMtZGzwdKp%24SeU%7CGf%2B)'%C2%80VALUE!('shadow!('type!'text%7F%2C'feyW%2BJ20ijD%7B5uMsJwH'%26TEXT!''))~block!('type!'get_randomMember%7F%3D%3DD'%3Av%2FV4ur%2F%24VwY%3F9b59'%C2%80ARRAY6variables_get%7F%2C'iN%3A%5E(%25PgtTytr%23xI7(s'%26VAR!('%22))))))))))))))))%5D)~variables!%5B('name!'num1%7FDJ3%2B0hsEH%7DrCb%25AF%3DKM%7B')%2C('name!'num2%7F%3B0oB%7C%7BnA%2C)7h(%5DQ25N%7Bp')%2C('name!'fruits'~%22%2C('name!'array%7FqVr%25%2Bc%7Bq45Jc%23F%3D0%2C'9h5')%5D)~h!'%3Cdiv%20id%3D%5C'random%5C'%3E%3C%2Fdiv%3E%5Cn%5Cn%5Cn%5Cn')6!('block!('type!'%22id!'%2CAlz4%2Bd)h(kbj5*jWM%23f')%26~fields!('%7F'~id!'%C2%80~inputs!('%01%C2%80%7F%26%226_"
+          "('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'2CNO)W-.13%2CG1ezsGlQ%7D'~x!20~y!38%26TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')%7FHANDLER6variables_set'~id!'Ua%24a5uCuxba_3lLCD*zr'%26VAR!('%22)%7FVALUE6lists_create_with'~id!'7giTF%3A%5BYx%7DE%7Dt2%7Djfz1S'~extraState!('itemCount!3)%7FADD06text'~id!'SJ%5D%5E39et%7Cy%3Bgfii-jFAq'%26TEXT!'Apple')))~ADD16text'~id!'%3DLrWE%60o3%23t3K%2Ft1Idwz.'%26TEXT!'Banana')))~ADD26text'~id!'A0p%3A3xV_yB%2F%3DcVpViolp'%26TEXT!'Peach')))))))~next6with_element_by_id'~id!'NZ-8M'%3AD%7Cqkcu%3BI%40R%5E%2B%2C'%7B'%26ID!'random')%7FSTACK6set_content'~id!'MeMtZGzwdKp%24SeU%7CGf%2B)'%7FVALUE!('shadow!('type!'text'~id!'%2C'feyW%2BJ20ijD%7B5uMsJwH'%26TEXT!''))~block!('type!'get_randomMember'~id!'%3D%3DD'%3Av%2FV4ur%2F%24VwY%3F9b59'%7FARRAY6variables_get'~id!'%2C'iN%3A%5E(%25PgtTytr%23xI7(s'%26VAR!('%22))))))))))))))))%5D)~variables!%5B('name!'fruits'~%22%2C('name!'array'~id!'qVr%25%2Bc%7Bq45Jc%23F%3D0%2C'9h5')%5D)~h!'%3Cdiv%20id%3D%5C'random%5C'%3E%3C%2Fdiv%3E%5Cn%5Cn%5Cn%5Cn')6!('block!('type!'%22id!'%2CAlz4%2Bd)h(kbj5*jWM%23f')%26~fields!('%7F~inputs!('%01%7F%26%226_"          
         ></zero-md>
       </div>
+      <xml class="toolbox" style="display: none">
+        <category name="Values" colour='%{BKY_TEXTS_HUE}'>
+          <block type="math_number"></block>          
+          <block type="text"></block>
+          <block type="colour_picker"></block>          
+          <block type="get_randomWord"></block>
+        </category>
+        <category name="Html" colour="%{BKY_COLOUR_HUE}">
+          <block type="on_start"></block>
+          <block type="element_clicked"></block>          
+          <block type="with_element_by_id"></block>
+          <block type="set_content">
+            <value name="VALUE">
+              <shadow type="text"> </shadow>
+            </value>
+          </block>
+          <block type="set_attribute"></block>
+          <block type="add_element"></block>
+          <block type="remove_contents"></block>
+          <block type="get_input_data_with_id"></block>          
+        </category>
+        <category name="Variables" colour="330" custom="VARIABLE"></category>
+        <category name="Arrays" colour="%{BKY_LISTS_HUE}"" >
+          <block type="variables_set">
+            <field name="VAR">array</field>
+            <value name="VALUE">
+              <block type="lists_create_with">
+              </block>
+            </value>
+          </block>
+          <block type="get_randomMember">
+            <value name="ARRAY">
+              <block type="variables_get">
+                  <field name="VAR">array</field>
+              </block>
+            </value>
+          </block>
+        </category>        
+      </xml>
     </div>
 
     <div class="exercise" id="example_array_add_remove_item">
@@ -272,6 +311,59 @@ <h2>Example: Adding/removing items to/from an array</h2>
           "('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'2CNO)W-.13%2CG1ezsGlQ%7D'~x!25~y!13%7FTEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D')~inputs!('HANDLER%22variables_set'~id!'Ua%24a5uCuxba_3lLCD*zr%26%C2%80%22lists_create_with'~id!'7giTF%3A%5BYx%7DE%7Dt2%7Djfz1S'~extraState!('itemCount!3)~inputs!('ADD0%C2%83SJ%5D%5E39et%7Cy%3Bgfii-jFAq%C2%84Apple')))~ADD1%C2%83%3DLrWE%60o3%23t3K%2Ft1Idwz.%C2%84Banana')))~ADD2%C2%83A0p%3A3xV_yB%2F%3DcVpViolp%C2%84Peach')))))))~next%22arrays_getFirst'~id!'G%3DPBP6o%7CN13J%7D(MqBN%7D6'~extraState!('isStatement!true)%7FMODE!'REMOVE'~WHERE!'FIRST')%C2%80%22%C2%81pV8%7Cg%3DtE%24lAPy%23t8%5EP77%26)))~next%22arrays_push'~id!'1_8%2Cs%3F%2FEt%7C(%2F%7BO3gUAhE'%7FWHERE!'END')%C2%80%C2%83U_NQp%7B%7Cmn38U%2Cwei5nk)%C2%84Orange')))~LIST%22%C2%816%3A%40mrkyOU'%3A%25%23QTNJ%23%5B%7C0%26)))~next%22with_element_by_id'~id!'J%7Dqv%5BHy%3A%5E85eZtmAZ%3D%23G'%7FID!'array')~inputs!('STACK%22set_content'~id!'%60HpgZsnjOpew1OP%7D%23'%3A9f'%C2%80!('shadow!('type!'text'~id!'%2C'feyW%2BJ20ijD%7B5uMsJwH%C2%84'))~block!('type!'%C2%817c3iOz_8Ear%2Bq0WfH(O%60%26))))))))))))))))%5D)~variables!%5B('name!'fruits'~%C2%82%2C('name!'array'~id!'nHIa.ZVF%23f%7C%3DDY8s8UN5')%5D)~h!'Array%20content%20%7Bas%20text%7D%3A%5Cn%3Cspan%20id%3D%5C'array%5C'%3E%3C%2Fspan%3E%5Cn%5Cn%5Cn')%22!('block!('type!'%26'%7FVAR!('%C2%82)%7F~fields!('%C2%80~inputs!('VALUE%C2%81variables_get'~id!'%C2%82id!'%2CAlz4%2Bd)h(kbj5*jWM%23f')%C2%83%22text'~id!'%C2%84'%7FTEXT!'%01%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_"
         ></zero-md>
       </div>
+      <xml class="toolbox" style="display: none">
+        <category name="Values" colour='%{BKY_TEXTS_HUE}'>
+          <block type="math_number"></block>          
+          <block type="text"></block>
+          <block type="colour_picker"></block>          
+          <block type="get_randomWord"></block>
+        </category>
+        <category name="Html" colour="%{BKY_COLOUR_HUE}">
+          <block type="on_start"></block>
+          <block type="element_clicked"></block>          
+          <block type="with_element_by_id"></block>
+          <block type="set_content">
+            <value name="VALUE">
+              <shadow type="text"> </shadow>
+            </value>
+          </block>
+          <block type="set_attribute"></block>
+          <block type="add_element"></block>
+          <block type="remove_contents"></block>
+          <block type="get_input_data_with_id"></block>          
+        </category>
+        <category name="Variables" colour="330" custom="VARIABLE"></category>
+        <category name="Arrays" colour="%{BKY_LISTS_HUE}"" >
+          <block type="variables_set">
+            <field name="VAR">array</field>
+            <value name="VALUE">
+              <block type="lists_create_with">
+              </block>
+            </value>
+          </block>
+          <block type="arrays_getFirst">
+            <value name="VALUE">
+              <block type="variables_get">
+                  <field name="VAR">array</field>
+              </block>
+            </value>
+          </block>
+          <block type="arrays_push">
+            <value name="LIST">
+              <block type="variables_get">
+                  <field name="VAR">array</field>
+              </block>
+            </value>
+          </block>          
+          <block type="get_randomMember">
+            <value name="ARRAY">
+              <block type="variables_get">
+                  <field name="VAR">array</field>
+              </block>
+            </value>
+          </block>
+        </category>        
+      </xml>      
     </div>
 
     <div class="exercise" id="example_array_processing_items">
@@ -282,6 +374,68 @@ <h2>Example: Processing array items one by one</h2>
           "('j!('blocks!('languageVersion!0~blocks!%5B('type!'on_start'~id!'2CNO)W-.13%2CG1ezsGlQ%7D'~x!18~y!5~fields!('TEXT1!'at%20the%20start%20%7Bwhen%20run%20is%20clicked%7D'%C2%81HANDLER%22variables_set'~id!'Ua%24a5uCuxba_3lLCD*zr%26VAR!('%C2%80%C2%81VALUE%22lists_create_with'~id!'7giTF%3A%5BYx%7DE%7Dt2%7Djfz1S'~extraState!('itemCount!3%C2%81ADD0%C2%82SJ%5D%5E39et%7Cy%3Bgfii-jFAq%26TEXT!'Apple')))~ADD1%C2%82%3DLrWE%60o3%23t3K%2Ft1Idwz.%26TEXT!'Banana')))~ADD2%C2%82A0p%3A3xV_yB%2F%3DcVpViolp%26TEXT!'Peach')))))))~next%22with_element_by_id'~id!'qRGC%2CH6sk.h%2C'6C%24%2Fvb2_%26ID!'list'%C2%81STACK%22arrays_forEach'~id!'vqm8GNYM%5E)%7D9yJj1)PP8%26VAR!('%7F%C2%81LIST%22%C2%83%5B%3ALTEQJQ%5DBju(uehw%24*b%26VAR!('%C2%80)))~DO%22add_element'~id!'Si*%2B%3AShx8l%2C%60%3AatNb%5DJg%26ELEMENT!'li'%C2%81STACK%22set_content'~id!'%3Fki(S%2CfUBtccCs%2C'8VjFI'~inputs!('VALUE!('shadow!('type!'text'~id!'UzmLlmUOw3%7Cp%60p%5B%25u%3Fa7%26TEXT!''))~block!('type!'%C2%83oLYY3'%3A44ZNL%3B8OoT%3FpX%40%26VAR!('%7F)))))))))))))))))))%5D)~variables!%5B('name!'fruits'~%C2%80%2C('name!'array'~id!'nHIa.ZVF%23f%7C%3DDY8s8UN5')%2C('name!'item'~%7F%5D)~h!'%3Cul%20id%3D%5C'list%5C'%3E%3C%2Ful%3E%5Cn%5Cn%5Cn%5Cn')%22!('block!('type!'%26'~fields!('%7Fid!'bkbmfA)02%3ABg%3D%2Ct%7DmVE(')%C2%80id!'%2CAlz4%2Bd)h(kbj5*jWM%23f')%C2%81)~inputs!('%C2%82%22text'~id!'%C2%83variables_get'~id!'%01%C2%83%C2%82%C2%81%C2%80%7F%26%22_"
         ></zero-md>
       </div>
+      <xml class="toolbox" style="display: none">
+        <category name="Values" colour='%{BKY_TEXTS_HUE}'>
+          <block type="math_number"></block>          
+          <block type="text"></block>
+          <block type="colour_picker"></block>          
+          <block type="get_randomWord"></block>
+        </category>
+        <category name="Html" colour="%{BKY_COLOUR_HUE}">
+          <block type="on_start"></block>
+          <block type="element_clicked"></block>          
+          <block type="with_element_by_id"></block>
+          <block type="set_content">
+            <value name="VALUE">
+              <shadow type="text"> </shadow>
+            </value>
+          </block>
+          <block type="set_attribute"></block>
+          <block type="add_element"></block>
+          <block type="remove_contents"></block>
+          <block type="get_input_data_with_id"></block>          
+        </category>
+        <category name="Variables" colour="330" custom="VARIABLE"></category>
+        <category name="Arrays" colour="%{BKY_LISTS_HUE}"" >
+          <block type="variables_set">
+            <field name="VAR">array</field>
+            <value name="VALUE">
+              <block type="lists_create_with">
+              </block>
+            </value>
+          </block>
+          <block type="arrays_getFirst">
+            <value name="VALUE">
+              <block type="variables_get">
+                  <field name="VAR">array</field>
+              </block>
+            </value>
+          </block>
+          <block type="arrays_push">
+            <value name="LIST">
+              <block type="variables_get">
+                  <field name="VAR">array</field>
+              </block>
+            </value>
+          </block>
+          <block type="arrays_forEach">
+            <field name="VAR">item</field>
+            </value>
+            <value name="LIST">
+              <block type="variables_get">
+                  <field name="VAR">array</field>
+              </block>
+            </value>
+          </block>          
+          <block type="get_randomMember">
+            <value name="ARRAY">
+              <block type="variables_get">
+                  <field name="VAR">array</field>
+              </block>
+            </value>
+          </block>
+        </category>        
+      </xml>            
     </div>
 
     <div class="exercise" id="example_if_else">
@@ -292,6 +446,35 @@ <h2>Example: Checking if a number is positive, negative, or zero</h2>
         "('j!('blocks!('languageVersion!0~blocks!%5B('type!'element_clicked'~id!'Orij%25O%7C%7D%252vU%3FD%7DVx2%5EZ'~x!24~y!16~fields!('TEXT1!'when%20the%20element%20with%20id'~ID!'button'~TEXT2!'is%20clicked')%C2%85HANDLER%C2%81%2C%7BR8%3B%5EW%60mZ%5DC-%7D%5EeBx)-%C2%86%C2%85VALUE%22get_input_data_with_id'~id!'JOk4lL%3F*o%3F1VNw%3AdIY6*%7FTYPE!'number'~ID!'num'))))~next%22controls_if'~id!'5i3C%7DDtaVqJSaG%7CGA%7Cf6'~extraState!('elseIfCount!1~hasElse!true)%C2%85IF0%C2%88zs%24d_%23LiW%7CxPNTh%7BoQu-%7FOP!'G%C2%84'cVX7%40EXn%3D8zKt4bzCthm%C2%86%C2%87BLcH.9%7BG%5B6J-Ow%7CBeKCs%7FNUM!0))))))~DO0%C2%81d)%2C')U0%7B599d%5Dc9v%7D%3Ac7L%26%C2%82%5B'%3ABXD%2C'%5Exv%2F5uE7fbVD%23j%7FTEXT!'Positive'))))))~IF1%C2%88dQ0%40X-F%2C'xRL%25r.%2CjwDpQ%7FOP!'L%C2%84'S%7D%3DTWa78P.)Lu%239KQpk%3A%C2%86%C2%87%2B%5BY%40dy%5D27_kg6F%7B%2F%7Bu3-%7FNUM!0))))))~DO1%C2%81Htc%5DaL4M77DDgb%2CXwI1S%26%C2%82%2C'on%2By%2C'KUO0aPBb5ui%2C'U%3F%7FTEXT!'Negative'))))))~ELSE%C2%81%7C_BF1g7e%2C'%24%7CvCtkM7b%40Q%26%C2%82%2CcN4(KL%2C'Q%23Hm7%5DP%25F7%249%7FTEXT!'Zero')))))))~next%22with_element_by_id'~id!'U%24HscTvl9xN%25FBsq7g%5B.%7FID!'numberType')%C2%85STACK%22set_content'~id!'%3BR3%40%5Bk'%3AjzRo%2BpOqAXkgh'%C2%85VALUE!('shadow!('type!'text'~id!'o6OWnZEAPg15UuLGZkl%2B%7FTEXT!'Hello%2C%20'))~block!('type!'variables_get'~id!'%23rnd42foTOq(577Jw%5DR6%26))))))))))))))%5D)~variables!%5B('name!'num'~%C2%80%2C('name!'numberType'~%C2%83%5D)~h!'%3Cinput%20id%3D%5C'num%5C'%20type%3D%5C'number%5C'%3E%5Cn%3Cspan%20id%3D%5C'numberType%5C'%3E%3C%2Fspan%3E%5Cn%3Chr%3E%5Cn%3Cbutton%20id%3D%5C'button%5C'%3ECheck%3C%2Fbutton%3E%5Cn%5Cn%5Cn%5Cn')%22!('block!('type!'%26%7FVAR!('%C2%83)%7F'~fields!('%C2%80id!'DJ3%2B0hsEH%7DrCb%25AF%3DKM%7B')%C2%81%22variables_set'~id!'%C2%82%C2%85VALUE%22text'~id!'%C2%83id!'%3B0oB%7C%7BnA%2C)7h(%5DQ25N%7Bp')%C2%84T')%C2%85A%22variables_get'~id!%C2%85~inputs!('%C2%86%7FVAR!('%C2%80)%C2%87))~B%22math_number'~id!'%C2%88%22logic_compare'~id!'%01%C2%88%C2%87%C2%86%C2%85%C2%84%C2%83%C2%82%C2%81%C2%80%7F%26%22_"
       ></zero-md>
       </div>
+      <xml class="toolbox" style="display: none">
+        <category name="Logic" colour="210">
+          <block type="controls_if"></block>
+          <block type="logic_negate"></block>
+          <block type="logic_compare"></block>
+        </category>        
+        <category name="Values" colour='%{BKY_TEXTS_HUE}'>
+          <block type="math_number"></block>          
+          <block type="text"></block>
+          <block type="colour_picker"></block>
+          <block type="logic_boolean"></block>          
+          <block type="get_randomWord"></block>
+        </category>
+        <category name="Html" colour="%{BKY_COLOUR_HUE}">
+          <block type="on_start"></block>
+          <block type="element_clicked"></block>          
+          <block type="with_element_by_id"></block>
+          <block type="set_content">
+            <value name="VALUE">
+              <shadow type="text"> </shadow>
+            </value>
+          </block>
+          <block type="set_attribute"></block>
+          <block type="add_element"></block>
+          <block type="remove_contents"></block>
+          <block type="get_input_data_with_id"></block>          
+        </category>
+        <category name="Variables" colour="330" custom="VARIABLE"></category>
+      </xml>       
     </div>
 
 
diff --git a/examples/array_add_remove_item.md b/examples/array_add_remove_item.md
index c370ed4..4e2af55 100644
--- a/examples/array_add_remove_item.md
+++ b/examples/array_add_remove_item.md
@@ -24,5 +24,6 @@ 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 array as text. This is a convenient way 
-to visualise the content in an 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.
diff --git a/examples/array_basics.md b/examples/array_basics.md
index d242334..9c45e10 100644
--- a/examples/array_basics.md
+++ b/examples/array_basics.md
@@ -2,7 +2,7 @@
 
 This example gives an overview of ***array*** and demonstrates how to 
 - create an **array** 
-- get a random element from an array.  
+- get a random element from an array
 
 ### Overview
 
@@ -15,13 +15,13 @@ Here is a conceptual view of an array that stores three string values:
 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 term ***size*** or ***length*** to describe the number of items in an 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 store the array in the named variable.
+  - 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
@@ -33,7 +33,7 @@ In this example, the size of the array is three.
 
 ### What does this blockly program do?
 
-It creates an array variable named `fruits` with three items, and then displays 
+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.
diff --git a/examples/array_processing_items.md b/examples/array_processing_items.md
index 0fe24a4..21c5144 100644
--- a/examples/array_processing_items.md
+++ b/examples/array_processing_items.md
@@ -2,7 +2,6 @@
 
 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>}`**
@@ -24,3 +23,19 @@ the array items one by one:
 - 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>
+```
+
+
+
diff --git a/examples/if_else.md b/examples/if_else.md
index 74268b6..ac9cea2 100644
--- a/examples/if_else.md
+++ b/examples/if_else.md
@@ -1,33 +1,32 @@
 ## Checking if a number is positive, negative, or zero
 
-This example demonstrates how to use an **`if-else`** block to check if 
+This example demonstrates how to use an **`if-else`** block to determine whether 
 a number is positive, negative, or zero. 
 
 ### The blocks
 
-- **`if {<condition>} do`**
-  - This block allows us to conditionally execute some blocks.
-  - It must be used with a "condition" block that evaluates to either `true` or `false`.
-  - The blocks specified after the `do` part will only get executed if the condition evaluates to `true`.
-
+- **`{  }[=]{  }`** (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>]`** 
-  - It gets the numerical value from an `<input>` element identified by the
-    attribute `id="<id value>"`.
+- **`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 calculation, we have to select `numerical` 
-  instead of `text`.
-      
-- **`change [<variable name>] by {value}`**
-  - It increases the value of the named variable by the specified value.
+  **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 SUM button is clicked, the program
-- gets the numerical values in the `<input>` elements, and store them in
-  variables **`num1`** and **`num2`**, and
-- increases the value of **`num1`** by the value of **`num2`** 
-  (to calculate **`num1`** + **`num2`**), and
-- shows the calculated sum in `<span id="sum">`.
+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`
\ No newline at end of file
diff --git a/exercises/arrays_buttons.md b/exercises/arrays_buttons.md
index 0993164..8689342 100644
--- a/exercises/arrays_buttons.md
+++ b/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.
 
diff --git a/exercises/arrays_foreach.md b/exercises/arrays_foreach.md
index 819ada7..1fcbc24 100644
--- a/exercises/arrays_foreach.md
+++ b/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.
 
diff --git a/exercises/arrays_random.md b/exercises/arrays_random.md
index d9b2c94..44502f6 100644
--- a/exercises/arrays_random.md
+++ b/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.