Add level 2 concepts

app/css/bootcamp/pages/concept.css

@@ -75,4 +75,11 @@ body.namespace-bootcamp.controller-concepts.action-show {
             }
         }
     }
+    hr {
+        @apply border-borderColor5;
+        @apply my-20;
+    }
+    h4 a {
+        @apply text-linkColor underline;
+    }
 }

bootcamp_content/concepts/config.json

@@ -52,8 +52,8 @@
     "slug": "functions",
     "apex": true,
     "title": "Functions",
-    "description": "Master the fundamental building block of programs - functions.",
-    "level": 2
+    "description": "Master a fundamental building block of programs - functions.",
+    "level": 1
   },
   {
     "slug": "functions-introduction",
@@ -93,5 +93,61 @@
     "title": "Arrays",
     "description": "",
     "level": 4
+  },
+  {
+    "slug": "variables",
+    "apex": true,
+    "title": "Variables",
+    "description": "Master a fundamental building block of programs - variables.",
+    "level": 2
+  },
+  {
+    "slug": "variables-introduction",
+    "parent": "variables",
+    "title": "What are Variables?",
+    "description": "Learn what variables are in programming.",
+    "level": 2
+  },
+  {
+    "slug": "variables-creating",
+    "parent": "variables",
+    "title": "Creating variables",
+    "description": "Learn how to create variables",
+    "level": 2
+  },
+  {
+    "slug": "variables-changing",
+    "parent": "variables",
+    "title": "Changing variables",
+    "description": "Learn how to change variables",
+    "level": 2
+  },
+  {
+    "slug": "variables-unique-names",
+    "parent": "variables",
+    "title": "Unique Variable names",
+    "description": "Learn about how variable names have to be unique",
+    "level": 2
+  },
+  {
+    "slug": "variables-using",
+    "parent": "variables",
+    "title": "Using Variables",
+    "description": "Learn how to use variables as inputs to functions.",
+    "level": 2
+  },
+  {
+    "slug": "flow-control",
+    "apex": true,
+    "title": "Flow control",
+    "description": "Learn about different ways to control what the program does.",
+    "level": 2
+  },
+  {
+    "slug": "repeat",
+    "parent": "flow-control",
+    "title": "Using Repeat Blocks",
+    "description": "Learn how to use repeat blocks",
+    "level": 2
   }
 ]

bootcamp_content/concepts/flow-control.md

@@ -0,0 +1,7 @@
+# Flow Control
+
+Having a program that just runs all the instructions in a row isn't particularly useful.
+
+To use the full power of programming we use different types of flow control - the ability for Jiki to run code multiple times or only in certian situations.
+
+Learn about different types of flow control below;

bootcamp_content/concepts/functions.md

@@ -1,5 +1,5 @@
 # Functions
 
-Functions are very important.
+Functions are a key building block of programming. They are the machines that Jiki can use to do things. In different scenarios, you have different functions that Jiki can use. As you progress, you can write your own!
 
 Use the links below to build a comprehensive understanding of how they work.

bootcamp_content/concepts/repeat.md

@@ -0,0 +1,13 @@
+# Repeat
+
+Often, it's useful to be able to run the same few lines of code multiple times in a row. To do this we use the `repeat` keyword with a block of code.
+
+In JikiScript we specify a "block" of code by using the `do` and `end` keywords. We give Jiki an instruction and tell him to apply that instruction to everything between the `do` and the `end`.
+
+In other languages, we might see brackets (`{ }`) or a colon (`:`) for this, but in JikiScript it's always `do` and `end`.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/do-end.png" class="diagram"/>
+
+For example, if we want to move our blob one step forward and then turn left, and keep doing that until we're back where we started, we could use the `repeat` keyword with a code block (`do`/`end`) containing those two instructions:
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/repeat.png" class="diagram"/>

bootcamp_content/concepts/variables-changing.md

