Move exercises.html to code/index.html, also add project file downloads

marijnh · marijnh · commit 28efac43da3b · 2014-07-23T16:06:21.000+02:00
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 /tex/*
 /html/[012]*.html
-/html/js/exercise_data.js
+/html/js/chapter_info.js
 /code/chapter/*
 /code/file_server.js
 /code/skillsharing.zip
diff --git a/02_program_structure.txt b/02_program_structure.txt
@@ -866,7 +866,7 @@ solve the exercise. If you run into problems, consider reading the
 hints (!html after the exercise!)(!tex at the link:solutions[end of the book]!).
 Full solutions to the exercises are not included in this
 book, but you can find them online at
-http://eloquentjavascript.net/exercises.html[_eloquentjavascript.net/exercises.html_].
+http://eloquentjavascript.net/code[_eloquentjavascript.net/code_].
 If you want to learn something from the exercises, I recommend looking
 at the solutions only after you've solved the exercise, or at least
 after you've attacked it long and hard enough to have a slight
diff --git a/04_data.txt b/04_data.txt
@@ -537,7 +537,7 @@ because the sums of rows or columns are not stored directly in our
 data structure.
 
 Jacques kept his journal for three months. The resulting data set is
-available in the coding sandbox for this chapter(!tex  (http://eloquentjavascript.net/exercises.html[_eloquentjavascript.net/exercises.html_])!),
+available in the coding sandbox for this chapter(!tex  (http://eloquentjavascript.net/code[_eloquentjavascript.net/code_])!),
 where it is stored
 in the `JOURNAL` variable, and in a downloadable
 http://eloquentjavascript.net/code/jacques_journal.js[file].
@@ -721,6 +721,8 @@ significant negative effect.
 
 Interesting. Let's try something.
 
+// include_code strip_log
+
 [source,javascript]
 ----
 for (var i = 0; i < JOURNAL.length; i++) {
@@ -937,7 +939,7 @@ argumentCounter("Straw man", "Tautology", "Ad hominem");
 // → You gave me 3 arguments.
 ----
 
-(((console.log function)))(((variadic function)))Some functions can
+(((console.log)))(((variadic function)))Some functions can
 take any number of arguments, like `console.log`. These typically
 loop over the values in their `arguments` object. They can be used to
 create very pleasant interfaces. For example, remember how we created 
diff --git a/Makefile b/Makefile
@@ -6,14 +6,14 @@ CHAPTERS := 00_intro 01_values 02_program_structure 03_functions 04_data 05_high
 
 .SECONDARY: $(foreach CHAP,$(CHAPTERS),tex/$(CHAP).db)
 
-html: $(foreach CHAP,$(CHAPTERS),html/$(CHAP).html) html/js/exercise_data.js code/skillsharing.zip code/solutions/20_4_a_public_space_on_the_web.zip
+html: $(foreach CHAP,$(CHAPTERS),html/$(CHAP).html) html/js/chapter_info.js code/skillsharing.zip code/solutions/20_4_a_public_space_on_the_web.zip
 
 html/%.html: %.txt asciidoc_html.conf
 	PATH=node_modules/codemirror/bin:$(PATH) asciidoc -f asciidoc_html.conf --backend=html5 -o $@ $<
 	node bin/build_code.js $<
 
-html/js/exercise_data.js: $(foreach CHAP,$(CHAPTERS),$(CHAP).txt) code/solutions/*
-	node bin/get_exercises.js > html/js/exercise_data.js
+html/js/chapter_info.js: $(foreach CHAP,$(CHAPTERS),$(CHAP).txt) code/solutions/* bin/chapter_info.js
+	node bin/chapter_info.js > html/js/chapter_info.js
 
 code/skillsharing.zip: html/21_skillsharing.html
 	rm -f $@
diff --git a/bin/chapter_info.js b/bin/chapter_info.js
@@ -13,15 +13,14 @@ fs.readdirSync(".").forEach(function(file) {
   if (!match) return;
   var text = fs.readFileSync(file, "utf8");
   var exerciseSection = text.indexOf("\n== Exercises ==\n");
-  if (exerciseSection < 0) return;
 
   var chapter = {number: +chapNum,
                  title: text.match(/\n= (.*?) =\n/)[1],
                  exercises: []};
   var includes = text.match(/\n:load_files: (.*)/);
   if (includes) chapter.include = JSON.parse(includes[1]);
 
-  var exerciseBlock = text.slice(exerciseSection);
+  var exerciseBlock = exerciseSection ? text.slice(exerciseSection) : "";
   var header = /\n=== (.*?) ===\n/g;
   var num = 1;
   while (match = header.exec(exerciseBlock)) {
@@ -59,46 +58,47 @@ fs.readdirSync(".").forEach(function(file) {
     ++num;
   }
 
-  if (chapter.exercises.length) output.push(chapter);
-});
+  var nodeInfo = "// Node exercises can not be ran in the browser,\n// but you can look at their solution here.\n";
+  if (chapter.number == 20) chapter.exercises = [
+    {name: "Content negotiation, again",
+     file: "code/solutions/20_1_content_negotiation_again.js",
+     number: 1,
+     type: "js",
+     code: nodeInfo,
+     solution: fs.readFileSync("code/solutions/20_1_content_negotiation_again.js", "utf8")
+    },
+    {name: "Fixing a leak",
+     file: "code/solutions/20_2_fixing_a_leak.js",
+     number: 2,
+     type: "js",
+     code: nodeInfo,
+     solution: fs.readFileSync("code/solutions/20_2_fixing_a_leak.js", "utf8")
+    },
+    {name: "Creating directories",
+     file: "code/solutions/20_3_creating_directories.js",
+     number: 3,
+     type: "js",
+     code: nodeInfo,
+     solution: fs.readFileSync("code/solutions/20_3_creating_directories.js", "utf8")
+    },
+    {name: "A public space on the web",
+     file: "code/solutions/20_4_a_public_space_on_the_web",
+     number: 4,
+     type: "js",
+     code: nodeInfo,
+     solution: "// This solutions consists of multiple files. Download it\n// though the link below.\n"
+    }
+  ];
 
-output.push({number: 20, title: "Node.js", exercises: [
-  {name: "Content negotiation, again",
-   file: "code/solutions/20_1_content_negotiation_again.js",
-   number: 1,
-   type: "js",
-   code: "// Node exercises can not be ran in the browser",
-   solution: fs.readFileSync("code/solutions/20_1_content_negotiation_again.js", "utf8")
-  },
-  {name: "Fixing a leak",
-   file: "code/solutions/20_2_fixing_a_leak.js",
-   number: 2,
-   type: "js",
-   code: "// Node exercises can not be ran in the browser",
-   solution: fs.readFileSync("code/solutions/20_2_fixing_a_leak.js", "utf8")
-  },
-  {name: "Creating directories",
-   file: "code/solutions/20_3_creating_directories.js",
-   number: 3,
-   type: "js",
-   code: "// Node exercises can not be ran in the browser",
-   solution: fs.readFileSync("code/solutions/20_3_creating_directories.js", "utf8")
-  },
-  {name: "A public space on the web",
-   file: "code/solutions/20_4_a_public_space_on_the_web",
-   number: 4,
-   type: "js",
-   code: "// Node exercises can not be ran in the browser\n\n// The solution for this exercise can be downloaded from:\n//\n// http://eloquentjavascript.net/code/solutions/20_4_a_public_space_on_the_web.zip",
-   solution: "// Node exercises can not be ran in the browser"
-  }
-]});
+  output.push(chapter);
+});
 
 if (allSolutions.length) {
   console.error("Solution files " + allSolutions + " were not used.");
   failed = true;
 }
 
 if (!failed)
-  console.log("var exerciseData = " + JSON.stringify(output, null, 2) + ";");
+  console.log("var chapterData = " + JSON.stringify(output, null, 2) + ";");
 else
   process.exit(1);
diff --git a/code/ancestry.js b/code/ancestry.js
diff --git a/code/game_levels.js b/code/game_levels.js
@@ -135,3 +135,6 @@ var GAME_LEVELS = [
    "                                                  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
    "                                                                                                              "]
 ];
+
+if (typeof module != "undefined" && module.exports)
+  module.exports = GAME_LEVELS;
diff --git a/code/index.html b/code/index.html
@@ -1,7 +1,8 @@
 <!doctype html>
 <head>
   <meta charset="utf-8">
-  <title>Eloquent JavaScript :: exercises</title>
+  <base href="..">
+  <title>Eloquent JavaScript :: Code Sandbox</title>
 
   <link rel=stylesheet href="js/node_modules/codemirror/lib/codemirror.css">
   <script src="js/node_modules/codemirror/lib/codemirror.js"></script>
@@ -23,19 +24,21 @@
   <script src="js/node_modules/acorn/util/walk.js"></script>
   <link rel=stylesheet href="css/ejs.css">
   <script src="js/sandbox.js"></script>
-  <script src="js/exercise_data.js"></script>
-  <script src="js/exercises.js"></script>
+  <script src="js/chapter_info.js"></script>
+  <script src="js/code.js"></script>
 </head>
 
 <article style="max-width: 50em;">
-  <h1>Exercises<div style="font-size: 70%">Eloquent JavaScript</div></h2>
+  <h1>Code Sandbox<div style="font-size: 70%">Eloquent JavaScript</div></h2>
 
-  <p>You can use this page to work on exercises when reading through a
-  non-interactive version of Eloquent JavaScript, and to see solution
-  code.</p>
+  <p>You can use this page to download source code and solutions to
+  exercises for the book Eloquent JavaScript, and to directly run code
+  in the context of chapters from that book, either to solve exercises
+  to to simply play around.</p>
 
   <p>
-    <select id="exercises"><option value="none">Select an exercise</option></select>
+    Chapter: <select id="chapters"></select>
+    <select id="per_chapter"></select>
     <button id="run">run code</button>
   </p>
 
@@ -44,9 +47,19 @@ <h1>Exercises<div style="font-size: 70%">Eloquent JavaScript</div></h2>
     <div class="sandbox-output" id="output"></div>
   </div>
 
-  <p>If you've solved the exercise and want to compare your code with
+  <div id="fileInfo">
+    These files contain this chapter’s project code:
+    <ul id="files" style="font-family: 'PT Mono', monospace; margin-top: 0"></ul>
+  </div>
+
+  <p id="exercise_info">If you've solved the exercise and want to compare your code with
   mine, or you <em>really</em> tried, but can't get your code to work,
-  you can <button id="solution" style="color: #c22">look at the
-  solution</button> (or <a id="download" href="javascript:alert('No exercise
-  selected')">download it</a>).</p>
+  you can <button id="solution" style="color: #c22; font-size: 16px">look at the
+  solution</button> (or <a id="download">download it</a>).</p>
+
+  <p id="box_info">
+    The base environment for this chapter (if any) is available in the
+    sandbox above, allowing you to run the chapter's examples by
+    simply pasting them into the editor.
+  </p>
 </article>
diff --git a/code/mountains.js b/code/mountains.js
@@ -7,3 +7,6 @@ var MOUNTAINS = [
   {name: "Denali", height: 6168, country: "United States"},
   {name: "Popocatepetl", height: 5465, country: "Mexico"}
 ];
+
+if (typeof module != "undefined" && module.exports)
+  module.exports = MOUNTAINS;
diff --git a/html/index.html b/html/index.html
@@ -76,7 +76,7 @@ <h3>(Part 3: Node)</h3>
   <h2>Other pages</h2>
 
   <ul class="links">
-    <li><a href="exercises.html">Exercise sandbox, with solutions</a></li>
+    <li><a href="code">Code sandbox and exercise solutions</a></li>
   </ul>
 
 </article>
diff --git a/html/js/code.js b/html/js/code.js
@@ -0,0 +1,148 @@
+addEventListener("load", function() {
+  var editor = CodeMirror.fromTextArea(document.querySelector("#editor"), {
+    mode: "javascript",
+    extraKeys: {
+      "Ctrl-Enter": runCode
+    },
+    matchBrackets: true,
+    lineNumbers: true
+  });
+  function guessType() {
+    return /^[\s\w]*</.test(editor.getValue()) ? "html" : "js";
+  }
+  var reGuess;
+  editor.on("change", function() {
+    clearTimeout(reGuess);
+    reGuess = setTimeout(function() {
+      if (context.type == null) {
+        var mode = guessType() == "html" ? "text/html" : "javascript";
+        if (mode != editor.getOption("mode"))
+          editor.setOption("mode", mode);
+      }
+    }, 500);
+  });
+
+  function opt(value, label) {
+    var node = document.createElement("option");
+    node.value = value;
+    node.textContent = label || value;
+    return node;
+  }
+
+  function getChapter(number) {
+    for (var i = 0; i < chapterData.length; i++)
+      if (chapterData[i].number == number)
+        return chapterData[i];
+  }
+
+  function getURL(url, callback) {
+    var req = new XMLHttpRequest();
+    req.open("GET", url, true);
+    req.addEventListener("load", function() {
+      if (req.status < 400)
+        callback(null, req.responseText);
+      else
+        callback(new Error("Request failed: " + req.statusText));
+    });
+    req.addEventListener("error", function() {
+      callback(new Error("Network error"));
+    });
+    req.send(null);
+  }
+
+  var per = document.querySelector("#per_chapter");
+  per.addEventListener("change", function() { selectContext(per.value); });
+  var fileList = document.querySelector("#files");
+  var fileInfo = document.querySelector("#fileInfo");
+
+  function selectChapter(number) {
+    per.textContent = "";
+    var chapter = getChapter(number);
+    if (chapter.exercises.length) {
+      per.appendChild(opt("box", "Select an exercise"));
+      chapter.exercises.forEach(function(exercise) {
+        per.appendChild(opt(chapter.number + "." + exercise.number));
+      });
+    } else {
+      per.appendChild(opt("box", "This chapter has no exercises"));
+    }
+    fileInfo.style.display = "none";
+    fileList.textContent = "";
+    if (chapter.include) chapter.include.forEach(function(file, i) {
+      if (!i) fileInfo.style.display = "";
+      var li = fileList.appendChild(document.createElement("li"));
+      var a = li.appendChild(document.createElement("a"));
+      a.href = file;
+      a.textContent = file.replace(/^code\//, "");
+    });
+    selectContext(per.value);
+  }
+
+  function findExercise(id) {
+    var parts = id.split(".");
+    var chapter = getChapter(parts[0]);
+    for (var i = 0; i < chapter.exercises.length; i++)
+      if (chapter.exercises[i].number == +parts[1])
+        return chapter.exercises[i];
+  }
+
+  var context = {include: []};
+
+  function selectContext(value) {
+    var chp = getChapter(chapters.value), visible;
+    if (value == "box") {
+      context = {include: chp.include};
+      editor.setValue("// Run code here in the context of Chapter " + chapters.value);
+      visible = "box";
+    } else {
+      var exercise = findExercise(value);
+      context = {include: chp.include,
+                 solution: exercise.solution};
+      editor.setValue(exercise.code);
+      visible = "exercise";
+      document.querySelector("#download").href = exercise.file;
+    }
+    ["box", "exercise"].forEach(function(id) {
+      document.querySelector("#" + id + "_info").style.display =
+        (id == visible ? "" : "none");
+    });
+  }
+
+  var outnode = document.querySelector(".sandbox-output");
+  var output = new SandBox.Output(outnode);
+
+  document.querySelector("#run").addEventListener("click", runCode);
+
+  var sandbox;
+  function runCode() {
+    if (sandbox)
+      sandbox.frame.parentNode.removeChild(sandbox.frame);
+    
+    var type = context.type || guessType();
+    sandbox = new SandBox({
+      loadFiles: context.include,
+      place: type == "html" &&
+        function(node) { outnode.parentNode.insertBefore(node, outnode); }
+    }, function(box) {
+      output.clear();
+      if (type == "html")
+        box.setHTML(editor.getValue(), output);
+      else
+        box.run(editor.getValue(), output);
+    });
+  }
+
+  document.querySelector("#solution").addEventListener("click", function() {
+    editor.setValue(context.solution);
+  });
+
+  var chapters = document.querySelector("#chapters");
+  chapterData.forEach(function(chapter) {
+    chapters.appendChild(opt(chapter.number, chapter.number + ". " + chapter.title));
+    chapter.exercises.forEach(function(exercise) {
+      exercise.chapter = chapter;
+    });
+  });
+  chapters.addEventListener("change", function() { selectChapter(chapters.value); });
+  selectChapter(chapters.value);
+});
diff --git a/html/js/exercises.js b/html/js/exercises.js
