Silly story generator

初始點

要開始評估，您應該:

• Go and grab the HTML file for the example and save a local copy of it as index.html in a new directory somewhere on your computer. This also has the CSS to style the example contained within it.
• Go to the page containing the raw text and keep this open in a separate browser tab somewhere. You'll need it later.

工程概要

您已經(jīng)獲得了一些原始的HTML / CSS和一些文本字符串和JavaScript函數(shù); 你需要編寫必要的JavaScript將其變成一個工作程序，它執(zhí)行以下操作:

• Generates a silly story when the "Generate random story" button is pressed.
• Replaces the default name "Bob" in the story with a custom name, only if a custom name is entered into the "Enter custom name" text field before the generate button is pressed.
• Converts the default US weight and temperature quantities and units in the story into UK equivalents if the UK radio button is checked before the generate button is pressed.
• Will generate another random silly story if you press the button again (and again...)

以下屏幕截圖顯示了已完成程序應輸出的示例:

0px auto;">

為了給您更多想法，有一個 看看完成的例子(沒有偷看源代碼！)

步驟完成

以下部分描述了您需要做什么。

基本設置:

1. Create a new file called main.js, in the same directory as your index.html file.
2. Apply the external JavaScript file to your HTML by inserting a <script> element into your HTML referencing main.js. Put it just before the closing </body> tag.

初始變量和函數(shù):

1. In the raw text file, copy all of the code underneath the heading "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" and paste it into the top of the main.js file. This gives you three variables that store references to the "Enter custom name" text field (customName), the?"Generate random story" button (randomize), and the <p> element at the bottom of the HTML body that the story will be copied into (story), respectively. In addition you've got a function called?randomValueFromArray() that takes an array, and returns one of the items stored inside the array at random.
2. Now look at the second section of the raw text file — "2. RAW TEXT STRINGS". This contains text strings that will act as input into our program. We'd like you to contain these inside variables inside main.js:
   1. Store the first, big long, string of text inside a variable called storyText.
   2. Store the first set of three strings inside an array called insertX.
   3. Store the second set of three strings inside an array called insertY.
   4. Store the third set of three strings inside an array called insertZ.

放置事件處理程序和不完全函數(shù):

1. Now return to the raw text file.
2. Copy the code found underneath the heading "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" and paste it into the bottom of your main.js file. This:
   • Adds a click event listener to the randomize variable so that when the button it represents is clicked, the result() function is run.
   • Adds a partially-completed result() function definiton to your code. For the remainder of the assessment, you'll be filling in lines inside this function to complete it and make it work properly.

完成 result()函數(shù):

1. Create a new variable called newStory, and set it's value to equal storyText. This is needed so we can create a new random story each time the button is pressed and the function is run. If we made changes directly to storyText, we'd only be able to generate a new story once.
2. Create three new variables called xItem, yItem, and zItem, and make them equal to the result of calling randomValueFromArray() on your three arrays (the result in each case will be a random item out of each array it is called on). For example you can call the function and get it to return one random string out of insertX by writing randomValueFromArray(insertX).
3. Next we want to replace the three placeholders in the newStory string — :insertx:, :inserty:, and :insertz: — with the strings stored in xItem, yItem, and zItem. There is a particular string method that will help you here — in each case, make the call to the method equal to newStory, so each time it is called, newStory is made equal to itself, but with substitutions made. So each time the button is pressed, these placeholders are each replaced with a random silly string. As a further hint, the method in question only replaces the first instance of the substring it finds, so you might need to make one of the calls twice.
4. Inside the first if block, add another string replacement method call to replace the name 'Bob' found in the newStory string with the name variable. In this block we are saying "If a value has been entered into the customName text input, replace Bob in the story with that custom name."
5. Inside the second if block, we are checking to see if the uk radio button has been selected. If so, we want to convert the weight and temperature values in the story from pounds and farenheit into stones and centigrade. What you need to do is as follows:
   1. Look up the formulae for converting pounds to stone, and farenheit to centigrade.
   2. Inside the line that defines the weight variable, replace 300 with a calculation that converts 300 pounds into stones. Concatenate ' stone' onto the end of the result of the overall Math.round() call.
   3. Inside the line that defines the temperature variable, replace 94 with a calculation that converts 94 farenheit into centigrade. Concatenate ' centigrade' onto the end of the result of the overall Math.round() call.
   4. Just under the two variable definitons, add two more string replacement lines that replace?'94 farenheit' with the contents of the temperature variable, and '300 pounds' with the contents of the weight variable.
6. Finally, in the second-to-last line of the function, make the textContent property of the story variable (which references the paragraph) equal to newStory.

提示和提示

• You don't need to edit the HTML in any way, except to apply the JavaScript to your HTML.
• If you are unsure whether the JavaScript is applied to your HTML properly, try removing everything else from the JavaScript file temporarily, adding in a simple bit of JavaScript that you know will create an obvious effect, then saving and refreshing. The following for example turns the background of the <html> element red — so the entire browser window should go red if the JavaScript is applied properly:

  document.querySelector('html').style.backgroundColor = 'red';

• Math.round() is a built-in JavaScript method that simply rounds the result of a calculation to the nearest whole number.

評定

如果您作為有組織課程的一部分參加此評估，您應該能夠將您的工作交給您的老師/導師進行標記。 如果您是自學習的，那么您可以輕松地通過 dev-mdc 郵件列表，或者在 #mdn IRC頻道中。 org / IRC"class ="external"> Mozilla IRC 。 嘗試練習第一 - 沒有什么可以通過作弊獲得！