Commit 41d2c217 by spearce

Add JSInput template information

Update Advanced Problems page with Custom JavaScript Display and
Grading (JS Input) problem info. Delete separate page for JS Input
problems. Update Appendix F with new code for sample JS Input problem.
parent 7fa8bffd
...@@ -12,6 +12,9 @@ templates for these problems, but the problems open directly in the ...@@ -12,6 +12,9 @@ templates for these problems, but the problems open directly in the
- :ref:`Circuit Schematic Builder` In circuit schematic problems, students - :ref:`Circuit Schematic Builder` In circuit schematic problems, students
create and modify circuits on an interactive grid and submit create and modify circuits on an interactive grid and submit
computer-generated analyses of the circuits for grading. computer-generated analyses of the circuits for grading.
- :ref:`Custom JavaScript Display and Grading` With custom JavaScript display
and grading problems, you can incorporate problem types that you've created
in HTML into Studio via an IFrame.
- :ref:`Write-Your-Own-Grader` Write-your-own-grader problems - :ref:`Write-Your-Own-Grader` Write-your-own-grader problems
evaluate students' responses using an embedded Python script that you evaluate students' responses using an embedded Python script that you
create. These problems can be any type. create. These problems can be any type.
...@@ -19,8 +22,6 @@ templates for these problems, but the problems open directly in the ...@@ -19,8 +22,6 @@ templates for these problems, but the problems open directly in the
or objects to a specific location on an image. or objects to a specific location on an image.
- :ref:`Image Mapped Input` Image mapped input problems require students to - :ref:`Image Mapped Input` Image mapped input problems require students to
click a specific location on an image. click a specific location on an image.
- :ref:`JavaScript Input` JavaScript input problems allow you to incorporate
problem types that you've created in HTML into Studio via an IFrame.
- :ref:`Math Expression Input` Math expression input problems require - :ref:`Math Expression Input` Math expression input problems require
students to enter a mathematical expression as text, such as students to enter a mathematical expression as text, such as
e=m\*c^2. e=m\*c^2.
...@@ -58,93 +59,15 @@ Create a Circuit Schematic Builder Problem ...@@ -58,93 +59,15 @@ Create a Circuit Schematic Builder Problem
#. In the component editor, replace the example code with your own code. #. In the component editor, replace the example code with your own code.
#. Click **Save**. #. Click **Save**.
.. _Write-Your-Own-Grader: .. _Custom JavaScript Display and Grading:
Write-Your-Own-Grader ("Custom Python-Evaluated Input")
-------------------------------------------------------
In write-your-own-grader problems (also called "custom Python-evaluated
input" problems), the grader evaluates a student's response using a
Python script that you create and embed in the problem. These problems
can be any type. Numerical input and text input problems are the most
popular write-your-own-grader.
.. image:: Images/WriteYourOwnGraderExample.gif
Create a Write-Your-Own-Grader Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To create a write-your-own-grader problem:
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Custom Python-Evaluated Input**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.
For more information about write-your-own-grader problems, see `CustomResponse XML and Python Custom JavaScript Display and Grading
Script <https://edx.readthedocs.org/en/latest/course_data_formats/custom_response.html>`_. -------------------------------------
.. _Drag and Drop:
Drag and Drop
-------------
In drag and drop problems, students respond to a question by dragging
text or objects to a specific location on an image.
.. image:: Images/DragAndDropExample.gif
Create a Drag and Drop Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To create a drag and drop problem:
#. In the unit where you want to create the problem, click **Problem** Custom JavaScript display and grading problems allow you to create your own learning tool
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Drag and Drop**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.
For more information about drag and drop problems, see `XML Format of Drag and Drop Input
<http://data.edx.org/en/latest/course_data_formats/drag_and_drop/drag_and_drop_input.html>`_.
.. _Image Mapped Input:
Image Mapped Input
------------------
In an image mapped input problem, students click inside a defined area
in an image. You define this area by including coordinates in the body
of the problem.
.. image:: Images/ImageMappedInputExample.gif
Create an Image Mapped Input Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To create a image mapped input problem:
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Image Mapped Input**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.
.. _JavaScript Input:
JavaScript Input
----------------
The JavaScript Input problem type allows you to create your own learning tool
using HTML and other standard Internet languages and then add the tool directly 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 into Studio. When you use this problem type, Studio embeds your tool in an
IFrame so that your students can interact with it in the LMS. You can grade 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 your students' work using JavaScript and some basic Python, and the grading
is integrated into the edX grading system. is integrated into the edX grading system.
...@@ -154,31 +77,39 @@ and then enter your code into the component editor. ...@@ -154,31 +77,39 @@ and then enter your code into the component editor.
.. image:: /Images/JavaScriptInputExample.gif .. image:: /Images/JavaScriptInputExample.gif
Create a JavaScript Input Problem Create a Custom JavaScript Display and Grading Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#. Create your JavaScript application, and then upload all files associated with #. Create your JavaScript application, and then upload all files associated with
that application to the **Files & Uploads** page. that application to the **Files & Uploads** page.
#. In the unit where you want to create the problem, click **Problem** #. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab. under **Add New Component**, and then click the **Advanced** tab.
#. Click **Blank Advanced Problem**. #. Click **Custom JavaScript Display and Grading**.
#. In the component that appears, click **Edit**. #. In the component that appears, click **Edit**.
#. In the component editor, modify the example code according to your problem.
- If some elements of your problem are located in different places, you need to
bypass the same-origin policy (SOP). To do this, change **sop="false"**
in line 8 to **sop="true"**. For more information, see
`same-origin policy <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript>`_.
#. Click the **Settings** tab. #. Click the **Settings** tab.
#. Set **Maximum Attempts** to a number larger than zero. #. Set **Maximum Attempts** to a number larger than zero.
#. In the component editor, enter your code.
#. Click **Save**. #. Click **Save**.
To re-create the example problem above, follow these steps. To re-create the example problem above, follow these steps.
#. Go to :ref:`Appendix F` and use the code samples to create the following files: #. Go to :ref:`Appendix F` and use the code samples to create the following files.
- webGLDemo.html - webGLDemo.html
- webGLDemo.js - webGLDemo.js
- webGLDemo.css - webGLDemo.css
- three.min.js - three.min.js
#. On the **Files & Uploads** page, upload the four files you just created. **Note** *If you need to bypass the SOP, you'll also create a jschannel.js file.*
#. Create a new blank advanced problem component.
#. On the **Files & Uploads** page, upload the files you just created.
#. Create a new custom JavaScript display and grading problem component.
#. On the **Settings** tab, set **Maximum Attempts** to a number larger than #. On the **Settings** tab, set **Maximum Attempts** to a number larger than
zero. zero.
#. In the problem component editor, paste the code below. #. In the problem component editor, paste the code below.
...@@ -226,7 +157,7 @@ JavaScript Input Problem Code ...@@ -226,7 +157,7 @@ JavaScript Input Problem Code
</problem> </problem>
.. notes:: When you create a JavaScript Input problem, keep the following in mind. .. note:: When you create a JavaScript Input problem, keep the following in mind.
- The webGLDemo.js file defines the three JavaScript functions (**WebGLDemo.getGrade**, - The webGLDemo.js file defines the three JavaScript functions (**WebGLDemo.getGrade**,
**WebGLDemo.getState**, and **WebGLDemo.setState**). **WebGLDemo.getState**, and **WebGLDemo.setState**).
...@@ -250,6 +181,88 @@ JavaScript Input Problem Code ...@@ -250,6 +181,88 @@ JavaScript Input Problem Code
- Clicking **Check** or **Save** registers the problem's current state. - Clicking **Check** or **Save** registers the problem's current state.
.. _Write-Your-Own-Grader:
Write-Your-Own-Grader ("Custom Python-Evaluated Input")
-------------------------------------------------------
In write-your-own-grader problems (also called "custom Python-evaluated
input" problems), the grader evaluates a student's response using a
Python script that you create and embed in the problem. These problems
can be any type. Numerical input and text input problems are the most
popular write-your-own-grader.
.. image:: Images/WriteYourOwnGraderExample.gif
Create a Write-Your-Own-Grader Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To create a write-your-own-grader problem:
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Custom Python-Evaluated Input**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.
For more information about write-your-own-grader problems, see `CustomResponse XML and Python
Script <https://edx.readthedocs.org/en/latest/course_data_formats/custom_response.html>`_.
.. _Drag and Drop:
Drag and Drop
-------------
In drag and drop problems, students respond to a question by dragging
text or objects to a specific location on an image.
.. image:: Images/DragAndDropExample.gif
Create a Drag and Drop Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To create a drag and drop problem:
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Drag and Drop**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.
For more information about drag and drop problems, see `XML Format of Drag and Drop Input
<http://data.edx.org/en/latest/course_data_formats/drag_and_drop/drag_and_drop_input.html>`_.
.. _Image Mapped Input:
Image Mapped Input
------------------
In an image mapped input problem, students click inside a defined area
in an image. You define this area by including coordinates in the body
of the problem.
.. image:: Images/ImageMappedInputExample.gif
Create an Image Mapped Input Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
To create a image mapped input problem:
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Image Mapped Input**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.
.. _Math Expression Input: .. _Math Expression Input:
Math Expression Input Math Expression Input
...@@ -341,5 +354,3 @@ To create a problem with an adaptive hint: ...@@ -341,5 +354,3 @@ To create a problem with an adaptive hint:
#. In the component that appears, click **Edit**. #. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code. #. In the component editor, replace the example code with your own code.
#. Click **Save**. #. Click **Save**.
This source diff could not be displayed because it is too large. You can view the blob instead.
.. _JavaScript Input:
JavaScript Input
----------------
The JavaScript Input problem type allows 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
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 JavaScript Input Problem
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
#. Create your JavaScript application, and then upload all files associated with
that application to the **Files & Uploads** page.
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Blank Advanced Problem**.
#. In the component that appears, click **Edit**.
#. Click the **Settings** tab.
#. Set **Maximum Attempts** to a number larger than zero.
#. In the component editor, enter your code.
#. Click **Save**.
To re-create the example problem above, follow these steps.
#. Go to :ref:`Appendix F` and create the following files:
- webGLDemo.html
- webGLDemo.js
- webGLDemo.css
- three.min.js
#. On the **Files & Uploads** page, upload the four files you just created.
#. Create a new blank advanced problem component.
#. On the **Settings** tab, set **Maximum Attempts** to a number larger than
zero.
#. In the problem component editor, paste the code below.
#. Click **Save.**
JavaScript Input Problem Code
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
::
<problem display_name="webGLDemo">
In the image below, click the cone.
<script type="loncapa/python">
import json
def vglcfn(e, ans):
'''
par is a dictionary containing two keys, "answer" and "state"
The value of answer is the JSON string returned by getGrade
The value of state is the JSON string returned by getState
'''
par = json.loads(ans)
# We can use either the value of the answer key to grade
answer = json.loads(par["answer"])
return answer["cylinder"] and not answer["cube"]
# Or we can use the value of the state key
'''
state = json.loads(par["state"])
selectedObjects = state["selectedObjects"]
return selectedObjects["cylinder"] and not selectedObjects["cube"]
'''
</script>
<customresponse cfn="vglcfn">
<jsinput
gradefn="WebGLDemo.getGrade"
get_statefn="WebGLDemo.getState"
set_statefn="WebGLDemo.setState"
width="400"
height="400"
html_file="/static/webGLDemo.html"
/>
</customresponse>
</problem>
**Notes**
- The webGLDemo.js file defines the three JavaScript functions (**WebGLDemo.getGrade**,
**WebGLDemo.getState**, and **WebGLDemo.setState**).
- The JavaScript input problem code uses **WebGLDemo.getGrade**, **WebGLDemo.getState**,
and **WebGLDemo.setState** to grade, save, or restore a problem. These functions must
be global in scope.
- **WebGLDemo.getState** and **WebGLDemo.setState** are optional. You only have to define
these functions if you want to conserve the state of the problem.
- **Width** and **height** represent the dimensions of the IFrame that holds the
application.
- When the problem opens, the cone and the cube are both blue, or "unselected." When
you click either shape once, the shape becomes yellow, or "selected." To unselect
the shape, click it again. Continue clicking the shape to select and unselect it.
- The response is graded as correct if the cone is selected (yellow) when the user
clicks **Check**.
- Clicking **Check** or **Save** registers the problem's current state.
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment