Convert Silly story generator to md

1 files changed, 128 insertions, 165 deletions

diff --git a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
index 1c32988254..8583a319f6 100644
--- a/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
+++ b/files/ko/learn/javascript/first_steps/silly_story_generator/index.md
@@ -3,188 +3,151 @@ title: Silly story generator
 slug: Learn/JavaScript/First_steps/Silly_story_generator
 translation_of: Learn/JavaScript/First_steps/Silly_story_generator
 ---
-<div>{{LearnSidebar}}</div>
+{{LearnSidebar}}{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
 
-<div>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</div>
-
-<p class="summary">이 모듈에서 배운 지식들을 바탕으로 랜덤하게 꾸며진 이야기(silly stories)가 만들어지는 재미있는 앱을 만들어 볼거에요. 즐겨봅시다!!</p>
+이 모듈에서 배운 지식들을 바탕으로 랜덤하게 꾸며진 이야기(silly stories)가 만들어지는 재미있는 앱을 만들어 볼거에요. 즐겨봅시다!!
 
 <table class="learn-box standard-table">
- <tbody>
-  <tr>
-   <th scope="row">선행요소:</th>
-   <td>이 평가에 시도하기 전에 이 모듈에서 배운 항목을 모두 수행해봐야 합니다.</td>
-  </tr>
-  <tr>
-   <th scope="row">목적:</th>
-   <td>변수, 숫자, 연산자, 문자열 및 배열 같은 자바스크립트의 기본항목들에 대한 전반적인 이해를 테스트합니다.</td>
-  </tr>
- </tbody>
+  <tbody>
+    <tr>
+      <th scope="row">선행요소:</th>
+      <td>
+        이 평가에 시도하기 전에 이 모듈에서 배운 항목을 모두 수행해봐야 합니다.
+      </td>
+    </tr>
+    <tr>
+      <th scope="row">목적:</th>
+      <td>
+        변수, 숫자, 연산자, 문자열 및 배열 같은 자바스크립트의 기본항목들에 대한
+        전반적인 이해를 테스트합니다.
+      </td>
+    </tr>
+  </tbody>
 </table>
 
-<h2 id="시작하기">시작하기</h2>
+## 시작하기
 
-<p>이 평가하기(assements)를 시작하기 전에, 아래와 같은 것을 해야 합니다:</p>
+이 평가하기(assements)를 시작하기 전에, 아래와 같은 것을 해야 합니다:
 
-<ul>
- <li>HTML 예제 파일이 있는 사이트(<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html">grab the HTML file</a>)로 이동하여 파일을 복사하여 자기 컴퓨터에 새 디렉토리를 만들고 파일이름 <code>index.html</code> 로 저장합니다. 이 안에는 예제를 위한 CSS가 포함되어 있습니다.</li>
- <li>또 다른 가공 전의 텍스트가 있는 사이트 (<a href="https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt">page containing the raw text</a>) 로 가서 별도의 브라우저 탭으로 열어 놓으세요. 이것은 나중에 필요합니다.</li>
-</ul>
+- HTML 예제 파일이 있는 사이트([grab the HTML file](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/index.html))로 이동하여 파일을 복사하여 자기 컴퓨터에 새 디렉토리를 만들고 파일이름 `index.html` 로 저장합니다. 이 안에는 예제를 위한 CSS가 포함되어 있습니다.
+- 또 다른 가공 전의 텍스트가 있는 사이트 ([page containing the raw text](https://github.com/mdn/learning-area/blob/master/javascript/introduction-to-js-1/assessment-start/raw-text.txt)) 로 가서 별도의 브라우저 탭으로 열어 놓으세요. 이것은 나중에 필요합니다.
 
-<p>위 방법 대신에, 여러분은 테스트에 <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://glitch.com/">Glitch</a> 같은 사이트를 이용할 수 있습니다. 이 온라인 에디터들 내부에 HTML, CSS 그리고 JavaScript를 붙여넣을 수 있습니다. 만약 당신이 사용하는 온라인 에디터가 Javascript 패널(또는 탭)을 갖고 있지 않다면, 자유롭게 HTML 페이지 내부에 <code>&lt;script&gt;</code> 엘리멘트를 넣을 수 있습니다.</p>
-
-<div class="note">
-<p><strong>Note</strong>: 만약 평가가 막힌다면, 우리에게 도움을 요청하세요— 이 페이지 밑에 {{anch("Assessment or further help")}} 섹션을 보세요.</p>
-</div>
-
-<h2 id="프로젝트에_대한_간략한_설명">프로젝트에 대한 간략한 설명</h2>
-
-<p>이제 프로젝트 시작을 위해 가공하지 않은 HTML/CSS 그리고 몇몇 텍스트를  만들고 확인했습니다. 이제 아래와 같은 기능을 하는 프로그램을 만들기 위해 JavaScript를 코딩해야 합니다.</p>
-
-<ul>
- <li>"랜덤한 이야기 만들기('Generate random story') 버튼를 누를 때 마다 꾸며진 이야기(silly stories)를 만들어야 합니다.</li>
- <li>"Enter custome name" 필드에 값이 입력되어있지 않을 경우 기본 이름을 Bob으로 지정합니다. "랜덤한 이야기 만들기('Generate random story')" 버튼을 클릭 하면 아래 사진에서 "Chris saw the ~.." 로 시작하는 문장이 "Bob saw the ~.."로 표시되게 합니다.</li>
- <li>"랜덤한 이야기 만들기('Generate random story')" 을 클릭하면 프로그램이 "US", "UK" 라디오 체크버튼을 확인하여 각 국가에 맞는 온도, 수량, 무게 등 단위를 설정하세요. 아래 사진의 예를 들면 "~ weights 300 pounds, and ~" 부분이 해당됩니다.</li>
- <li>"랜덤한 이야기 만들기('Generate random story')" 을 누르면 꾸며진 이야기('silly stories')가 랜덤하게 계속 만들어지게 하세요.</li>
-</ul>
-
-<p>이 스크린샷은 프로그램 출력의 예시 입니다:</p>
-
-<p><img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>
-
-<p>더 많은 아이디어를 얻으려면, 완성된 예(<a href="http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/">have a look at the finished example</a> )를 참고하세요(소스코드는 엿보기 없기!)</p>
-
-<h2 id="완료하기">완료하기</h2>
-
-<p>이번 섹션에선 프로젝트를 어떻게 진행해야 하는지 자세하게 설명합니다.</p>
-
-<p>기본 설정:</p>
-
-<ol>
- <li><code>index.html</code> <font face="Open Sans">파</font>일과 같은 디렉토리에 <code>main.js</code> 라는 이름의 파일을 새로 만듭니다.</li>
- <li>HTML 파일(<code>index.html</code>)에 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/script">&lt;script&gt;</a> 엘리먼트를 삽입하여 <code>main.js</code> 를 참조하도록 외부 자바스크립트 파일(<code>main.js</code>)을 적용합니다. <code>&lt;/body&gt;</code> 태그 바로 앞에 배치하세요.</li>
-</ol>
-
-<p>초기 변수와 함수:</p>
-
-<ol>
- <li>
-  <p>가공 전의 텍스트 파일에서, "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" 바로 밑의 코드를 모두 복사해서 <code>main.js</code> 파일의 맨 위에 붙여넣습니다. 이 내용은 세 개의 변수 제공하는데, <code>customName</code> 변수는 "Enter custom name" 텍스트 필드 값을 저장하고, <code>randomize</code> 변수에는 "Generate random story" 버튼 오브젝트를 저장하고, HTML 바디에 끝에 있는 클래스가 <code>story</code>인 <a href="https://developer.mozilla.org/ko/docs/Web/HTML/Element/p">&lt;p&gt;</a> 엘리먼트는 story 변수에 저장하며 해당 엘리먼트에는 랜덤한 이야기가 복사됩니다. 또한, randomValueFromArray() 함수는 배열을 가져와서 배열이 가진 항목 중 하나를 랜덤하게 반환합니다.</p>
- </li>
- <li>
-  <p>가공전 텍스트 파일의 두번째 섹션 "2. RAW TEXT STRINGS"에는 프로그램에 자동으로 입력되어 랜덤 이야기 엘리먼트에 출력하는 문자열이 포함되어 있습니다.  <code>main.js</code> 에 아래 설명대로 변수를 만듭니다:</p>
-
-  <ol>
-   <li>먼저 <code>storyText</code>변수에 가장 긴 문자열("It was 94 fahrenheit outside, so ~~" 로 시작하는 문장)을 저장합니다.</li>
-   <li><code>insertX</code> 배열에 세 개의 문자열 집단의 첫번째(Willy the Goblin, Big Daddy, Father Christmas)를 저장합니다.</li>
-   <li><code>insertY</code> 배열에 세 개의 문자열 집단의 두번째(the soup kitchen, Disneyland, the White House)을 저장합니다.</li>
-   <li><code>insertZ</code> 배열에 세 개의 문자열 집단의 세번째(spontaneously combusted, melted into a puddle on the sidewalk, turned into a slug and crawled away)를 저장합니다.</li>
-  </ol>
- </li>
-</ol>
-
-<p>이벤트 핸들러와 완성되지 않은 함수 정리:</p>
-
-<ol>
- <li>가공전 텍스트 파일("raw text file")로 돌아가자.</li>
- <li>"3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" 밑의 코드를 복사하고, <code>main.js</code> 파일의 맨 밑에다 붙여 넣으세요:
-  <ul>
-   <li><code>randomize</code> 변수에 클릭 이벤트 리스너를 추가하세요. 그러면 버튼이 클릭되었을 때, <code>result()</code> 함수가 실행됩니다.</li>
-   <li>코드에 부분적으로 완료된 <code>result()</code> 함수를 추가하세요. 이 평가의 뒤 부분에서 함수가 완성되고 정상적으로 동작하도록 내용을 추가할 것입니다.</li>
-  </ul>
- </li>
-</ol>
-
-<p><code>result()</code> 함수 완성하기:  </p>
-
-<ol>
- <li><code>newStory</code>라 불리는 새 변수를 만들고, 이것의 값(value)를 <code>storyText</code> 와 똑같이 설정하세요. 이것은 버튼을 누르고 함수가 수행(run)될 때 마다 새 이야기('story')가 랜덤하게 만들어 질 수 있게 합니다. <code>storyText</code>를 직접 변경했다면, 새로운 이야기('story')를 한번만 만들 수 있습니다(함수를 통해서 하지 않으면 정적인 값만 유지한다는 의미).</li>
- <li>세 개의 새로운  변수  <code>xItem</code>, <code>yItem</code>, 와 <code>zItem</code>를 만들고 이 세 개의 변수는 <code>randomValueFromArray()</code> 를 반환 결과인 세개의 배열과 같도록 만듭니다(각 경우의 호출 결과는 각 배열에 임의의 아이템). 예를 들어 <code>randomValueFromArray(insertX) </code>함수를 호출하면 <code>insertX</code> 에서 문자열의 하나를 랜덤하게 가질 수 있다.</li>
- <li>그 다음으로  <code>newStory</code> 문자열에 있는 세 개의 placeholders— <code>:insertx:</code>, <code>:inserty:<font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, </span></font></code><code>:insertz:</code> —저장된 <code>xItem</code>, <code>yItem </code>와 <code>zItem</code> 문자열을 이용하여 로 변환하세요. 여기서 특정 문자열 함수가 도움될 것입니다. 이 함수는 각 경우에 <code>newStory</code>와 같게되며(대입), 호출 시 마다 <code>newStory</code> 의 원래 값과 동일하지만 대체 될 수 있습니다(랜덤으로 값이 변경되는 것을 표현하는 것으로 추정됨) 그러므로 버튼이 눌러질때마다, 이  placeholder는 꾸며진('silly') 문자열로 랜덤하게 교체되게 됩니다. 추가적인 힌트로, 이 문제의 함수는 하위 문자열에서 찾아진 첫번째 인스턴스만 변경되므로, 아마도 두번 이상 이 함수를 호출해야 할 수도 있습니다.</li>
- <li>첫번째 <code>if</code> 블록에서, <code>newStory</code> 의 'Bob'이라는 이름을 <code>name</code> 변수를 사용하여 변환하는 함수를 추가하세요. 이 블록에서 말하는 내용은 "만약 <code>customName</code> 텍스트 입력에 값이 들어가 있다면, 이야기속의 Bob을 사용자가 정의한 이름으로 바꾸세요" 라는 의미입니다.</li>
- <li>두번째  <code>if</code> 블록에서는 <code>uk</code> 라디오 버튼이 선택되었는지 확인합시다. <code>uk</code> 라디오 버튼이 눌려졌다면, 이야기('story') 상의 무게('weight')와 온도('temperature') 값 들인  파운드('pounds')와 화씨온도(Fahrenheit) 를 'stones'과 섭씨온도('centigrade')를 바꾸어야 합니다. 필요한 것은 아래와 같습니다:
-  <ol>
-   <li>파운드(pound)를  stone, 화씨온도(Fahrenheit) 를 섭씨온도(centigrade)로 변환하는 공식을 참조하라.</li>
-   <li> <code>weight</code> 변수를 정의하는 라인에서는, 300를 300 파운드를 stones 변환하라. 변환 결과값을 <code>Math.round()</code> 를 실행한 결과값 끝에 <code>' stone'</code> 을 결합한다(문자열 더하기 연산 또는 concat())</li>
-   <li> <code>temperature</code> 변수를 정의하는 라인에서는, 94를  화씨(Fahrenheit) 94도를 섭씨온도(centigrade)로 변환하라. 변환 결과값을 <code>Math.round()</code> 를 실행한 결과값 끝에 <code>' centigrade'</code>을 결합한다(문자열 더하기 연산 또는 concat())</li>
-   <li>두 변수 정의 바로 밑에, '94 화씨온도('farenheit')로  <code>temperature</code> 변수의 내용을 변환하는 것과,  '300 pounds'을 <code>weight</code> 변수의 내용을 바꾸는 두줄의 문자열 변환라인을 추가한다 .</li>
-  </ol>
- </li>
- <li>마지막으로, 함수의 끝 두 줄에 <code>story</code> 변수의 <code>textContent</code> 속성(property)을 <code>newStory</code>와 같게 만드세요.</li>
-</ol>
-
-<h2 id="힌트와_팁">힌트와 팁</h2>
-
-<ul>
- <li>JavaScript 내용 외에는 HTML을 수정할 필요가 없습니다.</li>
- <li>만약 JavaScript가 정상적으로 HTML에 적용되었는지 의심스럽다면, 일시적으로 JavaScript의 내용을 지우고, 단순하고 짧은 효과가 명확한 내용을 추가해서, 저장하고 새로고침을 해보세요. 아래 예제는 {{htmlelement("html")}} 의 배경을 빨강색으로 바꿉니다 — 정상적으로 JavaScript가 적용되었다면 브라우저 전체 윈도우가 빨강색으로 바뀌게 될겁니다:
-  <pre class="brush: js notranslate">document.querySelector('html').style.backgroundColor = 'red';</pre>
- </li>
- <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round">Math.round()</a> 는 가장 가까운 정수로 단순하게 반올림한 결과를 반환하는 JavaScript 내장함수 입니다. </li>
- <li>변환이 필요한 세 개의 문장이 문제 있습니다. 아마도 <code>replace()</code> 함수를 반복적으로 실행 하거나 정규 표현식을 사용할 수 있습니다. 예를 들어 <code>var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');</code> 를 실행하면 인스턴스의 'love' 는 'like' 로 모두 바뀌게 될겁니다. 기억하세요, 문자열은 변하지 않습니다!(문자열은 새 변경할 수 없으며, 새 문자열이 생성되고 그 생성된 결과를 인스턴스가 갖게됨을 표현한 것으로 추정)</li>
-</ul>
-
-<h2 id="평가_또는_추가_도움">평가 또는 추가 도움</h2>
-
-<p>만약 작업을 평가하길 원하거나 풀이가 막혀서 도움을 원하면:</p>
-
-<ol>
- <li>온라인 공유가 가능한 <a href="https://codepen.io/">CodePen</a>, <a href="https://jsfiddle.net/">jsFiddle</a>, 또는 <a href="https://glitch.com/">Glitch</a> 같은 에디터에 작업한 것을 올려 두세요.</li>
- <li>평가 또는 도움을 요청을 <a href="https://discourse.mozilla.org/c/mdn/learn">MDN Discourse forum Learning category</a> 에 포스트를 쓰세요. 당신의 글은 아래를 포함해야 합니다:
-  <ul>
-   <li>"Assessment wanted for Silly story generator"와 같은 서술적인 제목.</li>
-   <li>이미 시도해본 것에 대한 상세내용과 우리가 어떻게 하길 원하는 지.<br>
-    예. 만약 당신이 풀이가 막히고 도움이 필요하다거나, 평가를 원한다는 것을.</li>
-   <li>평가를 받고 싶거나 도움이 필요한 예제를 갖고 있는 공유가능한 온라인 에디터 링크. (위에 1단계에서 언급한 것). 이것은 좋은 습관입니다. 그들의 코드를 보지못한다면 도움을 주기는 굉장히 어렵습니다.</li>
-   <li>실제 작업 또는 평가 페이지 링크, 그래야 우리가 당신이 도움받길 원하는 것을 찾을 수 있어요.</li>
-  </ul>
- </li>
-</ol>
-
-<p>{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}</p>
-
-<h2 id="이_모듈에서">이 모듈에서</h2>
-
-<ul>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript">What is JavaScript?</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/A_first_splash">A first splash into JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Variables">Storing the information you need — Variables</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Math">Basic math in JavaScript — numbers and operators</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Strings">Handling text — strings in JavaScript</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods">Useful string methods</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Arrays">Arrays</a></li>
- <li><a href="/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator">Assessment: Silly story generator</a></li>
-</ul>
-
-<div id="dicLayer" style="">
-<div id="dicLayerContents">&lt;dicword style="user-select: text;"&gt;What is JavaScript?&lt;/dicword&gt;&lt;dicword style="user-select: text;"&gt;&lt;dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);"&gt;&lt;/dicimg&gt; <input>Eng&lt;dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy"&gt;&lt;/dicimg&gt;&lt;/dicword&gt;<br>
-<br>
-<br>
-<br>
-자바 스크립트 란?</div>
-
-<div id="dicLayerSub"></div>
-</div>
+위 방법 대신에, 여러분은 테스트에 [JSBin](http://jsbin.com/) 또는 [Glitch](https://glitch.com/) 같은 사이트를 이용할 수 있습니다. 이 온라인 에디터들 내부에 HTML, CSS 그리고 JavaScript를 붙여넣을 수 있습니다. 만약 당신이 사용하는 온라인 에디터가 Javascript 패널(또는 탭)을 갖고 있지 않다면, 자유롭게 HTML 페이지 내부에 `<script>` 엘리멘트를 넣을 수 있습니다.
 
+<div class="note"><p><strong>Note</strong>: 만약 평가가 막힌다면, 우리에게 도움을 요청하세요— 이 페이지 밑에 {{anch("Assessment or further help")}} 섹션을 보세요.</p></div>
 
-<div id="dicLayerLoader" style="top: 5596px; left: 281px;"></div>
+## 프로젝트에 대한 간략한 설명
+
+이제 프로젝트 시작을 위해 가공하지 않은 HTML/CSS 그리고 몇몇 텍스트를  만들고 확인했습니다. 이제 아래와 같은 기능을 하는 프로그램을 만들기 위해 JavaScript를 코딩해야 합니다.
+
+- "랜덤한 이야기 만들기('Generate random story') 버튼를 누를 때 마다 꾸며진 이야기(silly stories)를 만들어야 합니다.
+- "Enter custome name" 필드에 값이 입력되어있지 않을 경우 기본 이름을 Bob으로 지정합니다. "랜덤한 이야기 만들기('Generate random story')" 버튼을 클릭 하면 아래 사진에서 "Chris saw the \~.." 로 시작하는 문장이 "Bob saw the \~.."로 표시되게 합니다.
+- "랜덤한 이야기 만들기('Generate random story')" 을 클릭하면 프로그램이 "US", "UK" 라디오 체크버튼을 확인하여 각 국가에 맞는 온도, 수량, 무게 등 단위를 설정하세요. 아래 사진의 예를 들면 "\~ weights 300 pounds, and \~" 부분이 해당됩니다.
+- "랜덤한 이야기 만들기('Generate random story')" 을 누르면 꾸며진 이야기('silly stories')가 랜덤하게 계속 만들어지게 하세요.
+
+이 스크린샷은 프로그램 출력의 예시 입니다:
+
+<img alt="" src="https://mdn.mozillademos.org/files/13667/assessment-1.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;">
+
+더 많은 아이디어를 얻으려면, 완성된 예([have a look at the finished example](http://mdn.github.io/learning-area/javascript/introduction-to-js-1/assessment-finished/) )를 참고하세요(소스코드는 엿보기 없기!)
+
+## 완료하기
+
+이번 섹션에선 프로젝트를 어떻게 진행해야 하는지 자세하게 설명합니다.
+
+기본 설정:
+
+1.  `index.html`
+
+    <font face="Open Sans">파</font>
+
+    일과 같은 디렉토리에 `main.js` 라는 이름의 파일을 새로 만듭니다.
+
+2.  HTML 파일(`index.html`)에 [\<script>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/script) 엘리먼트를 삽입하여 `main.js` 를 참조하도록 외부 자바스크립트 파일(`main.js`)을 적용합니다. `</body>` 태그 바로 앞에 배치하세요.
+
+초기 변수와 함수:
+
+1.  가공 전의 텍스트 파일에서, "1. COMPLETE VARIABLE AND FUNCTION DEFINITIONS" 바로 밑의 코드를 모두 복사해서 `main.js` 파일의 맨 위에 붙여넣습니다. 이 내용은 세 개의 변수 제공하는데, `customName` 변수는 "Enter custom name" 텍스트 필드 값을 저장하고, `randomize` 변수에는 "Generate random story" 버튼 오브젝트를 저장하고, HTML 바디에 끝에 있는 클래스가 `story`인 [\<p>](https://developer.mozilla.org/ko/docs/Web/HTML/Element/p) 엘리먼트는 story 변수에 저장하며 해당 엘리먼트에는 랜덤한 이야기가 복사됩니다. 또한, randomValueFromArray() 함수는 배열을 가져와서 배열이 가진 항목 중 하나를 랜덤하게 반환합니다.
+2.  가공전 텍스트 파일의 두번째 섹션 "2. RAW TEXT STRINGS"에는 프로그램에 자동으로 입력되어 랜덤 이야기 엘리먼트에 출력하는 문자열이 포함되어 있습니다.  `main.js` 에 아래 설명대로 변수를 만듭니다:
+
+    1.  먼저 `storyText`변수에 가장 긴 문자열("It was 94 fahrenheit outside, so \~\~" 로 시작하는 문장)을 저장합니다.
+    2.  `insertX` 배열에 세 개의 문자열 집단의 첫번째(Willy the Goblin, Big Daddy, Father Christmas)를 저장합니다.
+    3.  `insertY` 배열에 세 개의 문자열 집단의 두번째(the soup kitchen, Disneyland, the White House)을 저장합니다.
+    4.  `insertZ` 배열에 세 개의 문자열 집단의 세번째(spontaneously combusted, melted into a puddle on the sidewalk, turned into a slug and crawled away)를 저장합니다.
+
+이벤트 핸들러와 완성되지 않은 함수 정리:
+
+1.  가공전 텍스트 파일("raw text file")로 돌아가자.
+2.  "3. EVENT LISTENER AND PARTIAL FUNCTION DEFINITION" 밑의 코드를 복사하고, `main.js` 파일의 맨 밑에다 붙여 넣으세요:
 
-<div id="dicLayer">
-<div id="dicLayerContents"></div>
+    - `randomize` 변수에 클릭 이벤트 리스너를 추가하세요. 그러면 버튼이 클릭되었을 때, `result()` 함수가 실행됩니다.
+    - 코드에 부분적으로 완료된 `result()` 함수를 추가하세요. 이 평가의 뒤 부분에서 함수가 완성되고 정상적으로 동작하도록 내용을 추가할 것입니다.
 
-<div id="dicLayerSub"></div>
-</div>
+`result()` 함수 완성하기:
+
+1.  `newStory`라 불리는 새 변수를 만들고, 이것의 값(value)를 `storyText` 와 똑같이 설정하세요. 이것은 버튼을 누르고 함수가 수행(run)될 때 마다 새 이야기('story')가 랜덤하게 만들어 질 수 있게 합니다. `storyText`를 직접 변경했다면, 새로운 이야기('story')를 한번만 만들 수 있습니다(함수를 통해서 하지 않으면 정적인 값만 유지한다는 의미).
+2.  세 개의 새로운  변수  `xItem`, `yItem`, 와 `zItem`를 만들고 이 세 개의 변수는 `randomValueFromArray()` 를 반환 결과인 세개의 배열과 같도록 만듭니다(각 경우의 호출 결과는 각 배열에 임의의 아이템). 예를 들어 `randomValueFromArray(insertX) `함수를 호출하면 `insertX` 에서 문자열의 하나를 랜덤하게 가질 수 있다.
+3.  그 다음으로  `newStory` 문자열에 있는 세 개의 placeholders— `:insertx:`, ` :inserty:, ``:insertz: ` —저장된 `xItem`, `yItem `와 `zItem` 문자열을 이용하여 로 변환하세요. 여기서 특정 문자열 함수가 도움될 것입니다. 이 함수는 각 경우에 `newStory`와 같게되며(대입), 호출 시 마다 `newStory` 의 원래 값과 동일하지만 대체 될 수 있습니다(랜덤으로 값이 변경되는 것을 표현하는 것으로 추정됨) 그러므로 버튼이 눌러질때마다, 이  placeholder는 꾸며진('silly') 문자열로 랜덤하게 교체되게 됩니다. 추가적인 힌트로, 이 문제의 함수는 하위 문자열에서 찾아진 첫번째 인스턴스만 변경되므로, 아마도 두번 이상 이 함수를 호출해야 할 수도 있습니다.
+4.  첫번째 `if` 블록에서, `newStory` 의 'Bob'이라는 이름을 `name` 변수를 사용하여 변환하는 함수를 추가하세요. 이 블록에서 말하는 내용은 "만약 `customName` 텍스트 입력에 값이 들어가 있다면, 이야기속의 Bob을 사용자가 정의한 이름으로 바꾸세요" 라는 의미입니다.
+5.  두번째  `if` 블록에서는 `uk` 라디오 버튼이 선택되었는지 확인합시다. `uk` 라디오 버튼이 눌려졌다면, 이야기('story') 상의 무게('weight')와 온도('temperature') 값 들인  파운드('pounds')와 화씨온도(Fahrenheit) 를 'stones'과 섭씨온도('centigrade')를 바꾸어야 합니다. 필요한 것은 아래와 같습니다:
+
+    1.  파운드(pound)를  stone, 화씨온도(Fahrenheit) 를 섭씨온도(centigrade)로 변환하는 공식을 참조하라.
+    2.  `weight` 변수를 정의하는 라인에서는, 300를 300 파운드를 stones 변환하라. 변환 결과값을 `Math.round()` 를 실행한 결과값 끝에 `' stone'` 을 결합한다(문자열 더하기 연산 또는 concat())
+    3.  `temperature` 변수를 정의하는 라인에서는, 94를  화씨(Fahrenheit) 94도를 섭씨온도(centigrade)로 변환하라. 변환 결과값을 `Math.round()` 를 실행한 결과값 끝에 `' centigrade'`을 결합한다(문자열 더하기 연산 또는 concat())
+    4.  두 변수 정의 바로 밑에, '94 화씨온도('farenheit')로  `temperature` 변수의 내용을 변환하는 것과,  '300 pounds'을 `weight` 변수의 내용을 바꾸는 두줄의 문자열 변환라인을 추가한다 .
+
+6.  마지막으로, 함수의 끝 두 줄에 `story` 변수의 `textContent` 속성(property)을 `newStory`와 같게 만드세요.
+
+## 힌트와 팁
+
+- JavaScript 내용 외에는 HTML을 수정할 필요가 없습니다.
+- 만약 JavaScript가 정상적으로 HTML에 적용되었는지 의심스럽다면, 일시적으로 JavaScript의 내용을 지우고, 단순하고 짧은 효과가 명확한 내용을 추가해서, 저장하고 새로고침을 해보세요. 아래 예제는 {{htmlelement("html")}} 의 배경을 빨강색으로 바꿉니다 — 정상적으로 JavaScript가 적용되었다면 브라우저 전체 윈도우가 빨강색으로 바뀌게 될겁니다:
+
+  ```js
+  document.querySelector('html').style.backgroundColor = 'red';
+  ```
+
+- [Math.round()](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/round) 는 가장 가까운 정수로 단순하게 반올림한 결과를 반환하는 JavaScript 내장함수 입니다.
+- 변환이 필요한 세 개의 문장이 문제 있습니다. 아마도 `replace()` 함수를 반복적으로 실행 하거나 정규 표현식을 사용할 수 있습니다. 예를 들어 `var text = 'I am the biggest lover, I love my love'; text.replace(/love/g,'like');` 를 실행하면 인스턴스의 'love' 는 'like' 로 모두 바뀌게 될겁니다. 기억하세요, 문자열은 변하지 않습니다!(문자열은 새 변경할 수 없으며, 새 문자열이 생성되고 그 생성된 결과를 인스턴스가 갖게됨을 표현한 것으로 추정)
+
+## 평가 또는 추가 도움
+
+만약 작업을 평가하길 원하거나 풀이가 막혀서 도움을 원하면:
+
+1.  온라인 공유가 가능한 [CodePen](https://codepen.io/), [jsFiddle](https://jsfiddle.net/), 또는 [Glitch](https://glitch.com/) 같은 에디터에 작업한 것을 올려 두세요.
+2.  평가 또는 도움을 요청을 [MDN Discourse forum Learning category](https://discourse.mozilla.org/c/mdn/learn) 에 포스트를 쓰세요. 당신의 글은 아래를 포함해야 합니다:
+
+    - "Assessment wanted for Silly story generator"와 같은 서술적인 제목.
+    - 이미 시도해본 것에 대한 상세내용과 우리가 어떻게 하길 원하는 지.
+      예. 만약 당신이 풀이가 막히고 도움이 필요하다거나, 평가를 원한다는 것을.
+    - 평가를 받고 싶거나 도움이 필요한 예제를 갖고 있는 공유가능한 온라인 에디터 링크. (위에 1단계에서 언급한 것). 이것은 좋은 습관입니다. 그들의 코드를 보지못한다면 도움을 주기는 굉장히 어렵습니다.
+    - 실제 작업 또는 평가 페이지 링크, 그래야 우리가 당신이 도움받길 원하는 것을 찾을 수 있어요.
+
+{{PreviousMenu("Learn/JavaScript/First_steps/Arrays", "Learn/JavaScript/First_steps")}}
+
+## 이 모듈에서
+
+- [What is JavaScript?](/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript)
+- [A first splash into JavaScript](/en-US/docs/Learn/JavaScript/First_steps/A_first_splash)
+- [What went wrong? Troubleshooting JavaScript](/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong)
+- [Storing the information you need — Variables](/en-US/docs/Learn/JavaScript/First_steps/Variables)
+- [Basic math in JavaScript — numbers and operators](/en-US/docs/Learn/JavaScript/First_steps/Math)
+- [Handling text — strings in JavaScript](/en-US/docs/Learn/JavaScript/First_steps/Strings)
+- [Useful string methods](/en-US/docs/Learn/JavaScript/First_steps/Useful_string_methods)
+- [Arrays](/en-US/docs/Learn/JavaScript/First_steps/Arrays)
+- [Assessment: Silly story generator](/en-US/docs/Learn/JavaScript/First_steps/Silly_story_generator)
+
+<div id="dicLayer" style=""><div id="dicLayerContents">&#x3C;dicword style="user-select: text;">What is JavaScript?&#x3C;/dicword>&#x3C;dicword style="user-select: text;">&#x3C;dicimg id="play" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/play.gif);">&#x3C;/dicimg> <input>Eng&#x3C;dicimg id="copy" style="background-image: url(chrome-extension://bmbdcffdhebhecemcchbkfnjlmdiiepe/copy.png);" title="copy">&#x3C;/dicimg>&#x3C;/dicword><br><br><br><br>자바 스크립트 란?</div><div id="dicLayerSub"></div></div>
+
+<div id="dicLayerLoader" style="top: 5596px; left: 281px;"></div>
+
+<div id="dicLayer"><div id="dicLayerContents"></div><div id="dicLayerSub"></div></div>
 
 <div id="dicRawData" class="hidden"></div>
 
 <div id="dicLayerLoader"></div>
 
-<div id="dicLayer">
-<div id="dicLayerContents"></div>
-
-<div id="dicLayerSub"></div>
-</div>
+<div id="dicLayer"><div id="dicLayerContents"></div><div id="dicLayerSub"></div></div>
 
 <div id="dicRawData" class="hidden"></div>