--- a/playground/index.html	Mon Mar 03 11:29:07 2014 +0100
+++ b/playground/index.html	Mon Mar 03 12:05:10 2014 +0100
@@ -14,22 +14,22 @@
     <!-- Meta Tags -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-    
-    
+
+
     <!-- Style Sheets -->
     <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/bootstrap.css">
     <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/bootstrap-responsive.css">
     <link rel="stylesheet" type="text/css" href="../static/css/bootstrap/font-awesome.css">
-    
+
     <!-- CodeMirror -->
     <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/codemirror.min.css">
     <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/addon/lint/lint.min.css">
     <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/addon/hint/show-hint.min.css">
-    
+
     <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/theme/neat.min.css" id="theme-stylesheet">
     <link rel="stylesheet" type="text/css" href="./playground.css">
-    
-    
+
+
     <link rel="shortcut icon" href="../favicon.ico" />
   </head>
 
@@ -89,7 +89,7 @@
         is a work in progress.
       </p>
       <br/>
-      
+
       <div class="btn-group" data-toggle="buttons-radio">
         <button class="btn disabled btn-primary">Examples:</button>
         <button id="btn-person" class="btn button"><span>Person</span></button>
@@ -99,7 +99,7 @@
         <button id="btn-recipe" class="btn button"><span>Recipe</span></button>
         <button id="btn-library" class="btn button"><span>Library</span></button>
       </div>
-      
+
       <div class="pull-right">
         <button class="btn popover-info">
           <i class="icon-magic"></i> Shortcuts
@@ -125,11 +125,11 @@
           </table>
         </div>
       </div>
-      
+
       <br/><br/>
       <div class="container" id="markup-container">
         <div class="row">
-          <div id="markup-div" class="span6">
+          <div id="markup-div" class="span12">
             <h3>JSON-LD Input</h3>
             <textarea id="markup" class="compressed process span6 codemirror-input"
             placeholder="Enter your JSON-LD markup here..." rows="10"></textarea>
@@ -172,11 +172,11 @@
         </table>
       </div>
       <p id="processing-errors" class="text-error"></p>
-      
+
       <div id="output-container">
         <ul id="tabs" class="nav nav-tabs">
-          <li class="active"><a id="tab-compacted" href="#pane1" data-toggle="tab"><span>Compacted</span></a></li>
-          <li><a id="tab-expanded" href="#pane2" data-toggle="tab"><span>Expanded</span></a></li>
+          <li class="active"><a id="tab-expanded" href="#pane1" data-toggle="tab"><span>Expanded</span></a></li>
+          <li><a id="tab-compacted" href="#pane2" data-toggle="tab"><span>Compacted</span></a></li>
           <li><a id="tab-flattened" href="#pane3" data-toggle="tab"><span>Flattened</span></a></li>
           <li><a id="tab-framed" href="#pane4" data-toggle="tab"><span>Framed</span></a></li>
           <li><a id="tab-nquads" href="#pane5" data-toggle="tab"><span>N-Quads</span></a></li>
@@ -184,10 +184,10 @@
         </ul>
         <div class="tab-content">
           <div id="pane1" class="tab-pane active">
-            <textarea id="compacted" class="codemirror-output"></textarea>
+            <textarea id="expanded" class="codemirror-output"></textarea>
           </div>
           <div id="pane2" class="tab-pane">
-            <textarea id="expanded" class="codemirror-output"></textarea>
+            <textarea id="compacted" class="codemirror-output"></textarea>
           </div>
           <div id="pane3" class="tab-pane">
             <textarea id="flattened" class="codemirror-output"></textarea>
@@ -203,7 +203,7 @@
           </div>
         </div><!-- /.tab-content -->
       </div>
-      
+
       <hr>
       <div id="footer">
         <p id="copyright">
@@ -232,7 +232,7 @@
 
     <!-- script tags -->
     <script type="text/javascript" src="../static/js/bootstrap/bootstrap.js"></script>
-    
+
     <!-- codemirror -->
     <script src="./jsonlint.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/codemirror.min.js"></script>
@@ -246,8 +246,9 @@
     <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.22.0/mode/javascript/javascript.min.js"></script>
 
     <script src="./jsonld-hint.js"></script>
-    
+
     <script type="text/javascript">
+      $('#context-div').hide();
       $('#frame-div').hide();
       $('#markup,#context,#frame').bind('keyup', function() {
         $('.btn-group > .btn').each(function () {
@@ -255,9 +256,9 @@
         });
       });
     </script>
-    
+
     <script type="text/javascript" src="playground.js"></script>
     <script type="text/javascript" src="playground-examples.js"></script>
-    
+
   </body>
 </html>

--- a/playground/playground.js	Mon Mar 03 11:29:07 2014 +0100
+++ b/playground/playground.js	Mon Mar 03 12:05:10 2014 +0100
@@ -4,6 +4,8 @@
  *
  * @author Manu Sporny <msporny@digitalbazaar.com>
  * @author Dave Longley <dlongley@digitalbazaar.com>
+ * @author Nicholas Bollweg
+ * @author Markus Lanthaler
  */
 (function($) {
   // create the playground instance if it doesn't already exist
@@ -26,8 +28,8 @@
     context: null
   };
 
-  // set the active tab to the compacted view
-  playground.activeTab = 'tab-compacted';
+  // set the active tab to the expanded view
+  playground.activeTab = 'tab-expanded';
 
   // map of original to modifed contexts
   playground.contextMap = {