Feat: add new Markdown parser (#39800)

and change all the challenges to new `md` format.

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md

@@ -5,51 +5,77 @@ challengeType: 5
 forumTopicId: 16000
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Check if a value is classified as a boolean primitive. Return true or false.
+
 Boolean primitives are true and false.
-</section>
 
-## Instructions
-<section id='instructions'>
+# --hints--
 
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>booWho(true)</code> should return true.
-    testString: assert.strictEqual(booWho(true), true);
-  - text: <code>booWho(false)</code> should return true.
-    testString: assert.strictEqual(booWho(false), true);
-  - text: <code>booWho([1, 2, 3])</code> should return false.
-    testString: assert.strictEqual(booWho([1, 2, 3]), false);
-  - text: <code>booWho([].slice)</code> should return false.
-    testString: assert.strictEqual(booWho([].slice), false);
-  - text: '<code>booWho({ "a": 1 })</code> should return false.'
-    testString: 'assert.strictEqual(booWho({ "a": 1 }), false);'
-  - text: <code>booWho(1)</code> should return false.
-    testString: assert.strictEqual(booWho(1), false);
-  - text: <code>booWho(NaN)</code> should return false.
-    testString: assert.strictEqual(booWho(NaN), false);
-  - text: <code>booWho("a")</code> should return false.
-    testString: assert.strictEqual(booWho("a"), false);
-  - text: <code>booWho("true")</code> should return false.
-    testString: assert.strictEqual(booWho("true"), false);
-  - text: <code>booWho("false")</code> should return false.
-    testString: assert.strictEqual(booWho("false"), false);
+`booWho(true)` should return true.
 
+```js
+assert.strictEqual(booWho(true), true);
 ```
 
-</section>
+`booWho(false)` should return true.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.strictEqual(booWho(false), true);
+```
 
-<div id='js-seed'>
+`booWho([1, 2, 3])` should return false.
+
+```js
+assert.strictEqual(booWho([1, 2, 3]), false);
+```
+
+`booWho([].slice)` should return false.
+
+```js
+assert.strictEqual(booWho([].slice), false);
+```
+
+`booWho({ "a": 1 })` should return false.
+
+```js
+assert.strictEqual(booWho({ a: 1 }), false);
+```
+
+`booWho(1)` should return false.
+
+```js
+assert.strictEqual(booWho(1), false);
+```
+
+`booWho(NaN)` should return false.
+
+```js
+assert.strictEqual(booWho(NaN), false);
+```
+
+`booWho("a")` should return false.
+
+```js
+assert.strictEqual(booWho('a'), false);
+```
+
+`booWho("true")` should return false.
+
+```js
+assert.strictEqual(booWho('true'), false);
+```
+
+`booWho("false")` should return false.
+
+```js
+assert.strictEqual(booWho('false'), false);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function booWho(bool) {
@@ -59,15 +85,7 @@ function booWho(bool) {
 booWho(null);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function booWho(bool) {
@@ -76,5 +94,3 @@ function booWho(bool) {
 
 booWho(null);
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md

@@ -5,44 +5,84 @@ challengeType: 5
 forumTopicId: 16005
 ---
 
-## Description
-<section id='description'>
-Write a function that splits an array (first argument) into groups the length of <code>size</code> (second argument) and returns them as a two-dimensional array.
-</section>
+# --description--
 
-## Instructions
-<section id='instructions'>
+Write a function that splits an array (first argument) into groups the length of `size` (second argument) and returns them as a two-dimensional array.
 
-</section>
+# --hints--
 
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>chunkArrayInGroups(["a", "b", "c", "d"], 2)</code> should return <code>[["a", "b"], ["c", "d"]]</code>.
-    testString: assert.deepEqual(chunkArrayInGroups(["a", "b", "c", "d"], 2), [["a", "b"], ["c", "d"]]);
-  - text: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5]]</code>.
-    testString: assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [[0, 1, 2], [3, 4, 5]]);
-  - text: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5]]</code>.
-    testString: assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [[0, 1], [2, 3], [4, 5]]);
-  - text: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5]]</code>.
-    testString: assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [[0, 1, 2, 3], [4, 5]]);
-  - text: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)</code> should return <code>[[0, 1, 2], [3, 4, 5], [6]]</code>.
-    testString: assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [[0, 1, 2], [3, 4, 5], [6]]);
-  - text: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)</code> should return <code>[[0, 1, 2, 3], [4, 5, 6, 7], [8]]</code>.
-    testString: assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [[0, 1, 2, 3], [4, 5, 6, 7], [8]]);
-  - text: <code>chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)</code> should return <code>[[0, 1], [2, 3], [4, 5], [6, 7], [8]]</code>.
-    testString: assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [[0, 1], [2, 3], [4, 5], [6, 7], [8]]);
+`chunkArrayInGroups(["a", "b", "c", "d"], 2)` should return `[["a", "b"], ["c", "d"]]`.
 
+```js
+assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [
+  ['a', 'b'],
+  ['c', 'd']
+]);
 ```
 
-</section>
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)` should return `[[0, 1, 2], [3, 4, 5]]`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [
+  [0, 1, 2],
+  [3, 4, 5]
+]);
+```
 
-<div id='js-seed'>
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` should return `[[0, 1], [2, 3], [4, 5]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [
+  [0, 1],
+  [2, 3],
+  [4, 5]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` should return `[[0, 1, 2, 3], [4, 5]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [
+  [0, 1, 2, 3],
+  [4, 5]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` should return `[[0, 1, 2], [3, 4, 5], [6]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` should return `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [
+  [0, 1, 2, 3],
+  [4, 5, 6, 7],
+  [8]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` should return `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [
+  [0, 1],
+  [2, 3],
+  [4, 5],
+  [6, 7],
+  [8]
+]);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function chunkArrayInGroups(arr, size) {
@@ -52,15 +92,7 @@ function chunkArrayInGroups(arr, size) {
 chunkArrayInGroups(["a", "b", "c", "d"], 2);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function chunkArrayInGroups(arr, size) {
@@ -74,7 +106,4 @@ function chunkArrayInGroups(arr, size) {
 }
 
 chunkArrayInGroups(["a", "b", "c", "d"], 2);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md

@@ -5,53 +5,93 @@ challengeType: 5
 forumTopicId: 16006
 ---
 
-## Description
-<section id='description'>
-Check if a string (first argument, <code>str</code>) ends with the given target string (second argument, <code>target</code>).
-This challenge <em>can</em> be solved with the <code>.endsWith()</code> method, which was introduced in ES2015. But for the purpose of this challenge, we would like you to use one of the JavaScript substring methods instead.
-</section>
+# --description--
 
-## Instructions
-<section id='instructions'>
+Check if a string (first argument, `str`) ends with the given target string (second argument, `target`).
 
-</section>
+This challenge *can* be solved with the `.endsWith()` method, which was introduced in ES2015. But for the purpose of this challenge, we would like you to use one of the JavaScript substring methods instead.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>confirmEnding("Bastian", "n")</code> should return true.
-    testString: assert(confirmEnding("Bastian", "n") === true);
-  - text: <code>confirmEnding("Congratulation", "on")</code> should return true.
-    testString: assert(confirmEnding("Congratulation", "on") === true);
-  - text: <code>confirmEnding("Connor", "n")</code> should return false.
-    testString: assert(confirmEnding("Connor", "n") === false);
-  - text: <code>confirmEnding("Walking on water and developing software from a specification are easy if both are frozen"&#44; "specification"&#41;</code> should return false.
-    testString: assert(confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification") === false);
-  - text: <code>confirmEnding("He has to give me a new name", "name")</code> should return true.
-    testString: assert(confirmEnding("He has to give me a new name", "name") === true);
-  - text: <code>confirmEnding("Open sesame", "same")</code> should return true.
-    testString: assert(confirmEnding("Open sesame", "same") === true);
-  - text: <code>confirmEnding("Open sesame", "sage")</code> should return false.
-    testString: assert(confirmEnding("Open sesame", "sage") === false);
-  - text: <code>confirmEnding("Open sesame", "game")</code> should return false.
-    testString: assert(confirmEnding("Open sesame", "game") === false);
-  - text: <code>confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")</code> should return false.
-    testString: assert(confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain") === false);
-  - text: <code>confirmEnding("Abstraction", "action")</code> should return true.
-    testString: assert(confirmEnding("Abstraction", "action") === true);
-  - text: Your code should not use the built-in method <code>.endsWith()</code> to solve the challenge.
-    testString: assert(!(/\.endsWith\(.*?\)\s*?;?/.test(code)) && !(/\['endsWith'\]/.test(code)));
+`confirmEnding("Bastian", "n")` should return true.
 
+```js
+assert(confirmEnding('Bastian', 'n') === true);
 ```
 
-</section>
+`confirmEnding("Congratulation", "on")` should return true.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(confirmEnding('Congratulation', 'on') === true);
+```
 
-<div id='js-seed'>
+`confirmEnding("Connor", "n")` should return false.
+
+```js
+assert(confirmEnding('Connor', 'n') === false);
+```
+
+`confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification")` should return false.
+
+```js
+assert(
+  confirmEnding(
+    'Walking on water and developing software from a specification are easy if both are frozen',
+    'specification'
+  ) === false
+);
+```
+
+`confirmEnding("He has to give me a new name", "name")` should return true.
+
+```js
+assert(confirmEnding('He has to give me a new name', 'name') === true);
+```
+
+`confirmEnding("Open sesame", "same")` should return true.
+
+```js
+assert(confirmEnding('Open sesame', 'same') === true);
+```
+
+`confirmEnding("Open sesame", "sage")` should return false.
+
+```js
+assert(confirmEnding('Open sesame', 'sage') === false);
+```
+
+`confirmEnding("Open sesame", "game")` should return false.
+
+```js
+assert(confirmEnding('Open sesame', 'game') === false);
+```
+
+`confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")` should return false.
+
+```js
+assert(
+  confirmEnding(
+    'If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing',
+    'mountain'
+  ) === false
+);
+```
+
+`confirmEnding("Abstraction", "action")` should return true.
+
+```js
+assert(confirmEnding('Abstraction', 'action') === true);
+```
+
+Your code should not use the built-in method `.endsWith()` to solve the challenge.
+
+```js
+assert(!/\.endsWith\(.*?\)\s*?;?/.test(code) && !/\['endsWith'\]/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function confirmEnding(str, target) {
@@ -61,15 +101,7 @@ function confirmEnding(str, target) {
 confirmEnding("Bastian", "n");
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function confirmEnding(str, target) {
@@ -77,7 +109,4 @@ function confirmEnding(str, target) {
 }
 
 confirmEnding("Bastian", "n");
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md

@@ -5,43 +5,53 @@ challengeType: 1
 forumTopicId: 16806
 ---
 
-## Description
-<section id='description'>
-The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times <code>9/5</code>, plus <code>32</code>.
-You are given a variable <code>celsius</code> representing a temperature in Celsius. Use the variable <code>fahrenheit</code> already defined and assign it the Fahrenheit temperature equivalent to the given Celsius temperature. Use the algorithm mentioned above to help convert the Celsius temperature to Fahrenheit.
-</section>
+# --description--
 
-## Instructions
-<section id='instructions'>
+The algorithm to convert from Celsius to Fahrenheit is the temperature in Celsius times `9/5`, plus `32`.
 
-</section>
+You are given a variable `celsius` representing a temperature in Celsius. Use the variable `fahrenheit` already defined and assign it the Fahrenheit temperature equivalent to the given Celsius temperature. Use the algorithm mentioned above to help convert the Celsius temperature to Fahrenheit.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>convertToF(0)</code> should return a number
-    testString: assert(typeof convertToF(0) === 'number');
-  - text: <code>convertToF(-30)</code> should return a value of <code>-22</code>
-    testString: assert(convertToF(-30) === -22);
-  - text: <code>convertToF(-10)</code> should return a value of <code>14</code>
-    testString: assert(convertToF(-10) === 14);
-  - text: <code>convertToF(0)</code> should return a value of <code>32</code>
-    testString: assert(convertToF(0) === 32);
-  - text: <code>convertToF(20)</code> should return a value of <code>68</code>
-    testString: assert(convertToF(20) === 68);
-  - text: <code>convertToF(30)</code> should return a value of <code>86</code>
-    testString: assert(convertToF(30) === 86);
+`convertToF(0)` should return a number
 
+```js
+assert(typeof convertToF(0) === 'number');
 ```
 
-</section>
+`convertToF(-30)` should return a value of `-22`
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(convertToF(-30) === -22);
+```
 
-<div id='js-seed'>
+`convertToF(-10)` should return a value of `14`
+
+```js
+assert(convertToF(-10) === 14);
+```
+
+`convertToF(0)` should return a value of `32`
+
+```js
+assert(convertToF(0) === 32);
+```
+
+`convertToF(20)` should return a value of `68`
+
+```js
+assert(convertToF(20) === 68);
+```
+
+`convertToF(30)` should return a value of `86`
+
+```js
+assert(convertToF(30) === 86);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function convertToF(celsius) {
@@ -52,15 +62,7 @@ function convertToF(celsius) {
 convertToF(30);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function convertToF(celsius) {
@@ -70,7 +72,4 @@ function convertToF(celsius) {
 }
 
 convertToF(30);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md

@@ -5,44 +5,53 @@ challengeType: 5
 forumTopicId: 16013
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Return the factorial of the provided integer.
+
 If the integer is represented with the letter n, a factorial is the product of all positive integers less than or equal to n.
-Factorials are often represented with the shorthand notation <code>n!</code>
-For example: <code>5! = 1 * 2 * 3 * 4 * 5 = 120</code>
+
+Factorials are often represented with the shorthand notation `n!`
+
+For example: `5! = 1 * 2 * 3 * 4 * 5 = 120`
+
 Only integers greater than or equal to zero will be supplied to the function.
-</section>
 
-## Instructions
-<section id='instructions'>
+# --hints--
 
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>factorialize(5)</code> should return a number.
-    testString: assert(typeof factorialize(5) === 'number');
-  - text: <code>factorialize(5)</code> should return 120.
-    testString: assert(factorialize(5) === 120);
-  - text: <code>factorialize(10)</code> should return 3628800.
-    testString: assert(factorialize(10) === 3628800);
-  - text: <code>factorialize(20)</code> should return 2432902008176640000.
-    testString: assert(factorialize(20) === 2432902008176640000);
-  - text: <code>factorialize(0)</code> should return 1.
-    testString: assert(factorialize(0) === 1);
+`factorialize(5)` should return a number.
 
+```js
+assert(typeof factorialize(5) === 'number');
 ```
 
-</section>
+`factorialize(5)` should return 120.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(factorialize(5) === 120);
+```
 
-<div id='js-seed'>
+`factorialize(10)` should return 3628800.
+
+```js
+assert(factorialize(10) === 3628800);
+```
+
+`factorialize(20)` should return 2432902008176640000.
+
+```js
+assert(factorialize(20) === 2432902008176640000);
+```
+
+`factorialize(0)` should return 1.
+
+```js
+assert(factorialize(0) === 1);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function factorialize(num) {
@@ -52,15 +61,7 @@ function factorialize(num) {
 factorialize(5);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function factorialize(num) {
@@ -68,7 +69,4 @@ function factorialize(num) {
 }
 
 factorialize(5);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md

@@ -5,39 +5,43 @@ challengeType: 5
 forumTopicId: 16014
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Remove all falsy values from an array.
-Falsy values in JavaScript are <code>false</code>, <code>null</code>, <code>0</code>, <code>""</code>, <code>undefined</code>, and <code>NaN</code>.
+
+Falsy values in JavaScript are `false`, `null`, `0`, `""`, `undefined`, and `NaN`.
+
 Hint: Try converting each value to a Boolean.
-</section>
 
-## Instructions
-<section id='instructions'>
+# --hints--
 
-</section>
+`bouncer([7, "ate", "", false, 9])` should return `[7, "ate", 9]`.
 
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>bouncer([7, "ate", "", false, 9])</code> should return <code>[7, "ate", 9]</code>.
-    testString: assert.deepEqual(bouncer([7, "ate", "", false, 9]), [7, "ate", 9]);
-  - text: <code>bouncer(["a", "b", "c"])</code> should return <code>["a", "b", "c"]</code>.
-    testString: assert.deepEqual(bouncer(["a", "b", "c"]), ["a", "b", "c"]);
-  - text: <code>bouncer([false, null, 0, NaN, undefined, ""])</code> should return <code>[]</code>.
-    testString: assert.deepEqual(bouncer([false, null, 0, NaN, undefined, ""]), []);
-  - text: <code>bouncer([null, NaN, 1, 2, undefined])</code> should return <code>[1, 2]</code>.
-    testString: assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
+```js
+assert.deepEqual(bouncer([7, 'ate', '', false, 9]), [7, 'ate', 9]);
 ```
 
-</section>
+`bouncer(["a", "b", "c"])` should return `["a", "b", "c"]`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.deepEqual(bouncer(['a', 'b', 'c']), ['a', 'b', 'c']);
+```
 
-<div id='js-seed'>
+`bouncer([false, null, 0, NaN, undefined, ""])` should return `[]`.
+
+```js
+assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
+```
+
+`bouncer([null, NaN, 1, 2, undefined])` should return `[1, 2]`.
+
+```js
+assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function bouncer(arr) {
@@ -47,15 +51,7 @@ function bouncer(arr) {
 bouncer([7, "ate", "", false, 9]);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function bouncer(arr) {
@@ -63,7 +59,4 @@ function bouncer(arr) {
 }
 
 bouncer([7, "ate", "", false, 9]);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md

@@ -5,43 +5,67 @@ challengeType: 5
 forumTopicId: 16015
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Return the length of the longest word in the provided sentence.
+
 Your response should be a number.
-</section>
 
-## Instructions
-<section id='instructions'>
+# --hints--
 
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>findLongestWordLength("The quick brown fox jumped over the lazy dog")</code> should return a number.
-    testString: assert(typeof findLongestWordLength("The quick brown fox jumped over the lazy dog") === "number");
-  - text: <code>findLongestWordLength("The quick brown fox jumped over the lazy dog")</code> should return 6.
-    testString: assert(findLongestWordLength("The quick brown fox jumped over the lazy dog") === 6);
-  - text: <code>findLongestWordLength("May the force be with you")</code> should return 5.
-    testString: assert(findLongestWordLength("May the force be with you") === 5);
-  - text: <code>findLongestWordLength("Google do a barrel roll")</code> should return 6.
-    testString: assert(findLongestWordLength("Google do a barrel roll") === 6);
-  - text: <code>findLongestWordLength("What is the average airspeed velocity of an unladen swallow")</code> should return 8.
-    testString: assert(findLongestWordLength("What is the average airspeed velocity of an unladen swallow") === 8);
-  - text: <code>findLongestWordLength("What if we try a super-long word such as otorhinolaryngology")</code> should return 19.
-    testString: assert(findLongestWordLength("What if we try a super-long word such as otorhinolaryngology") === 19);
+`findLongestWordLength("The quick brown fox jumped over the lazy dog")` should return a number.
 
+```js
+assert(
+  typeof findLongestWordLength(
+    'The quick brown fox jumped over the lazy dog'
+  ) === 'number'
+);
 ```
 
-</section>
+`findLongestWordLength("The quick brown fox jumped over the lazy dog")` should return 6.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(
+  findLongestWordLength('The quick brown fox jumped over the lazy dog') === 6
+);
+```
 
-<div id='js-seed'>
+`findLongestWordLength("May the force be with you")` should return 5.
+
+```js
+assert(findLongestWordLength('May the force be with you') === 5);
+```
+
+`findLongestWordLength("Google do a barrel roll")` should return 6.
+
+```js
+assert(findLongestWordLength('Google do a barrel roll') === 6);
+```
+
+`findLongestWordLength("What is the average airspeed velocity of an unladen swallow")` should return 8.
+
+```js
+assert(
+  findLongestWordLength(
+    'What is the average airspeed velocity of an unladen swallow'
+  ) === 8
+);
+```
+
+`findLongestWordLength("What if we try a super-long word such as otorhinolaryngology")` should return 19.
+
+```js
+assert(
+  findLongestWordLength(
+    'What if we try a super-long word such as otorhinolaryngology'
+  ) === 19
+);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function findLongestWordLength(str) {
@@ -51,15 +75,7 @@ function findLongestWordLength(str) {
 findLongestWordLength("The quick brown fox jumped over the lazy dog");
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function findLongestWordLength(str) {
@@ -67,7 +83,4 @@ function findLongestWordLength(str) {
 }
 
 findLongestWordLength("The quick brown fox jumped over the lazy dog");
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md

@@ -5,36 +5,37 @@ challengeType: 5
 forumTopicId: 16016
 ---
 
-## Description
-<section id='description'>
-
+# --description--
 
 Create a function that looks through an array `arr` and returns the first element in it that passes a 'truth test'. This means that given an element `x`, the 'truth test' is passed if `func(x)` is `true`. If no element passes the test, return `undefined`.
-</section>
 
-## Instructions
-<section id='instructions'>
+# --hints--
 
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })</code> should return 8.
-    testString: assert.strictEqual(findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; }), 8);
-  - text: <code>findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })</code> should return undefined.
-    testString: assert.strictEqual(findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; }), undefined);
+`findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })` should return 8.
 
+```js
+assert.strictEqual(
+  findElement([1, 3, 5, 8, 9, 10], function (num) {
+    return num % 2 === 0;
+  }),
+  8
+);
 ```
 
-</section>
+`findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })` should return undefined.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.strictEqual(
+  findElement([1, 3, 5, 9], function (num) {
+    return num % 2 === 0;
+  }),
+  undefined
+);
+```
 
-<div id='js-seed'>
+# --seed--
+
+## --seed-contents--
 
 ```js
 function findElement(arr, func) {
@@ -45,15 +46,7 @@ function findElement(arr, func) {
 findElement([1, 2, 3, 4], num => num % 2 === 0);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function findElement(arr, func) {
@@ -61,7 +54,4 @@ function findElement(arr, func) {
 }
 
 findElement([1, 2, 3, 4], num => num % 2 === 0);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md

@@ -5,57 +5,93 @@ challengeType: 5
 forumTopicId: 16025
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Return true if the string in the first element of the array contains all of the letters of the string in the second element of the array.
-For example, <code>["hello", "Hello"]</code>, should return true because all of the letters in the second string are present in the first, ignoring case.
-The arguments <code>["hello", "hey"]</code> should return false because the string "hello" does not contain a "y".
-Lastly, <code>["Alien", "line"]</code>, should return true because all of the letters in "line" are present in "Alien".
-</section>
 
-## Instructions
-<section id='instructions'>
+For example, `["hello", "Hello"]`, should return true because all of the letters in the second string are present in the first, ignoring case.
 
-</section>
+The arguments `["hello", "hey"]` should return false because the string "hello" does not contain a "y".
 
-## Tests
-<section id='tests'>
+Lastly, `["Alien", "line"]`, should return true because all of the letters in "line" are present in "Alien".
 
-```yml
-tests:
-  - text: <code>mutation(["hello", "hey"])</code> should return false.
-    testString: assert(mutation(["hello", "hey"]) === false);
-  - text: <code>mutation(["hello", "Hello"])</code> should return true.
-    testString: assert(mutation(["hello", "Hello"]) === true);
-  - text: <code>mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])</code> should return true.
-    testString: assert(mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]) === true);
-  - text: <code>mutation(["Mary", "Army"])</code> should return true.
-    testString: assert(mutation(["Mary", "Army"]) === true);
-  - text: <code>mutation(["Mary", "Aarmy"])</code> should return true.
-    testString: assert(mutation(["Mary", "Aarmy"]) === true);
-  - text: <code>mutation(["Alien", "line"])</code> should return true.
-    testString: assert(mutation(["Alien", "line"]) === true);
-  - text: <code>mutation(["floor", "for"])</code> should return true.
-    testString: assert(mutation(["floor", "for"]) === true);
-  - text: <code>mutation(["hello", "neo"])</code> should return false.
-    testString: assert(mutation(["hello", "neo"]) === false);
-  - text: <code>mutation(["voodoo", "no"])</code> should return false.
-    testString: assert(mutation(["voodoo", "no"]) === false);
-  - text: <code>mutation(["ate", "date"]</code> should return false.
-    testString: assert(mutation(["ate", "date"]) === false);
-  - text: <code>mutation(["Tiger", "Zebra"])</code> should return false.
-    testString: assert(mutation(["Tiger", "Zebra"]) === false);
-  - text: <code>mutation(["Noel", "Ole"])</code> should return true.
-    testString: assert(mutation(["Noel", "Ole"]) === true);
+# --hints--
 
+`mutation(["hello", "hey"])` should return false.
+
+```js
+assert(mutation(['hello', 'hey']) === false);
 ```
 
-</section>
+`mutation(["hello", "Hello"])` should return true.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(mutation(['hello', 'Hello']) === true);
+```
 
-<div id='js-seed'>
+`mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])` should return true.
+
+```js
+assert(mutation(['zyxwvutsrqponmlkjihgfedcba', 'qrstu']) === true);
+```
+
+`mutation(["Mary", "Army"])` should return true.
+
+```js
+assert(mutation(['Mary', 'Army']) === true);
+```
+
+`mutation(["Mary", "Aarmy"])` should return true.
+
+```js
+assert(mutation(['Mary', 'Aarmy']) === true);
+```
+
+`mutation(["Alien", "line"])` should return true.
+
+```js
+assert(mutation(['Alien', 'line']) === true);
+```
+
+`mutation(["floor", "for"])` should return true.
+
+```js
+assert(mutation(['floor', 'for']) === true);
+```
+
+`mutation(["hello", "neo"])` should return false.
+
+```js
+assert(mutation(['hello', 'neo']) === false);
+```
+
+`mutation(["voodoo", "no"])` should return false.
+
+```js
+assert(mutation(['voodoo', 'no']) === false);
+```
+
+`mutation(["ate", "date"]` should return false.
+
+```js
+assert(mutation(['ate', 'date']) === false);
+```
+
+`mutation(["Tiger", "Zebra"])` should return false.
+
+```js
+assert(mutation(['Tiger', 'Zebra']) === false);
+```
+
+`mutation(["Noel", "Ole"])` should return true.
+
+```js
+assert(mutation(['Noel', 'Ole']) === true);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function mutation(arr) {
@@ -65,15 +101,7 @@ function mutation(arr) {
 mutation(["hello", "hey"]);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function mutation(arr) {
@@ -85,7 +113,4 @@ function mutation(arr) {
 }
 
 mutation(["hello", "hey"]);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md

@@ -5,46 +5,63 @@ challengeType: 5
 forumTopicId: 16041
 ---
 
-## Description
-<section id='description'>
-Repeat a given string <code>str</code> (first argument) for <code>num</code> times (second argument). Return an empty string if <code>num</code> is not a positive number. For the purpose of this challenge, do <em>not</em> use the built-in <code>.repeat()</code> method.
-</section>
+# --description--
 
-## Instructions
-<section id='instructions'>
+Repeat a given string `str` (first argument) for `num` times (second argument). Return an empty string if `num` is not a positive number. For the purpose of this challenge, do *not* use the built-in `.repeat()` method.
 
-</section>
+# --hints--
 
-## Tests
-<section id='tests'>
+`repeatStringNumTimes("*", 3)` should return `"***"`.
 
-```yml
-tests:
-  - text: <code>repeatStringNumTimes("*", 3)</code> should return <code>"***"</code>.
-    testString: assert(repeatStringNumTimes("*", 3) === "***");
-  - text: <code>repeatStringNumTimes("abc", 3)</code> should return <code>"abcabcabc"</code>.
-    testString: assert(repeatStringNumTimes("abc", 3) === "abcabcabc");
-  - text: <code>repeatStringNumTimes("abc", 4)</code> should return <code>"abcabcabcabc"</code>.
-    testString: assert(repeatStringNumTimes("abc", 4) === "abcabcabcabc");
-  - text: <code>repeatStringNumTimes("abc", 1)</code> should return <code>"abc"</code>.
-    testString: assert(repeatStringNumTimes("abc", 1) === "abc");
-  - text: <code>repeatStringNumTimes("*", 8)</code> should return <code>"********"</code>.
-    testString: assert(repeatStringNumTimes("*", 8) === "********");
-  - text: <code>repeatStringNumTimes("abc", -2)</code> should return <code>""</code>.
-    testString: assert(repeatStringNumTimes("abc", -2) === "");
-  - text: The built-in <code>repeat()</code> method should not be used.
-    testString: assert(!/\.repeat/g.test(code));
-  - text:  <code>repeatStringNumTimes("abc", 0)</code> should return <code>""</code>.
-    testString: assert(repeatStringNumTimes("abc", 0) === "");
-    
+```js
+assert(repeatStringNumTimes('*', 3) === '***');
 ```
 
-</section>
+`repeatStringNumTimes("abc", 3)` should return `"abcabcabc"`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(repeatStringNumTimes('abc', 3) === 'abcabcabc');
+```
 
-<div id='js-seed'>
+`repeatStringNumTimes("abc", 4)` should return `"abcabcabcabc"`.
+
+```js
+assert(repeatStringNumTimes('abc', 4) === 'abcabcabcabc');
+```
+
+`repeatStringNumTimes("abc", 1)` should return `"abc"`.
+
+```js
+assert(repeatStringNumTimes('abc', 1) === 'abc');
+```
+
+`repeatStringNumTimes("*", 8)` should return `"********"`.
+
+```js
+assert(repeatStringNumTimes('*', 8) === '********');
+```
+
+`repeatStringNumTimes("abc", -2)` should return `""`.
+
+```js
+assert(repeatStringNumTimes('abc', -2) === '');
+```
+
+The built-in `repeat()` method should not be used.
+
+```js
+assert(!/\.repeat/g.test(code));
+```
+
+`repeatStringNumTimes("abc", 0)` should return `""`.
+
+```js
+assert(repeatStringNumTimes('abc', 0) === '');
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function repeatStringNumTimes(str, num) {
@@ -54,15 +71,7 @@ function repeatStringNumTimes(str, num) {
 repeatStringNumTimes("abc", 3);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function repeatStringNumTimes(str, num) {
@@ -71,7 +80,4 @@ function repeatStringNumTimes(str, num) {
 }
 
 repeatStringNumTimes("abc", 3);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md

@@ -5,39 +5,72 @@ challengeType: 5
 forumTopicId: 16042
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Return an array consisting of the largest number from each provided sub-array. For simplicity, the provided array will contain exactly 4 sub-arrays.
-Remember, you can iterate through an array with a simple for loop, and access each member with array syntax <code>arr[i]</code>.
-</section>
 
-## Instructions
-<section id='instructions'>
+Remember, you can iterate through an array with a simple for loop, and access each member with array syntax `arr[i]`.
 
-</section>
+# --hints--
 
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return an array.
-    testString: assert(largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]).constructor === Array);
-  - text: <code>largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])</code> should return <code>[27, 5, 39, 1001]</code>.
-    testString: assert.deepEqual(largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]]), [27, 5, 39, 1001]);
-  - text: <code>largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])</code> should return <code>[9, 35, 97, 1000000]</code>.
-    testString: assert.deepEqual(largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]]), [9, 35, 97, 1000000]);
-  - text: <code>largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])</code> should return <code>[25, 48, 21, -3]</code>.
-    testString: assert.deepEqual(largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]]), [25, 48, 21, -3]);
+`largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])` should return an array.
 
+```js
+assert(
+  largestOfFour([
+    [4, 5, 1, 3],
+    [13, 27, 18, 26],
+    [32, 35, 37, 39],
+    [1000, 1001, 857, 1]
+  ]).constructor === Array
+);
 ```
 
-</section>
+`largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])` should return `[27, 5, 39, 1001]`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.deepEqual(
+  largestOfFour([
+    [13, 27, 18, 26],
+    [4, 5, 1, 3],
+    [32, 35, 37, 39],
+    [1000, 1001, 857, 1]
+  ]),
+  [27, 5, 39, 1001]
+);
+```
 
-<div id='js-seed'>
+`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` should return `[9, 35, 97, 1000000]`.
+
+```js
+assert.deepEqual(
+  largestOfFour([
+    [4, 9, 1, 3],
+    [13, 35, 18, 26],
+    [32, 35, 97, 39],
+    [1000000, 1001, 857, 1]
+  ]),
+  [9, 35, 97, 1000000]
+);
+```
+
+`largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])` should return `[25, 48, 21, -3]`.
+
+```js
+assert.deepEqual(
+  largestOfFour([
+    [17, 23, 25, 12],
+    [25, 7, 34, 48],
+    [4, -10, 18, 21],
+    [-72, -3, -17, -10]
+  ]),
+  [25, 48, 21, -3]
+);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function largestOfFour(arr) {
@@ -47,15 +80,7 @@ function largestOfFour(arr) {
 largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function largestOfFour(arr) {
@@ -63,7 +88,4 @@ function largestOfFour(arr) {
 }
 
 largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md

@@ -5,40 +5,43 @@ challengeType: 5
 forumTopicId: 16043
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Reverse the provided string.
+
 You may need to turn the string into an array before you can reverse it.
+
 Your result must be a string.
-</section>
 
-## Instructions
-<section id='instructions'>
+# --hints--
 
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>reverseString("hello")</code> should return a string.
-    testString: assert(typeof reverseString("hello") === "string");
-  - text: <code>reverseString("hello")</code> should become <code>"olleh"</code>.
-    testString: assert(reverseString("hello") === "olleh");
-  - text: <code>reverseString("Howdy")</code> should become <code>"ydwoH"</code>.
-    testString: assert(reverseString("Howdy") === "ydwoH");
-  - text: <code>reverseString("Greetings from Earth")</code> should return <code>"htraE morf sgniteerG"</code>.
-    testString: assert(reverseString("Greetings from Earth") === "htraE morf sgniteerG");
+`reverseString("hello")` should return a string.
 
+```js
+assert(typeof reverseString('hello') === 'string');
 ```
 
-</section>
+`reverseString("hello")` should become `"olleh"`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(reverseString('hello') === 'olleh');
+```
 
-<div id='js-seed'>
+`reverseString("Howdy")` should become `"ydwoH"`.
+
+```js
+assert(reverseString('Howdy') === 'ydwoH');
+```
+
+`reverseString("Greetings from Earth")` should return `"htraE morf sgniteerG"`.
+
+```js
+assert(reverseString('Greetings from Earth') === 'htraE morf sgniteerG');
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function reverseString(str) {
@@ -48,15 +51,7 @@ function reverseString(str) {
 reverseString("hello");
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function reverseString(str) {
@@ -64,7 +59,4 @@ function reverseString(str) {
 }
 
 reverseString("hello");
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md

@@ -5,45 +5,73 @@ challengeType: 5
 forumTopicId: 301148
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 You are given two arrays and an index.
+
 Copy each element of the first array into the second array, in order.
-Begin inserting elements at index <code>n</code> of the second array.
+
+Begin inserting elements at index `n` of the second array.
+
 Return the resulting array. The input arrays should remain the same after the function runs.
-</section>
 
-## Instructions
-<section id='instructions'>
+# --hints--
 
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>frankenSplice([1, 2, 3], [4, 5], 1)</code> should return <code>[4, 1, 2, 3, 5]</code>.
-    testString: assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5]);
-  - text: <code>frankenSplice([1, 2], ["a", "b"], 1)</code> should return <code>["a", 1, 2, "b"]</code>.
-    testString: assert.deepEqual(frankenSplice(testArr1, testArr2, 1), ["a", 1, 2, "b"]);
-  - text: <code>frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)</code> should return <code>["head", "shoulders", "claw", "tentacle", "knees", "toes"]</code>.
-    testString: assert.deepEqual(frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2), ["head", "shoulders", "claw", "tentacle", "knees", "toes"]);
-  - text: All elements from the first array should be added to the second array in their original order.
-    testString: assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);
-  - text: The first array should remain the same after the function runs.
-    testString: frankenSplice(testArr1, testArr2, 1); assert.deepEqual(testArr1, [1, 2]);
-  - text: The second array should remain the same after the function runs.
-    testString: frankenSplice(testArr1, testArr2, 1); assert.deepEqual(testArr2, ["a", "b"]);
+`frankenSplice([1, 2, 3], [4, 5], 1)` should return `[4, 1, 2, 3, 5]`.
 
+```js
+assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5]);
 ```
 
-</section>
+`frankenSplice([1, 2], ["a", "b"], 1)` should return `["a", 1, 2, "b"]`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.deepEqual(frankenSplice(testArr1, testArr2, 1), ['a', 1, 2, 'b']);
+```
 
