Skip to content

E
edx-platform
Commit 249a6182 by Mark Hoeber
Options

Merge pull request #2023 from edx/sylvia/documentation/BLD-619 

Add info about template for Checkbox problem type
parents 024c3f65 e6052491
Showing with 162 additions and 245 deletions
docs/course_authors/source/advanced_problems.rst
...@@ -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,6 +59,154 @@ Create a Circuit Schematic Builder Problem ...@@ -58,6 +59,154 @@ 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**.
.. _Custom JavaScript Display and Grading:
Custom JavaScript Display and Grading
-------------------------------------
Custom JavaScript display and grading problems (also called custom JavaScript problems
or JS Input problems) allow you to create a custom problem or tool that uses JavaScript
and then add the problem or tool directly into Studio. When you create a JS Input problem,
Studio embeds the problem 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.
The JS Input problem that you create must use HTML, JavaScript, and cascading style sheets
(CSS). You can use any application creation tool, such as the Google Web Toolkit (GWT), to
create your JS Input problem.
.. image:: /Images/JavaScriptInputExample.gif
Create a Custom JavaScript Display and Grading 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 **Custom JavaScript Display and Grading**.
#. In the component that appears, click **Edit**.
#. In the component editor, modify the example code according to your problem.
- All problems have more than one element. Most problems conform to the same-origin
policy (SOP), meaning that all elements have the same protocol, host, and port.
For example, **http**://**store.company.com**:**81**/subdirectory_1/JSInputElement.html and
**http**://**store.company.com**:**81**/subdirectory_2/JSInputElement.js have the same protocol
(http), host (store.company.com), and port (81).
If any elements of your problem use a different protocol, host, or port, you need to
bypass the SOP. For example, **https**://**info.company.com**/JSInputElement2.html
uses a different protocol, host, and port. To bypass the SOP, change
**sop="false"** in line 8 of the example code to **sop="true"**. For more information, see the same-origin policy
page on the `Mozilla Developer Network <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript>`_
or on `Wikipedia <http://en.wikipedia.org/wiki/Same_origin_policy>`_.
#. If you want your problem to have a **Save** button, click the **Settings** tab, and then set
**Maximum Attempts** to a number larger than zero.
#. Click **Save**.
Re-create the Example Problem
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
To re-create the example problem above, you'll need the following files.
- webGLDemo.html
- webGLDemo.js
- webGLDemo.css
- three.min.js
You'll create the first three files using the code in :ref:`Appendix F`. The three.min.js file is a library
file that you'll download.
#. Go to :ref:`Appendix F` and use the code samples to create the following files.
- 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, replace the example code with 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>
.. 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**).
- 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.
.. _Write-Your-Own-Grader: .. _Write-Your-Own-Grader:
Write-Your-Own-Grader ("Custom Python-Evaluated Input") Write-Your-Own-Grader ("Custom Python-Evaluated Input")
...@@ -85,7 +234,7 @@ To create a write-your-own-grader problem: ...@@ -85,7 +234,7 @@ To create a write-your-own-grader problem:
#. Click **Save**. #. Click **Save**.
For more information about write-your-own-grader problems, see `CustomResponse XML and Python 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>`_. Script <https://edx.readthedocs.org/en/latest/course_data_formats/custom_response.html>`_.
.. _Drag and Drop: .. _Drag and Drop:
...@@ -136,119 +285,7 @@ To create a image mapped input problem: ...@@ -136,119 +285,7 @@ To create a image mapped input 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**.
.. _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 use the code samples to 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:: When you create a JavaScript Input problem, keep the following in mind.
- 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.
.. _Math Expression Input: .. _Math Expression Input:
...@@ -341,5 +378,3 @@ To create a problem with an adaptive hint: ...@@ -341,5 +378,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**.
docs/course_authors/source/appendices/f.rst
This source diff could not be displayed because it is too large. You can view the blob instead.
docs/course_authors/source/common_problems.rst
...@@ -48,13 +48,14 @@ Create a Checkbox Problem ...@@ -48,13 +48,14 @@ Create a Checkbox Problem
========================== ==========================
#. Under **Add New Component**, click **Problem**. #. Under **Add New Component**, click **Problem**.
#. In the **Select Problem Component Type** screen, click **Blank Common #. In the **Select Problem Component Type** screen, click **Checkboxes** on the **Common Problem Types** tab.
Problem** on the **Common Problem Types** tab.
#. In the Problem component that appears, click **Edit**. #. In the Problem component that appears, click **Edit**.
#. In the component editor, replace the default text with the text of your #. In the component editor, replace the default text with the text of your
problem. Enter each answer option on its own line. problem. Enter each answer option on its own line.
#. Select all the answer options, and then click the checkbox button. #. Select all the answer options, and then click the checkbox button.
.. image:: Images/ProbComponent_CheckboxIcon.gif
When you do this, brackets appear next to each answer choice. When you do this, brackets appear next to each answer choice.
#. Add an **x** between the brackets for the correct answer or answers. #. Add an **x** between the brackets for the correct answer or answers.
......
docs/course_authors/source/index.rst
...@@ -22,10 +22,9 @@ Contents ...@@ -22,10 +22,9 @@ Contents
create_problem_component create_problem_component
common_problems common_problems
advanced_problems advanced_problems
javascript_input
create_lti
specialized_problems specialized_problems
open_response_assessment open_response_assessment
tools
set_content_releasedates set_content_releasedates
view_course_content view_course_content
export_import_course export_import_course
...@@ -45,10 +44,3 @@ Appendices ...@@ -45,10 +44,3 @@ Appendices
:glob: :glob:
appendices/* appendices/*
docs/course_authors/source/javascript_input.rst deleted 100644 → 0
.. _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
docs/course_authors/source/open_response_assessment.rst
...@@ -214,7 +214,7 @@ Step 4. Set the Assessment Type and Scoring ...@@ -214,7 +214,7 @@ Step 4. Set the Assessment Type and Scoring
.. note:: After you release your problem to students in your live course, make sure .. note:: After you release your problem to students in your live course, make sure
you don't make any changes to the code for the assessment type and scoring. Changing you don't make any changes to the code for the assessment type and scoring. Changing
this code can cause errors in live courses.* this code can cause errors in live courses.
To set the assessment type and scoring for your open response assessment, you'll To set the assessment type and scoring for your open response assessment, you'll
enter code that specifies the type and order of assessments to use along with enter code that specifies the type and order of assessments to use along with
...@@ -255,6 +255,9 @@ The problem that includes this code has the following characteristics. ...@@ -255,6 +255,9 @@ The problem that includes this code has the following characteristics.
- To advance to the AI assessment, the response must have a peer - To advance to the AI assessment, the response must have a peer
assessment score of 4 or greater. assessment score of 4 or greater.
.. note:: If a response's score isn't high enough for the response to move to the next
assessment,
Set the Type and Scoring Set the Type and Scoring
^^^^^^^^^^^^^^^^^^^^^^^^ ^^^^^^^^^^^^^^^^^^^^^^^^
...@@ -377,7 +380,7 @@ Open response assessments include the following settings. ...@@ -377,7 +380,7 @@ Open response assessments include the following settings.
| | | | | |
| | **Note** *Every problem must have a problem weight of at least | | | **Note** *Every problem must have a problem weight of at least |
| | one point. Problems that have a problem weight of zero points | | | one point. Problems that have a problem weight of zero points |
| | don't appear on the instructor dashboard. | | | don't appear on the instructor dashboard.* |
+---------------------------------------------+--------------------------------------------------------------------+ +---------------------------------------------+--------------------------------------------------------------------+
| **Required Peer Grading** | This setting specifies the number of responses that each student | | **Required Peer Grading** | This setting specifies the number of responses that each student |
| | who submits a response has to grade before the student receives a | | | who submits a response has to grade before the student receives a |
......
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