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

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

Browse Source 
Add info about template for Checkbox problem type
This commit is contained in:
Mark Hoeber
2014-01-06 12:25:54 -08:00
parent 024c3f6511 e60524912f
commit 249a61820f
7 changed files with 429 additions and 1140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/course_authors/source/Images/ProbComponent_CheckboxIcon.gif Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

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

@@ -12,6 +12,9 @@ templates for these problems, but the problems open directly in the
- :ref:`Circuit Schematic Builder` In circuit schematic problems, students
create and modify circuits on an interactive grid and submit
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
evaluate students' responses using an embedded Python script that you
create. These problems can be any type.
@@ -19,8 +22,6 @@ templates for these problems, but the problems open directly in the
or objects to a specific location on an image.
- :ref:`Image Mapped Input` Image mapped input problems require students to
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
students to enter a mathematical expression as text, such as
e=m\*c^2.
@@ -58,6 +59,154 @@ Create a Circuit Schematic Builder Problem
#. In the component editor, replace the example code with your own code.
#. 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 ("Custom Python-Evaluated Input")
@@ -85,7 +234,7 @@ To create a write-your-own-grader problem:
#. 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>`_.
Script <https://edx.readthedocs.org/en/latest/course_data_formats/custom_response.html>`_.
.. _Drag and Drop:
@@ -136,119 +285,7 @@ To create a image mapped input problem:
#. 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
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:
@@ -341,5 +378,3 @@ To create a problem with an adaptive hint:
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.

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

File diff suppressed because one or more lines are too long

7
docs/course_authors/source/common_problems.rst
View File

@@ -48,13 +48,14 @@ Create a Checkbox Problem
==========================
#. Under **Add New Component**, click **Problem**.
#. In the **Select Problem Component Type** screen, click **Blank Common
Problem** on the **Common Problem Types** tab.
#. In the **Select Problem Component Type** screen, click **Checkboxes** on the **Common Problem Types** tab.
#. In the Problem component that appears, click **Edit**.
#. In the component editor, replace the default text with the text of your
problem. Enter each answer option on its own line.
#. 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.
#. Add an **x** between the brackets for the correct answer or answers.

10
docs/course_authors/source/index.rst
View File

@@ -22,10 +22,9 @@ Contents
create_problem_component
common_problems
advanced_problems
javascript_input
create_lti
specialized_problems
open_response_assessment
tools
set_content_releasedates
view_course_content
export_import_course
@@ -45,10 +44,3 @@ Appendices
:glob:
appendices/*

113
docs/course_authors/source/javascript_input.rst
View File

@@ -1,113 +0,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.

7
docs/course_authors/source/open_response_assessment.rst
View File

@@ -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
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
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.
- To advance to the AI assessment, the response must have a peer
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
^^^^^^^^^^^^^^^^^^^^^^^^
@@ -377,7 +380,7 @@ Open response assessments include the following settings.
| | |
| | **Note** *Every problem must have a problem weight of at least |
| | 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 |
| | who submits a response has to grade before the student receives a |