From 6cfe7669e313c8868f2f2155b2d00de7502ee672 Mon Sep 17 00:00:00 2001 From: spearce Date: Tue, 24 Dec 2013 13:24:45 -0500 Subject: [PATCH] Update JS Input to reflect new template in Studio Update Advanced Problems file and Appendix F --- .../source/advanced_problems.rst | 35 ++++++++++++------- docs/course_authors/source/appendices/f.rst | 33 ++++++++--------- 2 files changed, 38 insertions(+), 30 deletions(-) diff --git a/docs/course_authors/source/advanced_problems.rst b/docs/course_authors/source/advanced_problems.rst index 88814e5975..b55539d7fc 100644 --- a/docs/course_authors/source/advanced_problems.rst +++ b/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 `_, + 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 `_ + 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 -.. 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**). diff --git a/docs/course_authors/source/appendices/f.rst b/docs/course_authors/source/appendices/f.rst index be499a047a..0b984eb1c3 100644 --- a/docs/course_authors/source/appendices/f.rst +++ b/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 `_ -library file. - -- On the `three.js home page `_ 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 `_ -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 `_ 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 `_ file. - - - On the `jschannel.js `_ - web page, copy the code for the file into a text editor, and then save the file as **jschannel.js**. + `jschannel.js `_ file. On + the `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. ::