这个任务要求你使用前面所学的知识完成一个故事生成器。玩的愉快！
| Prerequisites: | Before attempting this assessment you should have already worked through all the articles in this module. |
|---|---|
| Objective: | To test comprehension of JavaScript fundamentals, such as variables, numbers, operators, strings, and arrays. |
最开始进行的操作
To get this assessment started, you should:
- 从 grab the HTML file 下载示范文件，并且保存在电脑上任意位置的一个新的文件夹中。这个HTML文档中也包含了一些CSS。
- 在新的浏览器标签页打开 page containing the raw text 。你待会儿就会用到了。
Note: Alternatively, you could use a site like JSBin or Thimble to do your assessment. You could paste the HTML, CSS and JavaScript into one of these online editors. If the online editor you are using doesn't have a separate JavaScript panel, feel free to put it inline in a <script> element inside the HTML page.
项目概括
我们给你提供了一些HTML/CSS/JS代码；你需要再添加一些JS代码（也就是如下的操作）来完成这个项目：
- 当用户按下“Generate random story”按钮时，生成一则笑话。
- 当且仅当在按钮被按下前用户在“Enter custom name”中输入了其名字的情况下，将默认的名字变成用户的名字。
- 当用户在按下生成按钮之前点击了UK radio按钮时，将默认的US重量和温度单位换成英式的。
- 如果用户再次按下生成按钮，则随即生成另一则笑话（如果用户愿意的话，他可以一直按生成按钮）
下面的截图是项目完成之后的输出界面：
为了给你一点灵感，have a look at the finished example (可别偷看源代码!)
步骤
下面介绍你要做的事情。
基本步骤：
- 在index.html的目录下新建一个文件，命名为main.js。
- 通过添加<script>标签，将外部的 JavaScript 文件应用到你的 HTML 中。
初始化变量和函数:
- 从原始的文件中，复制“1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS”标题下的所有代码，并粘贴到你本地的 main.js 文件中。然后你就有了三个变量，分别代表着，"Enter custom name" 文本框(
customName), "Generate random story" 按钮 (randomize), 和 HTML body 底部的<p>元素（生成的故事将会复制到这个 story 变量中）。另外，你还会得到一个叫做randomValueFromArray()函数，这个函数需要一个数组作为参数，然后随机返回数组中的一个元素。 - 现在看看原始文件中的第二部分 — "2. RAW TEXT STRINGS"。这一部分包含了一些字符串，这些字符串会输入进我们的项目。你需要将这些包含进 main.js 文件中的变量中去。
- 在 storyText 变量中保存第一个长长的字符串。
- 在 insertX 数组中保存第一组字符串（包含三个字符串）。
- 在 insertY 数组中保存第二组字符串（包含三个字符串）。
- 在 insertZ 数组中保存第三组字符串（包含三个字符串）。
加上事件处理器并且将函数补充完整：
- 现在回到原始文件。
- 复制"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION"标题下面的代码并粘贴到你本地的 main.js 文件中。这样就：
- 给 randomize 变量增加了一个“点击”时间监听器。也就是说，当按钮白点击时，result( ) 函数就会运行。
- 给你的代码加上了一个部分完成的 result( ) 函数定义。剩下的任务就是完成函数里面的代码，让它正常工作。
将result()函数补充完整：
- 声明一个叫做 newStory 的变量，并将它的值设置为storyText。这样，每次按下按钮之后，函数运行的时候就会生成一个新的随即笑话。如果我们直接改变 storyText 的话，我们永远只能够生成一个新的故事。
- 声明三个变量：
xItem,yItem, 和zItem，并且另他们的值等于randomValueFromArray(insertX)，randomValueFromArray(insertY)和randomValueFromArray(insertZ)。 - 接下来我们需要将 storyText 中的placeholder —
:insertx:,:inserty:, and:insertz:— 置换成xItem,yItem, andzItem 中保存的字符串。你可以使用字符串中专门的函数方法— 每一次都使 newStory 变成执行了该方法后的值。这样每一次按下按钮后，这些placeholder就会变成随机产生的字符串。在给你一点提示，这种方法每次只会置换它找到的第一个 placeholder，因此你需要执行三次这个方法。 - 在第一个 if 代码块中增加另一个字符串置换操作，将 ‘Bob’ 变用户输入的用户名。
- 在第二个 if 代码块中，我们要检查 UK 是否被勾选。如果被勾选，我们需要将重量和温度从美式单位 weight and temperature 的值转化为英式单位 stones and centigrade 下的值。
- 查找 pounds 和 stone，farenheit 和 centigrade 的转换等式。
- 在定义了变量 weight 的那一行代码中， 将 pounds 下的94通过一个计算表达式转化为 stone 下的值。并且将单位
' stone'添加到通过 Math.round() 函数获得整数后面。 - 在定义了变量 temperature 的那一行代码中， 将 farenheit 下的94通过一个计算表达式转化为 centigrade 下的值。并且将单位
' centigrade'添加到通过 Math.round() 函数获得整数后面。 - 就在上面的变量定义下，增加两个字符串置换操作，将 '94 farenheit' 置换成为变量
temperature 的值，将'300 pounds' 置换成为变量 weight 的值。
- 最后，在函数的倒数第二行，将变量 newStory 的值赋值给变量 story.textContent。
提示
- 你除了将 JavaScript 添加进你的HTML 中，你完全不需要编辑 HTML 。
- 如果你不确定 JavaScript 是否添加到了你的 HTML 中，试试暂时删除 main.js 文件中的所有东西，而加上一点点非常简单的但是会有非常明显的影响的 JavaScript 语句，然后保存文件并刷新浏览器。下面的例子会让页面背景转化为红色，如果你的 JavaScript 被加载到了 HTML 中去的话。
-
document.querySelector('html').style.backgroundColor = 'red'; - Math.round() 是 JavaScript 中的内建函数，用来生成最接近一个计算式的整数。
任务
如果这个任务是你的课程的一部分，你可以让你的老师或者指导者评分。如果你是在自学，你也可以在 Learning Area Discourse thread 或者 #mdn IRC channel on Mozilla IRC 中获得帮助。Try the exercise first — there is nothing to be gained by cheating!你要自己完成这个任务，作弊不会给你带来收获。