feat(curriculum): restore seed + solution to Chinese (#40683)
* feat(tools): add seed/solution restore script * chore(curriculum): remove empty sections' markers * chore(curriculum): add seed + solution to Chinese * chore: remove old formatter * fix: update getChallenges parse translated challenges separately, without reference to the source * chore(curriculum): add dashedName to English * chore(curriculum): add dashedName to Chinese * refactor: remove unused challenge property 'name' * fix: relax dashedName requirement * fix: stray tag Remove stray `pre` tag from challenge file. Signed-off-by: nhcarrigan <nhcarrigan@gmail.com> Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
This commit is contained in:
Oliver Eyton-Williams
committed by
GitHub
GitHub
parent
0095583028
commit
ee1e8abd87
@ -3,6 +3,7 @@ id: bd7168d8c242eddfaeb5bd13
|
||||
title: 用条形图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301464
|
||||
dashedName: visualize-data-with-a-bar-chart
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -45,8 +46,8 @@ forumTopicId: 301464
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa6367417b2b2512bbf
|
||||
title: 用等值区域图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
dashedName: visualize-data-with-a-choropleth-map
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -44,8 +45,8 @@ forumTopicId: 301465
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: bd7188d8c242eddfaeb5bd13
|
||||
title: 用热图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301466
|
||||
dashedName: visualize-data-with-a-heat-map
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -53,8 +54,8 @@ forumTopicId: 301466
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: bd7178d8c242eddfaeb5bd13
|
||||
title: 用散点图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -49,8 +50,8 @@ forumTopicId: 301467
|
||||
|
||||
一旦你完成了本项目并且通过所有测试，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa6367417b2b2512bc0
|
||||
title: 用树形图可视化数据
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -45,8 +46,8 @@ forumTopicId: 301468
|
||||
|
||||
一旦你完成了本项目并且该项目所有测试运行通过，请提交项目的 URL。
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
# --solutions--
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7faa367417b2b2512bd4
|
||||
title: 给 D3 元素添加悬停效果
|
||||
challengeType: 6
|
||||
forumTopicId: 301469
|
||||
dashedName: add-a-hover-effect-to-a-d3-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -23,5 +24,95 @@ forumTopicId: 301469
|
||||
assert($('rect').attr('class') == 'bar');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy")
|
||||
// Add your code below this line
|
||||
.attr('class', 'bar')
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7faa367417b2b2512bd6
|
||||
title: 给 D3 元素添加工具提示
|
||||
challengeType: 6
|
||||
forumTopicId: 301470
|
||||
dashedName: add-a-tooltip-to-a-d3-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -77,5 +78,98 @@ assert($('title').eq(7).text() == '14');
|
||||
assert($('title').eq(8).text() == '9');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy")
|
||||
.attr("class", "bar")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (d * 3 + 3))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar:hover {
|
||||
fill: brown;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy")
|
||||
.attr("class", "bar")
|
||||
.append("title")
|
||||
.text((d) => d)
|
||||
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (d * 3 + 3))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fab367417b2b2512bd8
|
||||
title: 给 Circle 元素添加属性
|
||||
challengeType: 6
|
||||
forumTopicId: 301471
|
||||
dashedName: add-attributes-to-the-circle-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -127,5 +128,84 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => d[0])
|
||||
.attr("cy", (d) => h - d[1])
|
||||
.attr("r", 5)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fad367417b2b2512bdf
|
||||
title: 添加坐标轴到视图中
|
||||
challengeType: 6
|
||||
forumTopicId: 301472
|
||||
dashedName: add-axes-to-a-visualization
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -62,5 +63,142 @@ assert(
|
||||
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy",(d) => yScale(d[1]))
|
||||
.attr("r", (d) => 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + "," + d[1]))
|
||||
.attr("x", (d) => xScale(d[0] + 10))
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
// Add your code below this line
|
||||
const yAxis = undefined;
|
||||
// Add your code above this line
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (h - padding) + ")")
|
||||
.call(xAxis);
|
||||
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy",(d) => yScale(d[1]))
|
||||
.attr("r", (d) => 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + "," + d[1]))
|
||||
.attr("x", (d) => xScale(d[0] + 10))
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
|
||||
const xAxis = d3.axisBottom(xScale);
|
||||
|
||||
const yAxis = d3.axisLeft(yScale);
|
||||
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(0," + (h - padding) + ")")
|
||||
.call(xAxis);
|
||||
|
||||
svg.append("g")
|
||||
.attr("transform", "translate(" + padding + ",0)")
|
||||
.call(yAxis)
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa7367417b2b2512bc8
|
||||
title: 用 D3 添加 Class
|
||||
challengeType: 6
|
||||
forumTopicId: 301473
|
||||
dashedName: add-classes-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -31,5 +32,58 @@ assert($('div').attr('class') == 'bar');
|
||||
assert(code.match(/\.attr/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
// Add your code below this line
|
||||
.attr("class","bar");
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa6367417b2b2512bc2
|
||||
title: 用 D3 给文档添加元素
|
||||
challengeType: 6
|
||||
forumTopicId: 301474
|
||||
dashedName: add-document-elements-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -73,5 +74,30 @@ assert(code.match(/\.append/g));
|
||||
assert(code.match(/\.text/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
d3.select("body")
|
||||
.append("h1")
|
||||
.text("Learning D3")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa7367417b2b2512bc6
|
||||
title: 给元素添加内联样式
|
||||
challengeType: 6
|
||||
forumTopicId: 301475
|
||||
dashedName: add-inline-styling-to-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -31,5 +32,43 @@ assert($('h2').css('font-family') == 'verdana');
|
||||
assert(code.match(/\.style/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
.style("font-family", "verdana")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7faa367417b2b2512bd2
|
||||
title: 给 D3 元素添加标签
|
||||
challengeType: 6
|
||||
forumTopicId: 301476
|
||||
dashedName: add-labels-to-d3-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -76,5 +77,78 @@ assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
|
||||
assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3)
|
||||
.text((d) => d)
|
||||
</script>
|
||||
<body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fab367417b2b2512bd9
|
||||
title: 向散点图的 Circles 添加标签
|
||||
challengeType: 6
|
||||
forumTopicId: 301477
|
||||
dashedName: add-labels-to-scatter-plot-circles
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -125,5 +126,99 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d, i) => d[0])
|
||||
.attr("cy", (d, i) => h - d[1])
|
||||
.attr("r", 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d, i) => d[0])
|
||||
.attr("cy", (d, i) => h - d[1])
|
||||
.attr("r", 5);
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.attr("x", (d) => d[0] + 5)
|
||||
.attr("y", (d) => h - d[1])
|
||||
.text((d) => (d[0] + ", " + d[1]))
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa7367417b2b2512bc7
|
||||
title: 根据数据更改样式
|
||||
challengeType: 6
|
||||
forumTopicId: 301479
|
||||
dashedName: change-styles-based-on-data
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -82,5 +83,42 @@ assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
|
||||
assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => (d + " USD"))
|
||||
.style("color", (d) => d < 20 ? "red" : "green")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa9367417b2b2512bd1
|
||||
title: 更改 SVG 元素的颜色
|
||||
challengeType: 6
|
||||
forumTopicId: 301480
|
||||
dashedName: change-the-color-of-an-svg-element
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -23,5 +24,65 @@ forumTopicId: 301480
|
||||
assert($('rect').css('fill') == 'rgb(0, 0, 128)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d)
|
||||
.attr("fill", "navy");
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa8367417b2b2512bca
|
||||
title: 更改条形图的显示方式
|
||||
challengeType: 6
|
||||
forumTopicId: 301481
|
||||
dashedName: change-the-presentation-of-a-bar-chart
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -103,5 +104,59 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
/* Only change code below this line */
|
||||
|
||||
|
||||
/* Only change code above this line */
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
.style("height", (d) => (d + "px"))
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
margin: 2px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
.style("height", (d) => (d * 10 + "px"))
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa8367417b2b2512bcd
|
||||
title: 为集合中的每个数据点创建一个数据条
|
||||
challengeType: 6
|
||||
forumTopicId: 301482
|
||||
dashedName: create-a-bar-for-each-data-point-in-the-set
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -50,5 +51,60 @@ assert(code.match(/\.enter/g));
|
||||
assert(code.match(/\.append/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", 0)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fab367417b2b2512bda
|
||||
title: 用 D3 创建线性比例
|
||||
challengeType: 6
|
||||
forumTopicId: 301483
|
||||
dashedName: create-a-linear-scale-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -45,5 +46,41 @@ assert(code.match(/\.scaleLinear/g));
|
||||
assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
const scale = undefined; // Create the scale here
|
||||
const output = scale(); // Call scale with an argument here
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
|
||||
const scale = d3.scaleLinear();
|
||||
const output = scale(50);
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fab367417b2b2512bd7
|
||||
title: 使用 SVG Circles 创建散点图
|
||||
challengeType: 6
|
||||
forumTopicId: 301484
|
||||
dashedName: create-a-scatterplot-with-svg-circles
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -26,5 +27,78 @@ circles 并不可见，因为我们还没有设置它们的属性。我们会在
|
||||
assert($('circle').length == 10);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa8367417b2b2512bcc
|
||||
title: 用 SVG 显示形状
|
||||
challengeType: 6
|
||||
forumTopicId: 301485
|
||||
dashedName: display-shapes-with-svg
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -53,5 +54,50 @@ assert($('rect').attr('x') == '0');
|
||||
assert($('rect').attr('y') == '0');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
.append("rect")
|
||||
.attr("width", 25)
|
||||
.attr("height", 100)
|
||||
.attr("x", 0)
|
||||
.attr("y", 0);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa9367417b2b2512bcf
|
||||
title: 动态更改每个条的高度
|
||||
challengeType: 6
|
||||
forumTopicId: 301486
|
||||
dashedName: dynamically-change-the-height-of-each-bar
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -81,5 +82,66 @@ assert($('rect').eq(7).attr('height') == '42');
|
||||
assert($('rect').eq(8).attr('height') == '27');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => {
|
||||
return d * 3
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa9367417b2b2512bce
|
||||
title: 动态设置每个 Bar 的坐标
|
||||
challengeType: 6
|
||||
forumTopicId: 301487
|
||||
dashedName: dynamically-set-the-coordinates-for-each-bar
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -89,5 +90,66 @@ assert($('rect').eq(7).attr('x') == '210');
|
||||
assert($('rect').eq(8).attr('x') == '240');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
})
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => {
|
||||
return i * 30
|
||||
})
|
||||
.attr("y", 0)
|
||||
.attr("width", 25)
|
||||
.attr("height", 100);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa9367417b2b2512bd0
|
||||
title: 反转 SVG 元素
|
||||
challengeType: 6
|
||||
forumTopicId: 301488
|
||||
dashedName: invert-svg-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -80,5 +81,64 @@ assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
|
||||
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
})
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => 3 * d);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa8367417b2b2512bcb
|
||||
title: 了解 D3 中的 SVG
|
||||
challengeType: 6
|
||||
forumTopicId: 301489
|
||||
dashedName: learn-about-svg-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -42,5 +43,52 @@ assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
|
||||
assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
svg {
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
svg {
|
||||
background-color: pink;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa6367417b2b2512bc3
|
||||
title: 用 D3 选择一组元素
|
||||
challengeType: 6
|
||||
forumTopicId: 301490
|
||||
dashedName: select-a-group-of-elements-with-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -41,5 +42,39 @@ assert(code.match(/d3/g));
|
||||
assert(code.match(/\.selectAll/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
</ul>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<ul>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
<li>Example</li>
|
||||
</ul>
|
||||
<script>
|
||||
d3.selectAll("li")
|
||||
.text("list item")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fac367417b2b2512bdb
|
||||
title: 按比例设置域和范围
|
||||
challengeType: 6
|
||||
forumTopicId: 301491
|
||||
dashedName: set-a-domain-and-a-range-on-a-scale
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -70,5 +71,39 @@ assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
|
||||
assert($('h2').text() == '-102');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
// Add your code below this line
|
||||
const scale = d3.scaleLinear();
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
const output = scale(50);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const scale = d3.scaleLinear();
|
||||
scale.domain([250, 500])
|
||||
scale.range([10, 150])
|
||||
const output = scale(50);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output);
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7faa367417b2b2512bd3
|
||||
title: 给 D3 标签添加样式
|
||||
challengeType: 6
|
||||
forumTopicId: 301492
|
||||
dashedName: style-d3-labels
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -27,5 +28,83 @@ assert($('text').css('fill') == 'rgb(255, 0, 0)');
|
||||
assert($('text').css('font-size') == '25px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3)
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
const w = 500;
|
||||
const h = 100;
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("rect")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("rect")
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - 3 * d)
|
||||
.attr("width", 25)
|
||||
.attr("height", (d, i) => d * 3)
|
||||
.attr("fill", "navy");
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => d)
|
||||
.attr("x", (d, i) => i * 30)
|
||||
.attr("y", (d, i) => h - (3 * d) - 3)
|
||||
.style("font-size", 25)
|
||||
.attr("fill", "red")
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa8367417b2b2512bc9
|
||||
title: 动态更新元素的高度
|
||||
challengeType: 6
|
||||
forumTopicId: 301493
|
||||
dashedName: update-the-height-of-an-element-dynamically
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -77,5 +78,58 @@ assert($('div').eq(7)[0].style.height === '14px');
|
||||
assert($('div').eq(8)[0].style.height === '9px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<style>
|
||||
.bar {
|
||||
width: 25px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
background-color: blue;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("div")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("div")
|
||||
.attr("class", "bar")
|
||||
.style('height', d => `${d}px`)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fac367417b2b2512bde
|
||||
title: 使用预定义的比例放置元素
|
||||
challengeType: 6
|
||||
forumTopicId: 301494
|
||||
dashedName: use-a-pre-defined-scale-to-place-elements
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -228,5 +229,119 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + ", "
|
||||
+ d[1]))
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
const padding = 60;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
const svg = d3.select("body")
|
||||
.append("svg")
|
||||
.attr("width", w)
|
||||
.attr("height", h);
|
||||
|
||||
svg.selectAll("circle")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("circle")
|
||||
.attr("cx", (d) => xScale(d[0]))
|
||||
.attr("cy", (d) => yScale(d[1]))
|
||||
.attr("r", 5)
|
||||
|
||||
svg.selectAll("text")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("text")
|
||||
.text((d) => (d[0] + ", "
|
||||
+ d[1]))
|
||||
.attr("x", (d) => xScale(d[0] + 10))
|
||||
.attr("y", (d) => yScale(d[1]))
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fac367417b2b2512bdd
|
||||
title: 使用动态比例
|
||||
challengeType: 6
|
||||
forumTopicId: 301495
|
||||
dashedName: use-dynamic-scales
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -67,5 +68,91 @@ yScale 的 `range()` 应该等于 `[470, 30]`。
|
||||
assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
// Padding between the SVG canvas boundary and the plot
|
||||
const padding = 30;
|
||||
|
||||
// Create an x and y scale
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
// Add your code below this line
|
||||
|
||||
const yScale = undefined;
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
const output = yScale(411); // Returns 30
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [
|
||||
[ 34, 78 ],
|
||||
[ 109, 280 ],
|
||||
[ 310, 120 ],
|
||||
[ 79, 411 ],
|
||||
[ 420, 220 ],
|
||||
[ 233, 145 ],
|
||||
[ 333, 96 ],
|
||||
[ 222, 333 ],
|
||||
[ 78, 320 ],
|
||||
[ 21, 123 ]
|
||||
];
|
||||
|
||||
const w = 500;
|
||||
const h = 500;
|
||||
|
||||
|
||||
const padding = 30;
|
||||
|
||||
const xScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[0])])
|
||||
.range([padding, w - padding]);
|
||||
|
||||
|
||||
const yScale = d3.scaleLinear()
|
||||
.domain([0, d3.max(dataset, (d) => d[1])])
|
||||
.range([h - padding, padding]);
|
||||
|
||||
|
||||
const output = yScale(411);
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,8 @@ id: 587d7fac367417b2b2512bdc
|
||||
title: 使用 d3.max 和 d3.min 函数在数据集中查找最小值和最大值
|
||||
challengeType: 6
|
||||
forumTopicId: 301496
|
||||
dashedName: >-
|
||||
use-the-d3-max-and-d3-min-functions-to-find-minimum-and-maximum-values-in-a-dataset
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -49,5 +51,39 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
|
||||
// Add your code below this line
|
||||
|
||||
const output = undefined; // Change this line
|
||||
|
||||
// Add your code above this line
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
|
||||
|
||||
const output = d3.max(positionData, (d) => d[2])
|
||||
|
||||
d3.select("body")
|
||||
.append("h2")
|
||||
.text(output)
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa7367417b2b2512bc4
|
||||
title: 使用 D3 中的数据
|
||||
challengeType: 6
|
||||
forumTopicId: 301497
|
||||
dashedName: work-with-data-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -67,5 +68,38 @@ assert(code.match(/\.data/g));
|
||||
assert(code.match(/\.enter/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body")
|
||||
.selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text("New Title")
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fa7367417b2b2512bc5
|
||||
title: 使用 D3 中的动态数据
|
||||
challengeType: 6
|
||||
forumTopicId: 301498
|
||||
dashedName: work-with-dynamic-data-in-d3
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -79,5 +80,41 @@ assert($('h2').eq(7).text() == '14 USD');
|
||||
assert($('h2').eq(8).text() == '9 USD');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
// Add your code below this line
|
||||
|
||||
.text("New Title");
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<body>
|
||||
<script>
|
||||
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
|
||||
|
||||
d3.select("body").selectAll("h2")
|
||||
.data(dataset)
|
||||
.enter()
|
||||
.append("h2")
|
||||
.text((d) => `${d} USD`);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be4
|
||||
title: 访问来自 API 的 JSON 数据
|
||||
challengeType: 6
|
||||
forumTopicId: 301499
|
||||
dashedName: access-the-json-data-from-an-api
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -46,5 +47,120 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
console.log(json[2].codeNames[1]);
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fad367417b2b2512be2
|
||||
title: 通过单击事件更改文本
|
||||
challengeType: 6
|
||||
forumTopicId: 301500
|
||||
dashedName: change-text-with-click-events
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -31,5 +32,107 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
document.getElementsByClassName('message')[0].textContent = "Here is the message";
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be5
|
||||
title: 将 JSON 数据转换为 HTML
|
||||
challengeType: 6
|
||||
forumTopicId: 16807
|
||||
dashedName: convert-json-data-to-html
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -69,5 +70,130 @@ assert(code.match(/json\.forEach/g));
|
||||
assert(code.match(/<strong>.+<\/strong>/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
json.forEach(function(val) {
|
||||
var keys = Object.keys(val);
|
||||
html += "<div class = 'cat'>";
|
||||
keys.forEach(function(key) {
|
||||
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
|
||||
});
|
||||
html += "</div><br>";
|
||||
});
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7faf367417b2b2512be8
|
||||
title: 根据地理位置数据找到用户的 GPS 坐标
|
||||
challengeType: 6
|
||||
forumTopicId: 18188
|
||||
dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -59,5 +60,39 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(position) {
|
||||
document.getElementById('data').innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
|
||||
});
|
||||
}
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 5ccfad82bb2dc6c965a848e5
|
||||
title: 使用 JavaScript 的 fetch 方法获取 JSON
|
||||
challengeType: 6
|
||||
forumTopicId: 301501
|
||||
dashedName: get-json-with-the-javascript-fetch-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -69,5 +70,105 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick= () => {
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p id="message" class="box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick= () => {
|
||||
fetch('/json/cats.json')
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
document.getElementById('message').innerHTML=JSON.stringify(data);
|
||||
})
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p id="message" class="box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be3
|
||||
title: 使用 XMLHttpRequest 方法获取 JSON
|
||||
challengeType: 6
|
||||
forumTopicId: 301502
|
||||
dashedName: get-json-with-the-javascript-xmlhttprequest-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -85,5 +86,111 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open('GET', '/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = () => {
|
||||
const json = JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fad367417b2b2512be1
|
||||
title: 使用 onclick 属性处理点击事件
|
||||
challengeType: 6
|
||||
forumTopicId: 301503
|
||||
dashedName: handle-click-events-with-javascript-using-the-onclick-property
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -39,5 +40,101 @@ assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
|
||||
assert(typeof document.getElementById('getMessage').onclick === 'function');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
// Add your code below this line
|
||||
document.getElementById('getMessage').onclick = function(){ };
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7faf367417b2b2512be9
|
||||
title: 使用 XMLHttpRequest 方法发送数据
|
||||
challengeType: 6
|
||||
forumTopicId: 301504
|
||||
dashedName: post-data-with-the-javascript-xmlhttprequest-method
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -77,5 +78,129 @@ assert(
|
||||
assert(code.match(/\.send\(\s*?body\s*?\)/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message box">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('sendMessage').onclick = function(){
|
||||
|
||||
const userName = document.getElementById('name').value;
|
||||
const url = 'https://jsonplaceholder.typicode.com/posts';
|
||||
// Add your code below this line
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('POST', url, true);
|
||||
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
|
||||
xhr.onreadystatechange = function () {
|
||||
if (xhr.readyState === 4 && xhr.status === 201){
|
||||
const serverResponse = JSON.parse(xhr.response);
|
||||
document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
|
||||
}
|
||||
};
|
||||
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
|
||||
xhr.send(body);
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be7
|
||||
title: 预先过滤 JSON 以获得所需的数据
|
||||
challengeType: 6
|
||||
forumTopicId: 18257
|
||||
dashedName: pre-filter-json-to-get-the-data-you-need
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -31,5 +32,140 @@ json = json.filter(function(val) {
|
||||
assert(code.match(/json\.filter/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
let json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json', true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
let json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
// Add your code below this line
|
||||
json = json.filter(function(val) {
|
||||
return (val.id !== 1);
|
||||
});
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
@ -3,6 +3,7 @@ id: 587d7fae367417b2b2512be6
|
||||
title: 渲染数据源的图像
|
||||
challengeType: 6
|
||||
forumTopicId: 18265
|
||||
dashedName: render-images-from-data-sources
|
||||
---
|
||||
|
||||
# --description--
|
||||
@ -33,5 +34,128 @@ assert(code.match(/val\.imageLink/g));
|
||||
assert(code.match(/val\.altText/g));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function(){
|
||||
document.getElementById('getMessage').onclick = function(){
|
||||
const req = new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload = function(){
|
||||
const json = JSON.parse(req.responseText);
|
||||
let html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML = html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user