2 files changed, 171 insertions, 78 deletions
diff --git a/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.html b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.html
deleted file mode 100644
index af9b56b9ae..0000000000
--- a/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.html
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: 'Test your skills: variables'
-slug: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
-translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
----
-<div>{{learnsidebar}}</div>
-
-<p>这个能力测试用于评估你自己是否理解了 <a href="/zh-CN/docs/Learn/JavaScript/First_steps/Variables">如何存储你需要的信息 — 变量</a> 这篇文章.</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: You can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a> to work on the tasks.<br>
- <br>
- 如果你遇到问题需要我们帮助 — 请前往在这一页的底部的 {{anch("Assessment or further help")}} 部分.</p>
-</div>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: In the examples below, if there is an error in your code it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's JavaScript console, in the case of the downloadable version).</p>
-</div>
-
-<h2 id="Variables_1">Variables 1</h2>
-
-<p>In this task we want you to:</p>
-
-<ul>
- <li>Declare a variable called <code>myName</code>.</li>
- <li>Initialize <code>myName</code> with a suitable value, on a separate line (you can use your actual name, or something else).</li>
- <li>Declare a variable called <code>myAge</code> and initialize it with a value, on the same line.</li>
-</ul>
-
-<p>Try updating the live code below to recreate the finished example:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables1.html", '100%', 400)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables1-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
-</div>
-
-<h2 id="Variables_2">Variables 2</h2>
-
-<p>In this task you need to add a new line to correct the value stored in the existing <code>myName</code> variable to your own name.</p>
-
-<p>Try updating the live code below to recreate the finished example:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables2.html", '100%', 400)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables2-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
-</div>
-
-<h2 id="Variables_3">Variables 3</h2>
-
-<p>The final task for now — in this case you are provided with some existing code, which has two errors present in it. The results panel should be outputting the name <code>Chris</code>, and a statement about how old Chris will be in 20 years' time. How can you fix the problem and correct the output?</p>
-
-<p>Try updating the live code below to recreate the finished example:</p>
-
-<p>{{EmbedGHLiveSample("learning-area/javascript/introduction-to-js-1/tasks/variables/variables3.html", '100%', 400)}}</p>
-
-<div class="blockIndicator note">
-<p><a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables3-download.html">Download the starting point for this task</a> to work in your own editor or in an online editor.</p>
-</div>
-
-<h2 id="Assessment_or_further_help">Assessment or further help</h2>
-
-<p>You can practice these examples in the Interactive Editors above.</p>
-
-<p>If you would like your work assessed, or are stuck and want to ask for help:</p>
-
-<ol>
- <li>Put your work into an online shareable editor such as <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, or <a href="https://glitch.com/">Glitch</a>. You can write the code yourself, or use the starting point files linked to in the above sections.</li>
- <li>Write a post asking for assessment and/or help at the <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a>. Your post should include:
-  <ul>
-   <li>A descriptive title such as "Assessment wanted for Variables 1 skill test".</li>
-   <li>Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.</li>
-   <li>A link to the example you want assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.</li>
-   <li>A link to the actual task or assessment page, so we can find the question you want help with.</li>
-  </ul>
- </li>
-</ol>
diff --git a/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
new file mode 100644
index 0000000000..f18364793a
--- /dev/null
+++ b/files/zh-cn/learn/javascript/first_steps/test_your_skills_colon__variables/index.md
@@ -0,0 +1,171 @@
+---
+title: '技能测试：变量'
+slug: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
+translation_of: 'Learn/JavaScript/First_steps/Test_your_skills:_variables'
+tags:
+  - 初学者
+  - JavaScript
+  - 学习
+  - 技能测试
+  - 变量
+---
+{{learnsidebar}}
+
+本测试旨在评估读者对 [存储所需信息 - 变量](/zh-CN/docs/Learn/JavaScript/First_steps/Variables) 一文的理解程度。
+
+> **备注：** 可在下文的互动编辑器中尝试完成评估，也可借助 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) 等在线编程实用工具完成任务。
+>
+> 可访问本页最后一节来 {{anch("了解更多")}}。
+
+> **备注：** 以下示例中，如果代码存在错误，将在互动编译器的输出框中显示提示信息来帮助你完成，（如果使用下载版本，则在浏览器的 JavaScript 控制台显示）
+
+## 变量 1
+
+本任务中，我们期望你做到：
+
+- 声明 `myName` 变量。
+- 在单独的一行中，用合适的值来初始化 `myName` 变量。（可用你自己的名字，或其他）
+- 在一行内，声明 `myAge` 变量并初始化。
+
+尝试更新下方互动编辑器中的代码来实现预期效果：
+
+```html hidden
+  <head>
+    <meta charset="utf-8" />
+    <title>变量：任务1</title>
+    <link rel="stylesheet" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/styles.css" />
+
+  </head>
+
+  <body>
+    <section class="preview"></section>
+    <textarea class="playable playable-js" style="height: 280px;">
+  // 在下方编写代码
+
+
+
+  // 不要编写此行以下的代码！
+
+  section.innerHTML = ' ';
+  let para1 = document.createElement('p');
+  para1.textContent = myName;
+  let para2 = document.createElement('p');
+  para2.textContent = myAge;
+  section.appendChild(para1);
+  section.appendChild(para2);
+    </textarea>
+
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script class="editable"></script>
+  <script src="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/playable.js"></script>
+```
+
+{{ EmbedLiveSample('变量 1', '100%', 420, '', '', 'hide-codepen-jsfiddle') }}
+
+> **标注：** [下载 任务1 的起始版本](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables1-download.html)，然后使用你自选的编辑器完成任务。
+
+
+## 变量 2
+
+本任务中我们希望你将代码中 `myName` 当前保存的值修改为你自己的名字。
+
+尝试更新下方互动编辑器中的代码来实现预期效果：
+
+```html hidden
+    <head>
+    <meta charset="utf-8" />
+    <title>变量：任务2</title>
+    <link rel="stylesheet" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/styles.css" />
+  </head>
+
+  <body>
+    <section class="preview"></section>
+
+    <textarea class="playable playable-js" style="height: 220px;">
+
+// 在下方编写代码
+
+let myName = '韩梅梅';
+
+// 不要编写此行以下的代码！
+
+section.innerHTML = ' ';
+let para = document.createElement('p');
+para.textContent = myName;
+section.appendChild(para);
+    </textarea>
+
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script class="editable"></script>
+  <script src="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/playable.js"></script>
+```
+
+{{ EmbedLiveSample('变量 2', '100%', 360, '', '', 'hide-codepen-jsfiddle') }}
+
+> **标注：** [下载 任务2 的起始版本](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables2-download.html)，然后使用你自选的编辑器完成任务。
+
+
+## 变量 3
+
+现在是最后一个任务——现有代码中存在 2 处错误，请找出并修正，使输出窗口得到正确结果，即：“我是某某，20年后我？岁。”
+
+尝试更新下方互动编辑器中的代码来实现预期效果：
+
+```html hidden
+    <head>
+    <meta charset="utf-8" />
+    <title>变量：任务3</title>
+    <link rel="stylesheet" href="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/styles.css" />
+  </head>
+
+  <body>
+    <section class="preview"></section>
+
+    <textarea class="playable playable-js" style="height: 300px;">
+// 修改下面的代码
+
+const myName = 'Default';
+myName = '李雷';
+
+let myAge = '18';
+
+// 不要编写此行以下的代码！
+
+section.innerHTML = ' ';
+let para1 = document.createElement('p');
+let para2 = document.createElement('p');
+para1.textContent = `我是 ${myName}`;
+para2.textContent = `20 年后我 ${myAge + 20} 岁`;
+section.appendChild(para1);
+section.appendChild(para2);
+    </textarea>
+
+    <div class="playable-buttons">
+      <input id="reset" type="button" value="Reset" />
+    </div>
+  </body>
+  <script class="editable"></script>
+  <script src="https://roy-tian.github.io/learning-area/javascript/introduction-to-js-1/tasks/playable.js"></script>
+```
+{{ EmbedLiveSample('变量 3', '100%', 420, '', '', 'hide-codepen-jsfiddle') }}
+
+> **标注：** [下载 任务3 的起始版本](https://github.com/roy-tian/learning-area/blob/master/javascript/introduction-to-js-1/tasks/variables/variables3-download.html)，然后使用你自选的编辑器完成任务。
+
+## 了解更多
+
+可以在互动编辑器中完成上面的练习。
+
+如果你期望对练习结果进行评估，或者遇到困难需要帮助，可以：
+
+1. 可借助 [CodePen](https://codepen.io/)、[jsFiddle](https://jsfiddle.net/)、[Glitch](https://glitch.com/) 等在线编程实用工具完成任务。在那里你可以自行编写代码，也可以使用上文中所给的初始代码。
+2. 在 [MDN论坛学习区](https://discourse.mozilla.org/c/mdn/learn/) 寻求他人的评估和帮助。你发表的文章应包括：
+    - 一个描述性的标题，比如《请为“变量 1”水平测试进行评估》
+    - 讲清你已经做出的努力，以及需要我们做什么，比如你遇到了困难并需要帮助，或者期望得到评估。
+    - 一个链接指向你需要得到评估或帮助的实例，步骤1中三个在线编程工具之一均可。我们对希望得到帮助但由不提供代码的求助也很无奈。
+    - 一个链接指向 MDN 测试的原始页面，在那里我们可以找到你需要获得帮助的原始信息。