level 2

build/bundle.js

@@ -4632,7 +4632,7 @@ var Sandbox = Backbone.View.extend({
     var whenLevelOpen = Q.defer();
     var Level = require('../level').Level;
 
-    var currentLevel = new Level({
+    this.currentLevel = new Level({
       level: levelJSON,
       deferred: whenLevelOpen,
       command: command
@@ -13364,7 +13364,7 @@ var LevelBuilder = Level.extend({
 
   editDialog: function(command, deferred) {
     var whenDoneEditing = Q.defer();
-    new MultiViewBuilder({
+    this.currentBuilder = new MultiViewBuilder({
       multiViewJSON: this.startDialog,
       deferred: whenDoneEditing
     });
@@ -16733,7 +16733,8 @@ require.define("/src/levels/index.js",function(require,module,exports,__dirname,
 // a sequence proceed in the order listed here
 exports.levelSequences = {
   intro: [
-    require('../../levels/intro/1').level
+    require('../../levels/intro/1').level,
+    require('../../levels/intro/2').level
   ],
   rebase: [
     require('../../levels/rebase/1').level
@@ -16812,6 +16813,92 @@ require.define("/src/levels/intro/1.js",function(require,module,exports,__dirnam
 
 });
 
+require.define("/src/levels/intro/2.js",function(require,module,exports,__dirname,__filename,process,global){exports.level = {
+  "goalTreeString": "{\"branches\":{\"master\":{\"target\":\"C1\",\"id\":\"master\"},\"bugFix\":{\"target\":\"C1\",\"id\":\"bugFix\"}},\"commits\":{\"C0\":{\"parents\":[],\"id\":\"C0\",\"rootCommit\":true},\"C1\":{\"parents\":[\"C0\"],\"id\":\"C1\"}},\"HEAD\":{\"target\":\"bugFix\",\"id\":\"HEAD\"}}",
+  "solutionCommand": "git branch bugFix;git checkout bugFix",
+  "hint": "Make a new branch with \"git branch [name]\" and check it out with \"git checkout [name]\"",
+  "name": "Branching in Git",
+  "startDialog": {
+    "childViews": [
+      {
+        "type": "ModalAlert",
+        "options": {
+          "markdowns": [
+            "## Git Branches",
+            "",
+            "Branches in Git are incredibly lightweight as well. They are simply references to a specific commit -- nothing more. This is why many Git enthusiasts chant the mantra:",
+            "",
+            "```",
+            "branch early, and branch often",
+            "```",
+            "",
+            "Because there is no storage / memory overhead with making many branches, it's easier to logically divide up your work than have big beefy branches.",
+            "",
+            "When we start mixing branches and commits, we will see how these two features combine. For now though, just remember that a branch essentially says \"I want to include the work of this commit and all parent commits.\""
+          ]
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's see what branches look like in practice.",
+            "",
+            "Here we will check out a new branch named `newImage`"
+          ],
+          "afterMarkdowns": [
+            "There, that's all there is to branching! The branch `newImage` now refers to commit `C1`"
+          ],
+          "command": "git branch newImage",
+          "beforeCommand": ""
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's try to put some work on this new branch. Hit the button below"
+          ],
+          "afterMarkdowns": [
+            "Oh no! The `master` branch moved but the `newImage` branch didn't! That's because we weren't \"on\" the new branch, which is why the asterisk (*) was on `master`"
+          ],
+          "command": "git commit",
+          "beforeCommand": "git branch newImage"
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's tell git we want to checkout the branch with",
+            "",
+            "```",
+            "git checkout [name]",
+            "```",
+            "",
+            "This will put us on the new branch before committing our changes"
+          ],
+          "afterMarkdowns": [
+            "There we go! Our changes were recorded on the new branch"
+          ],
+          "command": "git checkout newImage; git commit",
+          "beforeCommand": "git branch newImage"
+        }
+      },
+      {
+        "type": "ModalAlert",
+        "options": {
+          "markdowns": [
+            "Ok! You are all ready to get branching. Once this window closes,",
+            "make a new branch named `bugFix` and switch to that branch"
+          ]
+        }
+      },
+    ]
+  }
+};
+});
+
 require.define("/src/levels/rebase/1.js",function(require,module,exports,__dirname,__filename,process,global){exports.level = {
   name: 'Introduction #1',
   description: 'Oh wut?',
@@ -20464,7 +20551,7 @@ var LevelBuilder = Level.extend({
 
   editDialog: function(command, deferred) {
     var whenDoneEditing = Q.defer();
-    new MultiViewBuilder({
+    this.currentBuilder = new MultiViewBuilder({
       multiViewJSON: this.startDialog,
       deferred: whenDoneEditing
     });
@@ -21361,7 +21448,7 @@ var Sandbox = Backbone.View.extend({
     var whenLevelOpen = Q.defer();
     var Level = require('../level').Level;
 
-    var currentLevel = new Level({
+    this.currentLevel = new Level({
       level: levelJSON,
       deferred: whenLevelOpen,
       command: command
@@ -27196,7 +27283,8 @@ require.define("/src/levels/index.js",function(require,module,exports,__dirname,
 // a sequence proceed in the order listed here
 exports.levelSequences = {
   intro: [
-    require('../../levels/intro/1').level
+    require('../../levels/intro/1').level,
+    require('../../levels/intro/2').level
   ],
   rebase: [
     require('../../levels/rebase/1').level
@@ -27277,6 +27365,93 @@ require.define("/src/levels/intro/1.js",function(require,module,exports,__dirnam
 });
 require("/src/levels/intro/1.js");
 
+require.define("/src/levels/intro/2.js",function(require,module,exports,__dirname,__filename,process,global){exports.level = {
+  "goalTreeString": "{\"branches\":{\"master\":{\"target\":\"C1\",\"id\":\"master\"},\"bugFix\":{\"target\":\"C1\",\"id\":\"bugFix\"}},\"commits\":{\"C0\":{\"parents\":[],\"id\":\"C0\",\"rootCommit\":true},\"C1\":{\"parents\":[\"C0\"],\"id\":\"C1\"}},\"HEAD\":{\"target\":\"bugFix\",\"id\":\"HEAD\"}}",
+  "solutionCommand": "git branch bugFix;git checkout bugFix",
+  "hint": "Make a new branch with \"git branch [name]\" and check it out with \"git checkout [name]\"",
+  "name": "Branching in Git",
+  "startDialog": {
+    "childViews": [
+      {
+        "type": "ModalAlert",
+        "options": {
+          "markdowns": [
+            "## Git Branches",
+            "",
+            "Branches in Git are incredibly lightweight as well. They are simply references to a specific commit -- nothing more. This is why many Git enthusiasts chant the mantra:",
+            "",
+            "```",
+            "branch early, and branch often",
+            "```",
+            "",
+            "Because there is no storage / memory overhead with making many branches, it's easier to logically divide up your work than have big beefy branches.",
+            "",
+            "When we start mixing branches and commits, we will see how these two features combine. For now though, just remember that a branch essentially says \"I want to include the work of this commit and all parent commits.\""
+          ]
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's see what branches look like in practice.",
+            "",
+            "Here we will check out a new branch named `newImage`"
+          ],
+          "afterMarkdowns": [
+            "There, that's all there is to branching! The branch `newImage` now refers to commit `C1`"
+          ],
+          "command": "git branch newImage",
+          "beforeCommand": ""
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's try to put some work on this new branch. Hit the button below"
+          ],
+          "afterMarkdowns": [
+            "Oh no! The `master` branch moved but the `newImage` branch didn't! That's because we weren't \"on\" the new branch, which is why the asterisk (*) was on `master`"
+          ],
+          "command": "git commit",
+          "beforeCommand": "git branch newImage"
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's tell git we want to checkout the branch with",
+            "",
+            "```",
+            "git checkout [name]",
+            "```",
+            "",
+            "This will put us on the new branch before committing our changes"
+          ],
+          "afterMarkdowns": [
+            "There we go! Our changes were recorded on the new branch"
+          ],
+          "command": "git checkout newImage; git commit",
+          "beforeCommand": "git branch newImage"
+        }
+      },
+      {
+        "type": "ModalAlert",
+        "options": {
+          "markdowns": [
+            "Ok! You are all ready to get branching. Once this window closes,",
+            "make a new branch named `bugFix` and switch to that branch"
+          ]
+        }
+      },
+    ]
+  }
+};
+});
+require("/src/levels/intro/2.js");
+
 require.define("/src/levels/rebase/1.js",function(require,module,exports,__dirname,__filename,process,global){exports.level = {
   name: 'Introduction #1',
   description: 'Oh wut?',

src/js/level/builder.js

@@ -217,7 +217,7 @@ var LevelBuilder = Level.extend({
 
   editDialog: function(command, deferred) {
     var whenDoneEditing = Q.defer();
-    new MultiViewBuilder({
+    this.currentBuilder = new MultiViewBuilder({
       multiViewJSON: this.startDialog,
       deferred: whenDoneEditing
     });

src/js/level/sandbox.js

@@ -139,7 +139,7 @@ var Sandbox = Backbone.View.extend({
     var whenLevelOpen = Q.defer();
     var Level = require('../level').Level;
 
-    var currentLevel = new Level({
+    this.currentLevel = new Level({
       level: levelJSON,
       deferred: whenLevelOpen,
       command: command

src/levels/index.js

@@ -2,7 +2,8 @@
 // a sequence proceed in the order listed here
 exports.levelSequences = {
   intro: [
-    require('../../levels/intro/1').level
+    require('../../levels/intro/1').level,
+    require('../../levels/intro/2').level
   ],
   rebase: [
     require('../../levels/rebase/1').level

src/levels/intro/2.js

@@ -0,0 +1,84 @@
+exports.level = {
+  "goalTreeString": "{\"branches\":{\"master\":{\"target\":\"C1\",\"id\":\"master\"},\"bugFix\":{\"target\":\"C1\",\"id\":\"bugFix\"}},\"commits\":{\"C0\":{\"parents\":[],\"id\":\"C0\",\"rootCommit\":true},\"C1\":{\"parents\":[\"C0\"],\"id\":\"C1\"}},\"HEAD\":{\"target\":\"bugFix\",\"id\":\"HEAD\"}}",
+  "solutionCommand": "git branch bugFix;git checkout bugFix",
+  "hint": "Make a new branch with \"git branch [name]\" and check it out with \"git checkout [name]\"",
+  "name": "Branching in Git",
+  "startDialog": {
+    "childViews": [
+      {
+        "type": "ModalAlert",
+        "options": {
+          "markdowns": [
+            "## Git Branches",
+            "",
+            "Branches in Git are incredibly lightweight as well. They are simply references to a specific commit -- nothing more. This is why many Git enthusiasts chant the mantra:",
+            "",
+            "```",
+            "branch early, and branch often",
+            "```",
+            "",
+            "Because there is no storage / memory overhead with making many branches, it's easier to logically divide up your work than have big beefy branches.",
+            "",
+            "When we start mixing branches and commits, we will see how these two features combine. For now though, just remember that a branch essentially says \"I want to include the work of this commit and all parent commits.\""
+          ]
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's see what branches look like in practice.",
+            "",
+            "Here we will check out a new branch named `newImage`"
+          ],
+          "afterMarkdowns": [
+            "There, that's all there is to branching! The branch `newImage` now refers to commit `C1`"
+          ],
+          "command": "git branch newImage",
+          "beforeCommand": ""
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's try to put some work on this new branch. Hit the button below"
+          ],
+          "afterMarkdowns": [
+            "Oh no! The `master` branch moved but the `newImage` branch didn't! That's because we weren't \"on\" the new branch, which is why the asterisk (*) was on `master`"
+          ],
+          "command": "git commit",
+          "beforeCommand": "git branch newImage"
+        }
+      },
+      {
+        "type": "GitDemonstrationView",
+        "options": {
+          "beforeMarkdowns": [
+            "Let's tell git we want to checkout the branch with",
+            "",
+            "```",
+            "git checkout [name]",
+            "```",
+            "",
+            "This will put us on the new branch before committing our changes"
+          ],
+          "afterMarkdowns": [
+            "There we go! Our changes were recorded on the new branch"
+          ],
+          "command": "git checkout newImage; git commit",
+          "beforeCommand": "git branch newImage"
+        }
+      },
+      {
+        "type": "ModalAlert",
+        "options": {
+          "markdowns": [
+            "Ok! You are all ready to get branching. Once this window closes,",
+            "make a new branch named `bugFix` and switch to that branch"
+          ]
+        }
+      },
+    ]
+  }
+};

src/style/main.css

@@ -26,6 +26,7 @@ code {
 
 p {
   word-wrap: break-word;
+  line-height: 26px;
 }
 
 .textAlignCenter {