updated lessons

docs/lessons/offset-image/activity.md

@@ -0,0 +1,94 @@
+# offset image challenges
+
+Coding challenges for the offset image tutorial. #docs
+
+## Before we get started
+
+Complete the following exercise. Your code should look like this:
+
+```blocks
+offset = 0
+basic.forever(() => {
+    if (offset == -4) {
+        basic.showString("Push button A", 150)
+    }
+    images.createImage(`
+. . # . .
+. . # . .
+. . # . .
+. # # # .
+. . # . .
+`).showImage(offset)
+})
+input.onButtonPressed(Button.A, () => {
+    offset = offset + 1
+})
+```
+
+### Challenge 1
+
+Create a condition for if button `B` is pressed. We want the image to move to the left when button `B` is pressed.
+
+```
+offset = 0
+basic.forever(() => {
+    if (offset == -4) {
+        basic.showString("Push button A", 150)
+    }
+    images.createImage(`
+. . # . .
+. . # . .
+. . # . .
+. # # # .
+. . # . .
+`).showImage(offset)
+})
+input.onButtonPressed(Button.A, () => {
+    offset = offset + 1
+})
+input.onButtonPressed(Button.B, () => {
+    offset = offset - 1 // ***
+}) // ***
+```
+
+* Run the code to see if it works as expected.
+
+### Challenge 2
+
+### @video td/videos/offset-image-2
+
+Now we want to make sure that the button does not go off the screen to the right. Add a new line that checks to see if offset = 5 after button `A` is pressed.
+
+If `offset = 5` then prompt the user to move the image to the left by displaying the text: "Push button B".
+
+```
+offset = 0
+basic.forever(() => {
+    if (offset == -4) {
+        basic.showString("Push button A", 150)
+    }
+    if (offset == 5) {
+        basic.showString("Press Button B", 150) // ***
+    }
+    images.createImage(`
+. . # . .
+. . # . .
+. . # . .
+. # # # .
+. . # . .
+`).showImage(offset)
+})
+input.onButtonPressed(Button.A, () => {
+    offset = offset + 1
+})
+input.onButtonPressed(Button.B, () => {
+    offset = offset - 1
+})
+```
+
+* Run the code to see if it works as expected.
+
+**Challenge 3**
+
+Now make sure the image does not go off the left side and if it does, prompt the user to push button `A`.
+

docs/lessons/offset-image/quiz-answers.md

@@ -0,0 +1,48 @@
+# offset image quiz answers
+
+shift an image horizontally across the display with offset #offset #screen  #variables #docs
+
+This is the answer key for the [offset image quiz](/microbit/lessons/offset-image/quiz).
+
+## 1. What is a 'if, then, else statement' ? 
+
+<br/>
+
+An if-then statement will run a block of code if the condition specified is true. The statement will run the "else" block of code if that condition is false.
+
+## 2. Consider the message
+
+Write the line of code that that will create the message "Push button A" (Hint: This message appears `if` the offset is equal -4 then the BBC micro:bit will state "Push Button A").
+
+<br/>
+
+```
+if (offset == -4) {
+    basic.showString("Push Button A", 150)
+}
+```
+
+## 3. Consider the following image
+
+![](/static/mb/lessons/offset-image-0.png)
+
+When with this image be displayed?
+
+<br/>
+
+When the offset is NOT equal to -4 then the BBC micro:bit will show the image above.
+
+## 4. Consider the following image
+
+![](/static/mb/lessons/offset-image-1.png)
+
+Write the two lines of code that cause the `variable` offset to increase by one when button `A` is pressed.
+
+<br/>
+
+```
+input.onButtonPressed(Button.A, () => {
+    offset = offset + 1
+})
+```
+

docs/lessons/offset-image/quiz.md

@@ -0,0 +1,36 @@
+# offset image quiz
+
+shift an image horizontally across the display with offset #offset #screen  #variables #docs
+
+## Name
+
+## Directions
+
+Use this activity document to guide your work in the [offset image tutorial](/microbit/lessons/offset-image/tutorial).
+
+Answer the questions while completing the tutorial. Pay attention to the dialogues!
+
+## 1. What is an 'if, then, else statement' ? 
+
+<br/>
+
+## 2. Write the line condition that if true, will display the message "Push button A". This message appears if the offset is equal -4 then the BBC micro:bit will state "Push Button A".
+
+<br/>
+
+<br/>
+
+## 3. Write the one line of code to show this image
+
+![](/static/mb/lessons/offset-image-0.png)
+
+<br/>
+
+<br/>
+
+## 4. Write the two lines of code that trigger the variable offset to increase by one.
+
+![](/static/mb/lessons/offset-image-1.png)
+
+<br/>
+