From 8e229625236180788da705f27f034487b600a5c2 Mon Sep 17 00:00:00 2001 From: Laurent Labine Date: Thu, 25 Mar 2021 15:43:13 +0100 Subject: [PATCH] =?UTF-8?q?fix(curriculum)=20replace=20single-line=20block?= =?UTF-8?q?s=20with=20multi-line=20blocks=20for=E2=80=A6=20(#41526)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(curriculum) replace single-line blocks with multi-line blocks for issue 51418 Data visualization and Coding Interview Prep portions. * Update execute-a-markov-algorithm.md Implemented as inline code blocks as discussed * Adding missed blocks * Last file added --- .../add-classes-with-d3.md | 4 +- .../add-document-elements-with-d3.md | 4 +- .../add-inline-styling-to-elements.md | 4 +- .../create-a-linear-scale-with-d3.md | 4 +- .../select-a-group-of-elements-with-d3.md | 4 +- ...te-the-height-of-an-element-dynamically.md | 4 +- .../work-with-dynamic-data-in-d3.md | 4 +- .../change-text-with-click-events.md | 4 +- .../render-images-from-data-sources.md | 4 +- .../create-and-add-to-sets-in-es6.md | 12 ++++-- .../insert-an-element-into-a-max-heap.md | 8 +++- .../remove-items-from-a-set-in-es6.md | 4 +- .../data-structures/typed-arrays.md | 4 +- .../use-.has-and-.size-on-an-es6-set.md | 12 ++++-- .../execute-a-markov-algorithm.md | 40 +++---------------- ...oop-over-multiple-arrays-simultaneously.md | 8 +++- .../rosetta-code/sort-disjoint-sublist.md | 4 +- .../rosetta-code/top-rank-per-group.md | 8 +++- 18 files changed, 77 insertions(+), 59 deletions(-) diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md index e50e8483ab..7a85c01796 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md @@ -12,7 +12,9 @@ Using a lot of inline styles on HTML elements gets hard to manage, even for smal The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection: -`selection.attr("class", "container");` +```js +selection.attr("class", "container"); +``` Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md index 44ba43eb3e..ea44782e9c 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md @@ -12,7 +12,9 @@ D3 has several methods that let you add and change elements in your document. The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example: -`const anchor = d3.select("a");` +```js +const anchor = d3.select("a"); +``` The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md index 642721027c..9c538755d7 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md @@ -12,7 +12,9 @@ D3 lets you add inline CSS styles on dynamic elements with the `style()` method. The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue: -`selection.style("color","blue");` +```js +selection.style("color","blue"); +``` # --instructions-- diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md index 62747c0c9c..d118740df6 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md @@ -18,7 +18,9 @@ It's unlikely you would plot raw data as-is. Before plotting it, you set the sca D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`: -`const scale = d3.scaleLinear()` +```js +const scale = d3.scaleLinear() +``` By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md index f0d8c92a76..bf0acc7b43 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md @@ -10,7 +10,9 @@ dashedName: select-a-group-of-elements-with-d3 D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document: -`const anchors = d3.selectAll("a");` +```js +const anchors = d3.selectAll("a"); +``` Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md index f416d3bdbb..27dd13a1b9 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md @@ -16,7 +16,9 @@ The previous challenges covered how to display data from an array and how to add Recall the format to set a style using a callback function: -`selection.style("cssProperty", (d) => d)` +```js +selection.style("cssProperty", (d) => d) +``` # --instructions-- diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md index 6373024ed0..3b4a59ff1f 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md @@ -14,7 +14,9 @@ In the previous challenge, you created a new `h2` element for each item in the ` The D3 `text()` method can take a string or a callback function as an argument: -`selection.text((d) => d)` +```js +selection.text((d) => d) +``` In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to. diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md index 54a169ff3b..4550322262 100644 --- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md +++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md @@ -14,7 +14,9 @@ For example, when a user clicks the `Get Message` button, it changes the text of This works by adding the following code within the click event: -`document.getElementsByClassName('message')[0].textContent="Here is the message";` +```js +document.getElementsByClassName('message')[0].textContent="Here is the message"; +``` # --instructions-- diff --git a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md index 5a67b340bd..2091e71567 100644 --- a/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md +++ b/curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md @@ -14,7 +14,9 @@ When you're looping through these objects, you can use this `imageLink` property Here's the code that does this: -`html += "";` +```js +html += ""; +``` # --instructions-- diff --git a/curriculum/challenges/english/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md b/curriculum/challenges/english/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md index 0f6b957518..1727a24ed0 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md +++ b/curriculum/challenges/english/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md @@ -12,15 +12,21 @@ Now that you have worked through ES5, you are going to perform something similar To create a new empty set: -`var set = new Set();` +```js +var set = new Set(); +``` You can create a set with a value: -`var set = new Set(1);` +```js +var set = new Set(1); +``` You can create a set with an array: -`var set = new Set([1, 2, 3]);` +```js +var set = new Set([1, 2, 3]); +``` Once you have created a set, you can add the values you wish using the `add` method: diff --git a/curriculum/challenges/english/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md b/curriculum/challenges/english/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md index c692c67cbb..74e6b693f7 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md +++ b/curriculum/challenges/english/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md @@ -14,13 +14,17 @@ While binary heaps may be implemented as tree structures with nodes that contain For instance, consider this array representation of a binary min heap: -`[ 6, 22, 30, 37, 63, 48, 42, 76 ]` +```js +[ 6, 22, 30, 37, 63, 48, 42, 76 ] +``` The root node is the first element, `6`. Its children are `22` and `30`. If we look at the relationship between the array indices of these values, for index `i` the children are `2 * i + 1` and `2 * i + 2`. Similarly, the element at index `0` is the parent of these two children at indices `1` and `2`. More generally, we can find the parent of a node at any index with the following: `Math.floor((i - 1) / 2)`. These patterns will hold true as the binary tree grows to any size. Finally, we can make a slight adjustment to make this arithmetic even easier by skipping the first element in the array. Doing this creates the following relationship for any element at a given index `i`: Example array representation: -`[ null, 6, 22, 30, 37, 63, 48, 42, 76 ]` +```js +[ null, 6, 22, 30, 37, 63, 48, 42, 76 ] +``` An element's left child: `i * 2` diff --git a/curriculum/challenges/english/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md b/curriculum/challenges/english/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md index a3c2f3b97e..b676bb7eeb 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md +++ b/curriculum/challenges/english/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md @@ -12,7 +12,9 @@ Let's practice removing items from an ES6 Set using the `delete` method. First, create an ES6 Set: -`var set = new Set([1,2,3]);` +```js +var set = new Set([1,2,3]); +``` Now remove an item from your Set with the `delete` method. diff --git a/curriculum/challenges/english/10-coding-interview-prep/data-structures/typed-arrays.md b/curriculum/challenges/english/10-coding-interview-prep/data-structures/typed-arrays.md index 2433c0e2be..b992af729a 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/data-structures/typed-arrays.md +++ b/curriculum/challenges/english/10-coding-interview-prep/data-structures/typed-arrays.md @@ -10,7 +10,9 @@ dashedName: typed-arrays Arrays are JavaScript objects that can hold a lot of different elements. -`var complexArr = [1, 5, "2", "Word", {"name": "James"}];` +```js +var complexArr = [1, 5, "2", "Word", {"name": "James"}]; +``` Basically what happens in the background is that your browser will automatically give the right amount of memory space for that array. It will also change as needed if you add or remove data. diff --git a/curriculum/challenges/english/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md b/curriculum/challenges/english/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md index 63c09ecd32..55d4ac67de 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md +++ b/curriculum/challenges/english/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md @@ -12,15 +12,21 @@ Let's look at the .has and .size methods available on the ES6 Set object. First, create an ES6 Set -`var set = new Set([1,2,3]);` +```js +var set = new Set([1,2,3]); +``` The .has method will check if the value is contained within the set. -`var hasTwo = set.has(2);` +```js +var hasTwo = set.has(2); +``` The .size method will return an integer representing the size of the Set -`var howBig = set.size;` +```js +var howBig = set.size; +``` # --instructions-- diff --git a/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md b/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md index 3b1953376a..5dffbaf6cb 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md +++ b/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md @@ -40,13 +40,7 @@ the shop -> my brother a never used -> .terminating rule -Sample text of: - -`I bought a B of As from T S.` - -Should generate the output: - -`I bought a bag of apples from my brother.` +Sample text of `I bought a B of As from T S.` should generate the output `I bought a bag of apples from my brother.` **Ruleset 2:** @@ -61,13 +55,7 @@ the shop -> my brother a never used -> .terminating rule -Sample text of: - -`I bought a B of As from T S.` - -Should generate: - -`I bought a bag of apples from T shop.` +Sample text of `I bought a B of As from T S.` should generate `I bought a bag of apples from T shop.` **Ruleset 3:** @@ -86,13 +74,7 @@ the shop -> my brother a never used -> .terminating rule -Sample text of: - -`I bought a B of As W my Bgage from T S.` - -Should generate: - -`I bought a bag of apples with my money from T shop.` +Sample text of `I bought a B of As W my Bgage from T S.` should generate `I bought a bag of apples with my money from T shop.` **Ruleset 4:** @@ -128,13 +110,7 @@ _1 -> 1 _+_ -> -Sample text of: - -`_1111*11111_` - -should generate the output: - -`11111111111111111111` +Sample text of `_1111*11111_` should generate the output `11111111111111111111` **Ruleset 5:** @@ -164,13 +140,7 @@ B1 -> 1B 1C1 -> H11 -This ruleset should turn - -`000000A000000` - -into - -`00011H1111000` +This ruleset should turn `000000A000000` into `00011H1111000` # --hints-- diff --git a/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md b/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md index 7d168a3673..e8924ccd28 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md +++ b/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md @@ -12,11 +12,15 @@ Loop over multiple arrays and create a new array whose $i^{th}$ element is the c For this example, if you are given this array of arrays: -`[ ["a", "b", "c"], ["A", "B", "C"], [1, 2, 3] ]` +```js +[ ["a", "b", "c"], ["A", "B", "C"], [1, 2, 3] ] +``` the output should be: -`["aA1","bB2","cC3"]` +```js +["aA1","bB2","cC3"] +``` # --instructions-- diff --git a/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md b/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md index 60e2ee0923..b6647f2824 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md +++ b/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md @@ -14,7 +14,9 @@ Make your function work with the following list of values and set of indices: values: [7, 6, 5, 4, 3, 2, 1, 0] -`indices(0-based): {6, 1, 7}` +```js +indices(0-based): {6, 1, 7} +``` Where the correct result would be: diff --git a/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/top-rank-per-group.md b/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/top-rank-per-group.md index 75405d3841..56cd284379 100644 --- a/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/top-rank-per-group.md +++ b/curriculum/challenges/english/10-coding-interview-prep/rosetta-code/top-rank-per-group.md @@ -32,7 +32,9 @@ testData1 = [ One could rank top 10 employees in each department by calling: -`topRankPerGroup(10, testData1, 'dept', 'salary')` +```js +topRankPerGroup(10, testData1, 'dept', 'salary') +``` Given the following data: @@ -48,7 +50,9 @@ testData2 = [ One could rank the top-rated movie in each genre by calling: -`topRankPerGroup(1, testData2, 'genre', 'rating')` +```js +topRankPerGroup(1, testData2, 'genre', 'rating') +``` The function should return an array with an array for each group containing the top `n` objects.