feat: audit for data visualization projects (#40612)

* feat: audit for data visualization projects

* feat: translate data visualization curriculum

curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md

@@ -7,13 +7,13 @@ forumTopicId: 16807
 
 # --description--
 
-现在你可以从 JSON API 获取数据了，你可以在 HTML 中显示它。
+现在你从 JSON API 获取了数据，可以在 HTML 中显示它们了。
 
-既然 cat photo 对象保存在数组里，你可以使用`forEach`方法来遍历它。当你拿到每个对象时，你就可以修改 HTML 元素了。
+既然 cat photo 对象都保存在数组里，你可以使用 `forEach` 方法来遍历它们。当你拿到每个对象时，你就可以修改 HTML 元素了。
 
-首先，用`let html = "";`声明一个变量。
+首先，通过 `let html = "";` 声明一个 html 变量。
 
-接着，遍历 JSON，将 HTML 添加到用`strong`标记键名的变量，后面跟着值。当循环结束后渲染它。
+接着，遍历 JSON，将用 `strong` 标签包裹的键名和后面跟着值的 html 元素添加给变量。当循环结束后渲染它。
 
 这是执行此操作的代码：
 
@@ -29,11 +29,11 @@ json.forEach(function(val) {
 });
 ```
 
-**注意：** 在本挑战需要给页面添加一个新的 HTML 元素，不能使用 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
+**注意：** 在本挑战中，你需要给页面添加新的 HTML 元素，不能依赖 `textContent` 方法，这个方法容易遭受跨站脚本攻击，可以用 `innerHTML` 来完成挑战。
 
 # --instructions--
 
-添加一个`forEach`循环 JSON 数据的方法，并创建 HTML 元素以显示它。
+添加一个 `forEach` 循环来遍历 JSON 数据，并创建 HTML 元素以显示它。
 
 以下是一个 JSON 示例：
 
@@ -51,19 +51,19 @@ json.forEach(function(val) {
 
 # --hints--
 
-你的代码应该将数据保存在`html`变量中。
+你的代码应该将数据保存在 `html` 变量中。
 
 ```js
 assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
 ```
 
-你的代码应该使用`forEach`方法来遍历 API 中的 JSON 数据。
+你的代码应该使用 `forEach` 方法来遍历 API 中的 JSON 数据。
 
 ```js
 assert(code.match(/json\.forEach/g));
 ```
 
-你的代码应该将键名包装在`strong`标签中。
+你的代码应该用 `strong` 标签包裹键名。
 
 ```js
 assert(code.match(/<strong>.+<\/strong>/g));

curriculum/challenges/chinese/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md

@@ -7,7 +7,7 @@ forumTopicId: 301504
 
 # --description--
 
-在前面的示例中，你在外部资源获取数据，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
+在前面的示例中，你通过外部资源获取数据。此外，你也可以将数据发送到外部资源，只要该资源支持 AJAX 请求并且你知道 URL。
 
 JavaScript 的`XMLHttpRequest`方法也用于将数据发布到服务器，这是个例子：
 
@@ -25,27 +25,27 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
 xhr.send(body);
 ```
 
-你在之前见过其中几种方法。这里`open`方法将请求初始化为对外部资源的给定 URL 的 "POST"，并使用`true`布尔值使其异步。 `setRequestHeader`方法设置HTTP请求标头的值，该标头包含有关发送人和请求的信息。它必须在`open`方法之后调用，但在`send`方法之前调用。这两个参数是标题的名称和要设置为该标题正文的值。 接下来，`onreadystatechange`事件侦听器处理请求状态的更改。`readyState`为 4 表示操作完成，`status`200表示操作成功。文档的HTML可以更新。 最后，该`send`方法发送带有`userName`值的请求，该值由用户在`input`字段中给出。
+你之前已经见过这些方法。`open` 方法根据给定的外部资源的 URL 初始化一个 POST 请求，参数 `true` 表示请求是异步执行的。 `setRequestHeader` 方法设置了 HTTP 请求标头的值，该标头包含有关发送人和请求的信息。它必须在 `open` 方法之后、`send` 方法之前调用。它的两个参数表示标头的内容类型和标头数据将被设置成什么值。 接下来，`onreadystatechange` 事件监听器监听请求状态的更改。`readyState` 为 4 表示操作完成，`status` 为 201 表示请求成功，此时文档的 HTML 可以更新了。 最后，`send` 方法发送带有 `body` 值的请求，其中 `userName` 的值由用户在 `input` 字段中输入。
 
 # --instructions--
 
-更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。在这种情况下，你的名字附加 " loves cats"。
+更新代码以创建并发送 "POST" 请求。然后在输入框中输入你的姓名，并点击 "Send Message"。你的 AJAX 函数会用服务器返回的数据替换 "Reply from Server will be here"。修改返回的请求结果，在你的名字前加上 " loves cats"。
 
 # --hints--
 
-你的代码应该创建一个新的`XMLHttpRequest`。
+你的代码应该创建一个新的 `XMLHttpRequest`。
 
 ```js
 assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
 ```
 
-你的代码应该使用该`open`方法初始化到服务器的 'POST' 请求。
+你的代码应该使用 `open` 方法初始化一个发送给服务器的 'POST' 请求。
 
 ```js
 assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
 ```
 
-你的代码应该使用该`setRequestHeader`方法。
+你的代码应该使用 `setRequestHeader` 方法。
 
 ```js
 assert(
@@ -55,13 +55,13 @@ assert(
 );
 ```
 
-你的代码应该有一个`onreadystatechange`设置为函数的事件处理程序。
+你的代码应该有一个 `onreadystatechange` 的事件监听器。
 
 ```js
 assert(code.match(/\.onreadystatechange\s*?=/g));
 ```
 
-你的代码应该使用类获取元素`message`并将其内部HTML更改为`responseText`。
+你的代码应该获取 class 为 `message` 的元素，并将它的 `textContent` 更改为 "`userName` loves cats"。
 
 ```js
 assert(
@@ -71,7 +71,7 @@ assert(
 );
 ```
 
-你的代码应该使用该`send`方法。
+你的代码应该使用 `send` 方法。
 
 ```js
 assert(code.match(/\.send\(\s*?body\s*?\)/g));