Reorder Scripting test your skills for consistency (mdn#42963)

* reorder Scripting test your skills for consistency

* Restructure using dipika suggestion

* last few tweaks

Author: chrisdavidmills

files/en-us/learn_web_development/core/scripting/test_your_skills/arrays/index.md

@@ -24,7 +24,7 @@ Watch the embedded scrim, and complete the task on the timeline (the little ghos
 > [!NOTE]
 > This task is somewhat of a stretch goal, given that it relies on JavaScript features you've not yet explicitly covered during the course. Give it your best shot, and search online for information on anything you are not sure about.
 
-## Task 1
+## Arrays 1
 
 This task gives you some basic array practice:
 
@@ -34,11 +34,11 @@ This task gives you some basic array practice:
 
 <!-- Code shared across examples -->
 
-```html hidden live-sample___arrays-1 live-sample___arrays-2 live-sample___arrays-3 live-sample___arrays-4
+```html hidden live-sample___arrays-1 live-sample___arrays-2 live-sample___arrays-3 live-sample___arrays-4 live-sample___arrays-1-finish live-sample___arrays-2-finish live-sample___arrays-3-finish live-sample___arrays-4-finish
 <section></section>
 ```
 
-```css hidden live-sample___arrays-1 live-sample___arrays-2 live-sample___arrays-3 live-sample___arrays-4
+```css hidden live-sample___arrays-1 live-sample___arrays-2 live-sample___arrays-3 live-sample___arrays-4 live-sample___arrays-1-finish live-sample___arrays-2-finish live-sample___arrays-3-finish live-sample___arrays-4-finish
 * {
   box-sizing: border-box;
 }
@@ -51,6 +51,12 @@ p {
 
 <!-- Example-specific code -->
 
+The starting point of the task looks like this (nothing is shown yet):
+
+{{ EmbedLiveSample("arrays-1", "100%", 60) }}
+
+Here's the underlying code for this starting point:
+
 ```js live-sample___arrays-1
 // Add your code here
 
@@ -62,7 +68,9 @@ para1.textContent = `Array: ${myArray}`;
 section.appendChild(para1);
 ```
 
-{{ EmbedLiveSample("arrays-1", "100%", 60) }}
+The updated output should look like this:
+
+{{ EmbedLiveSample("arrays-1-finish", "100%", 60) }}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -81,9 +89,23 @@ myArray.unshift("crocodiles");
 // ...
 ```
 
+```js hidden live-sample___arrays-1-finish
+const myArray = ["cats", "dogs", "chickens"];
+
+myArray[0] = "horses";
+myArray[1] = "pigs";
+
+myArray.unshift("crocodiles");
+
+const section = document.querySelector("section");
+const para1 = document.createElement("p");
+para1.textContent = `Array: ${myArray}`;
+section.appendChild(para1);
+```
+
 </details>
 
-## Task 2
+## Arrays 2
 
 Now let's move on to another task. Here you are provided with a string to work with.
 
@@ -93,6 +115,12 @@ To complete the task:
 2. Store the length of the array in a variable called `arrayLength`.
 3. Store the last item in the array in a variable called `lastItem`.
 
+The starting point of the task looks like this (nothing is shown yet):
+
+{{ EmbedLiveSample("arrays-2", "100%", 60) }}
+
+Here's the underlying code for this starting point:
+
 ```js live-sample___arrays-2
 const myString = "Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri";
 
@@ -112,7 +140,9 @@ section.appendChild(para2);
 section.appendChild(para3);
 ```
 
-{{ EmbedLiveSample("arrays-2", "100%", 60) }}
+The updated output should look like this:
+
+{{ EmbedLiveSample("arrays-2-finish", "100%", 100) }}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -132,9 +162,27 @@ let lastItem = myArray[arrayLength - 1];
 // ...
 ```
 
+```js hidden live-sample___arrays-2-finish
+const myString = "Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri";
+let myArray = myString.split("+");
+let arrayLength = myArray.length;
+let lastItem = myArray[arrayLength - 1];
+
+const section = document.querySelector("section");
+const para1 = document.createElement("p");
+para1.textContent = `Array: ${myArray}`;
+const para2 = document.createElement("p");
+para2.textContent = `The length of the array is ${arrayLength}.`;
+const para3 = document.createElement("p");
+para3.textContent = `The last item in the array is "${lastItem}".`;
+section.appendChild(para1);
+section.appendChild(para2);
+section.appendChild(para3);
+```
+
 </details>
 
-## Task 3
+## Arrays 3
 
 For this array task, we provide you with a starting array, and you will work in somewhat the opposite direction. You need to:
 
@@ -143,6 +191,12 @@ For this array task, we provide you with a starting array, and you will work in
 3. Iterate over each item in the array and add its index number after the name inside parentheses, for example `Ryu (0)`. Note that we don't teach how to do this in the Arrays article, so you'll have to do some research.
 4. Finally, join the array items together in a single string called `myString`, with a separator of `"-"`.
 
+The starting point of the task looks like this (nothing is shown yet):
+
+{{ EmbedLiveSample("arrays-3", "100%", 60) }}
+
+Here's the underlying code for this starting point:
+
 ```js live-sample___arrays-3
 const myArray = [
   "Ryu",
@@ -165,7 +219,9 @@ para1.textContent = myString;
 section.appendChild(para1);
 ```
 
-{{ EmbedLiveSample("arrays-3", "100%", 60) }}
+The updated output should look like this:
+
+{{ EmbedLiveSample("arrays-3-finish", "100%", 60) }}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -200,9 +256,41 @@ const myString = myArray.join(" - ");
 // ...
 ```
 
+```js hidden live-sample___arrays-3-finish
+const myArray = [
+  "Ryu",
+  "Ken",
+  "Chun-Li",
+  "Cammy",
+  "Guile",
+  "Sakura",
+  "Sagat",
+  "Juri",
+];
+
+myArray.pop();
+
+myArray.push("Zangief");
+myArray.push("Ibuki");
+
+myArray.forEach((element, index) => {
+  const newElement = `${element} (${index})`;
+  myArray[index] = newElement;
+});
+
+const myString = myArray.join(" - ");
+
+// Don't edit the code below here!
+
+const section = document.querySelector("section");
+const para1 = document.createElement("p");
+para1.textContent = myString;
+section.appendChild(para1);
+```
+
 </details>
 
-## Task 4
+## Arrays 4
 
 For this array task, we provide you with a starting array listing the names of some birds.
 
@@ -211,7 +299,11 @@ To complete the task:
 1. Find the index of the `"Eagles"` item, and use that to remove the `"Eagles"` item.
 2. Make a new array from this one, called `eBirds`, that contains only birds from the original array whose names begin with the letter "E". Note that {{jsxref("String.prototype.startsWith()", "startsWith()")}} is a great way to check whether a string starts with a given character.
 
-If it works, you should see `"Emus,Egrets"` appear in the page.
+The starting point of the task looks like this (nothing is shown yet):
+
+{{ EmbedLiveSample("arrays-4", "100%", 60) }}
+
+Here's the underlying code for this starting point:
 
 ```js live-sample___arrays-4
 const birds = ["Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets"];
@@ -226,7 +318,9 @@ para1.textContent = eBirds;
 section.appendChild(para1);
 ```
 
-{{ EmbedLiveSample("arrays-4", "100%", 60) }}
+The updated output should look like this:
+
+{{ EmbedLiveSample("arrays-4-finish", "100%", 60) }}
 
 <details>
 <summary>Click here to show the solution</summary>
@@ -248,6 +342,23 @@ const eBirds = birds.filter(startsWithE);
 // ...
 ```
 
+```js hidden live-sample___arrays-4-finish
+const birds = ["Parrots", "Falcons", "Eagles", "Emus", "Caracaras", "Egrets"];
+
+const eaglesIndex = birds.indexOf("Eagles");
+birds.splice(eaglesIndex, 1);
+
+function startsWithE(bird) {
+  return bird.startsWith("E");
+}
+const eBirds = birds.filter(startsWithE);
+
+const section = document.querySelector("section");
+const para1 = document.createElement("p");
+para1.textContent = eBirds;
+section.appendChild(para1);
+```
+
 </details>
 
 {{PreviousMenuNext("Learn_web_development/Core/Scripting/Arrays", "Learn_web_development/Core/Scripting/Silly_story_generator", "Learn_web_development/Core/Scripting")}}