@@ -0,0 +1,17 @@
+# Changing Variables
+
+You can also tell Jiki to change what’s in the box. For this you use the change keyword.
+
+When Jiki sees the change keyword, he replaces whatever was in the box with whatever you ask him to put in there. So let’s say we want to put a different name into the box, we can say to Jiki:
+
+```
+change name to "Aron"
+```
+
+He’ll take out there “Jeremy” string that was in there and throw it away. Then he'll put a new string called "Aron" in there instead.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/change-variable.png" class="diagram" alt='change name to "Aron"'/>
+
+---
+
+### Next Concept: [Unique Variables Names](./variables-unique-names.md)

bootcamp_content/concepts/variables-creating.md

@@ -0,0 +1,19 @@
+# Creating Variables
+
+Let's look at how we make a variable and what happens when we do. For this we use the set keyword.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/set-variable-1.png" class="diagram"/>
+
+This is the first time we’ve seen a keyword. Keywords are just words that Jiki understands that you can use to tell him to do things or give him information. In this case set is an instruction to create a new box and put something in it. to is also a keyword that goes along with set.
+
+When Jiki sees set he gets a new box, writes the label on it that you’ve specified, in this case name and then puts the value in that comes after to - in this case it’s the string “Jeremy”.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/set-variable-2.png" class="diagram"/>
+
+Once he’s done that, he puts the box on the shelf where he can get it later if we tell him to.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/set-variable-3.png" class="diagram"/>
+
+---
+
+### Next Concept: [Changing Variables](./variables-changing.md)

bootcamp_content/concepts/variables-introduction.md

@@ -0,0 +1,23 @@
+# Introduction to Variables
+
+Probably the most important thing to master in coding is variables. Most people know how to use variables but I don't think many have a good mental model that serves them well in the long term.
+
+We've already looked at Jiki in his factory. He has some shelves with machines on that he can use ("functions"):
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/functions-on-shelves.png" class="diagram"/>
+
+If we zoom out a bit, we can see he has a second set of shelves. On these shelves are boxes, which he can store things in.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/functions-and-variables-on-shelves.png" class="diagram"/>
+
+Each box has a label on it so that Jiki can find it later. And each box has **one** thing inside of it (in JikiScript, every box always has something inside it). The boxes can contain lots of different things - numbers, strings, and lots of other things that we’ll look at throughout this course.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/variable.png" class="diagram"/>
+
+When people talk about a computer’s “memory”, its these shelves that they’re talking about. The size of your computer's memory determines how many boxes you can hold on your shelves.
+
+Creating boxes, changing what’s in them, and using their contents, are three of the most common things you do when programming.
+
+---
+
+### Next Concept: [Creating Variables](./variables-creating.md)

bootcamp_content/concepts/variables-unique-names.md

@@ -0,0 +1,13 @@
+# Unique Variable Names
+
+The reason we put labels on the boxes is so that Jiki can find them later. But that means we can only use a label once. If you try and `set` two boxes with the same name, Jiki won't know which one to get.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/unique-variable-name.png" class="diagram"/>
+
+Similarly, you can't give a box a label if that label is already used by a machien (a function). If there's a machine on a shelf with a label, Jiki won't let you add a box with the same name.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/unique-function-name.png" class="diagram"/>
+
+---
+
+### Next Concept: [Using Variables](./variables-using.md)

bootcamp_content/concepts/variables-using.md

@@ -0,0 +1,22 @@
+# Using Variables
+
+Having variables isn't much use if we can't do something with them. And then main thing we do with variables is use them as inputs to functions.
+
+For example, rather than writing this:
+
+```
+fill_color_hex("blue")
+```
+
+we can create and use a variable instead.
+
+```
+set sky_color to "blue"
+fill_color_hex(sky_color)
+```
+
+1. The first line tells Jiki to create a box with the label `sky_color` and put the string `"blue"` in it.
+2. The second line tells Jiki to go get the contents of `sky_color` and use the fill_color_hex function with that as an input.
+
+<img src="https://assets.exercism.org/bootcamp/diagrams/using-variable-1.png" class="diagram"/>
+<img src="https://assets.exercism.org/bootcamp/diagrams/using-variable-2.png" class="diagram"/>

bootcamp_content/concepts/variables.md

@@ -0,0 +1,5 @@
+# Variables
+
+Functions are a key building block of programming. They are the boxes that Jiki can use to store information in.
+
+Use the links below to build a comprehensive understanding of how they work.