adding template literal skilltest to the strings tasks

chrisdavidmills · chrisdavidmills · commit 918f815dc948 · 2020-02-12T16:35:31.000Z
diff --git a/javascript/introduction-to-js-1/tasks/strings/marking.md b/javascript/introduction-to-js-1/tasks/strings/marking.md
@@ -45,7 +45,7 @@ let revisedQuote = quote.slice(0, index + substring.length + 1);
 
 ## Task 3
 
-For our final string task, we return to our Green Eggs and Ham revised quote, which someone has messed up. You need to:
+For our next string task, we return to our Green Eggs and Ham revised quote, which someone has messed up. You need to:
 
 * Fix the casing. The best way to do this is to put it all in lower case using `.toLowerCase()`, and then put the first letter in uppercase using `replace()`, `slice()`, and `toUpperCase()`. Store the new quote in `fixedQuote`.
 * Replace `green eggs and ham` with whatever food you really don't like using `replace()`.
@@ -64,4 +64,26 @@ fixedQuote.replace('green eggs and ham', 'pickled onions');
 
 let fullStop = '.';
 let finalQuote = fixedQuote + fullStop;
-```
+```
+
+## Task 4
+
+Our final string task looks at your ability to use template literals. Your answer is expected to take the existing string literal, `myString`, turn it into a template literal, and include four placeholders in place of the asterisks:
+
+* The `theorem` string.
+* The value of `a`.
+* The value of `b`. 
+* The length of the hypotenuse, if `a` and `b` are the lengths of the two shortest sides of a right-angled triangle. You can use pythagoras' theorem to work this out.
+
+Your code should look something like this:
+
+```
+let theorem = 'Pythagorean theorem';
+
+let a = 5;
+let b = 8;
+
+let myString = `Using ${ theorem }, we can work out that that if the two shortest sides of a right-angled triangle have lengths of ${ a } and ${ b }, the length of the hypotenuse is ${ Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2)) }.`;
+```
+
+You could also a simpler form of the fourth placeholder, something like `${ Math.sqrt((a * a) + (b * b)) }`.
diff --git a/javascript/introduction-to-js-1/tasks/strings/strings4-download.html b/javascript/introduction-to-js-1/tasks/strings/strings4-download.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <title>Strings: Task 4</title>
+    <style>
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+    </style>
+    <link rel="stylesheet" href="../styles.css" />
+  </head>
+
+  <body>
+
+    <section class="preview">
+
+
+
+    </section>
+
+  </body>
+  <script>
+    let theorem = 'Pythagorean theorem';
+
+    let a = 5;
+    let b = 8;
+
+    let myString = 'Using *, we can work out that that if the two shortest sides of a right-angled triangle have lengths of * and *, the length of the hypotenuse is *.';
+
+
+    // Don't edit the code below here!
+
+    const section = document.querySelector('section');
+
+    let para1 = document.createElement('p');
+    para1.textContent = myString;
+    section.appendChild(para1);
+  </script>
+
+</html>
diff --git a/javascript/introduction-to-js-1/tasks/strings/strings4.html b/javascript/introduction-to-js-1/tasks/strings/strings4.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Strings: Task 4</title>
+    <link rel="stylesheet" href="../styles.css" />
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      p {
+        color: purple;
+        margin: 0.5em 0;
+      }
+    </style>
+  </head>
+
+  <body>
+    <section class="preview">
+
+
+
+    </section>
+
+    <textarea class="playable playable-js" style="height: 220px;">
+let theorem = 'Pythagorean theorem';
+
+let a = 5;
+let b = 8;
+
+let myString = 'Using *, we can work out that that if the two shortest sides of a right-angled triangle have lengths of * and *, the length of the hypotenuse is *.';
+
+// Don't edit the code below here!
+
+section.innerHTML = ' ';
+let para1 = document.createElement('p');
+para1.textContent = myString;
+
+section.appendChild(para1);
+    </textarea>
+
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script class="editable"></script>
+  <script src="../playable.js"></script>
+</html>
