Add download link and more text to exercise page

marijnh · marijnh · commit fbf985cbd9a2 · 2014-06-18T14:25:37.000+02:00
diff --git a/html/exercises.html b/html/exercises.html
@@ -32,14 +32,23 @@
 <article style="max-width: 50em;">
   <h1>Exercises<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>
     <select id="exercises"><option value="none">Select an exercise</option></select>
     <button id="run">run code</button>
-    <button id="solution">see solution</button>
   </p>
 
   <div class="editor-wrap">
     <textarea id="editor"></textarea>
     <div class="sandbox-output" id="output"></div>
   </div>
+
+  <p>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>
 </article>
diff --git a/html/js/exercises.js b/html/js/exercises.js
@@ -35,6 +35,7 @@ addEventListener("load", function() {
     }
   }
 
+  var downloadLink = document.querySelector("#download");
   var currentExercise = null;
   function selectExercise(id) {
     var exercise = findExercise(id);
@@ -44,6 +45,8 @@ addEventListener("load", function() {
       editor.setValue(exercise.code);
       editor.setOption("mode", exercise.type == "js" ? "javascript" : "text/html");
     });
+    downloadLink.href = exercise.file;    
+    downloadLink.download = "download";    
   }
 
   var outnode = document.querySelector(".sandbox-output");

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ addEventListener("load", function() {`
`35`	`35`	`}`
`36`	`36`	`}`
`37`	`37`
	`38`	`+ var downloadLink = document.querySelector("#download");`
`38`	`39`	`var currentExercise = null;`
`39`	`40`	`function selectExercise(id) {`
`40`	`41`	`var exercise = findExercise(id);`
`@@ -44,6 +45,8 @@ addEventListener("load", function() {`
`44`	`45`	`editor.setValue(exercise.code);`
`45`	`46`	`editor.setOption("mode", exercise.type == "js" ? "javascript" : "text/html");`
`46`	`47`	`});`
	`48`	`+ downloadLink.href = exercise.file;`
	`49`	`+ downloadLink.download = "download";`
`47`	`50`	`}`
`48`	`51`
`49`	`52`	`var outnode = document.querySelector(".sandbox-output");`