chore: rename "part" to "step" (#43934)

* chore: rename part to step * chore: update metas * chore: more renaming * chore: update tooling * chore: update frontmatter * chore(tools): title testing
2021-10-21 10:07:52 -07:00
parent 6dbe68eb2f
commit b36cdbafd1
2194 changed files with 237701 additions and 237701 deletions
--- a/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-013.md
+++ b/curriculum/challenges/english/04-data-visualization/d3-dashboard/step-013.md
@@ -0,0 +1,96 @@
+---
+id: 5d8a4cfbe6b6180ed9a1c9ea
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Add another `script` below the one you just added. Give it a `src` attribute of `./data.js`.
+
+This adds a `data` variable to your project that contains your number of social media followers, it is an array of objects. Each object has the year and your followers for three different platforms. You will see what it looks like shortly.
+
+# --hints--
+
+test-text
+
+```js
+const script = code.match(/<script\s+[\s\S]+?[^>]>\s*<\/script\s*>/gi)[1];
+assert(/src\s*=\s*('|")\s*(\.\/)?data.js\s*\1/gi.test(script));
+```
+
+# --seed--
+
+## --before-user-code--
+
+```html
+<style>
+  body {
+    background-color: #ccc;
+    padding: 100px 10px;
+  }
+
+  .dashboard {
+    width: 980px;
+    height: 500px;
+    background-color: white;
+    box-shadow: 5px 5px 5px 5px #888;
+    margin: auto;
+    display: flex;
+    align-items: center;
+  }
+</style>
+<script>
+  const data = [ 
+    { year: 2012, followers: { twitter: 2594, tumblr:  401, instagram:   83 }},
+    { year: 2013, followers: { twitter: 3049, tumblr:  440, instagram:  192 }},
+    { year: 2014, followers: { twitter: 3511, tumblr:  415, instagram:  511 }},
+    { year: 2015, followers: { twitter: 3619, tumblr:  492, instagram: 1014 }},
+    { year: 2016, followers: { twitter: 4046, tumblr:  543, instagram: 2066 }},
+    { year: 2017, followers: { twitter: 3991, tumblr:  701, instagram: 3032 }},
+    { year: 2018, followers: { twitter: 3512, tumblr: 1522, instagram: 4512 }},
+    { year: 2019, followers: { twitter: 3274, tumblr: 1989, instagram: 4715 }},
+    { year: 2020, followers: { twitter: 2845, tumblr: 2040, instagram: 4801 }}
+  ];
+</script>
+```
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>D3 Dashboard</title>
+    <link rel="stylesheet" href="./dashboard.css">
+    <script src="./d3-5.9.2.min.js"></script>
+
+    
+ </head>
+
+  <body>
+    <div class="dashboard"></div>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>D3 Dashboard</title>
+    <link rel="stylesheet" href="./dashboard.css">
+    <script src="./d3-5.9.2.min.js"></script>
+    <script src="./data.js"></script>
+  </head>
+
+  <body>
+    <div class="dashboard"></div>
+
+    
+  </body>
+</html>
+```