feat: add ability to view solutions in lessons (#202)

* feat: add solution to Basics tutorials
* fix: console error
* feat: add solution to blog lessons
* tweak lesson wording
* add instructions for solution code
* chore: switch _solution to solution
* fix: typo

Author: fsdiogo

README.md

@@ -153,6 +153,20 @@ Remember that you can add comments to your default code to orient the user, such
 // your code goes here
 ```
 
+#### Provide the simplest solution to your exercise
+
+`solution` is a string property. The value you set for `solution` in your Vue
+file will be used to populate the code editor if the user clicks the "View
+Solution" option. (We hope you'll have provided enough clues that they won't need
+to do this!)
+
+Be sure to test your solution code. If the user clicks "View Solution" and then
+"Submit", they should see your success message.
+
+There's almost always more than one way to solve a coding challenge. Although your
+validation code (see below) should allow all reasonable solutions to pass, the
+`solution` code you provide should be the most straightforward option which
+requires the least thorough understanding of JavaScript.
 
 #### Validate the user's submitted code
 
@@ -189,7 +203,10 @@ const validate = async (result, ipfs) => {
 ```
 Be sure to include conditionals that will catch common mistakes and provide useful clues.
 
-If the object returned by your `validate` function the has the property `fail`, the message string you've provided will be shown highlighted in red, and the user will have the opportunity to update and resubmit their code. If it has the property `success`, the user will se the success message highlighted in green, and the "Submit" button will change into a "Next" button allowing them to advance to the next lesson.
+If the object returned by your `validate` function the has the property `fail`, the message string you've provided will be shown highlighted in red, and the user will have the opportunity to update and resubmit their code. If it has the property `success`, the user will see the success message highlighted in green, and the "Submit" button will change into a "Next" button allowing them to advance to the next lesson.
+
+If this is the last lesson in your tutorial, the user will see a "More Tutorials" button instead of a "Next" button. Please create a success message for your last lesson that notes that the user has completed the whole tutorial. For example, `Great job! You've completed this series of lessons!`)
+
 
 ##### Override external error messages (optional)
 

src/components/Lesson.vue

@@ -63,7 +63,7 @@
                   <label for="add-files" class="flex items-center h4 pointer">
                     <svg viewBox="0 0 100 100" class="fill-aqua" height="60px" alt="Add"><path d="M71.13 28.87a29.88 29.88 0 1 0 0 42.26 29.86 29.86 0 0 0 0-42.26zm-18.39 37.6h-5.48V52.74H33.53v-5.48h13.73V33.53h5.48v13.73h13.73v5.48H52.74z"></path></svg>
                     <div class="f5 charcoal">
-                        <p><strong>Drop one or more files here or click to select.</strong> Folder upload is not supported, but you may select multiple files using Ctrl+Click or Command+Click.</p>
+                      <p><strong>Drop one or more files here or click to select.</strong> Folder upload is not supported, but you may select multiple files using Ctrl+Click or Command+Click.</p>
                     </div>
                   </label>
                 </div>
@@ -82,10 +82,11 @@
             </div>
           </div>
         </div>
-        <div>
-          <span v-if="cachedCode" v-on:click="resetCode" class="textLink fr pb1">Reset Code</span>
+        <div class="mb2">
+          <span v-if="solution" @click="viewSolution" class="ml1 fl textLink">View Solution</span>
+          <span v-if="cachedCode" @click="resetCode" class="mr1 fr textLink">Reset Code</span>
         </div>
-        <div class="bg-white flex-auto" style='height:100%;'>
+        <div class="h-100 flex-auto bg-white">
           <MonacoEditor
             class="editor"
             srcPath="."