-<div id='js-seed'>
+`frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)` should return `["head", "shoulders", "claw", "tentacle", "knees", "toes"]`.
+
+```js
+assert.deepEqual(
+  frankenSplice(
+    ['claw', 'tentacle'],
+    ['head', 'shoulders', 'knees', 'toes'],
+    2
+  ),
+  ['head', 'shoulders', 'claw', 'tentacle', 'knees', 'toes']
+);
+```
+
+All elements from the first array should be added to the second array in their original order.
+
+```js
+assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);
+```
+
+The first array should remain the same after the function runs.
+
+```js
+frankenSplice(testArr1, testArr2, 1);
+assert.deepEqual(testArr1, [1, 2]);
+```
+
+The second array should remain the same after the function runs.
+
+```js
+frankenSplice(testArr1, testArr2, 1);
+assert.deepEqual(testArr2, ['a', 'b']);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+let testArr1 = [1, 2];
+let testArr2 = ["a", "b"];
+```
+
+## --seed-contents--
 
 ```js
 function frankenSplice(arr1, arr2, n) {
@@ -53,24 +81,7 @@ function frankenSplice(arr1, arr2, n) {
 frankenSplice([1, 2, 3], [4, 5, 6], 1);
 ```
 
-</div>
-
-
-### After Test
-<div id='js-teardown'>
-
-```js
-let testArr1 = [1, 2];
-let testArr2 = ["a", "b"];
-```
-
-</div>
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function frankenSplice(arr1, arr2, n) {
@@ -83,7 +94,4 @@ function frankenSplice(arr1, arr2, n) {
 }
 
 frankenSplice([1, 2, 3], [4, 5], 1);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md

@@ -5,39 +5,44 @@ challengeType: 5
 forumTopicId: 16088
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Return the provided string with the first letter of each word capitalized. Make sure the rest of the word is in lower case.
+
 For the purpose of this exercise, you should also capitalize connecting words like "the" and "of".
-</section>
 
-## Instructions
-<section id='instructions'>
+# --hints--
 
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>titleCase("I&#39;m a little tea pot")</code> should return a string.
-    testString: assert(typeof titleCase("I'm a little tea pot") === "string");
-  - text: <code>titleCase("I&#39;m a little tea pot")</code> should return <code>I&#39;m A Little Tea Pot</code>.
-    testString: assert(titleCase("I'm a little tea pot") === "I'm A Little Tea Pot");
-  - text: <code>titleCase("sHoRt AnD sToUt")</code> should return <code>Short And Stout</code>.
-    testString: assert(titleCase("sHoRt AnD sToUt") === "Short And Stout");
-  - text: <code>titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")</code> should return <code>Here Is My Handle Here Is My Spout</code>.
-    testString: assert(titleCase("HERE IS MY HANDLE HERE IS MY SPOUT") === "Here Is My Handle Here Is My Spout");
+`titleCase("I'm a little tea pot")` should return a string.
 
+```js
+assert(typeof titleCase("I'm a little tea pot") === 'string');
 ```
 
-</section>
+`titleCase("I'm a little tea pot")` should return `I'm A Little Tea Pot`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(titleCase("I'm a little tea pot") === "I'm A Little Tea Pot");
+```
 
-<div id='js-seed'>
+`titleCase("sHoRt AnD sToUt")` should return `Short And Stout`.
+
+```js
+assert(titleCase('sHoRt AnD sToUt') === 'Short And Stout');
+```
+
+`titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")` should return `Here Is My Handle Here Is My Spout`.
+
+```js
+assert(
+  titleCase('HERE IS MY HANDLE HERE IS MY SPOUT') ===
+    'Here Is My Handle Here Is My Spout'
+);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function titleCase(str) {
@@ -47,15 +52,7 @@ function titleCase(str) {
 titleCase("I'm a little tea pot");
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function titleCase(str) {
@@ -63,7 +60,4 @@ function titleCase(str) {
 }
 
 titleCase("I'm a little tea pot");
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md

@@ -5,42 +5,67 @@ challengeType: 5
 forumTopicId: 16089
 ---
 
-## Description
-<section id='description'>
-Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated string with a <code>...</code> ending.
-</section>
+# --description--
 
-## Instructions
-<section id='instructions'>
+Truncate a string (first argument) if it is longer than the given maximum string length (second argument). Return the truncated string with a `...` ending.
 
-</section>
+# --hints--
 
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: <code>truncateString("A-tisket a-tasket A green and yellow basket", 8)</code> should return "A-tisket...".
-    testString: assert(truncateString("A-tisket a-tasket A green and yellow basket", 8) === "A-tisket...");
-  - text: <code>truncateString("Peter Piper picked a peck of pickled peppers", 11)</code> should return "Peter Piper...".
-    testString: assert(truncateString("Peter Piper picked a peck of pickled peppers", 11) === "Peter Piper...");
-  - text: <code>truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)</code> should return "A-tisket a-tasket A green and yellow basket".
-    testString: assert(truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length) === "A-tisket a-tasket A green and yellow basket");
-  - text: <code>truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)</code> should return "A-tisket a-tasket A green and yellow basket".
-    testString: assert(truncateString('A-tisket a-tasket A green and yellow basket', 'A-tisket a-tasket A green and yellow basket'.length + 2) === 'A-tisket a-tasket A green and yellow basket');
-  - text: <code>truncateString("A-", 1)</code> should return "A...".
-    testString: assert(truncateString("A-", 1) === "A...");
-  - text: <code>truncateString("Absolutely Longer", 2)</code> should return "Ab...".
-    testString: assert(truncateString("Absolutely Longer", 2) === "Ab...");
+`truncateString("A-tisket a-tasket A green and yellow basket", 8)` should return "A-tisket...".
 
+```js
+assert(
+  truncateString('A-tisket a-tasket A green and yellow basket', 8) ===
+    'A-tisket...'
+);
 ```
 
-</section>
+`truncateString("Peter Piper picked a peck of pickled peppers", 11)` should return "Peter Piper...".
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(
+  truncateString('Peter Piper picked a peck of pickled peppers', 11) ===
+    'Peter Piper...'
+);
+```
 
-<div id='js-seed'>
+`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)` should return "A-tisket a-tasket A green and yellow basket".
+
+```js
+assert(
+  truncateString(
+    'A-tisket a-tasket A green and yellow basket',
+    'A-tisket a-tasket A green and yellow basket'.length
+  ) === 'A-tisket a-tasket A green and yellow basket'
+);
+```
+
+`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)` should return "A-tisket a-tasket A green and yellow basket".
+
+```js
+assert(
+  truncateString(
+    'A-tisket a-tasket A green and yellow basket',
+    'A-tisket a-tasket A green and yellow basket'.length + 2
+  ) === 'A-tisket a-tasket A green and yellow basket'
+);
+```
+
+`truncateString("A-", 1)` should return "A...".
+
+```js
+assert(truncateString('A-', 1) === 'A...');
+```
+
+`truncateString("Absolutely Longer", 2)` should return "Ab...".
+
+```js
+assert(truncateString('Absolutely Longer', 2) === 'Ab...');
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function truncateString(str, num) {
@@ -50,15 +75,7 @@ function truncateString(str, num) {
 truncateString("A-tisket a-tasket A green and yellow basket", 8);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function truncateString(str, num) {
@@ -70,7 +87,4 @@ function truncateString(str, num) {
 }
 
 truncateString("A-tisket a-tasket A green and yellow basket", 8);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md

@@ -5,64 +5,115 @@ challengeType: 5
 forumTopicId: 16094
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Return the lowest index at which a value (second argument) should be inserted into an array (first argument) once it has been sorted. The returned value should be a number.
-For example, <code>getIndexToIns([1,2,3,4], 1.5)</code> should return <code>1</code> because it is greater than <code>1</code> (index 0), but less than <code>2</code> (index 1).
-Likewise, <code>getIndexToIns([20,3,5], 19)</code> should return <code>2</code> because once the array has been sorted it will look like <code>[3,5,20]</code> and <code>19</code> is less than <code>20</code> (index 2) and greater than <code>5</code> (index 1).
-</section>
 
-## Instructions
-<section id='instructions'>
+For example, `getIndexToIns([1,2,3,4], 1.5)` should return `1` because it is greater than `1` (index 0), but less than `2` (index 1).
 
-</section>
+Likewise, `getIndexToIns([20,3,5], 19)` should return `2` because once the array has been sorted it will look like `[3,5,20]` and `19` is less than `20` (index 2) and greater than `5` (index 1).
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return <code>3</code>.
-    testString: assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3);
-  - text: <code>getIndexToIns([10, 20, 30, 40, 50], 35)</code> should return a number.
-    testString: assert(typeof(getIndexToIns([10, 20, 30, 40, 50], 35)) === "number");
-  - text: <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return <code>2</code>.
-    testString: assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2);
-  - text: <code>getIndexToIns([10, 20, 30, 40, 50], 30)</code> should return a number.
-    testString: assert(typeof(getIndexToIns([10, 20, 30, 40, 50], 30)) === "number");
-  - text: <code>getIndexToIns([40, 60], 50)</code> should return <code>1</code>.
-    testString: assert(getIndexToIns([40, 60], 50) === 1);
-  - text: <code>getIndexToIns([40, 60], 50)</code> should return a number.
-    testString: assert(typeof(getIndexToIns([40, 60], 50)) === "number");
-  - text: <code>getIndexToIns([3, 10, 5], 3)</code> should return <code>0</code>.
-    testString: assert(getIndexToIns([3, 10, 5], 3) === 0);
-  - text: <code>getIndexToIns([3, 10, 5], 3)</code> should return a number.
-    testString: assert(typeof(getIndexToIns([3, 10, 5], 3)) === "number");
-  - text: <code>getIndexToIns([5, 3, 20, 3], 5)</code> should return <code>2</code>.
-    testString: assert(getIndexToIns([5, 3, 20, 3], 5) === 2);
-  - text: <code>getIndexToIns([5, 3, 20, 3], 5)</code> should return a number.
-    testString: assert(typeof(getIndexToIns([5, 3, 20, 3], 5)) === "number");
-  - text: <code>getIndexToIns([2, 20, 10], 19)</code> should return <code>2</code>.
-    testString: assert(getIndexToIns([2, 20, 10], 19) === 2);
-  - text: <code>getIndexToIns([2, 20, 10], 19)</code> should return a number.
-    testString: assert(typeof(getIndexToIns([2, 20, 10], 19)) === "number");
-  - text: <code>getIndexToIns([2, 5, 10], 15)</code> should return <code>3</code>.
-    testString: assert(getIndexToIns([2, 5, 10], 15) === 3);
-  - text: <code>getIndexToIns([2, 5, 10], 15)</code> should return a number.
-    testString: assert(typeof(getIndexToIns([2, 5, 10], 15)) === "number");
-  - text: <code>getIndexToIns([], 1)</code> should return <code>0</code>.
-    testString: assert(getIndexToIns([], 1) === 0);
-  - text: <code>getIndexToIns([], 1)</code> should return a number.
-    testString: assert(typeof(getIndexToIns([], 1)) === "number");
+`getIndexToIns([10, 20, 30, 40, 50], 35)` should return `3`.
 
+```js
+assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3);
 ```
 
-</section>
+`getIndexToIns([10, 20, 30, 40, 50], 35)` should return a number.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(typeof getIndexToIns([10, 20, 30, 40, 50], 35) === 'number');
+```
 
