Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update JS Input to reflect new template in Studio

Browse Source 
Update Advanced Problems file and Appendix F
This commit is contained in:
spearce
2013-12-24 13:24:45 -05:00
parent 41d2c21710
commit 6cfe7669e3
2 changed files with 38 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
docs/course_authors/source/advanced_problems.rst
View File

@@ -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**).

33
docs/course_authors/source/appendices/f.rst
View File

@@ -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.
::