@@ -240,6 +241,7 @@ export default {
       concepts: self.$attrs.concepts,
       cachedCode: !!localStorage['cached' + self.$route.path],
       code: localStorage[self.cacheKey] || self.$attrs.code || self.defaultCode,
+      solution: self.$attrs.solution,
       overrideErrors: self.$attrs.overrideErrors,
       isFileLesson: self.isFileLesson,
       parsedText: marked(self.$attrs.text),
@@ -368,10 +370,17 @@ export default {
       // this ^ triggers onCodeChange which will clear cache
       this.editor.setValue(this.code)
       this.clearPassed()
-      if (this.output.test.log) {
+      if (this.output.test && this.output.test.log) {
         delete this.output.test.log
       }
     },
+    viewSolution: function () {
+      // TRACK? User chose to view solution
+      this.editor.setValue(this.$attrs.solution)
+      if (this.output.test) {
+        delete this.output.test
+      }
+    },
     resetFileUpload: function () {
       this.uploadedFiles = false
       this.dragging = false

src/tutorials/Basics/01.vue

@@ -4,6 +4,7 @@
     :validate="validate"
     :exercise="exercise"
     :concepts="concepts"
+    :solution="solution"
     lessonTitle="Create a node and return a Content Identifier (CID)">
   </Lesson>
 </template>
@@ -36,12 +37,22 @@ const validate = async (result, ipfs) => {
   }
 }
 
+const solution = `/* globals ipfs */
+
+const run = async () => {
+  let cid = await ipfs.dag.put({ test: 1 })
+  return cid
+}
+
+return run
+`
+
 export default {
   components: {
     Lesson
   },
   data: () => {
-    return { text, validate, exercise, concepts }
+    return { text, validate, exercise, concepts, solution }
   }
 }
 </script>

src/tutorials/Basics/02-exercise.md

@@ -1,3 +1,3 @@
-Create a named link called `bar` that points to the node we created in the first the lesson. Put it into IPFS and return its CID.
+Create a named link called `bar` that points to the node we created in the first lesson. Put it into IPFS and return its CID.
 
 The editor is pre-populated with the code to create the node we're linking to.

src/tutorials/Basics/02.vue

@@ -6,6 +6,7 @@
     :modules="modules"
     :exercise="exercise"
     :concepts="concepts"
+    :solution="solution"
     lessonTitle="Create a new node that's linked to an old one">
   </Lesson>
 </template>
@@ -17,7 +18,7 @@ import concepts from './02-concepts.md'
 import exercise from './02-exercise.md'
 import CID from 'cids'
 
-let code = `/* globals ipfs */
+const code = `/* globals ipfs */
 
 const run = async () => {
   let cid = await ipfs.dag.put({ test: 1 })
@@ -48,14 +49,25 @@ const validate = async (result, ipfs) => {
   }
 }
 
+const solution = `/* globals ipfs */
+
+const run = async () => {
+  let cid = await ipfs.dag.put({ test: 1 })
+  let cid2 = await ipfs.dag.put({ bar: cid })
+  return cid2
+}
+
+return run
+`
+
 const modules = { cids: require('cids') }
 
 export default {
   components: {
     Lesson
   },
   data: () => {
-    return { code, text, validate, modules, exercise, concepts }
+    return { code, text, validate, modules, exercise, concepts, solution }
   }
 }
 </script>

src/tutorials/Basics/03.vue

@@ -5,6 +5,7 @@
     :validate="validate"
     :modules="modules"
     :exercise="exercise"
+    :solution="solution"
     lessonTitle="Read nested data using links">
   </Lesson>
 </template>
@@ -14,12 +15,12 @@ import Lesson from '../../components/Lesson'
 import text from './03.md'
 import exercise from './03-exercise.md'
 
-let code = `/* globals ipfs */
+const code = `/* globals ipfs */
 
 const run = async () => {
   let cid = await ipfs.dag.put({ test: 1 })
   let cid2 = await ipfs.dag.put({ bar: cid })
-  /* your code goes here */
+  // your code goes here
 }
 
 return run
@@ -43,14 +44,26 @@ const validate = async (result, ipfs) => {
   }
 }
 
+const solution = `/* globals ipfs */
+
+const run = async () => {
+  let cid = await ipfs.dag.put({ test: 1 })
+  let cid2 = await ipfs.dag.put({ bar: cid })
+  let cid3 = await ipfs.dag.get(cid2, '/bar/test')
+  return cid3.value
+}
+
+return run
+`
+
 const modules = { cids: require('cids') }
 
 export default {
   components: {
     Lesson
   },
   data: () => {
-    return { code, text, validate, modules, exercise }
+    return { code, text, validate, modules, exercise, solution }
   }
 }
 </script>

src/tutorials/Blog/01.vue

@@ -4,6 +4,7 @@
     :code="code"
     :validate="validate"
     :exercise="exercise"
+    :solution="solution"
     lessonTitle="Link an author to a blog post using its CID" />
 </template>
 
@@ -31,29 +32,6 @@ const run = async () => {
 return run
 `
 
-// eslint-disable-next-line no-unused-vars
-const _solution = `
-/* globals ipfs */
-
-const run = async () => {
-  const natCid = await ipfs.dag.put({ author: "Nat" })
-  const samCid = await ipfs.dag.put({ author: "Sam" })
-
-  const treePostCid = await ipfs.dag.put({
-    content: "trees",
-    author: samCid
-  })
-  const computerPostCid = await ipfs.dag.put({
-    content: "computers",
-    author: natCid
-  })
-
-  return [treePostCid, computerPostCid]
-}
-
-return run
-`
-
 const validate = async (result, ipfs) => {
   if (!result) {
     return { fail: 'You forgot to return a result :)' }
@@ -99,12 +77,33 @@ const validate = async (result, ipfs) => {
   }
 }
 
+const solution = `/* globals ipfs */
+
+const run = async () => {
+  const natCid = await ipfs.dag.put({ author: "Nat" })
+  const samCid = await ipfs.dag.put({ author: "Sam" })
+
+  const treePostCid = await ipfs.dag.put({
+    content: "trees",
+    author: samCid
+  })
+  const computerPostCid = await ipfs.dag.put({
+    content: "computers",
+    author: natCid
+  })
+
+  return [treePostCid, computerPostCid]
+}
+
+return run
+`
+
 export default {
   components: {
     Lesson
   },
   data: () => {
-    return { code, text, validate, exercise }
+    return { code, text, validate, exercise, solution }
   }
 }
 </script>

src/tutorials/Blog/02-exercise.md

@@ -1 +1 @@
-Add a new field called `tags` whose value is an array of tags. Use the tags `outdoor` and `hobby` for the blog post about trees. The blog post about computers has only a single tag called `hobby`.
+To each post, add a new field called `tags` whose value is an array of tags. Use the tags `outdoor` and `hobby` for the blog post about trees. Give the blog post about computers a single tag called `hobby`.

src/tutorials/Blog/02.vue

@@ -4,6 +4,7 @@
     :code="code"
     :validate="validate"
     :exercise="exercise"
+    :solution="solution"
     lessonTitle="Update posts with tags and watch their CIDs change" />
 </template>
 
@@ -37,31 +38,6 @@ const run = async () => {
 
 return run`
 
-// eslint-disable-next-line no-unused-vars
-const _solution = `
-/* globals ipfs */
-
-const run = async () => {
-  const natCid = await ipfs.dag.put({ author: "Nat" })
-  const samCid = await ipfs.dag.put({ author: "Sam" })
-
-  const treePostCid = await ipfs.dag.put({
-    content: "trees",
-    author: samCid,
-    tags: ["outdoor", "hobby"]
-  })
-  const computerPostCid = await ipfs.dag.put({
-    content: "computers",
-    author: natCid,
-    tags: ["hobby"]
-  })
-
-  return [treePostCid, computerPostCid]
-}
-
-return run
-`
-
 const validate = async (result, ipfs) => {
   if (!result) {
     return { fail: 'You forgot to return a result :)' }
@@ -114,19 +90,43 @@ const validate = async (result, ipfs) => {
   // But that order really doesn't matter.
   return {
     success: 'Everything works!',
+    logDesc: 'These are the CIDs of the blog posts. Notice how they change when the underlying data is altered.',
     log: {
       treePostCid: result[0].toBaseEncodedString(),
       computerPostCid: result[1].toBaseEncodedString()
     }
   }
 }
 
+const solution = `/* globals ipfs */
+
+const run = async () => {
+  const natCid = await ipfs.dag.put({ author: "Nat" })
+  const samCid = await ipfs.dag.put({ author: "Sam" })
+
+  const treePostCid = await ipfs.dag.put({
+    content: "trees",
+    author: samCid,
+    tags: ["outdoor", "hobby"]
+  })
+  const computerPostCid = await ipfs.dag.put({
+    content: "computers",
+    author: natCid,
+    tags: ["hobby"]
+  })
+
+  return [treePostCid, computerPostCid]
+}
+
+return run
+`
+
 export default {
   components: {
     Lesson
   },
   data: () => {
-    return { code, text, validate, exercise }
+    return { code, text, validate, exercise, solution }
   }
 }
 </script>