-<div id='js-seed'>
+`getIndexToIns([10, 20, 30, 40, 50], 30)` should return `2`.
+
+```js
+assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2);
+```
+
+`getIndexToIns([10, 20, 30, 40, 50], 30)` should return a number.
+
+```js
+assert(typeof getIndexToIns([10, 20, 30, 40, 50], 30) === 'number');
+```
+
+`getIndexToIns([40, 60], 50)` should return `1`.
+
+```js
+assert(getIndexToIns([40, 60], 50) === 1);
+```
+
+`getIndexToIns([40, 60], 50)` should return a number.
+
+```js
+assert(typeof getIndexToIns([40, 60], 50) === 'number');
+```
+
+`getIndexToIns([3, 10, 5], 3)` should return `0`.
+
+```js
+assert(getIndexToIns([3, 10, 5], 3) === 0);
+```
+
+`getIndexToIns([3, 10, 5], 3)` should return a number.
+
+```js
+assert(typeof getIndexToIns([3, 10, 5], 3) === 'number');
+```
+
+`getIndexToIns([5, 3, 20, 3], 5)` should return `2`.
+
+```js
+assert(getIndexToIns([5, 3, 20, 3], 5) === 2);
+```
+
+`getIndexToIns([5, 3, 20, 3], 5)` should return a number.
+
+```js
+assert(typeof getIndexToIns([5, 3, 20, 3], 5) === 'number');
+```
+
+`getIndexToIns([2, 20, 10], 19)` should return `2`.
+
+```js
+assert(getIndexToIns([2, 20, 10], 19) === 2);
+```
+
+`getIndexToIns([2, 20, 10], 19)` should return a number.
+
+```js
+assert(typeof getIndexToIns([2, 20, 10], 19) === 'number');
+```
+
+`getIndexToIns([2, 5, 10], 15)` should return `3`.
+
+```js
+assert(getIndexToIns([2, 5, 10], 15) === 3);
+```
+
+`getIndexToIns([2, 5, 10], 15)` should return a number.
+
+```js
+assert(typeof getIndexToIns([2, 5, 10], 15) === 'number');
+```
+
+`getIndexToIns([], 1)` should return `0`.
+
+```js
+assert(getIndexToIns([], 1) === 0);
+```
+
+`getIndexToIns([], 1)` should return a number.
+
+```js
+assert(typeof getIndexToIns([], 1) === 'number');
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function getIndexToIns(arr, num) {
@@ -72,15 +123,7 @@ function getIndexToIns(arr, num) {
 getIndexToIns([40, 60], 50);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```js
 function getIndexToIns(arr, num) {
@@ -96,7 +139,4 @@ function getIndexToIns(arr, num) {
 }
 
 getIndexToIns([40, 60], 50);
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md

@@ -5,61 +5,65 @@ challengeType: 1
 forumTopicId: 301149
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 The fundamental feature of any data structure is, of course, the ability to not only store data, but to be able to retrieve that data on command. So, now that we've learned how to create an array, let's begin to think about how we can access that array's information.
+
 When we define a simple array as seen below, there are 3 items in it:
 
 ```js
 let ourArray = ["a", "b", "c"];
 ```
 
-In an array, each array item has an <dfn>index</dfn>.  This index doubles as the position of that item in the array, and how you reference it. However, it is important to note, that JavaScript arrays are <dfn>zero-indexed</dfn>, meaning that the first element of an array is actually at the <em><strong>zeroth</strong></em> position, not the first.
-In order to retrieve an element from an array we can enclose an index in brackets and append it to the end of an array, or more commonly, to a variable which references an array object. This is known as <dfn>bracket notation</dfn>.
-For example, if we want to retrieve the <code>"a"</code> from <code>ourArray</code> and assign it to a variable, we can do so with the following code:
+In an array, each array item has an <dfn>index</dfn>. This index doubles as the position of that item in the array, and how you reference it. However, it is important to note, that JavaScript arrays are <dfn>zero-indexed</dfn>, meaning that the first element of an array is actually at the ***zeroth*** position, not the first. In order to retrieve an element from an array we can enclose an index in brackets and append it to the end of an array, or more commonly, to a variable which references an array object. This is known as <dfn>bracket notation</dfn>. For example, if we want to retrieve the `"a"` from `ourArray` and assign it to a variable, we can do so with the following code:
 
 ```js
 let ourVariable = ourArray[0];
 // ourVariable equals "a"
 ```
 
-In addition to accessing the value associated with an index, you can also <em>set</em> an index to a value using the same notation:
+In addition to accessing the value associated with an index, you can also *set* an index to a value using the same notation:
 
 ```js
 ourArray[1] = "not b anymore";
 // ourArray now equals ["a", "not b anymore", "c"];
 ```
 
-Using bracket notation, we have now reset the item at index 1 from <code>"b"</code>, to <code>"not b anymore"</code>.
-</section>
+Using bracket notation, we have now reset the item at index 1 from `"b"`, to `"not b anymore"`.
 
-## Instructions
-<section id='instructions'>
-In order to complete this challenge, set the 2nd position (index <code>1</code>) of <code>myArray</code> to anything you want, besides <code>"b"</code>.
-</section>
+# --instructions--
 
-## Tests
-<section id='tests'>
+In order to complete this challenge, set the 2nd position (index `1`) of `myArray` to anything you want, besides `"b"`.
 
-```yml
-tests:
-  - text: <code>myArray[0]</code> should be equal to <code>"a"</code>
-    testString: assert.strictEqual(myArray[0], "a");
-  - text: <code>myArray[1]</code> should not be equal to <code>"b"</code>
-    testString: assert.notStrictEqual(myArray[1], "b");
-  - text: <code>myArray[2]</code> should be equal to <code>"c"</code>
-    testString: assert.strictEqual(myArray[2], "c");
-  - text: <code>myArray[3]</code> should be equal to <code>"d"</code>
-    testString: assert.strictEqual(myArray[3], "d");
+# --hints--
 
+`myArray[0]` should be equal to `"a"`
+
+```js
+assert.strictEqual(myArray[0], 'a');
 ```
 
-</section>
+`myArray[1]` should not be equal to `"b"`
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.notStrictEqual(myArray[1], 'b');
+```
 
-<div id='js-seed'>
+`myArray[2]` should be equal to `"c"`
+
+```js
+assert.strictEqual(myArray[2], 'c');
+```
+
+`myArray[3]` should be equal to `"d"`
+
+```js
+assert.strictEqual(myArray[3], 'd');
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 let myArray = ["a", "b", "c", "d"];
@@ -69,18 +73,9 @@ let myArray = ["a", "b", "c", "d"];
 console.log(myArray);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let myArray = ["a", "b", "c", "d"];
 myArray[1] = "e";
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md

@@ -5,47 +5,63 @@ challengeType: 1
 forumTopicId: 301150
 ---
 
-## Description
-<section id='description'>
-In the first object challenge we mentioned the use of bracket notation as a way to access property values using the evaluation of a variable. For instance, imagine that our <code>foods</code> object is being used in a program for a supermarket cash register. We have some function that sets the <code>selectedFood</code> and we want to check our <code>foods</code> object for the presence of that food. This might look like:
+# --description--
+
+In the first object challenge we mentioned the use of bracket notation as a way to access property values using the evaluation of a variable. For instance, imagine that our `foods` object is being used in a program for a supermarket cash register. We have some function that sets the `selectedFood` and we want to check our `foods` object for the presence of that food. This might look like:
 
 ```js
 let selectedFood = getCurrentFood(scannedItem);
 let inventory = foods[selectedFood];
 ```
 
-This code will evaluate the value stored in the <code>selectedFood</code> variable and return the value of that key in the <code>foods</code> object, or <code>undefined</code> if it is not present. Bracket notation is very useful because sometimes object properties are not known before runtime or we need to access them in a more dynamic way.
-</section>
+This code will evaluate the value stored in the `selectedFood` variable and return the value of that key in the `foods` object, or `undefined` if it is not present. Bracket notation is very useful because sometimes object properties are not known before runtime or we need to access them in a more dynamic way.
 
-## Instructions
-<section id='instructions'>
-We've defined a function, <code>checkInventory</code>, which receives a scanned item as an argument. Return the current value of the <code>scannedItem</code> key in the <code>foods</code> object. You can assume that only valid keys will be provided as an argument to <code>checkInventory</code>.
-</section>
+# --instructions--
 
-## Tests
-<section id='tests'>
+We've defined a function, `checkInventory`, which receives a scanned item as an argument. Return the current value of the `scannedItem` key in the `foods` object. You can assume that only valid keys will be provided as an argument to `checkInventory`.
 
-```yml
-tests:
-  - text: <code>checkInventory</code> should be a function.
-    testString: assert.strictEqual(typeof checkInventory, 'function');
-  - text: 'The <code>foods</code> object should have only the following key-value pairs: <code>apples: 25</code>, <code>oranges: 32</code>, <code>plums: 28</code>, <code>bananas: 13</code>, <code>grapes: 35</code>, <code>strawberries: 27</code>.'
-    testString: 'assert.deepEqual(foods, {apples: 25, oranges: 32, plums: 28, bananas: 13, grapes: 35, strawberries: 27});'
-  - text: <code>checkInventory("apples")</code> should return <code>25</code>.
-    testString: assert.strictEqual(checkInventory('apples'), 25);
-  - text: <code>checkInventory("bananas")</code> should return <code>13</code>.
-    testString: assert.strictEqual(checkInventory('bananas'), 13);
-  - text: <code>checkInventory("strawberries")</code> should return <code>27</code>.
-    testString: assert.strictEqual(checkInventory('strawberries'), 27);
+# --hints--
 
+`checkInventory` should be a function.
+
+```js
+assert.strictEqual(typeof checkInventory, 'function');
 ```
 
-</section>
+The `foods` object should have only the following key-value pairs: `apples: 25`, `oranges: 32`, `plums: 28`, `bananas: 13`, `grapes: 35`, `strawberries: 27`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.deepEqual(foods, {
+  apples: 25,
+  oranges: 32,
+  plums: 28,
+  bananas: 13,
+  grapes: 35,
+  strawberries: 27
+});
+```
 
-<div id='js-seed'>
+`checkInventory("apples")` should return `25`.
+
+```js
+assert.strictEqual(checkInventory('apples'), 25);
+```
+
+`checkInventory("bananas")` should return `13`.
+
+```js
+assert.strictEqual(checkInventory('bananas'), 13);
+```
+
+`checkInventory("strawberries")` should return `27`.
+
+```js
+assert.strictEqual(checkInventory('strawberries'), 27);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 let foods = {
@@ -66,14 +82,7 @@ function checkInventory(scannedItem) {
 console.log(checkInventory("apples"));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let foods = {
@@ -89,5 +98,3 @@ function checkInventory(scannedItem) {
   return foods[scannedItem];
 }
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-to-an-array-with-push-and-unshift.md

@@ -5,10 +5,11 @@ challengeType: 1
 forumTopicId: 301151
 ---
 
-## Description
-<section id='description'>
-An array's length, like the data types it can contain, is not fixed. Arrays can be defined with a length of any number of elements, and elements can be added or removed over time; in other words, arrays are <dfn>mutable</dfn>. In this challenge, we will look at two methods with which we can programmatically modify an array: <code>Array.push()</code> and <code>Array.unshift()</code>.
-Both methods take one or more elements as parameters and add those elements to the array the method is being called on; the <code>push()</code> method adds elements to the end of an array, and <code>unshift()</code> adds elements to the beginning. Consider the following:
+# --description--
+
+An array's length, like the data types it can contain, is not fixed. Arrays can be defined with a length of any number of elements, and elements can be added or removed over time; in other words, arrays are <dfn>mutable</dfn>. In this challenge, we will look at two methods with which we can programmatically modify an array: `Array.push()` and `Array.unshift()`.
+
+Both methods take one or more elements as parameters and add those elements to the array the method is being called on; the `push()` method adds elements to the end of an array, and `unshift()` adds elements to the beginning. Consider the following:
 
 ```js
 let twentyThree = 'XXIII';
@@ -21,33 +22,43 @@ romanNumerals.push(twentyThree);
 // now equals ['XIX', 'XX', 'XXI', 'XXII', 'XXIII']Notice that we can also pass variables, which allows us even greater flexibility in dynamically modifying our array's data.
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-We have defined a function, <code>mixedNumbers</code>, which we are passing an array as an argument. Modify the function by using <code>push()</code> and <code>unshift()</code> to add <code>'I', 2, 'three'</code> to the beginning of the array and <code>7, 'VIII', 9</code> to the end so that the returned array contains representations of the numbers 1-9 in order.
-</section>
+We have defined a function, `mixedNumbers`, which we are passing an array as an argument. Modify the function by using `push()` and `unshift()` to add `'I', 2, 'three'` to the beginning of the array and `7, 'VIII', 9` to the end so that the returned array contains representations of the numbers 1-9 in order.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>mixedNumbers(["IV", 5, "six"])</code> should now return <code>["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]</code>
-    testString: assert.deepEqual(mixedNumbers(['IV', 5, 'six']), ['I', 2, 'three', 'IV', 5, 'six', 7, 'VIII', 9]);
-  - text: The <code>mixedNumbers</code> function should utilize the <code>push()</code> method
-    testString: assert(mixedNumbers.toString().match(/\.push/));
-  - text: The <code>mixedNumbers</code> function should utilize the <code>unshift()</code> method
-    testString: assert(mixedNumbers.toString().match(/\.unshift/));
+`mixedNumbers(["IV", 5, "six"])` should now return `["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]`
 
+```js
+assert.deepEqual(mixedNumbers(['IV', 5, 'six']), [
+  'I',
+  2,
+  'three',
+  'IV',
+  5,
+  'six',
+  7,
+  'VIII',
+  9
+]);
 ```
 
-</section>
+The `mixedNumbers` function should utilize the `push()` method
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(mixedNumbers.toString().match(/\.push/));
+```
 
-<div id='js-seed'>
+The `mixedNumbers` function should utilize the `unshift()` method
+
+```js
+assert(mixedNumbers.toString().match(/\.unshift/));
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function mixedNumbers(arr) {
@@ -60,14 +71,7 @@ function mixedNumbers(arr) {
 console.log(mixedNumbers(['IV', 5, 'six']));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 function mixedNumbers(arr) {
@@ -76,5 +80,3 @@ function mixedNumbers(arr) {
   return arr;
 }
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-using-splice.md

@@ -5,9 +5,9 @@ challengeType: 1
 forumTopicId: 301152
 ---
 
-## Description
-<section id='description'>
-Remember in the last challenge we mentioned that <code>splice()</code> can take up to three parameters? Well, you can use the third parameter, comprised of one or more element(s), to add to the array. This can be incredibly useful for quickly switching out an element, or a set of elements, for another.
+# --description--
+
+Remember in the last challenge we mentioned that `splice()` can take up to three parameters? Well, you can use the third parameter, comprised of one or more element(s), to add to the array. This can be incredibly useful for quickly switching out an element, or a set of elements, for another.
 
 ```js
 const numbers = [10, 11, 12, 12, 15];
@@ -20,36 +20,56 @@ console.log(numbers);
 // returns [ 10, 11, 12, 13, 14, 15 ]
 ```
 
-Here we begin with an array of numbers. We then pass the following to <code>splice()</code>. The index at which to begin deleting elements (3), the number of elements to be deleted (1), and the elements (13, 14) to be inserted at that same index. Note that there can be any number of elements (separated by commas) following <code>amountToDelete</code>, each of which gets inserted.
-</section>
+Here we begin with an array of numbers. We then pass the following to `splice()`. The index at which to begin deleting elements (3), the number of elements to be deleted (1), and the elements (13, 14) to be inserted at that same index. Note that there can be any number of elements (separated by commas) following `amountToDelete`, each of which gets inserted.
 
-## Instructions
-<section id='instructions'>
-We have defined a function, <code>htmlColorNames</code>, which takes an array of HTML colors as an argument. Modify the function using <code>splice()</code> to remove the first two elements of the array and add <code>'DarkSalmon'</code> and <code>'BlanchedAlmond'</code> in their respective places.
-</section>
+# --instructions--
 
-## Tests
-<section id='tests'>
+We have defined a function, `htmlColorNames`, which takes an array of HTML colors as an argument. Modify the function using `splice()` to remove the first two elements of the array and add `'DarkSalmon'` and `'BlanchedAlmond'` in their respective places.
 
-```yml
-tests:
-  - text: <code>htmlColorNames</code> should return <code>["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurquoise", "FireBrick"]</code>
-    testString: assert.deepEqual(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurquoise', 'FireBrick']), ['DarkSalmon', 'BlanchedAlmond', 'LavenderBlush', 'PaleTurquoise', 'FireBrick']);
-  - text: The <code>htmlColorNames</code> function should utilize the <code>splice()</code> method
-    testString: assert(/.splice/.test(code));
-  - text: You should not use <code>shift()</code> or <code>unshift()</code>.
-    testString: assert(!/shift|unshift/.test(code));
-  - text: You should not use array bracket notation.
-    testString: assert(!/\[\d\]\s*=/.test(code));
+# --hints--
 
+`htmlColorNames` should return `["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurquoise", "FireBrick"]`
+
+```js
+assert.deepEqual(
+  htmlColorNames([
+    'DarkGoldenRod',
+    'WhiteSmoke',
+    'LavenderBlush',
+    'PaleTurquoise',
+    'FireBrick'
+  ]),
+  [
+    'DarkSalmon',
+    'BlanchedAlmond',
+    'LavenderBlush',
+    'PaleTurquoise',
+    'FireBrick'
+  ]
+);
 ```
 
-</section>
+The `htmlColorNames` function should utilize the `splice()` method
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(/.splice/.test(code));
+```
 
-<div id='js-seed'>
+You should not use `shift()` or `unshift()`.
+
+```js
+assert(!/shift|unshift/.test(code));
+```
+
+You should not use array bracket notation.
+
+```js
+assert(!/\[\d\]\s*=/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function htmlColorNames(arr) {
@@ -62,14 +82,7 @@ function htmlColorNames(arr) {
 console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurquoise', 'FireBrick']));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 function htmlColorNames(arr) {
@@ -77,5 +90,3 @@ function htmlColorNames(arr) {
   return arr;
 }
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md

@@ -5,8 +5,8 @@ challengeType: 1
 forumTopicId: 301153
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 At their most basic, objects are just collections of <dfn>key-value</dfn> pairs. In other words, they are pieces of data (<dfn>values</dfn>) mapped to unique identifiers called <dfn>properties</dfn> (<dfn>keys</dfn>). Take a look at an example:
 
 ```js
@@ -17,13 +17,13 @@ const tekkenCharacter = {
 };
 ```
 
-The above code defines a Tekken video game character object called <code>tekkenCharacter</code>. It has three properties, each of which map to a specific value. If you want to add an additional property, such as "origin", it can be done by assigning <code>origin</code> to the object:
+The above code defines a Tekken video game character object called `tekkenCharacter`. It has three properties, each of which map to a specific value. If you want to add an additional property, such as "origin", it can be done by assigning `origin` to the object:
 
 ```js
 tekkenCharacter.origin = 'South Korea';
 ```
 
-This uses dot notation. If you were to observe the <code>tekkenCharacter</code> object, it will now include the <code>origin</code> property. Hwoarang also had distinct orange hair. You can add this property with bracket notation by doing:
+This uses dot notation. If you were to observe the `tekkenCharacter` object, it will now include the `origin` property. Hwoarang also had distinct orange hair. You can add this property with bracket notation by doing:
 
 ```js
 tekkenCharacter['hair color'] = 'dyed orange';
@@ -50,37 +50,49 @@ After adding all the examples, the object will look like this:
 };
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
- A <code>foods</code> object has been created with three entries. Using the syntax of your choice, add three more entries to it: <code>bananas</code> with a value of <code>13</code>, <code>grapes</code> with a value of <code>35</code>, and <code>strawberries</code> with a value of <code>27</code>.
-</section>
+A `foods` object has been created with three entries. Using the syntax of your choice, add three more entries to it: `bananas` with a value of `13`, `grapes` with a value of `35`, and `strawberries` with a value of `27`.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>foods</code> should be an object.
-    testString: assert(typeof foods === 'object');
-  - text: The <code>foods</code> object should have a key <code>"bananas"</code> with a value of <code>13</code>.
-    testString: assert(foods.bananas === 13);
-  - text: The <code>foods</code> object should have a key <code>"grapes"</code> with a value of <code>35</code>.
-    testString: assert(foods.grapes === 35);
-  - text: The <code>foods</code> object should have a key <code>"strawberries"</code> with a value of <code>27</code>.
-    testString: assert(foods.strawberries === 27);
-  - text: The key-value pairs should be set using dot or bracket notation.
-    testString: assert(code.search(/bananas:/) === -1 && code.search(/grapes:/) === -1 && code.search(/strawberries:/) === -1);
+`foods` should be an object.
 
+```js
+assert(typeof foods === 'object');
 ```
 
-</section>
+The `foods` object should have a key `"bananas"` with a value of `13`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(foods.bananas === 13);
+```
 
-<div id='js-seed'>
+The `foods` object should have a key `"grapes"` with a value of `35`.
+
+```js
+assert(foods.grapes === 35);
+```
+
+The `foods` object should have a key `"strawberries"` with a value of `27`.
+
+```js
+assert(foods.strawberries === 27);
+```
+
+The key-value pairs should be set using dot or bracket notation.
+
+```js
+assert(
+  code.search(/bananas:/) === -1 &&
+    code.search(/grapes:/) === -1 &&
+    code.search(/strawberries:/) === -1
+);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 let foods = {
@@ -96,14 +108,7 @@ let foods = {
 console.log(foods);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let foods = {
@@ -116,5 +121,3 @@ foods['bananas'] = 13;
 foods['grapes']  = 35;
 foods['strawberries'] = 27;
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md

@@ -5,9 +5,10 @@ challengeType: 1
 forumTopicId: 301154
 ---
 
-## Description
-<section id='description'>
-Since arrays can be changed, or <em>mutated</em>, at any time, there's no guarantee about where a particular piece of data will be on a given array, or if that element even still exists. Luckily, JavaScript provides us with another built-in method, <code>indexOf()</code>, that allows us to quickly and easily check for the presence of an element on an array. <code>indexOf()</code> takes an element as a parameter, and when called, it returns the position, or index, of that element, or <code>-1</code> if the element does not exist on the array.
+# --description--
+
+Since arrays can be changed, or *mutated*, at any time, there's no guarantee about where a particular piece of data will be on a given array, or if that element even still exists. Luckily, JavaScript provides us with another built-in method, `indexOf()`, that allows us to quickly and easily check for the presence of an element on an array. `indexOf()` takes an element as a parameter, and when called, it returns the position, or index, of that element, or `-1` if the element does not exist on the array.
+
 For example:
 
 ```js
@@ -18,39 +19,57 @@ fruits.indexOf('oranges'); // returns 2
 fruits.indexOf('pears'); // returns 1, the first index at which the element exists
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-<code>indexOf()</code> can be incredibly useful for quickly checking for the presence of an element on an array. We have defined a function, <code>quickCheck</code>, that takes an array and an element as arguments. Modify the function using <code>indexOf()</code> so that it returns <code>true</code> if the passed element exists on the array, and <code>false</code> if it does not.
-</section>
+`indexOf()` can be incredibly useful for quickly checking for the presence of an element on an array. We have defined a function, `quickCheck`, that takes an array and an element as arguments. Modify the function using `indexOf()` so that it returns `true` if the passed element exists on the array, and `false` if it does not.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: The <code>quickCheck</code> function should return a boolean (<code>true</code> or <code>false</code>), not a string (<code>"true"</code> or <code>"false"</code>)
-    testString: assert.isBoolean(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
-  - text: <code>quickCheck(["squash", "onions", "shallots"], "mushrooms")</code> should return <code>false</code>
-    testString: assert.strictEqual(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'), false);
-  - text: <code>quickCheck(["onions", "squash", "shallots"], "onions")</code> should return <code>true</code>
-    testString: assert.strictEqual(quickCheck(['onions', 'squash', 'shallots'], 'onions'), true);
-  - text: <code>quickCheck([3, 5, 9, 125, 45, 2], 125)</code> should return <code>true</code>
-    testString: assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true);
-  - text: <code>quickCheck([true, false, false], undefined)</code> should return <code>false</code>
-    testString: assert.strictEqual(quickCheck([true, false, false], undefined), false);
-  - text: The <code>quickCheck</code> function should utilize the <code>indexOf()</code> method
-    testString: assert.notStrictEqual(quickCheck.toString().search(/\.indexOf\(/), -1);
+The `quickCheck` function should return a boolean (`true` or `false`), not a string (`"true"` or `"false"`)
 
+```js
+assert.isBoolean(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
 ```
 
-</section>
+`quickCheck(["squash", "onions", "shallots"], "mushrooms")` should return `false`
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.strictEqual(
+  quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'),
+  false
+);
+```
 
-<div id='js-seed'>
+`quickCheck(["onions", "squash", "shallots"], "onions")` should return `true`
+
+```js
+assert.strictEqual(
+  quickCheck(['onions', 'squash', 'shallots'], 'onions'),
+  true
+);
+```
+
+`quickCheck([3, 5, 9, 125, 45, 2], 125)` should return `true`
+
+```js
+assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true);
+```
+
+`quickCheck([true, false, false], undefined)` should return `false`
+
+```js
+assert.strictEqual(quickCheck([true, false, false], undefined), false);
+```
+
+The `quickCheck` function should utilize the `indexOf()` method
+
+```js
+assert.notStrictEqual(quickCheck.toString().search(/\.indexOf\(/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function quickCheck(arr, elem) {
@@ -62,19 +81,10 @@ function quickCheck(arr, elem) {
 console.log(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 function quickCheck(arr, elem) {
   return arr.indexOf(elem) >= 0; 
 }
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/check-if-an-object-has-a-property.md

@@ -5,9 +5,9 @@ challengeType: 1
 forumTopicId: 301155
 ---
 
-## Description
-<section id='description'>
-Now we can add, modify, and remove keys from objects. But what if we just wanted to know if an object has a specific property? JavaScript provides us with two different ways to do this. One uses the <code>hasOwnProperty()</code> method and the other uses the <code>in</code> keyword. If we have an object <code>users</code> with a property of <code>Alan</code>, we could check for its presence in either of the following ways:
+# --description--
+
+Now we can add, modify, and remove keys from objects. But what if we just wanted to know if an object has a specific property? JavaScript provides us with two different ways to do this. One uses the `hasOwnProperty()` method and the other uses the `in` keyword. If we have an object `users` with a property of `Alan`, we could check for its presence in either of the following ways:
 
 ```js
 users.hasOwnProperty('Alan');
@@ -15,38 +15,77 @@ users.hasOwnProperty('Alan');
 // both return true
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-We've created an object, <code>users</code>, with some users in it and a function <code>isEveryoneHere</code>, which we pass the <code>users</code> object to as an argument. Finish writing this function so that it returns <code>true</code> only if the <code>users</code> object contains all four names, <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>, as keys, and <code>false</code> otherwise.
-</section>
+We've created an object, `users`, with some users in it and a function `isEveryoneHere`, which we pass the `users` object to as an argument. Finish writing this function so that it returns `true` only if the `users` object contains all four names, `Alan`, `Jeff`, `Sarah`, and `Ryan`, as keys, and `false` otherwise.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: The <code>users</code> object should only contain the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>
-    testString: assert("Alan" in users && "Jeff" in users && "Sarah" in users && "Ryan" in users && Object.keys(users).length === 4);
-  - text: The function <code>isEveryoneHere</code> should return <code>true</code> if <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code> are properties on the <code>users</code> object
-    testString: assert(isEveryoneHere(users) === true);
-  - text: The function <code>isEveryoneHere</code> should return <code>false</code> if <code>Alan</code> is not a property on the <code>users</code> object
-    testString: assert((function() { delete users.Alan; return isEveryoneHere(users) })() === false);
-  - text: The function <code>isEveryoneHere</code> should return <code>false</code> if <code>Jeff</code> is not a property on the <code>users</code> object
-    testString: assert((function() { delete users.Jeff; return isEveryoneHere(users) })() === false);
-  - text: The function <code>isEveryoneHere</code> should return <code>false</code> if <code>Sarah</code> is not a property on the <code>users</code> object
-    testString: assert((function() { delete users.Sarah; return isEveryoneHere(users) })() === false);
-  - text: The function <code>isEveryoneHere</code> should return <code>false</code> if <code>Ryan</code> is not a property on the <code>users</code> object
-    testString: assert((function() { delete users.Ryan; return isEveryoneHere(users) })() === false);
+The `users` object should only contain the keys `Alan`, `Jeff`, `Sarah`, and `Ryan`
+
+```js
+assert(
+  'Alan' in users &&
+    'Jeff' in users &&
+    'Sarah' in users &&
+    'Ryan' in users &&
+    Object.keys(users).length === 4
+);
 ```
 
-</section>
+The function `isEveryoneHere` should return `true` if `Alan`, `Jeff`, `Sarah`, and `Ryan` are properties on the `users` object
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(isEveryoneHere(users) === true);
+```
 
-<div id='js-seed'>
+The function `isEveryoneHere` should return `false` if `Alan` is not a property on the `users` object
+
+```js
+assert(
+  (function () {
+    delete users.Alan;
+    return isEveryoneHere(users);
+  })() === false
+);
+```
+
+The function `isEveryoneHere` should return `false` if `Jeff` is not a property on the `users` object
+
+```js
+assert(
+  (function () {
+    delete users.Jeff;
+    return isEveryoneHere(users);
+  })() === false
+);
+```
+
+The function `isEveryoneHere` should return `false` if `Sarah` is not a property on the `users` object
+
+```js
+assert(
+  (function () {
+    delete users.Sarah;
+    return isEveryoneHere(users);
+  })() === false
+);
+```
+
+The function `isEveryoneHere` should return `false` if `Ryan` is not a property on the `users` object
+
+```js
+assert(
+  (function () {
+    delete users.Ryan;
+    return isEveryoneHere(users);
+  })() === false
+);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 let users = {
@@ -77,14 +116,7 @@ function isEveryoneHere(obj) {
 console.log(isEveryoneHere(users));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let users = {
@@ -117,5 +149,3 @@ function isEveryoneHere(obj) {
 
 console.log(isEveryoneHere(users));
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/combine-arrays-with-the-spread-operator.md

@@ -5,8 +5,8 @@ challengeType: 1
 forumTopicId: 301156
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Another huge advantage of the <dfn>spread</dfn> operator, is the ability to combine arrays, or to insert all the elements of one array into another, at any index. With more traditional syntaxes, we can concatenate arrays, but this only allows us to combine arrays at the end of one, and at the start of another. Spread syntax makes the following operation extremely simple:
 
 ```js
@@ -17,31 +17,28 @@ let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
 ```
 
 Using spread syntax, we have just achieved an operation that would have been more complex and more verbose had we used traditional methods.
-</section>
 
-## Instructions
-<section id='instructions'>
-We have defined a function <code>spreadOut</code> that returns the variable <code>sentence</code>. Modify the function using the <dfn>spread</dfn> operator so that it returns the array <code>['learning', 'to', 'code', 'is', 'fun']</code>.
-</section>
+# --instructions--
 
-## Tests
-<section id='tests'>
+We have defined a function `spreadOut` that returns the variable `sentence`. Modify the function using the <dfn>spread</dfn> operator so that it returns the array `['learning', 'to', 'code', 'is', 'fun']`.
 
-```yml
-tests:
-  - text: <code>spreadOut</code> should return <code>["learning", "to", "code", "is", "fun"]</code>
-    testString: assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun']);
-  - text: The <code>spreadOut</code> function should utilize spread syntax
-    testString: assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1);
+# --hints--
 
+`spreadOut` should return `["learning", "to", "code", "is", "fun"]`
+
+```js
+assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun']);
 ```
 
-</section>
+The `spreadOut` function should utilize spread syntax
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1);
+```
 
-<div id='js-seed'>
+# --seed--
+
+## --seed-contents--
 
 ```js
 function spreadOut() {
@@ -53,14 +50,7 @@ function spreadOut() {
 console.log(spreadOut());
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 function spreadOut() {
@@ -68,7 +58,4 @@ function spreadOut() {
   let sentence = ['learning', ...fragment, 'is', 'fun'];
   return sentence;
 }
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-an-array-with-the-spread-operator.md

@@ -5,9 +5,10 @@ challengeType: 1
 forumTopicId: 301157
 ---
 
-## Description
-<section id='description'>
-While <code>slice()</code> allows us to be selective about what elements of an array to copy, among several other useful tasks, ES6's new <dfn>spread operator</dfn> allows us to easily copy <em>all</em> of an array's elements, in order, with a simple and highly readable syntax. The spread syntax simply looks like this: <code>...</code>
+# --description--
+
+While `slice()` allows us to be selective about what elements of an array to copy, among several other useful tasks, ES6's new <dfn>spread operator</dfn> allows us to easily copy *all* of an array's elements, in order, with a simple and highly readable syntax. The spread syntax simply looks like this: `...`
+
 In practice, we can use the spread operator to copy an array like so:
 
 ```js
@@ -17,37 +18,58 @@ let thatArray = [...thisArray];
 // thisArray remains unchanged and thatArray contains the same elements as thisArray
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-We have defined a function, <code>copyMachine</code> which takes <code>arr</code> (an array) and <code>num</code> (a number) as arguments. The function is supposed to return a new array made up of <code>num</code> copies of <code>arr</code>. We have done most of the work for you, but it doesn't work quite right yet. Modify the function using spread syntax so that it works correctly (hint: another method we have already covered might come in handy here!).
-</section>
+We have defined a function, `copyMachine` which takes `arr` (an array) and `num` (a number) as arguments. The function is supposed to return a new array made up of `num` copies of `arr`. We have done most of the work for you, but it doesn't work quite right yet. Modify the function using spread syntax so that it works correctly (hint: another method we have already covered might come in handy here!).
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>copyMachine([true, false, true], 2)</code> should return <code>[[true, false, true], [true, false, true]]</code>
-    testString: assert.deepEqual(copyMachine([true, false, true], 2), [[true, false, true], [true, false, true]]);
-  - text: <code>copyMachine([1, 2, 3], 5)</code> should return <code>[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]</code>
-    testString: assert.deepEqual(copyMachine([1, 2, 3], 5), [[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]);
-  - text: <code>copyMachine([true, true, null], 1)</code> should return <code>[[true, true, null]]</code>
-    testString: assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]]);
-  - text: <code>copyMachine(["it works"], 3)</code> should return <code>[["it works"], ["it works"], ["it works"]]</code>
-    testString: assert.deepEqual(copyMachine(['it works'], 3), [['it works'], ['it works'], ['it works']]);
-  - text: The <code>copyMachine</code> function should utilize the <code>spread operator</code> with array <code>arr</code>
-    testString: assert(__helpers.removeJSComments(code).match(/\.\.\.arr/));
+`copyMachine([true, false, true], 2)` should return `[[true, false, true], [true, false, true]]`
 
+```js
+assert.deepEqual(copyMachine([true, false, true], 2), [
+  [true, false, true],
+  [true, false, true]
+]);
 ```
 
-</section>
+`copyMachine([1, 2, 3], 5)` should return `[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]`
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.deepEqual(copyMachine([1, 2, 3], 5), [
+  [1, 2, 3],
+  [1, 2, 3],
+  [1, 2, 3],
+  [1, 2, 3],
+  [1, 2, 3]
+]);
+```
 
-<div id='js-seed'>
+`copyMachine([true, true, null], 1)` should return `[[true, true, null]]`
+
+```js
+assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]]);
+```
+
+`copyMachine(["it works"], 3)` should return `[["it works"], ["it works"], ["it works"]]`
+
+```js
+assert.deepEqual(copyMachine(['it works'], 3), [
+  ['it works'],
+  ['it works'],
+  ['it works']
+]);
+```
+
+The `copyMachine` function should utilize the `spread operator` with array `arr`
+
+```js
+assert(__helpers.removeJSComments(code).match(/\.\.\.arr/));
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function copyMachine(arr, num) {
@@ -64,23 +86,16 @@ function copyMachine(arr, num) {
 console.log(copyMachine([true, false, true], 2));
 ```
 
-</div>
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 function copyMachine(arr,num){
-	let newArr=[];
-	while(num >=1){
-	newArr.push([...arr]);
-	num--;
-	}
-	return newArr;
+    let newArr=[];
+    while(num >=1){
+    newArr.push([...arr]);
+    num--;
+    }
+    return newArr;
 }
 console.log(copyMachine([true, false, true], 2));
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-array-items-using-slice.md

@@ -5,9 +5,9 @@ challengeType: 1
 forumTopicId: 301158
 ---
 
-## Description
-<section id='description'>
-The next method we will cover is <code>slice()</code>. Rather than modifying an array, <code>slice()</code> copies or <em>extracts</em> a given number of elements to a new array, leaving the array it is called upon untouched. <code>slice()</code> takes only 2 parameters &mdash; the first is the index at which to begin extraction, and the second is the index at which to stop extraction (extraction will occur up to, but not including the element at this index). Consider this:
+# --description--
+
+The next method we will cover is `slice()`. Rather than modifying an array, `slice()` copies or *extracts* a given number of elements to a new array, leaving the array it is called upon untouched. `slice()` takes only 2 parameters — the first is the index at which to begin extraction, and the second is the index at which to stop extraction (extraction will occur up to, but not including the element at this index). Consider this:
 
 ```js
 let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];
@@ -18,31 +18,31 @@ let todaysWeather = weatherConditions.slice(1, 3);
 ```
 
 In effect, we have created a new array by extracting elements from an existing array.
-</section>
 
-## Instructions
-<section id='instructions'>
-We have defined a function, <code>forecast</code>, that takes an array as an argument. Modify the function using <code>slice()</code> to extract information from the argument array and return a new array that contains the elements <code>'warm'</code> and <code>'sunny'</code>.
-</section>
+# --instructions--
 
-## Tests
-<section id='tests'>
+We have defined a function, `forecast`, that takes an array as an argument. Modify the function using `slice()` to extract information from the argument array and return a new array that contains the elements `'warm'` and `'sunny'`.
 
-```yml
-tests:
-  - text: <code>forecast</code> should return <code>["warm", "sunny"]</code>
-    testString: assert.deepEqual(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']), ['warm', 'sunny']);
-  - text: The <code>forecast</code> function should utilize the <code>slice()</code> method
-    testString: assert(/\.slice\(/.test(code));
+# --hints--
 
+`forecast` should return `["warm", "sunny"]`
+
+```js
+assert.deepEqual(
+  forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']),
+  ['warm', 'sunny']
+);
 ```
 
-</section>
+The `forecast` function should utilize the `slice()` method
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(/\.slice\(/.test(code));
+```
 
-<div id='js-seed'>
+# --seed--
+
+## --seed-contents--
 
 ```js
 function forecast(arr) {
@@ -55,19 +55,10 @@ function forecast(arr) {
 console.log(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 function forecast(arr) {
   return arr.slice(2,4);
 }
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md

@@ -5,9 +5,10 @@ challengeType: 1
 forumTopicId: 301159
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Awesome! You have just learned a ton about arrays! This has been a fairly high level overview, and there is plenty more to learn about working with arrays, much of which you will see in later sections. But before moving on to looking at <dfn>Objects</dfn>, lets take one more look, and see how arrays can become a bit more complex than what we have seen in previous challenges.
+
 One of the most powerful features when thinking of arrays as data structures, is that arrays can contain, or even be completely made up of other arrays. We have seen arrays that contain arrays in previous challenges, but fairly simple ones. However, arrays can contain an infinite depth of arrays that can contain other arrays, each with their own arbitrary levels of depth, and so on. In this way, an array can very quickly become very complex data structure, known as a <dfn>multi-dimensional</dfn>, or nested array. Consider the following example:
 
 ```js
@@ -29,8 +30,7 @@ let nestedArray = [ // top, or first level - the outer most array
 ];
 ```
 
-While this example may seem convoluted, this level of complexity is not unheard of, or even unusual, when dealing with large amounts of data.
-However, we can still very easily access the deepest levels of an array this complex with bracket notation:
+While this example may seem convoluted, this level of complexity is not unheard of, or even unusual, when dealing with large amounts of data. However, we can still very easily access the deepest levels of an array this complex with bracket notation:
 
 ```js
 console.log(nestedArray[2][1][0][0][0]);
@@ -46,37 +46,149 @@ console.log(nestedArray[2][1][0][0][0]);
 // now logs: deeper still
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-We have defined a variable, <code>myNestedArray</code>, set equal to an array. Modify <code>myNestedArray</code>, using any combination of <dfn>strings</dfn>, <dfn>numbers</dfn>, and <dfn>booleans</dfn> for data elements, so that it has exactly five levels of depth (remember, the outer-most array is level 1). Somewhere on the third level, include the string <code>'deep'</code>, on the fourth level, include the string <code>'deeper'</code>, and on the fifth level, include the string <code>'deepest'</code>.
-</section>
+We have defined a variable, `myNestedArray`, set equal to an array. Modify `myNestedArray`, using any combination of <dfn>strings</dfn>, <dfn>numbers</dfn>, and <dfn>booleans</dfn> for data elements, so that it has exactly five levels of depth (remember, the outer-most array is level 1). Somewhere on the third level, include the string `'deep'`, on the fourth level, include the string `'deeper'`, and on the fifth level, include the string `'deepest'`.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>myNestedArray</code> should contain only numbers, booleans, and strings as data elements
-    testString: 'assert.strictEqual((function(arr) { let flattened = (function flatten(arr) { const flat = [].concat(...arr); return flat.some (Array.isArray) ? flatten(flat) : flat; })(arr); for (let i = 0; i < flattened.length; i++) { if ( typeof flattened[i] !== ''number'' && typeof flattened[i] !== ''string'' && typeof flattened[i] !== ''boolean'') { return false } } return true })(myNestedArray), true);'
-  - text: <code>myNestedArray</code> should have exactly 5 levels of depth
-    testString: 'assert.strictEqual((function(arr) {let depth = 0;function arrayDepth(array, i, d) { if (Array.isArray(array[i])) {  arrayDepth(array[i], 0, d + 1);} else {  depth = (d > depth) ? d : depth;}if (i < array.length) {  arrayDepth(array, i + 1, d);}  }arrayDepth(arr, 0, 0);return depth;})(myNestedArray), 4);'
-  - text: <code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deep"</code> on an array nested 3 levels deep
-    testString: assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deep').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deep')[0] === 2);
-  - text: <code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deeper"</code> on an array nested 4 levels deep
-    testString: assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deeper').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deeper')[0] === 3);
-  - text: <code>myNestedArray</code> should contain exactly one occurrence of the string <code>"deepest"</code> on an array nested 5 levels deep
-    testString: assert((function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deepest').length === 1 && (function howDeep(array, target, depth = 0) {return array.reduce((combined, current) => {if (Array.isArray(current)) {  return combined.concat(howDeep(current, target, depth + 1));} else if (current === target) {  return combined.concat(depth);} else {  return combined;}}, []);})(myNestedArray, 'deepest')[0] === 4);
+`myNestedArray` should contain only numbers, booleans, and strings as data elements
 
+```js
+assert.strictEqual(
+  (function (arr) {
+    let flattened = (function flatten(arr) {
+      const flat = [].concat(...arr);
+      return flat.some(Array.isArray) ? flatten(flat) : flat;
+    })(arr);
+    for (let i = 0; i < flattened.length; i++) {
+      if (
+        typeof flattened[i] !== 'number' &&
+        typeof flattened[i] !== 'string' &&
+        typeof flattened[i] !== 'boolean'
+      ) {
+        return false;
+      }
+    }
+    return true;
+  })(myNestedArray),
+  true
+);
 ```
 
-</section>
+`myNestedArray` should have exactly 5 levels of depth
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.strictEqual(
+  (function (arr) {
+    let depth = 0;
+    function arrayDepth(array, i, d) {
+      if (Array.isArray(array[i])) {
+        arrayDepth(array[i], 0, d + 1);
+      } else {
+        depth = d > depth ? d : depth;
+      }
+      if (i < array.length) {
+        arrayDepth(array, i + 1, d);
+      }
+    }
+    arrayDepth(arr, 0, 0);
+    return depth;
+  })(myNestedArray),
+  4
+);
+```
 
-<div id='js-seed'>
+`myNestedArray` should contain exactly one occurrence of the string `"deep"` on an array nested 3 levels deep
+
+```js
+assert(
+  (function howDeep(array, target, depth = 0) {
+    return array.reduce((combined, current) => {
+      if (Array.isArray(current)) {
+        return combined.concat(howDeep(current, target, depth + 1));
+      } else if (current === target) {
+        return combined.concat(depth);
+      } else {
+        return combined;
+      }
+    }, []);
+  })(myNestedArray, 'deep').length === 1 &&
+    (function howDeep(array, target, depth = 0) {
+      return array.reduce((combined, current) => {
+        if (Array.isArray(current)) {
+          return combined.concat(howDeep(current, target, depth + 1));
+        } else if (current === target) {
+          return combined.concat(depth);
+        } else {
+          return combined;
+        }
+      }, []);
+    })(myNestedArray, 'deep')[0] === 2
+);
+```
+
+`myNestedArray` should contain exactly one occurrence of the string `"deeper"` on an array nested 4 levels deep
+
+```js
+assert(
+  (function howDeep(array, target, depth = 0) {
+    return array.reduce((combined, current) => {
+      if (Array.isArray(current)) {
+        return combined.concat(howDeep(current, target, depth + 1));
+      } else if (current === target) {
+        return combined.concat(depth);
+      } else {
+        return combined;
+      }
+    }, []);
+  })(myNestedArray, 'deeper').length === 1 &&
+    (function howDeep(array, target, depth = 0) {
+      return array.reduce((combined, current) => {
+        if (Array.isArray(current)) {
+          return combined.concat(howDeep(current, target, depth + 1));
+        } else if (current === target) {
+          return combined.concat(depth);
+        } else {
+          return combined;
+        }
+      }, []);
+    })(myNestedArray, 'deeper')[0] === 3
+);
+```
+
+`myNestedArray` should contain exactly one occurrence of the string `"deepest"` on an array nested 5 levels deep
+
+```js
+assert(
+  (function howDeep(array, target, depth = 0) {
+    return array.reduce((combined, current) => {
+      if (Array.isArray(current)) {
+        return combined.concat(howDeep(current, target, depth + 1));
+      } else if (current === target) {
+        return combined.concat(depth);
+      } else {
+        return combined;
+      }
+    }, []);
+  })(myNestedArray, 'deepest').length === 1 &&
+    (function howDeep(array, target, depth = 0) {
+      return array.reduce((combined, current) => {
+        if (Array.isArray(current)) {
+          return combined.concat(howDeep(current, target, depth + 1));
+        } else if (current === target) {
+          return combined.concat(depth);
+        } else {
+          return combined;
+        }
+      }, []);
+    })(myNestedArray, 'deepest')[0] === 4
+);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 let myNestedArray = [
@@ -90,14 +202,7 @@ let myNestedArray = [
 ];
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let myNestedArray = [
@@ -108,5 +213,3 @@ let myNestedArray = [
   ['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']
 ];
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md

@@ -5,34 +5,51 @@ challengeType: 1
 forumTopicId: 301160
 ---
 
-## Description
-<section id='description'>
-We can also generate an array which contains all the keys stored in an object using the <code>Object.keys()</code> method and passing in an object as the argument. This will return an array with strings representing each property in the object. Again, there will be no specific order to the entries in the array.
-</section>
+# --description--
 
-## Instructions
-<section id='instructions'>
-Finish writing the <code>getArrayOfUsers</code> function so that it returns an array containing all the properties in the object it receives as an argument.
-</section>
+We can also generate an array which contains all the keys stored in an object using the `Object.keys()` method and passing in an object as the argument. This will return an array with strings representing each property in the object. Again, there will be no specific order to the entries in the array.
 
-## Tests
-<section id='tests'>
+# --instructions--
 
-```yml
-tests:
-  - text: The <code>users</code> object should only contain the keys <code>Alan</code>, <code>Jeff</code>, <code>Sarah</code>, and <code>Ryan</code>
-    testString: assert('Alan' in users && 'Jeff' in users && 'Sarah' in users && 'Ryan' in users && Object.keys(users).length === 4);
-  - text: The <code>getArrayOfUsers</code> function should return an array which contains all the keys in the <code>users</code> object
-    testString: assert((function() { users.Sam = {}; users.Lewis = {}; let R = getArrayOfUsers(users); return (R.indexOf('Alan') !== -1 && R.indexOf('Jeff') !== -1 && R.indexOf('Sarah') !== -1 && R.indexOf('Ryan') !== -1 && R.indexOf('Sam') !== -1 && R.indexOf('Lewis') !== -1); })() === true);
+Finish writing the `getArrayOfUsers` function so that it returns an array containing all the properties in the object it receives as an argument.
 
+# --hints--
+
+The `users` object should only contain the keys `Alan`, `Jeff`, `Sarah`, and `Ryan`
+
+```js
+assert(
+  'Alan' in users &&
+    'Jeff' in users &&
+    'Sarah' in users &&
+    'Ryan' in users &&
+    Object.keys(users).length === 4
+);
 ```
 
-</section>
+The `getArrayOfUsers` function should return an array which contains all the keys in the `users` object
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(
+  (function () {
+    users.Sam = {};
+    users.Lewis = {};
+    let R = getArrayOfUsers(users);
+    return (
+      R.indexOf('Alan') !== -1 &&
+      R.indexOf('Jeff') !== -1 &&
+      R.indexOf('Sarah') !== -1 &&
+      R.indexOf('Ryan') !== -1 &&
+      R.indexOf('Sam') !== -1 &&
+      R.indexOf('Lewis') !== -1
+    );
+  })() === true
+);
+```
 
-<div id='js-seed'>
+# --seed--
+
+## --seed-contents--
 
 ```js
 let users = {
@@ -63,14 +80,7 @@ function getArrayOfUsers(obj) {
 console.log(getArrayOfUsers(users));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let users = {
@@ -98,5 +108,3 @@ function getArrayOfUsers(obj) {
 
 console.log(getArrayOfUsers(users));
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-all-an-arrays-items-using-for-loops.md

@@ -5,9 +5,10 @@ challengeType: 1
 forumTopicId: 301161
 ---
 
-## Description
-<section id='description'>
-Sometimes when working with arrays, it is very handy to be able to iterate through each item to find one or more elements that we might need, or to manipulate an array based on which data items meet a certain set of criteria. JavaScript offers several built in methods that each iterate over arrays in slightly different ways to achieve different results (such as <code>every()</code>, <code>forEach()</code>, <code>map()</code>, etc.), however the technique which is most flexible and offers us the greatest amount of control is a simple <code>for</code> loop.
+# --description--
+
+Sometimes when working with arrays, it is very handy to be able to iterate through each item to find one or more elements that we might need, or to manipulate an array based on which data items meet a certain set of criteria. JavaScript offers several built in methods that each iterate over arrays in slightly different ways to achieve different results (such as `every()`, `forEach()`, `map()`, etc.), however the technique which is most flexible and offers us the greatest amount of control is a simple `for` loop.
+
 Consider the following:
 
 ```js
@@ -25,38 +26,90 @@ greaterThanTen([2, 12, 8, 14, 80, 0, 1]);
 // returns [12, 14, 80]
 ```
 
-Using a <code>for</code> loop, this function iterates through and accesses each element of the array, and subjects it to a simple test that we have created. In this way, we have easily and programmatically determined which data items are greater than <code>10</code>, and returned a new array containing those items.
-</section>
+Using a `for` loop, this function iterates through and accesses each element of the array, and subjects it to a simple test that we have created. In this way, we have easily and programmatically determined which data items are greater than `10`, and returned a new array containing those items.
 
-## Instructions
-<section id='instructions'>
-We have defined a function, <code>filteredArray</code>, which takes <code>arr</code>, a nested array, and <code>elem</code> as arguments, and returns a new array. <code>elem</code> represents an element that may or may not be present on one or more of the arrays nested within <code>arr</code>. Modify the function, using a <code>for</code> loop, to return a filtered version of the passed array such that any array nested within <code>arr</code> containing <code>elem</code> has been removed.
-</section>
+# --instructions--
 
-## Tests
-<section id='tests'>
+We have defined a function, `filteredArray`, which takes `arr`, a nested array, and `elem` as arguments, and returns a new array. `elem` represents an element that may or may not be present on one or more of the arrays nested within `arr`. Modify the function, using a `for` loop, to return a filtered version of the passed array such that any array nested within `arr` containing `elem` has been removed.
 
-```yml
-tests:
-  - text: <code>filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)</code> should return <code>[ [10, 8, 3], [14, 6, 23] ]</code>
-    testString: assert.deepEqual(filteredArray([ [10, 8, 3], [14, 6, 23], [3, 18, 6] ], 18), [[10, 8, 3], [14, 6, 23]]);
-  - text: <code>filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2)</code> should return <code>[ ["flutes", 4] ]</code>
-    testString: assert.deepEqual(filteredArray([ ['trumpets', 2], ['flutes', 4], ['saxophones', 2] ], 2), [['flutes', 4]]);
-  - text: <code>filteredArray([ ["amy", "beth", "sam"], ["dave", "sean", "peter"] ], "peter")</code> should return <code>[ ["amy", "beth", "sam"] ]</code>
-    testString: assert.deepEqual(filteredArray([['amy', 'beth', 'sam'], ['dave', 'sean', 'peter']], 'peter'), [['amy', 'beth', 'sam']]);
-  - text: <code>filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)</code> should return <code>[ ]</code>
-    testString: assert.deepEqual(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3), []);
-  - text: The <code>filteredArray</code> function should utilize a <code>for</code> loop
-    testString: assert.notStrictEqual(filteredArray.toString().search(/for/), -1);
+# --hints--
 
+`filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)` should return `[ [10, 8, 3], [14, 6, 23] ]`
+
+```js
+assert.deepEqual(
+  filteredArray(
+    [
+      [10, 8, 3],
+      [14, 6, 23],
+      [3, 18, 6]
+    ],
+    18
+  ),
+  [
+    [10, 8, 3],
+    [14, 6, 23]
+  ]
+);
 ```
 
-</section>
+`filteredArray([ ["trumpets", 2], ["flutes", 4], ["saxophones", 2] ], 2)` should return `[ ["flutes", 4] ]`
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.deepEqual(
+  filteredArray(
+    [
+      ['trumpets', 2],
+      ['flutes', 4],
+      ['saxophones', 2]
+    ],
+    2
+  ),
+  [['flutes', 4]]
+);
+```
 
-<div id='js-seed'>
+`filteredArray([ ["amy", "beth", "sam"], ["dave", "sean", "peter"] ], "peter")` should return `[ ["amy", "beth", "sam"] ]`
+
+```js
+assert.deepEqual(
+  filteredArray(
+    [
+      ['amy', 'beth', 'sam'],
+      ['dave', 'sean', 'peter']
+    ],
+    'peter'
+  ),
+  [['amy', 'beth', 'sam']]
+);
+```
+
+`filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)` should return `[ ]`
+
+```js
+assert.deepEqual(
+  filteredArray(
+    [
+      [3, 2, 3],
+      [1, 6, 3],
+      [3, 13, 26],
+      [19, 3, 9]
+    ],
+    3
+  ),
+  []
+);
+```
+
+The `filteredArray` function should utilize a `for` loop
+
+```js
+assert.notStrictEqual(filteredArray.toString().search(/for/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function filteredArray(arr, elem) {
@@ -70,14 +123,7 @@ function filteredArray(arr, elem) {
 console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 function filteredArray(arr, elem) {
@@ -90,5 +136,3 @@ function filteredArray(arr, elem) {
   return newArr;
 }
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md

@@ -1,14 +1,13 @@
 ---
 id: 587d7b7d367417b2b2512b1d
-title: 'Iterate Through the Keys of an Object with a for...in Statement'
+title: Iterate Through the Keys of an Object with a for...in Statement
 challengeType: 1
 forumTopicId: 301162
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a <dfn>for...in</dfn> statement. For our <code>users</code> object, this could look like:
+Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a <dfn>for...in</dfn> statement. For our `users` object, this could look like:
 
 ```js
 for (let user in users) {
@@ -22,15 +21,11 @@ Sarah
 Ryan
 ```
 
-In this statement, we defined a variable <code>user</code>, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console.
-<strong>NOTE:</strong> Objects do not maintain an ordering to stored keys like arrays do; thus a key's position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key.
-</section>
+In this statement, we defined a variable `user`, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console. **NOTE:** Objects do not maintain an ordering to stored keys like arrays do; thus a key's position on an object, or the relative order in which it appears, is irrelevant when referencing or accessing that key.
 
-## Instructions
-<section id='instructions'>
-
-We've defined a function <code>countOnline</code> which accepts one argument (a users object). Use a <dfn>for...in</dfn> statement within this function to loop through the users object passed into the function and return the number of users whose <code>online</code> property is set to <code>true</code>.  An example of a users object which could be passed to <code>countOnline</code> is shown below.  Each user will have an <code>online</code> property with either a <code>true</code> or <code>false</code> value.
+# --instructions--
 
+We've defined a function `countOnline` which accepts one argument (a users object). Use a <dfn>for...in</dfn> statement within this function to loop through the users object passed into the function and return the number of users whose `online` property is set to `true`. An example of a users object which could be passed to `countOnline` is shown below. Each user will have an `online` property with either a `true` or `false` value.
 
 ```js
 {
@@ -46,42 +41,39 @@ We've defined a function <code>countOnline</code> which accepts one argument (a
 }
 ```
 
-</section>
+# --hints--
 
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: The function <code>countOnline</code> should use a `for in` statement to iterate through the object keys of the object passed to it.
-    testString: assert(code.match(/for\s*\(\s*(var|let|const)\s+[a-zA-Z_$]\w*\s+in\s+[a-zA-Z_$]\w*\s*\)\s*{/));
-  - text: 'The function <code>countOnline</code> should return <code>1</code> when the object <code>{ Alan: { online: false }, Jeff: { online: true }, Sarah: { online: false } }</code> is passed to it'
-    testString: assert(countOnline(usersObj1) === 1);
-  - text: 'The function <code>countOnline</code> should return <code>2</code> when the object <code>{ Alan: { online: true }, Jeff: { online: false }, Sarah: { online: true } }</code> is passed to it'
-    testString: assert(countOnline(usersObj2) === 2);
-  - text: 'The function <code>countOnline</code> should return <code>0</code> when the object <code>{ Alan: { online: false }, Jeff: { online: false }, Sarah: { online: false } }</code> is passed to it'
-    testString: assert(countOnline(usersObj3) === 0);
-```
-
-</section>
-
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='js-seed'>
+The function `countOnline` should use a `for in` statement to iterate through the object keys of the object passed to it.
 
 ```js
-function countOnline(usersObj) {
-  // Only change code below this line
-
-  // Only change code above this line
-}
+assert(
+  code.match(
+    /for\s*\(\s*(var|let|const)\s+[a-zA-Z_$]\w*\s+in\s+[a-zA-Z_$]\w*\s*\)\s*{/
+  )
+);
 ```
 
-</div>
+The function `countOnline` should return `1` when the object `{ Alan: { online: false }, Jeff: { online: true }, Sarah: { online: false } }` is passed to it
 
-### After Test
-<div id='js-teardown'>
+```js
+assert(countOnline(usersObj1) === 1);
+```
+
+The function `countOnline` should return `2` when the object `{ Alan: { online: true }, Jeff: { online: false }, Sarah: { online: true } }` is passed to it
+
+```js
+assert(countOnline(usersObj2) === 2);
+```
+
+The function `countOnline` should return `0` when the object `{ Alan: { online: false }, Jeff: { online: false }, Sarah: { online: false } }` is passed to it
+
+```js
+assert(countOnline(usersObj3) === 0);
+```
+
+# --seed--
+
+## --after-user-code--
 
 ```js
 const usersObj1 = {
@@ -122,16 +114,19 @@ const usersObj3 = {
 }
 ```
 
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
+## --seed-contents--
 
 ```js
+function countOnline(usersObj) {
+  // Only change code below this line
 
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
 function countOnline(usersObj) {
   let online = 0;
   for(let user in usersObj){
@@ -141,7 +136,4 @@ function countOnline(usersObj) {
   }
   return online;
 }
-
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-array-stored-in-an-object.md

@@ -5,36 +5,51 @@ challengeType: 1
 forumTopicId: 301163
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Now you've seen all the basic operations for JavaScript objects. You can add, modify, and remove key-value pairs, check if keys exist, and iterate over all the keys in an object. As you continue learning JavaScript you will see even more versatile applications of objects. Additionally, the Data Structures lessons located in the Coding Interview Prep section of the curriculum also cover the ES6 <dfn>Map</dfn> and <dfn>Set</dfn> objects, both of which are similar to ordinary objects but provide some additional features. Now that you've learned the basics of arrays and objects, you're fully prepared to begin tackling more complex problems using JavaScript!
-</section>
 
-## Instructions
-<section id='instructions'>
-Take a look at the object we've provided in the code editor. The <code>user</code> object contains three keys. The <code>data</code> key contains five keys, one of which contains an array of <code>friends</code>. From this, you can see how flexible objects are as data structures. We've started writing a function <code>addFriend</code>. Finish writing it so that it takes a <code>user</code> object and adds the name of the <code>friend</code> argument to the array stored in <code>user.data.friends</code> and returns that array.
-</section>
+# --instructions--
 
-## Tests
-<section id='tests'>
+Take a look at the object we've provided in the code editor. The `user` object contains three keys. The `data` key contains five keys, one of which contains an array of `friends`. From this, you can see how flexible objects are as data structures. We've started writing a function `addFriend`. Finish writing it so that it takes a `user` object and adds the name of the `friend` argument to the array stored in `user.data.friends` and returns that array.
 
-```yml
-tests:
-  - text: The <code>user</code> object should have <code>name</code>, <code>age</code>, and <code>data</code> keys.
-    testString: assert('name' in user && 'age' in user && 'data' in user);
-  - text: The <code>addFriend</code> function should accept a <code>user</code> object and a <code>friend</code> string as arguments and add the friend to the array of <code>friends</code> in the <code>user</code> object.
-    testString: assert((function() { let L1 = user.data.friends.length; addFriend(user, 'Sean'); let L2 = user.data.friends.length; return (L2 === L1 + 1); })());
-  - text: <code>addFriend(user, "Pete")</code> should return <code>["Sam", "Kira", "Tomo", "Pete"]</code>.
-    testString: assert.deepEqual((function() { delete user.data.friends; user.data.friends = ['Sam', 'Kira', 'Tomo']; return addFriend(user, 'Pete') })(), ['Sam', 'Kira', 'Tomo', 'Pete']);
+# --hints--
 
+The `user` object should have `name`, `age`, and `data` keys.
+
+```js
+assert('name' in user && 'age' in user && 'data' in user);
 ```
 
-</section>
+The `addFriend` function should accept a `user` object and a `friend` string as arguments and add the friend to the array of `friends` in the `user` object.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(
+  (function () {
+    let L1 = user.data.friends.length;
+    addFriend(user, 'Sean');
+    let L2 = user.data.friends.length;
+    return L2 === L1 + 1;
+  })()
+);
+```
 
-<div id='js-seed'>
+`addFriend(user, "Pete")` should return `["Sam", "Kira", "Tomo", "Pete"]`.
+
+```js
+assert.deepEqual(
+  (function () {
+    delete user.data.friends;
+    user.data.friends = ['Sam', 'Kira', 'Tomo'];
+    return addFriend(user, 'Pete');
+  })(),
+  ['Sam', 'Kira', 'Tomo', 'Pete']
+);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 let user = {
@@ -66,14 +81,7 @@ function addFriend(userObj, friend) {
 console.log(addFriend(user, 'Pete'));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let user = {
@@ -101,5 +109,3 @@ function addFriend(userObj, friend) {
   return userObj.data.friends;
 }
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md

@@ -5,8 +5,8 @@ challengeType: 1
 forumTopicId: 301164
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 Now let's take a look at a slightly more complex object. Object properties can be nested to an arbitrary depth, and their values can be any type of data supported by JavaScript, including arrays and even other objects. Consider the following:
 
 ```js
@@ -25,41 +25,47 @@ let nestedObject = {
 };
 ```
 
-<code>nestedObject</code> has three properties: <code>id</code> (value is a number), <code>date</code> (value is a string), and <code>data</code> (value is an object with its nested structure). While structures can quickly become complex, we can still use the same notations to access the information we need. To assign the value <code>10</code> to the <code>busy</code> property of the nested <code>onlineStatus</code> object, we use dot notation to reference the property:
+`nestedObject` has three properties: `id` (value is a number), `date` (value is a string), and `data` (value is an object with its nested structure). While structures can quickly become complex, we can still use the same notations to access the information we need. To assign the value `10` to the `busy` property of the nested `onlineStatus` object, we use dot notation to reference the property:
 
 ```js
 nestedObject.data.onlineStatus.busy = 10;
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-Here we've defined an object <code>userActivity</code>, which includes another object nested within it. Set the value of the <code>online</code> key to <code>45</code>.
-</section>
+Here we've defined an object `userActivity`, which includes another object nested within it. Set the value of the `online` key to `45`.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>userActivity</code> should have <code>id</code>, <code>date</code> and <code>data</code> properties.
-    testString: assert('id' in userActivity && 'date' in userActivity && 'data' in userActivity);
-  - text: <code>userActivity</code> should have a <code>data</code> key set to an object with keys <code>totalUsers</code> and <code>online</code>.
-    testString: assert('totalUsers' in userActivity.data && 'online' in userActivity.data);
-  - text: The <code>online</code> property nested in the <code>data</code> key of <code>userActivity</code> should be set to <code>45</code>
-    testString: assert(userActivity.data.online === 45);
-  - text: The <code>online</code> property should be set using dot or bracket notation.
-    testString: 'assert.strictEqual(code.search(/online: 45/), -1);'
+`userActivity` should have `id`, `date` and `data` properties.
 
+```js
+assert(
+  'id' in userActivity && 'date' in userActivity && 'data' in userActivity
+);
 ```
 
-</section>
+`userActivity` should have a `data` key set to an object with keys `totalUsers` and `online`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert('totalUsers' in userActivity.data && 'online' in userActivity.data);
+```
 
-<div id='js-seed'>
+The `online` property nested in the `data` key of `userActivity` should be set to `45`
+
+```js
+assert(userActivity.data.online === 45);
+```
+
+The `online` property should be set using dot or bracket notation.
+
+```js
+assert.strictEqual(code.search(/online: 45/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 let userActivity = {
@@ -78,14 +84,7 @@ let userActivity = {
 console.log(userActivity);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let userActivity = {
@@ -99,5 +98,3 @@ let userActivity = {
 
 userActivity.data.online = 45;
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-from-an-array-with-pop-and-shift.md

@@ -5,9 +5,10 @@ challengeType: 1
 forumTopicId: 301165
 ---
 
-## Description
-<section id='description'>
-Both <code>push()</code> and <code>unshift()</code> have corresponding methods that are nearly functional opposites: <code>pop()</code> and <code>shift()</code>. As you may have guessed by now, instead of adding, <code>pop()</code> <em>removes</em> an element from the end of an array, while <code>shift()</code> removes an element from the beginning. The key difference between <code>pop()</code> and <code>shift()</code> and their cousins <code>push()</code> and <code>unshift()</code>, is that neither method takes parameters, and each only allows an array to be modified by a single element at a time.
+# --description--
+
+Both `push()` and `unshift()` have corresponding methods that are nearly functional opposites: `pop()` and `shift()`. As you may have guessed by now, instead of adding, `pop()` *removes* an element from the end of an array, while `shift()` removes an element from the beginning. The key difference between `pop()` and `shift()` and their cousins `push()` and `unshift()`, is that neither method takes parameters, and each only allows an array to be modified by a single element at a time.
+
 Let's take a look:
 
 ```js
@@ -28,33 +29,36 @@ let popped = greetings.pop();
 // greetings now equals []
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-We have defined a function, <code>popShift</code>, which takes an array as an argument and returns a new array. Modify the function, using <code>pop()</code> and <code>shift()</code>, to remove the first and last elements of the argument array, and assign the removed elements to their corresponding variables, so that the returned array contains their values.
-</section>
+We have defined a function, `popShift`, which takes an array as an argument and returns a new array. Modify the function, using `pop()` and `shift()`, to remove the first and last elements of the argument array, and assign the removed elements to their corresponding variables, so that the returned array contains their values.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>popShift(["challenge", "is", "not", "complete"])</code> should return <code>["challenge", "complete"]</code>
-    testString: assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), ["challenge", "complete"]);
-  - text: The <code>popShift</code> function should utilize the <code>pop()</code> method
-    testString: assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1);
-  - text: The <code>popShift</code> function should utilize the <code>shift()</code> method
-    testString: assert.notStrictEqual(popShift.toString().search(/\.shift\(/), -1);
+`popShift(["challenge", "is", "not", "complete"])` should return `["challenge", "complete"]`
 
+```js
+assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), [
+  'challenge',
+  'complete'
+]);
 ```
 
-</section>
+The `popShift` function should utilize the `pop()` method
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1);
+```
 
-<div id='js-seed'>
+The `popShift` function should utilize the `shift()` method
+
+```js
+assert.notStrictEqual(popShift.toString().search(/\.shift\(/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 function popShift(arr) {
@@ -66,14 +70,7 @@ function popShift(arr) {
 console.log(popShift(['challenge', 'is', 'not', 'complete']));
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 function popShift(arr) {
@@ -82,5 +79,3 @@ function popShift(arr) {
   return [shifted, popped];
 }
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-using-splice.md

@@ -5,10 +5,11 @@ challengeType: 1
 forumTopicId: 301166
 ---
 
-## Description
-<section id='description'>
-Ok, so we've learned how to remove elements from the beginning and end of arrays using <code>shift()</code> and <code>pop()</code>, but what if we want to remove an element from somewhere in the middle? Or remove more than one element at once? Well, that's where <code>splice()</code> comes in. <code>splice()</code> allows us to do just that: <strong>remove any number of consecutive elements</strong> from anywhere in an array.
-<code>splice()</code> can take up to 3 parameters, but for now, we'll focus on just the first 2. The first two parameters of <code>splice()</code> are integers which represent indexes, or positions, of the array that <code>splice()</code> is being called upon. And remember, arrays are <em>zero-indexed</em>, so to indicate the first element of an array, we would use <code>0</code>. <code>splice()</code>'s first parameter represents the index on the array from which to begin removing elements, while the second parameter indicates the number of elements to delete. For example:
+# --description--
+
+Ok, so we've learned how to remove elements from the beginning and end of arrays using `shift()` and `pop()`, but what if we want to remove an element from somewhere in the middle? Or remove more than one element at once? Well, that's where `splice()` comes in. `splice()` allows us to do just that: **remove any number of consecutive elements** from anywhere in an array.
+
+`splice()` can take up to 3 parameters, but for now, we'll focus on just the first 2. The first two parameters of `splice()` are integers which represent indexes, or positions, of the array that `splice()` is being called upon. And remember, arrays are *zero-indexed*, so to indicate the first element of an array, we would use `0`. `splice()`'s first parameter represents the index on the array from which to begin removing elements, while the second parameter indicates the number of elements to delete. For example:
 
 ```js
 let array = ['today', 'was', 'not', 'so', 'great'];
@@ -18,7 +19,7 @@ array.splice(2, 2);
 // array now equals ['today', 'was', 'great']
 ```
 
-<code>splice()</code> not only modifies the array it's being called on, but it also returns a new array containing the value of the removed elements:
+`splice()` not only modifies the array it's being called on, but it also returns a new array containing the value of the removed elements:
 
 ```js
 let array = ['I', 'am', 'feeling', 'really', 'happy'];
@@ -27,36 +28,46 @@ let newArray = array.splice(3, 2);
 // newArray equals ['really', 'happy']
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
+We've initialized an array `arr`. Use `splice()` to remove elements from `arr`, so that it only contains elements that sum to the value of `10`.
 
-We've initialized an array `arr`. Use `splice()` to remove elements from `arr`, so that it only contains elements that sum to the value of <code>10</code>.
+# --hints--
 
-</section>
+You should not change the original line of `const arr = [2, 4, 5, 1, 7, 5, 2, 1];`.
 
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: You should not change the original line of <code>const arr = [2, 4, 5, 1, 7, 5, 2, 1];</code>.
-    testString: assert(__helpers.removeWhiteSpace(code).match(/constarr=\[2,4,5,1,7,5,2,1\];?/));
-  - text: <code>arr</code> should only contain elements that sum to <code>10</code>.
-    testString: assert.strictEqual(arr.reduce((a, b) => a + b), 10);
-  - text: Your code should utilize the <code>splice()</code> method on <code>arr</code>.
-    testString: assert(__helpers.removeWhiteSpace(code).match(/arr\.splice\(/));
-  - text: The splice should only remove elements from <code>arr</code> and not add any additional elements to <code>arr</code>.
-    testString: assert(!__helpers.removeWhiteSpace(code).match(/arr\.splice\(\d+,\d+,\d+.*\)/g));
+```js
+assert(
+  __helpers.removeWhiteSpace(code).match(/constarr=\[2,4,5,1,7,5,2,1\];?/)
+);
 ```
 
-</section>
+`arr` should only contain elements that sum to `10`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.strictEqual(
+  arr.reduce((a, b) => a + b),
+  10
+);
+```
 
-<div id='js-seed'>
+Your code should utilize the `splice()` method on `arr`.
+
+```js
+assert(__helpers.removeWhiteSpace(code).match(/arr\.splice\(/));
+```
+
+The splice should only remove elements from `arr` and not add any additional elements to `arr`.
+
+```js
+assert(
+  !__helpers.removeWhiteSpace(code).match(/arr\.splice\(\d+,\d+,\d+.*\)/g)
+);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 const arr = [2, 4, 5, 1, 7, 5, 2, 1];
@@ -66,18 +77,9 @@ const arr = [2, 4, 5, 1, 7, 5, 2, 1];
 console.log(arr);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 const arr = [2, 4, 5, 1, 7, 5, 2, 1];
 arr.splice(1, 4);
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md

@@ -5,8 +5,8 @@ challengeType: 1
 forumTopicId: 301167
 ---
 
-## Description
-<section id='description'>
+# --description--
+
 The below is an example of the simplest implementation of an array data structure. This is known as a <dfn>one-dimensional array</dfn>, meaning it only has one level, or that it does not have any other arrays nested within it. Notice it contains <dfn>booleans</dfn>, <dfn>strings</dfn>, and <dfn>numbers</dfn>, among other valid JavaScript data types:
 
 ```js
@@ -15,8 +15,7 @@ console.log(simpleArray.length);
 // logs 7
 ```
 
-All arrays have a length property, which as shown above, can be very easily accessed with the syntax <code>Array.length</code>.
-A more complex implementation of an array can be seen below. This is known as a <dfn>multi-dimensional array</dfn>, or an array that contains other arrays. Notice that this array also contains JavaScript <dfn>objects</dfn>, which we will examine very closely in our next section, but for now, all you need to know is that arrays are also capable of storing complex objects.
+All arrays have a length property, which as shown above, can be very easily accessed with the syntax `Array.length`. A more complex implementation of an array can be seen below. This is known as a <dfn>multi-dimensional array</dfn>, or an array that contains other arrays. Notice that this array also contains JavaScript <dfn>objects</dfn>, which we will examine very closely in our next section, but for now, all you need to know is that arrays are also capable of storing complex objects.
 
 ```js
 let complexArray = [
@@ -43,53 +42,52 @@ let complexArray = [
 ];
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-We have defined a variable called <code>yourArray</code>. Complete the statement by assigning an array of at least 5 elements in length to the <code>yourArray</code> variable. Your array should contain at least one <dfn>string</dfn>, one <dfn>number</dfn>, and one <dfn>boolean</dfn>.
-</section>
+We have defined a variable called `yourArray`. Complete the statement by assigning an array of at least 5 elements in length to the `yourArray` variable. Your array should contain at least one <dfn>string</dfn>, one <dfn>number</dfn>, and one <dfn>boolean</dfn>.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: <code>yourArray</code> should be an array.
-    testString: assert.strictEqual(Array.isArray(yourArray), true);
-  - text: <code>yourArray</code> should be at least 5 elements long.
-    testString: assert.isAtLeast(yourArray.length, 5);
-  - text: <code>yourArray</code> should contain at least one <code>boolean</code>.
-    testString: assert(yourArray.filter( el => typeof el === 'boolean').length >= 1);
-  - text: <code>yourArray</code> should contain at least one <code>number</code>.
-    testString: assert(yourArray.filter( el => typeof el === 'number').length >= 1);
-  - text: <code>yourArray</code> should contain at least one <code>string</code>.
-    testString: assert(yourArray.filter( el => typeof el === 'string').length >= 1);
+`yourArray` should be an array.
 
+```js
+assert.strictEqual(Array.isArray(yourArray), true);
 ```
 
-</section>
+`yourArray` should be at least 5 elements long.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert.isAtLeast(yourArray.length, 5);
+```
 
-<div id='js-seed'>
+`yourArray` should contain at least one `boolean`.
+
+```js
+assert(yourArray.filter((el) => typeof el === 'boolean').length >= 1);
+```
+
+`yourArray` should contain at least one `number`.
+
+```js
+assert(yourArray.filter((el) => typeof el === 'number').length >= 1);
+```
+
+`yourArray` should contain at least one `string`.
+
+```js
+assert(yourArray.filter((el) => typeof el === 'string').length >= 1);
+```
+
+# --seed--
+
+## --seed-contents--
 
 ```js
 let yourArray; // Change this line
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let yourArray = ['a string', 100, true, ['one', 2], 'another string'];
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-data-structures/use-the-delete-keyword-to-remove-object-properties.md

@@ -5,41 +5,48 @@ challengeType: 1
 forumTopicId: 301168
 ---
 
-## Description
-<section id='description'>
-Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data, <strong><em>and</em></strong>, they provide very fast lookup time. Throughout the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.
-In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can <em>remove</em> a key-value pair from an object.
-Let's revisit our <code>foods</code> object example one last time. If we wanted to remove the <code>apples</code> key, we can remove it by using the <code>delete</code> keyword like this:
+# --description--
+
+Now you know what objects are and their basic features and advantages. In short, they are key-value stores which provide a flexible, intuitive way to structure data, ***and***, they provide very fast lookup time. Throughout the rest of these challenges, we will describe several common operations you can perform on objects so you can become comfortable applying these useful data structures in your programs.
+
+In earlier challenges, we have both added to and modified an object's key-value pairs. Here we will see how we can *remove* a key-value pair from an object.
+
+Let's revisit our `foods` object example one last time. If we wanted to remove the `apples` key, we can remove it by using the `delete` keyword like this:
 
 ```js
 delete foods.apples;
 ```
 
-</section>
+# --instructions--
 
-## Instructions
-<section id='instructions'>
-Use the delete keyword to remove the <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys from the <code>foods</code> object.
-</section>
+Use the delete keyword to remove the `oranges`, `plums`, and `strawberries` keys from the `foods` object.
 
-## Tests
-<section id='tests'>
+# --hints--
 
-```yml
-tests:
-  - text: 'The <code>foods</code> object should only have three keys: <code>apples</code>, <code>grapes</code>, and <code>bananas</code>.'
-    testString: 'assert(!foods.hasOwnProperty(''oranges'') && !foods.hasOwnProperty(''plums'') && !foods.hasOwnProperty(''strawberries'') && Object.keys(foods).length === 3);'
-  - text: The <code>oranges</code>, <code>plums</code>, and <code>strawberries</code> keys should be removed using <code>delete</code>.
-    testString: assert(code.search(/oranges:/) !== -1 && code.search(/plums:/) !== -1 && code.search(/strawberries:/) !== -1);
+The `foods` object should only have three keys: `apples`, `grapes`, and `bananas`.
 
+```js
+assert(
+  !foods.hasOwnProperty('oranges') &&
+    !foods.hasOwnProperty('plums') &&
+    !foods.hasOwnProperty('strawberries') &&
+    Object.keys(foods).length === 3
+);
 ```
 
-</section>
+The `oranges`, `plums`, and `strawberries` keys should be removed using `delete`.
 
-## Challenge Seed
-<section id='challengeSeed'>
+```js
+assert(
+  code.search(/oranges:/) !== -1 &&
+    code.search(/plums:/) !== -1 &&
+    code.search(/strawberries:/) !== -1
+);
+```
 
-<div id='js-seed'>
+# --seed--
+
+## --seed-contents--
 
 ```js
 let foods = {
@@ -58,14 +65,7 @@ let foods = {
 console.log(foods);
 ```
 
-</div>
-
-
-
-</section>
-
-## Solution
-<section id='solution'>
+# --solutions--
 
 ```js
 let foods = {
@@ -83,5 +83,3 @@ delete foods.strawberries;
 
 console.log(foods);
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-001.md

@@ -4,49 +4,23 @@ title: Part 1
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 To keep track of the player's experience points, we've declared a variable called `xp` and assigned it the starting value of 0.
 
 Create another variable to keep track of health and start it at 100.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(health === 100);
+See description above for instructions.
 
+```js
+assert(health === 100);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-var xp = 0;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -112,26 +86,23 @@ var xp = 0;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+var xp = 0;
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -139,5 +110,3 @@ var xp = 0;
 var health = 100;
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-002.md

@@ -4,48 +4,21 @@ title: Part 2
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Create a variable called `gold` and set it to the value 50.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(gold === 50);
+See description above for instructions.
 
+```js
+assert(gold === 50);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-var xp = 0;
-var health = 100;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -111,26 +84,24 @@ var health = 100;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+var xp = 0;
+var health = 100;
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -139,5 +110,3 @@ var health = 100;
 var gold = 50;
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-003.md

@@ -4,51 +4,23 @@ title: Part 3
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Create a variable called `currentWeapon` and set it to 0. When a name has two words, the convention is to use so-called "lowerCamelCase". The first word is all lowercase, and then the first letter of every preceding word is uppercased.
 
 When a name has two words, the convention is to use so-called "lowerCamelCase". The variable name should look like this: currentWeapon.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(currentWeapon === 0);
+See description above for instructions.
 
+```js
+assert(currentWeapon === 0);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-var xp = 0;
-var health = 100;
-var gold = 50;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -114,26 +86,25 @@ var gold = 50;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+var xp = 0;
+var health = 100;
+var gold = 50;
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -143,5 +114,3 @@ var gold = 50;
 var currentWeapon = 0;
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-004.md

@@ -4,52 +4,28 @@ title: Part 4
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 We've been declaring variables with the `var` keyword. However, in modern JavaScript, it's better to use `let` instead of `var` because it fixes a number of unusual behaviors with `var` that make it difficult to reason about.
 
 Change every `var` to `let`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(/let\s+xp\s*\=\s*0\;?/.test(code) && /let\s+health\s*\=\s*100\;?/.test(code) && /let\s+gold\s*\=\s*50\;?/.test(code) && /let\s+currentWeapon\s*\=\s*0\;?/.test(code));
+See description above for instructions.
 
+```js
+assert(
+  /let\s+xp\s*\=\s*0\;?/.test(code) &&
+    /let\s+health\s*\=\s*100\;?/.test(code) &&
+    /let\s+gold\s*\=\s*50\;?/.test(code) &&
+    /let\s+currentWeapon\s*\=\s*0\;?/.test(code)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-var xp = 0;
-var health = 100;
-var gold = 50;
-var currentWeapon = 0;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -115,26 +91,26 @@ var currentWeapon = 0;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+var xp = 0;
+var health = 100;
+var gold = 50;
+var currentWeapon = 0;
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -144,5 +120,3 @@ let gold = 50;
 let currentWeapon = 0;
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-005.md

@@ -4,52 +4,23 @@ title: Part 5
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now you will declare a variable without initializing it.
 
-Using the `let` keyword, declare a variable called `fighting` but don't set it equal to anything. Just end the line with a semicolon right after the variable name. 
+Using the `let` keyword, declare a variable called `fighting` but don't set it equal to anything. Just end the line with a semicolon right after the variable name.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(/let\s+fighting\s*;?/.test(code) && fighting === undefined);
+See description above for instructions.
 
+```js
+assert(/let\s+fighting\s*;?/.test(code) && fighting === undefined);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -115,26 +86,26 @@ let currentWeapon = 0;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -145,5 +116,3 @@ let currentWeapon = 0;
 let fighting;
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-006.md

@@ -4,52 +4,21 @@ title: Part 6
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Declare variables named `monsterHealth` and `inventory` without initializing them.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(/let\s+monsterHealth\s*;?/.test(code) && /let\s+inventory\s*;?/.test(code));
-    testString: assert(monsterHealth === undefined && inventory === undefined);
+See description above for instructions.
 
+```js
+assert(monsterHealth === undefined && inventory === undefined);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -115,26 +84,27 @@ let fighting;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -147,5 +117,3 @@ let monsterHealth;
 let inventory;
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-007.md

@@ -4,55 +4,23 @@ title: Part 7
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now set the inventory to equal the string "stick".
 
-Strings must be surrounded with double quotes `"`, single quotes `'`, or backticks <code>`</code>.
+Strings must be surrounded with double quotes `"`, single quotes `'`, or backticks `` ` ``.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(inventory === "stick");
+See description above for instructions.
 
+```js
+assert(inventory === 'stick');
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -118,26 +86,29 @@ let inventory;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory;
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -150,5 +121,3 @@ let monsterHealth;
 let inventory = "stick";
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-008.md

@@ -4,59 +4,31 @@ title: Part 8
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Since the inventory can store multiple items, change the value of `inventory` to an array with the items stick, dagger, and sword.
 
-Here is an example of a variable sandwich that equals a three-item array: 
+Here is an example of a variable sandwich that equals a three-item array:
 
 ```js
 let sandwich = ["peanut butter", "jelly", "bread"];
 ```
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(inventory.includes('stick') && inventory.includes('dagger') && inventory.includes('sword'));
+See description above for instructions.
 
+```js
+assert(
+  inventory.includes('stick') &&
+    inventory.includes('dagger') &&
+    inventory.includes('sword')
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = "stick";
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -122,26 +94,29 @@ let inventory = "stick";
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = "stick";
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -154,5 +129,3 @@ let monsterHealth;
 let inventory = ["stick", "dagger", "sword"];
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-009.md

@@ -4,53 +4,21 @@ title: Part 9
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 For now, let's start the player with just the stick. Delete the dagger and sword items in the array. More items will be added to the array during game play.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(inventory[0] === 'stick' && inventory.length === 1);
+See description above for instructions.
 
+```js
+assert(inventory[0] === 'stick' && inventory.length === 1);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick", "dagger", "sword"];
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -116,26 +84,29 @@ let inventory = ["stick", "dagger", "sword"];
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick", "dagger", "sword"];
 
-</section>
-
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -148,5 +119,3 @@ let monsterHealth;
 let inventory = ["stick"];
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-010.md

@@ -4,58 +4,27 @@ title: Part 10
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 In order to update HTML elements on the page, you need to get references to them in your JavaScript code. The code `let el = document.querySelector("#el");` gets a reference to an HTML element with an `id` of `el` and assigns it to the variable `el`.
 
 Get a reference to the HTML element with the `id` of `button1` and assign it to a variable with the name `button1`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(typeof button1 === "object" && button1.id === 'button1' && button1.innerHTML === 'Go to store'); # More flexible test, but JS needs to be in a separate file
-    testString: assert(/let\s+button1\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button1\s*[\'\"\`]\s*\);?/.test(code));
+See description above for instructions.
 
+```js
+assert(
+  /let\s+button1\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button1\s*[\'\"\`]\s*\);?/.test(
+    code
+  )
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-  
-</script>
-
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -121,25 +90,30 @@ let inventory = ["stick"];
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
-
-## Solution
-<section id='solution'>
+  
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -154,5 +128,3 @@ let inventory = ["stick"];
 let button1 = document.querySelector('#button1');
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-011.md

@@ -4,55 +4,21 @@ title: Part 11
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 You can also declare variables with the `const` key word. Since `button1` is a constant that will never change, switch the `let` keyword that declares the variable to `const`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(/const\s+button1\s*/.test(code));
+See description above for instructions.
 
+```js
+assert(/const\s+button1\s*/.test(code));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-let button1 = document.querySelector('#button1');
-  
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -118,25 +84,31 @@ let button1 = document.querySelector('#button1');
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
-
-## Solution
-<section id='solution'>
+let button1 = document.querySelector('#button1');
+  
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -151,5 +123,3 @@ let inventory = ["stick"];
 const button1 = document.querySelector('#button1');
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-012.md

@@ -4,57 +4,51 @@ title: Part 12
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-Here are the ids of the other HTML elements that we want a reference to in the JavaScript code: `button2`, `button3`, `text`, `xpText`, `healthText`, `goldText`, `monsterStats`, `monsterNameText`, `monsterHealthText`. 
+Here are the ids of the other HTML elements that we want a reference to in the JavaScript code: `button2`, `button3`, `text`, `xpText`, `healthText`, `goldText`, `monsterStats`, `monsterNameText`, `monsterHealthText`.
 
 Just like you did with `storeButton`, create variables and set them equal to the element references.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(/const\s+button2\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button2\s*[\'\"\`]\s*\);?/.test(code) && /const\s+button3\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button3\s*[\'\"\`]\s*\);?/.test(code) && /const\s+text\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#text\s*[\'\"\`]\s*\);?/.test(code) && /const\s+xpText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#xpText\s*[\'\"\`]\s*\);?/.test(code) && /const\s+healthText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#healthText\s*[\'\"\`]\s*\);?/.test(code) && /const\s+goldText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#goldText\s*[\'\"\`]\s*\);?/.test(code) && /const\s+monsterStats\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterStats\s*[\'\"\`]\s*\);?/.test(code) && /const\s+monsterNameText|monsterName\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterName\s*[\'\"\`]\s*\);?/.test(code) && /const\s+monsterHealthText|monsterHealth\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterHealth\s*[\'\"\`]\s*\);?/.test(code));
+See description above for instructions.
 
+```js
+assert(
+  /const\s+button2\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button2\s*[\'\"\`]\s*\);?/.test(
+    code
+  ) &&
+    /const\s+button3\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#button3\s*[\'\"\`]\s*\);?/.test(
+      code
+    ) &&
+    /const\s+text\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#text\s*[\'\"\`]\s*\);?/.test(
+      code
+    ) &&
+    /const\s+xpText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#xpText\s*[\'\"\`]\s*\);?/.test(
+      code
+    ) &&
+    /const\s+healthText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#healthText\s*[\'\"\`]\s*\);?/.test(
+      code
+    ) &&
+    /const\s+goldText\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#goldText\s*[\'\"\`]\s*\);?/.test(
+      code
+    ) &&
+    /const\s+monsterStats\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterStats\s*[\'\"\`]\s*\);?/.test(
+      code
+    ) &&
+    /const\s+monsterNameText|monsterName\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterName\s*[\'\"\`]\s*\);?/.test(
+      code
+    ) &&
+    /const\s+monsterHealthText|monsterHealth\s*\=\s*document.querySelector\(\s*[\'\"\`]\s*\#monsterHealth\s*[\'\"\`]\s*\);?/.test(
+      code
+    )
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-  
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -120,25 +114,31 @@ const button1 = document.querySelector('#button1');
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
-
-## Solution
-<section id='solution'>
+const button1 = document.querySelector('#button1');
+  
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -162,5 +162,3 @@ const monsterNameText = document.querySelector("#monsterName");
 const monsterHealthText = document.querySelector("#monsterHealth");
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-013.md

@@ -4,66 +4,23 @@ title: Part 13
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Make a comment to describe what the next few lines of code will do. Comments can be written with either two forward-slashes `//` or with a multi-line sequence `/* */`. For example, here is a single line comment that says "hello world": `// hello world`.
 
 Write a single line comment that says "initialize buttons".
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(/\/\/\s*[iI]nitialize buttons/.test(code));
+See description above for instructions.
 
+```js
+assert(/\/\/\s*[iI]nitialize buttons/.test(code));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-  
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -129,25 +86,40 @@ const monsterHealthText = document.querySelector("#monsterHealth");
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
-
-## Solution
-<section id='solution'>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
+  
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -173,5 +145,3 @@ const monsterHealthText = document.querySelector("#monsterHealth");
 // initialize buttons
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-014.md

@@ -4,67 +4,21 @@ title: Part 14
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Designate what the first button in the HTML does by setting the `onclick` property of `button1` to the function name `goStore`. You will create the `goStore` function later. For example, in `button.onclick = openProgram;`, the `onclick` property of `button` is set to `openProgram`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(/button1\.onclick\s*\=\s*goStore\;?/.test(code));
+See description above for instructions.
 
+```js
+assert(/button1\.onclick\s*\=\s*goStore\;?/.test(code));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -130,25 +84,43 @@ const monsterHealthText = document.querySelector("#monsterHealth");
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
+
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
+
+// initialize buttons
 
 
-</section>
-
-## Solution
-<section id='solution'>
+</script>
+```
 
+# --solutions--
 
 ```html
 <script>
@@ -175,5 +147,3 @@ const monsterHealthText = document.querySelector("#monsterHealth");
 button1.onclick = goStore;
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-015.md

@@ -4,67 +4,24 @@ title: Part 15
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now set the `onclick` property of `button2` and `button3`. The second button should be set to `goCave` and the third button should be set to `fightDragon`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(/button2\.onclick\s*\=\s*goCave\;?/.test(code) && /button3\.onclick\s*\=\s*fightDragon\;?/.test(code));
+See description above for instructions.
 
+```js
+assert(
+  /button2\.onclick\s*\=\s*goCave\;?/.test(code) &&
+    /button3\.onclick\s*\=\s*fightDragon\;?/.test(code)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -130,25 +87,43 @@ button1.onclick = goStore;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
 
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -177,5 +152,3 @@ button2.onclick = goCave;
 button3.onclick = fightDragon;
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-016.md

@@ -4,8 +4,7 @@ title: Part 16
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Create the `goStore` function to hold the code that runs whenever the player goes to the store. Here is an example of an empty function called `functionName` (Note the opening curly brace at the end of the first line and the closing curly brace on the second line):
 
@@ -14,66 +13,17 @@ function functionName() {
 }
 ```
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(typeof goStore === 'function');
-    # testString: assert(code.match(/function goStore\s*\(\s*\)\s*\{\s*\}/));
-    # testString: assert.deepStrictEqual(typeof goStore, 'function');
+See description above for instructions.
 
+```js
+assert(typeof goStore === 'function');
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -139,25 +89,45 @@ button3.onclick = fightDragon;
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -189,5 +159,3 @@ function goStore() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-017.md

@@ -4,8 +4,7 @@ title: Part 17
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 For now, make the `goStore` function output the message "Going to store." to the web console. For example, here is a function that outputs the message "Hello World" to the web console (Note that code inside a function should be indented):
 
@@ -15,68 +14,21 @@ function functionName() {
 }
 ```
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(code.match(/function goStore\s*\(\s*\)\s*\{\s*console\.log\(\s*[\"\'\`]Going to store\.?[\"\'\`]\s*\)\;?\s*\}/));
-    testString: assert(goStore.toString().match(/console\.log\(\s*[\"\'\`]Going to store\.?[\"\'\`]\s*\)/));
+See description above for instructions.
 
+```js
+assert(
+  goStore
+    .toString()
+    .match(/console\.log\(\s*[\"\'\`]Going to store\.?[\"\'\`]\s*\)/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -142,25 +94,48 @@ function goStore() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -193,5 +168,3 @@ function goStore() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-018.md

@@ -4,73 +4,25 @@ title: Part 18
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Similar to the `goStore` function, create a `goCave` function that prints "Going to cave." to the console.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(goCave.toString().match(/console\.log\(\s*[\"\'\`]Going to cave\.?[\"\'\`]\s*\)/));
+See description above for instructions.
 
+```js
+assert(
+  goCave
+    .toString()
+    .match(/console\.log\(\s*[\"\'\`]Going to cave\.?[\"\'\`]\s*\)/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-  console.log("Going to store.")
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -136,25 +88,49 @@ function goStore() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+  console.log("Going to store.")
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -191,5 +167,3 @@ function goCave() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-019.md

@@ -4,79 +4,27 @@ title: Part 19
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Also, create a `fightDragon` function that prints "Fighting dragon." to the console.
 
 When you are finished, you can test out your program in the browser.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(fightDragon.toString().match(/console\.log\(\s*[\"\'\`]Fighting dragon\.?[\"\'\`]\s*\)/));
+See description above for instructions.
 
+```js
+assert(
+  fightDragon
+    .toString()
+    .match(/console\.log\(\s*[\"\'\`]Fighting dragon\.?[\"\'\`]\s*\)/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-  console.log("Going to store.")
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -142,25 +90,53 @@ function goCave() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+  console.log("Going to store.")
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -201,5 +177,3 @@ function fightDragon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-020.md

@@ -4,85 +4,28 @@ title: Part 20
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-When a player clicks the 'Go to store' button, the buttons and text in the game should change.
-Remove the code inside the `goStore` function. Add a new line of code inside the function that updates the text of `button1` so that it says "Buy 10 health (10 gold)".
+When a player clicks the 'Go to store' button, the buttons and text in the game should change. Remove the code inside the `goStore` function. Add a new line of code inside the function that updates the text of `button1` so that it says "Buy 10 health (10 gold)".
 
 For example, this code updates the text of `button` to say "Click Me": `button.innerText = "Click Me";`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(goStore.toString().match(/button1\.innerText\s*\=\s*[\'\"\`]Buy 10 health \(10 gold\)\.?[\'\"\`]/));
-    testString: assert((() => { goStore(); return button1.innerText === "Buy 10 health (10 gold)" })());
+See description above for instructions.
 
+```js
+assert(
+  (() => {
+    goStore();
+    return button1.innerText === 'Buy 10 health (10 gold)';
+  })()
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-  console.log("Going to store.");
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-function fightDragon() {
-  console.log("Fighting dragon.");
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -148,25 +91,57 @@ function fightDragon() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+  console.log("Going to store.");
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -207,5 +182,3 @@ function fightDragon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-021.md

@@ -4,82 +4,30 @@ title: Part 21
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 After the line that updates `button1`, update the text of `button2` to say "Buy weapon (30 gold)" and update the text of `button3` to say "Go to town square".
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(goStore.toString().match(/button1\.innerText\s*\=\s*[\'\"\`]Buy 10 health \(10 gold\)\.?[\'\"\`]/) && goStore.toString().match(/button2\.innerText\s*\=\s*[\'\"\`]Buy weapon \(30 gold\)\.?[\'\"\`]/) && goStore.toString().match(/button3\.innerText\s*\=\s*[\'\"\`]Go to town square\.?[\'\"\`]/));
-    testString: assert((() => { goStore(); return button1.innerText === "Buy 10 health (10 gold)" && button2.innerText === "Buy weapon (30 gold)" && button3.innerText === "Go to town square" })());
+See description above for instructions.
 
+```js
+assert(
+  (() => {
+    goStore();
+    return (
+      button1.innerText === 'Buy 10 health (10 gold)' &&
+      button2.innerText === 'Buy weapon (30 gold)' &&
+      button3.innerText === 'Go to town square'
+    );
+  })()
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-  button1.innerText = "Buy 10 health (10 gold)";
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-function fightDragon() {
-  console.log("Fighting dragon.");
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -145,25 +93,57 @@ function fightDragon() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -206,5 +186,3 @@ function fightDragon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-022.md

@@ -4,83 +4,25 @@ title: Part 22
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now that the text on the buttons have changed, the `onclick` properties on the buttons should change. Inside the goStore function, update the `onclick` property of all three buttons. The new functions should be `buyHealth`, `buyWeapon`, and `goTown`. If you have trouble, look at how the buttons were initialized.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(goStore.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) && goStore.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) && goStore.toString().match(/button3\.onclick\s*\=\s*goTown\;?/));
+See description above for instructions.
 
+```js
+assert(
+  goStore.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) &&
+    goStore.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) &&
+    goStore.toString().match(/button3\.onclick\s*\=\s*goTown\;?/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-  button1.innerText = "Buy 10 health (10 gold)";
-  button2.innerText = "Buy weapon (30 gold)";
-  button3.innerText = "Go to town square";
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-function fightDragon() {
-  console.log("Fighting dragon.");
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -146,25 +88,59 @@ function fightDragon() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -210,5 +186,3 @@ function fightDragon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-023.md

@@ -4,86 +4,25 @@ title: Part 23
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Right after the `onclick` properties are updated, change the `innerText` property of `text` to "You enter the store."
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(goStore.toString().match(/text\.innerText\s*\=\s*[\'\"\`]You enter the store\.?[\'\"\`]/)); # Must be a regex test since buyHealth, buyWeapon, and goTown are still undefined
+See description above for instructions.
 
+```js
+assert(
+  goStore
+    .toString()
+    .match(/text\.innerText\s*\=\s*[\'\"\`]You enter the store\.?[\'\"\`]/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-  button1.innerText = "Buy 10 health (10 gold)";
-  button2.innerText = "Buy weapon (30 gold)";
-  button3.innerText = "Go to town square";
-  button1.onclick = buyHealth;
-  button2.onclick = buyWeapon;
-  button3.onclick = goTown;
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-function fightDragon() {
-  console.log("Fighting dragon.");
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -149,25 +88,62 @@ function fightDragon() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -214,5 +190,3 @@ function fightDragon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-024.md

@@ -4,87 +4,25 @@ title: Part 24
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 At the end of the current code, add three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`. After this step, you can test out the game by clicking the "Go to store" button.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(typeof buyHealth === 'function' && typeof buyWeapon === 'function' && typeof goTown === 'function');
+See description above for instructions.
 
+```js
+assert(
+  typeof buyHealth === 'function' &&
+    typeof buyWeapon === 'function' &&
+    typeof goTown === 'function'
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-  button1.innerText = "Buy 10 health (10 gold)";
-  button2.innerText = "Buy weapon (30 gold)";
-  button3.innerText = "Go to town square";
-  button1.onclick = buyHealth;
-  button2.onclick = buyWeapon;
-  button3.onclick = goTown;
-  text.innerText = "You enter the store.";
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-function fightDragon() {
-  console.log("Fighting dragon.");
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -150,25 +88,63 @@ function fightDragon() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -224,5 +200,3 @@ function goTown() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-025.md

@@ -4,97 +4,34 @@ title: Part 25
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Move the `goTown` function to above the `goStore` function. Then, copy and paste the contents of the `goStore` function into the `goTown` function.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(goTown.toString().match(/button1\.innerText\s*\=\s*[\'\"\`]Buy 10 health \(10 gold\)\.?[\'\"\`]/) && goTown.toString().match(/button2\.innerText\s*\=\s*[\'\"\`]Buy weapon \(30 gold\)\.?[\'\"\`]/) && goTown.toString().match(/button3\.innerText\s*\=\s*[\'\"\`]Go to town square\.?[\'\"\`]/) && goTown.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) && goTown.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) && goTown.toString().match(/button3\.onclick\s*\=\s*goTown\;?/) && goTown.toString().match(/text\.innerText\s*\=\s*[\'\"\`]You enter the store\.?[\'\"\`]/));
-    testString: assert((() => { goTown(); return button1.innerText === "Buy 10 health (10 gold)" && button2.innerText === "Buy weapon (30 gold)" && button3.innerText === "Go to town square" && text.innerText === "You enter the store." && goTown.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) && goTown.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) && goTown.toString().match(/button3\.onclick\s*\=\s*goTown\;?/)})());
+See description above for instructions.
 
+```js
+assert(
+  (() => {
+    goTown();
+    return (
+      button1.innerText === 'Buy 10 health (10 gold)' &&
+      button2.innerText === 'Buy weapon (30 gold)' &&
+      button3.innerText === 'Go to town square' &&
+      text.innerText === 'You enter the store.' &&
+      goTown.toString().match(/button1\.onclick\s*\=\s*buyHealth\;?/) &&
+      goTown.toString().match(/button2\.onclick\s*\=\s*buyWeapon\;?/) &&
+      goTown.toString().match(/button3\.onclick\s*\=\s*goTown\;?/)
+    );
+  })()
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goStore() {
-  button1.innerText = "Buy 10 health (10 gold)";
-  button2.innerText = "Buy weapon (30 gold)";
-  button3.innerText = "Go to town square";
-  button1.onclick = buyHealth;
-  button2.onclick = buyWeapon;
-  button3.onclick = goTown;
-  text.innerText = "You enter the store.";
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-function fightDragon() {
-  console.log("Fighting dragon.");
-}
-
-function buyHealth() {
-}
-
-function buyWeapon() {
-}
-
-function goTown() {
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -160,25 +97,72 @@ function goTown() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+}
+
+function buyWeapon() {
+}
+
+function goTown() {
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -241,5 +225,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-026.md

@@ -4,103 +4,29 @@ title: Part 26
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Add double quote marks around the word "Store" in the line "You see a sign that says Store." Before each quotation mark add a `\` to signal that the following quote is not the end of the string, but should instead appear inside the string. This is called escaping.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert((() => { goTown(); return text.innerText ===  "You are in the town square. You see a sign that says \"Store\"."})())
+See description above for instructions.
 
+```js
+assert(
+  (() => {
+    goTown();
+    return (
+      text.innerText ===
+      'You are in the town square. You see a sign that says "Store".'
+    );
+  })()
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goTown() {
-  button1.innerText = "Go to store";
-  button2.innerText = "Go to cave";
-  button3.innerText = "Fight dragon";
-  button1.onclick = goStore;
-  button2.onclick = goCave;
-  button3.onclick = fightDragon;
-  text.innerText = "You are in the town square. You see a sign that says Store.";
-}
-
-function goStore() {
-  button1.innerText = "Buy 10 health (10 gold)";
-  button2.innerText = "Buy weapon (30 gold)";
-  button3.innerText = "Go to town square";
-  button1.onclick = buyHealth;
-  button2.onclick = buyWeapon;
-  button3.onclick = goTown;
-  text.innerText = "You enter the store.";
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-function fightDragon() {
-  console.log("Fighting dragon.");
-}
-
-function buyHealth() {
-}
-
-function buyWeapon() {
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -166,25 +92,79 @@ function buyWeapon() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says Store.";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+}
+
+function buyWeapon() {
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -247,5 +227,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-027.md

@@ -4,8 +4,7 @@ title: Part 27
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 There is repetition in the `goTown` and `goStore` functions. When you have repetition in code, it is a sign that you need a new function.
 
@@ -19,98 +18,17 @@ function testFun(param) {
 }
 ```
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(update.toString().match(/function update\(\s*location\)\s*\{\s*\}/));
+See description above for instructions.
 
+```js
+assert(update.toString().match(/function update\(\s*location\)\s*\{\s*\}/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
-
-<div id='html-seed'>
-
-```html
-<script>
-let xp = 0;
-let health = 100;
-let gold = 50;
-let currentWeapon = 0;
-let fighting;
-let monsterHealth;
-let inventory = ["stick"];
-
-const button1 = document.querySelector('#button1');
-const button2 = document.querySelector("#button2");
-const button3 = document.querySelector("#button3");
-const text = document.querySelector("#text");
-const xpText = document.querySelector("#xpText");
-const healthText = document.querySelector("#healthText");
-const goldText = document.querySelector("#goldText");
-const monsterStats = document.querySelector("#monsterStats");
-const monsterNameText = document.querySelector("#monsterName");
-const monsterHealthText = document.querySelector("#monsterHealth");
-
-// initialize buttons
-button1.onclick = goStore;
-button2.onclick = goCave;
-button3.onclick = fightDragon;
-
-function goTown() {
-  button1.innerText = "Go to store";
-  button2.innerText = "Go to cave";
-  button3.innerText = "Fight dragon";
-  button1.onclick = goStore;
-  button2.onclick = goCave;
-  button3.onclick = fightDragon;
-  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
-}
-
-function goStore() {
-  button1.innerText = "Buy 10 health (10 gold)";
-  button2.innerText = "Buy weapon (30 gold)";
-  button3.innerText = "Go to town square";
-  button1.onclick = buyHealth;
-  button2.onclick = buyWeapon;
-  button3.onclick = goTown;
-  text.innerText = "You enter the store.";
-}
-
-function goCave() {
-  console.log("Going to cave.");
-}
-
-function fightDragon() {
-  console.log("Fighting dragon.");
-}
-
-function buyHealth() {
-}
-
-function buyWeapon() {
-}
-
-</script>
-```
-
-</div>
-
-
-### Before Test
-<div id='html-setup'>
+## --before-user-code--
 
 ```html
 <!DOCTYPE html>
@@ -176,25 +94,79 @@ function buyWeapon() {
 </div>
 ```
 
-</div>
-
-
-### After Test
-<div id='html-teardown'>
+## --after-user-code--
 
 ```html
 </body>
 </html>
 ```
 
-</div>
+## --seed-contents--
 
+```html
+<script>
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
 
-</section>
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterNameText = document.querySelector("#monsterName");
+const monsterHealthText = document.querySelector("#monsterHealth");
 
-## Solution
-<section id='solution'>
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
 
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+}
+
+function buyWeapon() {
+}
+
+</script>
+```
+
+# --solutions--
 
 ```html
 <script>
@@ -260,5 +232,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-028.md

@@ -4,34 +4,94 @@ title: Part 28
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Below the list of `const` variables, create a new `const` variable called `locations`. Set it to equal an empty array. This will be used to store all the data for the locations in the game.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(Array.isArray(locations) && locations.length === 0);
+See description above for instructions.
 
+```js
+assert(Array.isArray(locations) && locations.length === 0);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -99,95 +159,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -255,5 +227,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-029.md

@@ -4,8 +4,7 @@ title: Part 29
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Arrays can store any data type, including objects. Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties.
 
@@ -13,29 +12,90 @@ Inside the `locations` array add an empty object using curly braces.
 
 Here is an example of an array named `arr` with an empty object inside: `const arr = [{}];`
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert.deepStrictEqual(JSON.stringify(locations), `[{}]`);
+See description above for instructions.
 
+```js
+assert.deepStrictEqual(JSON.stringify(locations), `[{}]`);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -105,95 +165,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -261,5 +233,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-030.md

@@ -4,8 +4,7 @@ title: Part 30
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Inside the object you just added, create a property called `name` with the value of "town square".
 
@@ -19,29 +18,90 @@ const arr = [
 ]
 ```
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(locations[0].name === 'town square');
+See description above for instructions.
 
+```js
+assert(locations[0].name === 'town square');
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -111,95 +171,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -271,5 +243,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-031.md

@@ -4,8 +4,7 @@ title: Part 31
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 After the `name` property put a comma. On the next line add a property named `"button text"` that has a value of an empty array. Since the property name has more than one word, there must be quotes around it.
 
@@ -20,29 +19,90 @@ const arr = [
 ]
 ```
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert.deepStrictEqual(locations[0]['button text'], []);
+See description above for instructions.
 
+```js
+assert.deepStrictEqual(locations[0]['button text'], []);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -116,95 +176,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -277,5 +249,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-032.md

@@ -4,36 +4,100 @@ title: Part 32
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-Inside the `"button text"` array, add three string elements. Use the three stings assigned to the buttons inside the `goTown` function. 
+Inside the `"button text"` array, add three string elements. Use the three stings assigned to the buttons inside the `goTown` function.
 
 Here is an example array with three strings: `const arr = ["one", "two", "three"];`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert.deepStrictEqual(locations[0]['button text'], ["Go to store","Go to cave","Fight dragon"]);
+See description above for instructions.
 
+```js
+assert.deepStrictEqual(locations[0]['button text'], [
+  'Go to store',
+  'Go to cave',
+  'Fight dragon'
+]);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -108,95 +172,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -269,5 +245,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-033.md

@@ -4,34 +4,98 @@ title: Part 33
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Add another property in the object with the name `"button functions"`. The value should be an array containing the three `onclick` functions from the `goTown` function. It should look like this: `[goStore, goCave, fightDragon]`
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert.deepStrictEqual(locations[0]['button functions'], [goStore, goCave, fightDragon]);
+See description above for instructions.
 
+```js
+assert.deepStrictEqual(locations[0]['button functions'], [
+  goStore,
+  goCave,
+  fightDragon
+]);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -106,95 +170,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -268,5 +244,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-034.md

@@ -4,34 +4,97 @@ title: Part 34
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Add one final property to the object named `text`. The value should be the final text from the `goTown` function.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(locations[0].text === "You are in the town square. You see a sign that says \"Store.\"");
+See description above for instructions.
 
+```js
+assert(
+  locations[0].text ===
+    'You are in the town square. You see a sign that says "Store."'
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -107,95 +170,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -270,5 +245,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-035.md

@@ -4,35 +4,103 @@ title: Part 35
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 The `locations` array currently has one element which is an object. Within the array, and after the object's final curly brace, add a comma. On the next line within the array, add another object with all the same properties as the first object. Keep the property names the same on the second object, but change all the property values to the information from the `goStore` function. Also, set the `name` property to `store`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: |
-      assert.deepStrictEqual(locations[1], { name: "store", "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"], "button functions": [buyHealth, buyWeapon, goTown], text: "You enter the store." });
+See description above for instructions.
 
+```js
+assert.deepStrictEqual(locations[1], {
+  name: 'store',
+  'button text': [
+    'Buy 10 health (10 gold)',
+    'Buy weapon (30 gold)',
+    'Go to town square'
+  ],
+  'button functions': [buyHealth, buyWeapon, goTown],
+  text: 'You enter the store.'
+});
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -109,95 +177,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -278,5 +258,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-036.md

@@ -4,35 +4,110 @@ title: Part 36
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now we are can consolidate the code inside the `goTown` and `goStore` functions. Copy the code inside the `goTown` function and paste it in the `update` function. Then delete all the code inside the `goTown` and `goStore` functions.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(goTown.toString() === "function goTown() {}" && goStore.toString() === "function goStore() {}" && update.toString().match(/button1\.innerText\s*\=\s*[\'\"\`]Go to store[\'\"\`]/) && update.toString().match(/button2\.innerText\s*\=\s*[\'\"\`]Go to cave[\'\"\`]/) && update.toString().match(/button3\.innerText\s*\=\s*[\'\"\`]Fight dragon\.?[\'\"\`]/) && update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) && update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) && update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/) && update.toString().match(/text\.innerText\s*\=\s*[\'\"\`]You are in the town square\. You see a sign that says \\\"[sS]tore\\\"\.?[\'\"\`]/));
-    testString: assert((() => { update(); return goTown.toString() === "function goTown() {}" && goStore.toString() === "function goStore() {}" && button1.innerText === "Go to store" && button2.innerText === "Go to cave" && button3.innerText === "Fight dragon" && text.innerText === "You are in the town square. You see a sign that says \"Store\"." && update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) && update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) && update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/)})());
+See description above for instructions.
 
+```js
+assert(
+  (() => {
+    update();
+    return (
+      goTown.toString() === 'function goTown() {}' &&
+      goStore.toString() === 'function goStore() {}' &&
+      button1.innerText === 'Go to store' &&
+      button2.innerText === 'Go to cave' &&
+      button3.innerText === 'Fight dragon' &&
+      text.innerText ===
+        'You are in the town square. You see a sign that says "Store".' &&
+      update.toString().match(/button1\.onclick\s*\=\s*goStore\;?/) &&
+      update.toString().match(/button2\.onclick\s*\=\s*goCave\;?/) &&
+      update.toString().match(/button3\.onclick\s*\=\s*fightDragon\;?/)
+    );
+  })()
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -115,95 +190,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -277,5 +264,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-037.md

@@ -4,36 +4,96 @@ title: Part 37
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Instead of assigning the `innerText` and `onClick` properties to specific strings and functions like it does now, the `update` function will use data from the `location` that is passed into it. First, data needs to be passed into the `update` function. Inside the `goTown` function, call the `update` function.
 
 Here is how you would call a function named `exampleFunction`: `exampleFunction();`
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(goTown.toString().match(/update\(\)/));
+See description above for instructions.
 
+```js
+assert(goTown.toString().match(/update\(\)/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -109,95 +169,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -272,5 +244,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-038.md

@@ -4,36 +4,96 @@ title: Part 38
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now change the code you just wrote to call the `update` function so the `locations` array is passed in as an argument.
 
 Here is how you would call a function named `exampleFunction` with an argument called `arg`: `exampleFunction(arg);`
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(goTown.toString().match(/update\(locations\)/));
+See description above for instructions.
 
+```js
+assert(goTown.toString().match(/update\(locations\)/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -110,95 +170,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -273,5 +245,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-039.md

@@ -4,34 +4,94 @@ title: Part 39
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 The `locations` array contains two locations: the town square and store. Currently the entire array with both locations is being passed in to the update function. Pass in only the first element of the locations array by adding `[0]` at the end of the name of the array. For example, `exampleFunction(arg[0]);`
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(goTown.toString().match(/update\(locations\[0\]\)/));
+See description above for instructions.
 
+```js
+assert(goTown.toString().match(/update\(locations\[0\]\)/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -108,95 +168,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -271,5 +243,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-040.md

@@ -4,36 +4,100 @@ title: Part 40
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now that the `goTown` function calls the `update` function with the first element of the `locations` array, it is time to use that location information to update the `innerText` and `onclick` properties.
 
-Inside the `update` function, change `button1.innerText` to equal `location["button text"]`. That line gets the `"button text"` property of the `location` that was passed into the `update` function`.
+Inside the `update` function, change `button1.innerText` to equal `location["button text"]`. That line gets the `"button text"` property of the `location` that was passed into the `update` function\`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(update.toString().match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]/));
+See description above for instructions.
 
+```js
+assert(
+  update
+    .toString()
+    .match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -110,95 +174,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -273,5 +249,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-041.md

@@ -4,34 +4,100 @@ title: Part 41
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 `location["button text"]` is an array with three elements. Use only the first element of the array by adding `[0]` at the end.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(update.toString().match(/button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[0\]/));
+See description above for instructions.
 
+```js
+assert(
+  update
+    .toString()
+    .match(
+      /button1\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[0\]/
+    )
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -108,95 +174,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -271,5 +249,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-042.md

@@ -4,34 +4,105 @@ title: Part 42
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now update the `innerText` of the other two buttons. They should be set to equal the same thing as the first button, except the number inside the brackets should be 1 for the second button and 2 for the third button.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(update.toString().match(/button2\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[1\]/) && update.toString().match(/button3\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[2\]/));
+See description above for instructions.
 
+```js
+assert(
+  update
+    .toString()
+    .match(
+      /button2\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[1\]/
+    ) &&
+    update
+      .toString()
+      .match(
+        /button3\.innerText\s*\=\s*location\[[\'\"\`]button text[\'\"\`]\]\[2\]/
+      )
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -108,95 +179,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -271,5 +254,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-043.md

@@ -4,34 +4,110 @@ title: Part 43
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now update the three `onclick` properties. These will look very similar to the `innerText` properties, except instead of using the `"button text"` part of the `location`, use `"button functions"`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(update.toString().match(/button1\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[0\]/) && update.toString().match(/button2\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[1\]/) && update.toString().match(/button3\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[2\]/));
+See description above for instructions.
 
+```js
+assert(
+  update
+    .toString()
+    .match(
+      /button1\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[0\]/
+    ) &&
+    update
+      .toString()
+      .match(
+        /button2\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[1\]/
+      ) &&
+    update
+      .toString()
+      .match(
+        /button3\.onclick\s*\=\s*location\[[\'\"\`]button functions[\'\"\`]\]\[2\]/
+      )
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -108,95 +184,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -271,5 +259,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-044.md

@@ -4,36 +4,96 @@ title: Part 44
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-Finally, update `text.innerText` to equal the `text` from the location object. 
+Finally, update `text.innerText` to equal the `text` from the location object.
 
 So far we have been accessing properties of the location object using bracket notation. This time use dot notation. Here is how to access a `name` property of an object called `obj` using dot notation: `obj.name`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(update.toString().match(/text\.innerText\s*\=\s*location\.text\;?/));
+See description above for instructions.
 
+```js
+assert(update.toString().match(/text\.innerText\s*\=\s*location\.text\;?/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -110,95 +170,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -273,5 +245,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-045.md

@@ -4,34 +4,94 @@ title: Part 45
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now update the `goStore` function. The code should look just like the code inside the `goTown` function, except the number 0 should be changed to 1. After this step would be a good time to try out the game so far. You should be able to move between the store and the town square.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(goStore.toString().match(/update\(locations\[1\]\)/));
+See description above for instructions.
 
+```js
+assert(goStore.toString().match(/update\(locations\[1\]\)/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -108,95 +168,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -272,5 +244,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-046.md

@@ -4,37 +4,106 @@ title: Part 46
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-Add a third object in the `locations` array with the same properties as the other two objects. 
+Add a third object in the `locations` array with the same properties as the other two objects.
 
-Set `name` to "cave". Set the elements in the `"button text"` array to ["Fight slime", "Fight fanged beast", and "Go to town square". Set te elements in the `"button functions"` array to be "fightSlime", "fightBeast", and "goTown". Set the value of the `text` property to "You enter the cave. You see some monsters.".
+Set `name` to "cave". Set the elements in the `"button text"` array to \["Fight slime", "Fight fanged beast", and "Go to town square". Set te elements in the `"button functions"` array to be "fightSlime", "fightBeast", and "goTown". Set the value of the `text` property to "You enter the cave. You see some monsters.".
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions. 
-    testString: |
-      assert.deepStrictEqual(locations[2], { name: "cave", "button text": ["Fight slime", "Fight fanged beast", "Go to town square"], "button functions": [fightSlime, fightBeast, goTown], text: "You enter the cave. You see some monsters." });
+See description above for instructions.
 
+```js
+assert.deepStrictEqual(locations[2], {
+  name: 'cave',
+  'button text': ['Fight slime', 'Fight fanged beast', 'Go to town square'],
+  'button functions': [fightSlime, fightBeast, goTown],
+  text: 'You enter the cave. You see some monsters.'
+});
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+<script>
+// Need to initialize for test
+function fightSlime() {}
+function fightBeast() {}
+</script>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -112,100 +181,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-<script>
-// Need to initialize for test
-function fightSlime() {}
-function fightBeast() {}
-</script>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -287,5 +263,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-047.md

@@ -4,34 +4,99 @@ title: Part 47
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now update the `goCave` function using the pattern from `goTown` and `goCave`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(goCave.toString().match(/update\(locations\[2\]\)\;?/));
+See description above for instructions.
 
+```js
+assert(goCave.toString().match(/update\(locations\[2\]\)\;?/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+<script>
+// Need to initialize for test
+function fightSlime() {}
+function fightBeast() {}
+</script>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -115,100 +180,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-<script>
-// Need to initialize for test
-function fightSlime() {}
-function fightBeast() {}
-</script>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -290,5 +262,3 @@ function buyWeapon() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-048.md

@@ -4,34 +4,94 @@ title: Part 48
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Create two more empty functions: `fightSlime` and `fightBeast`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(typeof fightSlime === 'function' && typeof fightBeast === 'function');
+See description above for instructions.
 
+```js
+assert(typeof fightSlime === 'function' && typeof fightBeast === 'function');
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -115,95 +175,7 @@ function buyWeapon() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -291,5 +263,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-049.md

@@ -4,37 +4,96 @@ title: Part 49
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-Now that the store and cave locations are complete, we'll code the actions at those locations. Inside the `buyHealth` function, set `gold` to equal `gold` minus 10. 
+Now that the store and cave locations are complete, we'll code the actions at those locations. Inside the `buyHealth` function, set `gold` to equal `gold` minus 10.
 
-For example here is how you would set set `num` to equal 5 less than `num`: `num = num - 5;`. 
+For example here is how you would set set `num` to equal 5 less than `num`: `num = num - 5;`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert((() => { buyHealth(); return gold === 40; })());
-    testString: buyHealth(), assert(gold === 40);
+See description above for instructions.
 
+```js
+buyHealth(), assert(gold === 40);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -124,95 +183,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -301,5 +272,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-050.md

@@ -4,35 +4,94 @@ title: Part 50
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 After gold is subtracted, add ten to health.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert((() => { buyHealth(); return gold === 40 && health === 110 })());
-    testString: buyHealth(), assert(gold === 40 && health === 110);
+See description above for instructions.
 
+```js
+buyHealth(), assert(gold === 40 && health === 110);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -123,95 +182,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -301,5 +272,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-051.md

@@ -4,36 +4,99 @@ title: Part 51
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-There is a shorthand way to add or subtract from a variable called compound assignment. The long way to add to a variable is `num = num + 5`. The shorthand way is `num += 5`. It works the same way with subtraction. 
+There is a shorthand way to add or subtract from a variable called compound assignment. The long way to add to a variable is `num = num + 5`. The shorthand way is `num += 5`. It works the same way with subtraction.
 
 Update both lines inside the `buyHealth` function to use compound assignment.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && buyHealth.toString().match(/health\s*\+\=\s*10\;?/));
+See description above for instructions.
 
+```js
+assert(
+  buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) &&
+    buyHealth.toString().match(/health\s*\+\=\s*10\;?/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -125,95 +188,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -303,5 +278,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-052.md

@@ -4,35 +4,97 @@ title: Part 52
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now that the gold and health variables have been updated, we need to update the values displayed on the screen. Inside the `buyHealth` function, add the line `goldText.innerText = gold;`. Then use the same pattern to update `healthText`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && buyHealth.toString().match(/healthText.innerText\s*\=\s*health\;?/));
-    # testString: assert((() => { buyHealth(); return goldText.innerText === '40' && healthText.innerText === '110'; })());
+See description above for instructions.
 
+```js
+assert(
+  buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) &&
+    buyHealth.toString().match(/healthText.innerText\s*\=\s*health\;?/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -124,95 +186,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -304,5 +278,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-053.md

@@ -4,8 +4,7 @@ title: Part 53
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 What if the player doesn't have enough gold to buy health? Put all the code in the `buyHealth` function inside an `if` statement. Here is an example of an `if` statement inside a function:
 
@@ -19,30 +18,100 @@ function checkMoney() {
 
 Note: For now you should use the word "condition" inside the `if` statement but we'll be changing that next.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(buyHealth.toString().match(/if\s*\(\s*condition\s*\)\s*\{\s*gold\s*\-\=\s*10\;?\s*health\s*\+\=\s*10\;?\s*goldText\.innerText\s*\=\s*gold\;?\s*healthText\.innerText\s*\=\s*health\;?\s*\}\s*\}/));
-    testString: assert(buyHealth.toString().match(/if\s*\(\s*condition\s*\)\s*\{\s*(gold|health|goldText|healthText)/) && buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) && buyHealth.toString().match(/health\s*\+\=\s*10\;?/) && buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) && buyHealth.toString().match(/healthText\.innerText\s*\=\s*health\;?/));
+See description above for instructions.
 
+```js
+assert(
+  buyHealth
+    .toString()
+    .match(
+      /if\s*\(\s*condition\s*\)\s*\{\s*(gold|health|goldText|healthText)/
+    ) &&
+    buyHealth.toString().match(/gold\s*\-\=\s*10\;?/) &&
+    buyHealth.toString().match(/health\s*\+\=\s*10\;?/) &&
+    buyHealth.toString().match(/goldText\.innerText\s*\=\s*gold\;?/) &&
+    buyHealth.toString().match(/healthText\.innerText\s*\=\s*health\;?/)
+);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -136,95 +205,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -318,5 +299,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-054.md

@@ -4,10 +4,9 @@ title: Part 54
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-The word "condition" inside the if statement is just a placeholder. Change the condition to check if the amount of gold the player has is greater than or equal to 10. 
+The word "condition" inside the if statement is just a placeholder. Change the condition to check if the amount of gold the player has is greater than or equal to 10.
 
 Here is an `if` statement that checks if `num` is greater than or equal to 5:
 
@@ -17,29 +16,90 @@ if (num >= 5) {
 }
 ```
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(buyHealth.toString().match(/if\s*\(\s*gold\s*\>\=\s*10\s*\)/));
+See description above for instructions.
 
+```js
+assert(buyHealth.toString().match(/if\s*\(\s*gold\s*\>\=\s*10\s*\)/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -135,95 +195,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -317,5 +289,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-055.md

@@ -4,10 +4,9 @@ title: Part 55
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
-Now when a player tries to buy health it will only work if they have enough money. If the player does not have enough money, nothing will happen. Add an `else` statement where you can put code to run if a player dees not have enough money. 
+Now when a player tries to buy health it will only work if they have enough money. If the player does not have enough money, nothing will happen. Add an `else` statement where you can put code to run if a player dees not have enough money.
 
 Here is an example of an empty `else` statement:
 
@@ -18,29 +17,90 @@ if (num >= 5) {
 }
 ```
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(buyHealth.toString().match(/\}\s*else\s*\{\s*\}/));
+See description above for instructions.
 
+```js
+assert(buyHealth.toString().match(/\}\s*else\s*\{\s*\}/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -136,95 +196,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -320,5 +292,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-056.md

@@ -4,36 +4,96 @@ title: Part 56
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Inside the `else` statement, set `text.innerText` to equal "You do not have enough gold to buy health."
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(buyHealth.toString().match(/\}\s*else\s*\{\s*text\.innerText\s*\=\s*[\'\"\`]You do not have enough gold to buy health\.?[\'\"\`]\;?\s*\}/));
-    # testString: assert((() => { gold = 5; buyHealth(); return text.innerText === "You do not have enough gold to buy health."; })());
-    testString: gold = 5, buyHealth(), assert(text.innerText === "You do not have enough gold to buy health.");
+See description above for instructions.
 
+```js
+(gold = 5),
+  buyHealth(),
+  assert(text.innerText === 'You do not have enough gold to buy health.');
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -131,95 +191,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -315,5 +287,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-057.md

@@ -4,34 +4,94 @@ title: Part 57
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Before we write the code for the `buyWeapon` function, use `const` to create a `weapons` variable right above the `locations` array. Set it to equal an empty array.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert.deepStrictEqual(weapons, []);
+See description above for instructions.
 
+```js
+assert.deepStrictEqual(weapons, []);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -129,95 +189,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -315,5 +287,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-058.md

@@ -4,35 +4,99 @@ title: Part 58
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Just like in the `locations` array, all the elements in `weapons` will be objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should be the `name` "stick" with `power` set to 5. Then, "dagger" with set `power` to 30. Next, "claw hammer" with a `power` of 50. Finally, "sword" with a `power` of 100.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: |
-      assert.deepStrictEqual(weapons, [{name: "stick",power: 5},{name: "dagger",power: 30},{name: "claw hammer",power: 50},{name: "sword",power: 100}]);
+See description above for instructions.
 
+```js
+assert.deepStrictEqual(weapons, [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+]);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -132,95 +196,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -335,5 +311,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-059.md

@@ -4,34 +4,94 @@ title: Part 59
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Inside the `buyWeapon` function, add an `if` statement to check if gold is greater than or equal to 30.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(buyWeapon.toString().match(/if\s*\(\s*gold\s*\>\=\s*30\)\s*\{\s*\}/));
+See description above for instructions.
 
+```js
+assert(buyWeapon.toString().match(/if\s*\(\s*gold\s*\>\=\s*30\)\s*\{\s*\}/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -148,95 +208,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -354,5 +326,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-060.md

@@ -4,35 +4,94 @@ title: Part 60
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Similar to in the `buyHealth` function, set `gold` to equal 30 less than its current value.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert((() => { gold = 50; buyWeapon(); return gold === 20; })());
-    testString: gold = 50, buyWeapon(), assert(gold === 20);
+See description above for instructions.
 
+```js
+(gold = 50), buyWeapon(), assert(gold === 20);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -152,95 +211,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -358,5 +329,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-061.md

@@ -4,35 +4,94 @@ title: Part 61
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 The value of `currentWeapon` corresponds to an index in the `weapons` array. The player starts with a stick since `currentWeapon` starts at 0 and `weapons[0]` is the "stick" weapon. In the `buyWeapon` function, add one to `currentWeapon` since the user is buying the next weapon in the `weapons` array.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert((() => { currentWeapon = 0; buyWeapon(); return currentWeapon === 1; })());
-    testString: currentWeapon = 0, buyWeapon(), assert(currentWeapon === 1);
+See description above for instructions.
 
+```js
+(currentWeapon = 0), buyWeapon(), assert(currentWeapon === 1);
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -152,95 +211,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -359,5 +330,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-062.md

@@ -4,8 +4,7 @@ title: Part 62
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 You can easily increment or add one to a variable with the `++` operator. All three of these statements add one to a number:
 
@@ -17,29 +16,90 @@ num++;
 
 Change the line `currentWeapon += 1;` to use the `++` operator.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(buyWeapon.toString().match(/currentWeapon\s*\+\+\;?/));
+See description above for instructions.
 
+```js
+assert(buyWeapon.toString().match(/currentWeapon\s*\+\+\;?/));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -160,95 +220,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -367,5 +339,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-063.md

@@ -4,36 +4,98 @@ title: Part 63
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Now update the `innerText` property of `goldText` and `text`. `text` should equal "You now have a new weapon.".
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    # testString: assert(buyWeapon.toString().match(/goldText\.innerText\s*\=\s*gold\;/) && buyWeapon.toString().match(/text\.innerText\s*\=\s*[\'\"\`]You now have a new weapon\.?[\'\"\`]\;?/));
-    # testString: assert((() => { buyWeapon(); return goldText.innerText === '20' && text.innerText === 'You now have a new weapon.' })());
-    testString: buyWeapon(), assert(goldText.innerText === '20' && text.innerText === 'You now have a new weapon.');
+See description above for instructions.
 
+```js
+buyWeapon(),
+  assert(
+    goldText.innerText === '20' &&
+      text.innerText === 'You now have a new weapon.'
+  );
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -154,95 +216,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -363,5 +337,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>

curriculum/challenges/english/02-javascript-algorithms-and-data-structures/basic-javascript-rpg-game/part-064.md

@@ -4,34 +4,94 @@ title: Part 64
 challengeType: 0
 ---
 
-## Description
-<section id='description'>
+# --description--
 
 Let's tell the player what weapon they bought. In between the two lines you just wrote, use `let` to initialize a new variable called `newWeapon`. Set `newWeapon` to equal `weapons`.
 
-</section>
+# --hints--
 
-## Instructions
-<section id='instructions'>
-
-</section>
-
-## Tests
-<section id='tests'>
-
-```yml
-tests:
-  - text: See description above for instructions.
-    testString: assert(/let\s*newWeapon\s*\=\s*weapons\;?/.test(code));
+See description above for instructions.
 
+```js
+assert(/let\s*newWeapon\s*\=\s*weapons\;?/.test(code));
 ```
 
-</section>
+# --seed--
 
-## Challenge Seed
-<section id='challengeSeed'>
+## --before-user-code--
 
-<div id='html-seed'>
+```html
+<!DOCTYPE html>
+<html lang="en" >
+<head>
+  <meta charset="UTF-8">
+  <title>RPG - Dragon Repeller</title>
+  <style>
+    body {
+      background-color: darkblue;
+    }
+    #text {
+      background-color: black;
+      color: white;
+      padding: 10px;
+    }
+    #game {
+      max-width: 500px;
+      max-height: 400px;
+      background-color: lightgray;
+      color: white;
+      margin: 0 auto;
+      padding: 10px;
+    }
+    #controls {
+      border: 1px black solid;
+      padding: 5px;
+    }
+    #stats {
+      border: 1px black solid;
+      color: black;
+      padding: 5px;
+    }
+    #monsterStats {
+      display: none;
+      border: 1px black solid;
+      color: white;
+      padding: 5px;
+      background-color: red;
+    }
+    .stat {
+      padding-right: 10px;
+    }
+  </style>
+</head>
+<body>
+<div id="game">
+  <div id="stats">
+    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+  </div>
+  <div id="controls">
+    <button id="button1">Go to store</button>
+    <button id="button2">Go to cave</button>
+    <button id="button3">Fight dragon</button>
+  </div>
+  <div id="monsterStats">
+    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+  </div>
+  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
+</div>
+```
+
+## --after-user-code--
+
+```html
+</body>
+</html>
+```
+
+## --seed-contents--
 
 ```html
 <script>
@@ -154,95 +214,7 @@ function fightBeast() {
 </script>
 ```
 
-</div>
-
-
-### Before Test
-<div id='html-setup'>
-
-```html
-<!DOCTYPE html>
-<html lang="en" >
-<head>
-  <meta charset="UTF-8">
-  <title>RPG - Dragon Repeller</title>
-  <style>
-    body {
-      background-color: darkblue;
-    }
-    #text {
-      background-color: black;
-      color: white;
-      padding: 10px;
-    }
-    #game {
-      max-width: 500px;
-      max-height: 400px;
-      background-color: lightgray;
-      color: white;
-      margin: 0 auto;
-      padding: 10px;
-    }
-    #controls {
-      border: 1px black solid;
-      padding: 5px;
-    }
-    #stats {
-      border: 1px black solid;
-      color: black;
-      padding: 5px;
-    }
-    #monsterStats {
-      display: none;
-      border: 1px black solid;
-      color: white;
-      padding: 5px;
-      background-color: red;
-    }
-    .stat {
-      padding-right: 10px;
-    }
-  </style>
-</head>
-<body>
-<div id="game">
-  <div id="stats">
-    <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
-    <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
-    <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
-  </div>
-  <div id="controls">
-    <button id="button1">Go to store</button>
-    <button id="button2">Go to cave</button>
-    <button id="button3">Fight dragon</button>
-  </div>
-  <div id="monsterStats">
-    <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
-    <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
-  </div>
-  <div id="text">Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.</div>
-</div>
-```
-
-</div>
-
-
-### After Test
-<div id='html-teardown'>
-
-```html
-</body>
-</html>
-```
-
-</div>
-
-
-</section>
-
-## Solution
-<section id='solution'>
-
+# --solutions--
 
 ```html
 <script>
@@ -364,5 +336,3 @@ function fightBeast() {
 }
 </script>
 ```
-
-</section>