--- a/css/tutorial.css	Mon Apr 20 13:38:36 2009 -0700
+++ b/css/tutorial.css	Mon Apr 20 14:30:27 2009 -0700
@@ -30,3 +30,18 @@
     padding-left: 2em;
     color: gray;
 }
+
+.try-code {
+    border: 1px dotted black;
+}
+
+.intra-wiki {
+    color: black;
+    text-decoration: none;
+    border-bottom: solid 1px gray;
+}
+
+a {
+    color: black;
+    text-decoration: underline;
+}

--- a/js/tutorial.js	Mon Apr 20 13:38:36 2009 -0700
+++ b/js/tutorial.js	Mon Apr 20 14:30:27 2009 -0700
@@ -15,18 +15,34 @@
     var oneCodeCharacter = $('<span class="example-code">M</span>');
     $(document.body).append(oneCodeCharacter);
     var charWidth = oneCodeCharacter.width();
+    var charHeight = oneCodeCharacter.height();
+    var columnWidth = charWidth * CHARS_PER_ROW;
     $(oneCodeCharacter).remove();
 
     // Set the width of the content to be the maximum number of
     // characters of code that can fit on a line.
-    $('#content').css({width: charWidth * CHARS_PER_ROW});
+    $('#content').width(columnWidth);
+
+    // Set up the code editor.
+    $('.try-code').width(columnWidth);
+    var tryCodeLines = $('.try-code').text().split('\n').length + 1;
+    $('.try-code').height(charHeight * tryCodeLines);
+
+    function executeTryCode() {
+      $('#try-my-view').text('');
+      var code = $('.try-code').val();
+      eval(code);
+      eval('tryMyView();');
+    }
+
+    $('.try-code').blur(executeTryCode);
     $('#content').fadeIn();
 
     // Iterate through all the code snippets and trim them.
     var allCode = '';
     $('.example-code').each(
       function() {
-        var code = $(this).text();
+        var code = $(this).val() || $(this).text();
         allCode += code;
         $(this).text(jQuery.trim(code));
       });

--- a/tutorial.html	Mon Apr 20 13:38:36 2009 -0700
+++ b/tutorial.html	Mon Apr 20 14:30:27 2009 -0700
@@ -86,6 +86,7 @@
     },
     finished: function(result) {
       displayInElement(result, 'author-titles-view');
+      tryMyView();
     }
   });
 }
@@ -96,6 +97,39 @@
 <div class="example-output" id="author-titles-view">
 </div>
 
+<h1>Now You Try!</h1>
+
+<p>To get a better feel for how MapReduce works, you can use the text
+field below to try making your own view. Just press the tab key when
+you're done making changes to recompute the view.</p>
+
+<textarea class="example-code try-code">
+function tryMyView() {
+  blogDb.view({
+    map: function(doc, emit) {
+      emit(doc.author, doc.title);
+    },
+    reduce: function(keys, values) {
+      return values;
+    },
+    finished: function(result) {
+      displayInElement(result, 'try-my-view');
+    }
+  });
+}
+</textarea>
+
+<p>Here's the output to the above view:</p>
+
+<div class="example-output" id="try-my-view"></div>
+
+<h1>Where To Go From Here</h1>
+
+<p>There's features in the API that aren't covered here, so check out
+the check out the <a class="intra-wiki"
+href="index.html#js/tests.js">annotated source code for the test
+suite</a> for more sample code.</p>
+
 <script src="js/ext/jquery.js"></script>
 <script src="js/browser-couch.js"></script>
 <script src="js/tutorial.js"></script>