Update JS Input to reflect new template in Studio

Update Advanced Problems file and Appendix F

docs/course_authors/source/advanced_problems.rst

@@ -64,17 +64,14 @@ Create a Circuit Schematic Builder Problem
 Custom JavaScript Display and Grading
 -------------------------------------
 
-Custom JavaScript display and grading problems allow you to create your own learning tool
+Custom JavaScript display and grading problems (also called custom JavaScript problems or
+JS Input problems) allow you to create your own learning tool
 using HTML and other standard Internet languages and then add the tool directly
 into Studio. When you use this problem type, Studio embeds your tool in an
 inline frame (IFrame) so that your students can interact with it in the LMS. You can grade
 your students' work using JavaScript and some basic Python, and the grading
 is integrated into the edX grading system.
 
-This problem type doesn't appear in the menu of advanced problems in Studio. To
-create a JavaScript input problem type, you'll create a blank advanced problem,
-and then enter your code into the component editor.
-
 .. image:: /Images/JavaScriptInputExample.gif
 
 Create a Custom JavaScript Display and Grading Problem
@@ -97,28 +94,42 @@ Create a Custom JavaScript Display and Grading Problem
 #. Set **Maximum Attempts** to a number larger than zero.
 #. Click **Save**.
 
-To re-create the example problem above, follow these steps.
+Re-create the Example Problem
+^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 
-#. Go to :ref:`Appendix F` and use the code samples to create the following files.
+To re-create the example problem above, you'll need the following files.
 
    - webGLDemo.html
    - webGLDemo.js
    - webGLDemo.css
    - three.min.js
 
-   **Note** *If you need to bypass the SOP, you'll also create a jschannel.js file.*
+#. Go to :ref:`Appendix F` and use the code samples to create the following files.
 
-#. On the **Files & Uploads** page, upload the files you just created.
+   - webGLDemo.html
+   - webGLDemo.js
+   - webGLDemo.css
+
+#. Download the **three.min.js** file. To do this, go to the `three.js home page <http://threejs.org>`_,
+   and then click **Download** in
+   the left pane. After the .zip file has finished downloading, open the .zip file, and then
+   open the **build** folder to access the three.min.js file.
+
+    **Note** If you need to bypass the SOP, you'll also need the **jschannel.js** file. To do
+    this, go to the `jschannel.js <https://github.com/mozilla/jschannel/blob/master/src/jschannel.js>`_
+    page, copy the code for the file into a text editor, and then save the file as jschannel.js.
+
+#. On the **Files & Uploads** page, upload all the files you just created or downloaded.
 #. Create a new custom JavaScript display and grading problem component.
 #. On the **Settings** tab, set **Maximum Attempts** to a number larger than
    zero.
-#. In the problem component editor, paste the code below.
+#. In the problem component editor, replace the example code with the code below.
 #. Click **Save.**
 
 
 
 JavaScript Input Problem Code
-^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+#############################
 
 ::
 
@@ -157,7 +168,7 @@ JavaScript Input Problem Code
     </problem>
 
 
-.. note::    When you create a JavaScript Input problem, keep the following in mind.
+.. note::    When you create this problem, keep the following in mind.
 
              - The webGLDemo.js file defines the three JavaScript functions (**WebGLDemo.getGrade**,
                **WebGLDemo.getState**, and **WebGLDemo.setState**).

docs/course_authors/source/appendices/f.rst

@@ -3,38 +3,35 @@
 Appendix F - Files for the Example Custom JavaScript Display and Grading Problem
 ================================================================================
 
-For the example custom JavaScript display and grading problem, you need the `three.min.js <http://threejs.org>`_
-library file.
-
-- On the `three.js home page <http://threejs.org>`_ page, click **Download** in
-  the left pane. After the .zip file has finished downloading, open it, and then
-  open the **build** folder to access the three.min.js file.
-
-Additionally, you need the following files. You can find the code to create each
-of these files below.
+For the example :ref:`Custom JavaScript Display and Grading` problem, you need the following files. You can find
+instructions for obtaining each
+of these files below. After you obtain the files, add all of them to the **Files & Uploads** page in Studio.
 
 - :ref:`webGLDemo.html`
 - :ref:`webGLDemo.css`
 - :ref:`webGLDemo.js`
+- `three.min.js <http://threejs.org>`_
 
-To create these files, copy the code for each file into a text editor, and
-then save each file. Make sure to use the correct file name extension when you save
-each file.
+For the **webGLDemo.html**, **webGLDemo.js**, and **webGLDemo.css** files, copy the code provided
+for each file into a text editor, and then save each file. Make sure to use the correct
+file name extension when you save each file.
 
-After you create these files, add them to the **Files & Uploads** page in Studio.
+For the **three.min.js** library file, go to the `three.js home page <http://threejs.org>`_ page,
+and then click **Download** in
+the left pane. After the .zip file has finished downloading, open the .zip file, and then
+open the **build** folder to access the **three.min.js** file.
 
 .. note:: If you need to bypass the same-origin policy (SOP), you also need the
-          `jschannel.js <https://github.com/mozilla/jschannel/blob/master/src/jschannel.js>`_ file.
-
-          - On the `jschannel.js <https://github.com/mozilla/jschannel/blob/master/src/jschannel.js>`_
-            web page, copy the code for the file into a text editor, and then save the file as **jschannel.js**.
+          `jschannel.js <https://github.com/mozilla/jschannel/blob/master/src/jschannel.js>`_ file. On
+          the `jschannel.js <https://github.com/mozilla/jschannel/blob/master/src/jschannel.js>`_
+          web page, copy the code for the file into a text editor, and then save the file as **jschannel.js**.
 
 .. _webGLDemo.html:
 
 webGLDemo.html
 --------------
 
-If you don't need to bypass the SOP, use the following code.
+If you **don't** need to bypass the SOP, use the following code.
 
 ::