moving out outdated js docs

olddocs/js/lessons/bounce-image/challenges.md

@@ -0,0 +1,90 @@
+# bounce image challenges
+
+Coding challenges for the bounce image tutorial. #docs
+
+## Before we get started
+
+Complete the following guided tutorial:
+
+* [tutorial](/lessons/bounce-image/tutorial)
+
+At the end of the tutorial, click `keep editing`. Your code should look like this:
+
+```
+basic.forever(() => {
+    basic.showAnimation(`
+# . . . . . # . . . . . # . . . . . # . . . . . #
+# . . . . . # . . . . . # . . . . . # . . . . . #
+# . . . . . # . . . . . # . . . . . # . . . . . #
+# . . . . . # . . . . . # . . . . . # . . . . . #
+# . . . . . # . . . . . # . . . . . # . . . . . #
+`, 200)
+})
+```
+
+### Challenge 1
+
+### @video td/videos/bounce-image-1
+
+Now, let's add frames to reverse the animation so it looks like the bar is bouncing off the right edge of the display.
+
+```
+basic.forever(() => {
+    basic.showAnimation(`
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+`, 200) // ***
+})
+```
+
+* Run the code to see if it works as expected.
+
+### Challenge 2
+
+Let's add a condition for on shake!
+
+```
+basic.forever(() => {
+    basic.showAnimation(`
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+`, 200)
+})
+input.onGesture(Gesture.Shake, () => {
+}) // ***
+```
+
+**Challenge 3**
+
+### @video td/videos/bounce-image-2-3
+
+When the BBC micro:bit is shaken we want to show a new animation. Here is an example, but you can create your own. Be creative!
+
+```
+basic.forever(() => {
+    basic.showAnimation(`
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+# . . . . . # . . . . . # . . . . . # . . . . . # . . . # . . . # . . . # . . . # . . . .
+`, 200)
+})
+input.onGesture(Gesture.Shake, () => {
+    basic.showAnimation(`
+. . . . . . . . . . # # # # # . . . . . . . . . .
+. . . . . . # # # . # # # # # . # # # . . . . . .
+. . # . . . # # # . # # # # # . # # # . . . # . .
+. . . . . . # # # . # # # # # . # # # . . . . . .
+. . . . . . . . . . # # # # # . . . . . . . . . .
+`, 200) // ***
+})
+```
+
+* Run the code to see if it works as expected.

olddocs/js/lessons/bounce-image/quiz-answers.md

@@ -0,0 +1,60 @@
+# bounce image quiz answers
+
+scroll an image on the BBC micro:bit.
+
+This is the answer key for the [bounce image quiz](/lessons/bounce-image/quiz).
+
+## 1. What does it mean to 'add frames' ? 
+
+Adding frames modifies the animation by including more still images in each animation.
+
+## 2. Write the code that will display this animation.
+
+![](/static/mb/lessons/bounce-image-0.png)
+
+<br/>
+
+```
+basic.showAnimation(`
+# . . . .
+# . . . .
+# . . . .
+# . . . .
+# . . . .
+`, 400)
+```
+
+## 3. Write the code that will display this animation with two frames.
+
+![](/static/mb/lessons/bounce-image-1.png)
+
+<br/>
+
+```
+basic.showAnimation(`
+# . . . . . # . . .
+# . . . . . # . . .
+# . . . . . # . . .
+# . . . . . # . . .
+# . . . . . # . . .
+`, 400)
+```
+
+## 4. Write the code that will display this animation with three frames.
+
+![](/static/mb/lessons/bounce-image-2.png)
+
+<br/>
+
+```
+basic.showAnimation(`
+# . . . . . # . . . . . # . .
+# . . . . . # . . . . . # . .
+# . . . . . # . . . . . # . .
+# . . . . . # . . . . . # . .
+# . . . . . # . . . . . # . .
+`, 400)
+```
+
+<br/>
+

olddocs/js/lessons/bounce-image/quiz.md

@@ -0,0 +1,40 @@
+# bounce image quiz
+
+scroll an image on the BBC micro:bit.
+
+## Name
+
+## Directions
+
+Use this document to guide your work in the [bounce image tutorial](/lessons/bounce-image/tutorial) !
+
+Answer the questions while completing the tutorial. Pay attention to the dialogues!
+
+## 1. What does it mean to 'add frames' ? 
+
+<br/>
+
+<br/>
+
+## 2. Write the code that will display this animation.
+
+![](/static/mb/lessons/bounce-image-0.png)
+
+<br/>
+
+## 3. Write the code that will display this animation with two frames.
+
+![](/static/mb/lessons/bounce-image-1.png)
+
+<br/>
+
+<br/>
+
+## 4. Write the code that will display this animation with three frames.
+
+![](/static/mb/lessons/bounce-image-2.png)
+
+<br/>
+
+<br/>
+