In an annotation problem, the instructor highlights specific text inside a larger text block and then asks questions about that text. The questions appear when students hover the mouse over the highlighted text. The questions also appear in a section below the text block, along with space for students' responses.
Annotation problems ask students to respond to questions about a specific block of text. The question appears above the text when the student hovers the mouse over the highlighted text so that students can think about the question as they read.
.. image:: ../Images/AnnotationExample.png
:alt: Annotation problem
****************************
Create an Annotation Problem
****************************
To create an annotation problem, you'll add the Annotation advanced component to your course, add the **Instructions** and **Guided Discussion** segments of the problem, and then the **Annotation problem** segment of the problem.
#. Add the Annotation advanced component.
#. From the **Settings** menu select **Advanced Settings**.
#. In the field for the **Advanced Module List** policy key, place your
cursor between the brackets.
#. Enter the following value. Make sure to include the quotation marks.
``"annotatable"``
4. At the bottom of the page, click **Save Changes**.
The page refreshes automatically. At the top of the page, you see a
notification that your changes have been saved.
5. Return to the unit where you want to add the specialized problem. The
list of possible components now contains an Advanced component.
.. image:: /Images/AdvancedComponent.png
:alt: Image of the Add a New Component panel with the Advanced component option
2. Add the **Instructions** and **Guided Discussion** segments of the
problem.
#. In the unit where you want to create the problem, under **Add New
Component** click **Advanced**.
#. In the list of problem types, click **Annotation**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.
3. Add the **Annotation problem** segment of the problem.
#. Under the Annotation component, create a new blank Advanced Problem
component.
#. Paste the following code in the Advanced Problem component, replacing
placeholders with your own information.
.. code-block:: xml
<problem>
<annotationresponse>
<annotationinput>
<text>PLACEHOLDER: Text of annotation</text>
<comment>PLACEHOLDER: Text of question</comment>
<comment_prompt>PLACEHOLDER: Type your response below:</comment_prompt>
<tag_prompt>PLACEHOLDER: In your response to this question, which tag below
do you choose?</tag_prompt>
<options>
<option choice="incorrect">PLACEHOLDER: Incorrect answer (to make this
option a correct or partially correct answer, change choice="incorrect"
to choice="correct" or choice="partially-correct")</option>
<option choice="correct">PLACEHOLDER: Correct answer (to make this option
an incorrect or partially correct answer, change choice="correct" to
choice="incorrect" or choice="partially-correct")</option>
In checkbox problems, the student selects one or more options from a list of possible answers. The student must select all the options that apply to answer the problem correctly. Each checkbox problem must have at least one correct answer.
.. image:: /Images/CheckboxExample.png
:alt: Image of a checkbox problem
****************************
Create a Checkbox Problem
****************************
You can create checkbox problems in the Simple Editor or in the Advanced Editor.
.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<).
==================
Simple Editor
==================
#. Under **Add New Component**, click **Problem**.
#. 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.
#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
#. Select all the answer options, and then click the checkbox button.
.. image:: /Images/ProbComponent_CheckboxIcon.png
:alt: Image of the checkbox button
When you do this, brackets appear next to each answer choice.
#. Add an **x** between the brackets for the correct answer or answers.
#. In the component editor, select the text of the explanation, and then click the
explanation button to add explanation tags around the text.
.. image:: /Images/ProbCompButton_Explanation.png
:alt: Image of the explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
For the example problem above, the text in the Problem component is the
following.
.. code-block:: xml
Learning about the benefits of preventative healthcare can be particularly
difficult. >>Check all of the reasons below why this may be the case.<<
[x] A large amount of time passes between undertaking a preventative measure and seeing the result.
[ ] Non-immunized people will always fall sick.
[x] If others are immunized, fewer people will fall sick regardless of a particular individual's choice to get immunized or not.
[x] Trust in healthcare professionals and government officials is fragile.
[explanation]
People who are not immunized against a disease may still not fall sick from the disease. If someone is trying to learn whether or not preventative measures against the disease have any impact, he or she may see these people and conclude, since they have remained healthy despite not being immunized, that immunizations have no effect. Consequently, he or she would tend to believe that immunization
(or other preventative measures) have fewer benefits than they actually do.
[explanation]
==================
Advanced Editor
==================
To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
.. code-block:: xml
<problem>
<p>Learning about the benefits of preventative healthcare can be particularly difficult. Check all of the reasons below why this may be the case.</p>
<choiceresponse>
<checkboxgroup direction="vertical" label="Check all of the reasons below why this may be the case">
<choice correct="true"><text>A large amount of time passes between undertaking a preventative measure and seeing the result.</text></choice>
<choice correct="false"><text>Non-immunized people will always fall sick.</text></choice>
<choice correct="true"><text>If others are immunized, fewer people will fall sick regardless of a particular individual's choice to get immunized or not.</text></choice>
<choice correct="true"><text>Trust in healthcare professionals and government officials is fragile.</text></choice>
</checkboxgroup>
</choiceresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>People who are not immunized against a disease may still not fall sick from the disease. If someone is trying to learn whether or not preventative measures against the disease have any impact, he or she may see these people and conclude, since they have remained healthy despite not being immunized, that immunizations have no effect. Consequently, he or she would tend to believe that immunization (or other preventative measures) have fewer benefits than they actually do.</p>
The chemical equation problem type allows the student to enter text that represents a chemical equation into a text box. The system converts that text into a chemical equation below the text box. The grader evaluates the student's response by using a Python script that you create and embed in the problem.
.. image:: /Images/ChemicalEquationExample.png
:alt: Image of a chemical equation response problem
************************************
Create the Chemical Equation Problem
************************************
Chemical equation problems use MathJax to create formulas. For more information about using MathJax in Studio, see :ref:`MathJax in Studio`.
To create the above chemical equation problem:
#. 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**.
#. In the component editor, paste the code from below.
#. Click **Save**.
==========================================
Sample Chemical Equation Problem Code
==========================================
.. code-block:: xml
<problem>
<startouttext/>
<p>Some problems may ask for a particular chemical equation. Practice by writing out the following reaction in the box below.</p>
In circuit schematic builder problems, students can arrange circuit elements such as voltage sources, capacitors, resistors, and MOSFETs on an interactive grid. They then submit a DC, AC, or transient analysis of their circuit to the system for grading.
.. image:: /Images/CircuitSchematicExample.png
:alt: Image of a circuit schematic builder
*********************************************
Create a Circuit Schematic Builder Problem
*********************************************
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Circuit Schematic Builder**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code.
#. Click **Save**.
**Problem Code**
To create the problem in the image above, paste the following code into the Advanced Editor.
.. code-block:: xml
<problem>
<p>Make a voltage divider that splits the provided voltage evenly.</p>
<p>A voltage divider that evenly divides the input voltage can be formed with two identically valued resistors, with the sampled voltage taken in between the two.</p>
<p>A simple high-pass filter without any further constaints can be formed by simply putting a resister in series with a capacitor. The actual values of the components do not really matter in order to meet the constraints of the problem.</p>
Studio allows you to create a wide variety of exercises and tools for your course. Many of these exercises and tools have templates in Studio so that you can create them easily. In addition, individual course teams frequently create exercises that don't have templates in Studio. We're striving to make these tools available to all our course teams as well, and we have instructions for creating some of them in this section.
Depending on the exercise or tool, you'll use an HTML, Problem, or Advanced component. The page for each individual exercise or tool contains an example of each exercise or tool, together with all the files, code, and step-by-step instructions that you need to create the exercise or tool.
.. note:: Problems must include labels for accessibility. The label generally includes the text of the main question in your problem. Instructions for adding labels appear in the page for each individual problem.
****************************
General Exercises and Tools
****************************
.. list-table::
:widths: 25 25 50
* - .. image:: /Images/AnnotationExample.png
:width: 100
:alt: Example annotation problem
- :ref:`Annotation`
- Annotation problems ask students to respond to questions about a specific block of text. The question appears above the text when the student hovers the mouse over the highlighted text so that students can think about the question as they read.
* - .. image:: /Images/PollExample.png
:width: 100
:alt: Example poll
- :ref:`Conditional Module`
- You can create a conditional module to control versions of content that groups of students see. For example, students who answer "Yes" to a poll question then see a different block of text from the students who answer "No" to that question.
* - .. image:: /Images/JavaScriptInputExample.png
:width: 100
:alt: Example JavaScript problem
- :ref:`Custom JavaScript`
- 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.
- An external grader is a service that receives student responses to a problem, processes those responses, and returns feedback and a problem grade to the edX platform. You build and deploy an external grader separately from the edX platform. An external grader is particularly useful for software programming courses where students are asked to submit complex code.
- You can add the ability for students to participate in instant hangouts directly from your course. With instant hangouts, students can interact through live video and voice, share screens and watch videos together, and collaborate on documents.
* - .. image:: /Images/IFrame_1.png
:width: 100
:alt: Example IFrame tool
- :ref:`IFrame`
- IFrames allow you to integrate ungraded exercises and tools from any Internet site into an HTML component in your course.
* - .. image:: /Images/LTIExample.png
:width: 100
:alt: Example LTI component
- :ref:`LTI Component`
- LTI components allow you to add an external learning application or non-PDF textbook to Studio.
* - .. image:: /Images/CITL_AssmtTypes.png
:width: 100
:alt: Example open response assessment
- :ref:`Open Response Assessment`
- In open response assessments, students receive feedback on written responses of varying lengths as well as files, such as computer code or images, that the students upload. Open response assessments include self assessment and peer assessment.
* - .. image:: /Images/PollExample.png
:width: 100
:alt: Example poll
- :ref:`Poll`
- You can run polls in your course so that your students can share opinions on different questions.
- A problem with an adaptive hint evaluates a student's response, then gives the student feedback or a hint based on that response so that the student is more likely to answer correctly on the next attempt. These problems can be text input or multiple choice problems.
* - .. image:: /Images/ProblemWrittenInLaTeX.png
:width: 100
:alt: Example problem written in LaTeX
- :ref:`Problem Written in LaTeX`
- If you have an problem that is already written in LaTeX, you can use this problem type to easily convert your code into XML.
* - .. image:: /Images/TextInputExample.png
:width: 100
:alt: Example text input problem
- :ref:`Text Input`
- In text input problems, students enter text into a response field. The response can include numbers, letters, and special characters such as punctuation marks.
* - .. image:: /Images/WordCloudExample.png
:width: 100
:alt: Example word cloud
- :ref:`Word Cloud`
- Word clouds arrange text that students enter - for example, in response to a question - into a colorful graphic that students can see.
* - .. image:: /Images/CustomPythonExample.png
:width: 100
:alt: Example write-your-own-grader problem
- :ref:`Write Your Own Grader`
- In custom Python-evaluated input (also called "write-your-own-grader") problems, the grader uses a Python script that you create and embed in the problem to evaluates a student's response or provide hints. These problems can be any type.
********************************
Image-Based Exercises and Tools
********************************
.. list-table::
:widths: 30 25 80
* - .. image:: /Images/DragAndDropProblem.png
:width: 100
:alt: Example drag and drop problem
- :ref:`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/image-modal.png
:width: 100
:alt: Example full screen image tool
- :ref:`Full Screen Image`
- The Full Screen Image tool allows a student to enlarge an image in the whole browser window. This is useful when the image contains a large amount of detail and text that is easier to view in context when enlarged.
- 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/Zooming_Image.png
:width: 100
:alt: Example zooming image tool
- :ref:`Zooming Image`
- Zooming images allow you to enlarge sections of an image so that students can see the section in detail.
************************************
Multiple Choice Exercises and Tools
************************************
.. list-table::
:widths: 30 25 80
* - .. image:: /Images/CheckboxExample.png
:width: 100
:alt: Example checkbox problem
- :ref:`Checkbox`
- In checkbox problems, the student selects one or more options from a list of possible answers. The student must select all the options that apply to answer the problem correctly.
* - .. image:: /Images/DropdownExample.png
:width: 100
:alt: Example dropdown problem
- :ref:`Dropdown`
- Dropdown problems allow the student to choose from a collection of answer options, presented as a dropdown list. Unlike multiple choice problems, whose answers are always visible directly below the question, dropdown problems don't show answer choices until the student clicks the dropdown arrow.
* - .. image:: /Images/MultipleChoiceExample.png
:width: 100
:alt: Example multiple choice problem
- :ref:`Multiple Choice`
- In multiple choice problems, students select one option from a list of answer options. Unlike with dropdown problems, whose answer choices don't appear until the student clicks the drop-down arrow, answer choices for multiple choice problems are always visible directly below the question.
:alt: Example multiple choice and numerical input problem
- :ref:`Multiple Choice and Numerical Input`
- You can create a problem that combines a multiple choice and numerical input problems. Students not only select a response from options that you provide, but also provide more specific information, if necessary.
- Chemical equation problems allow the student to enter text that represents a chemical equation into a text box. The grader evaluates the student's response by using a Python script that you create and embed in the problem.
- In circuit schematic builder problems, students can arrange circuit elements such as voltage sources, capacitors, resistors, and MOSFETs on an interactive grid. They then submit a DC, AC, or transient analysis of their circuit to the system for grading.
* - .. image:: /Images/GeneExplorer.png
:width: 100
:alt: Example gene explorer problem
- :ref:`Gene Explorer`
- The Gene Explorer (GeneX) simulates the transcription, splicing, processing, and translation of a small hypothetical eukaryotic gene. GeneX allows students to make specific mutations in a gene sequence, and it then calculates and displays the effects of the mutations on the mRNA and protein.
- The more complex of Studio's two types of math problems. In math expression input problems, students enter mathematical expressions to answer a question. These problems can include unknown variables and more complex symbolic expressions. You can specify a correct answer either explicitly or by using a Python script.
* - .. image:: /Images/Molecule_Editor.png
:width: 100
:alt: Example molecule editor problem
- :ref:`Molecule Editor`
- The molecule editor allows students to draw molecules that follow the rules for covalent bond formation and formal charge, even if the molecules are chemically impossible, are unstable, or do not exist in living systems.
* - .. image:: /Images/Molecule_Viewer.png
:width: 100
:alt: Example molecule viewer tool
- :ref:`Molecule Viewer`
- The molecule viewer allows you to create three-dimensional representations of molecules for students to view.
* - .. image:: /Images/image292.png
:width: 100
:alt: Example numerical input problem
- :ref:`Numerical Input`
- The simpler of Studio's two types of math problems. In numerical input problems, students enter numbers or specific and relatively simple mathematical expressions to answer a question. These problems only allow integers and a few select constants. You can specify a margin of error, and you can specify a correct answer either explicitly or by using a Python script.
* - .. image:: /Images/Periodic_Table.png
:width: 100
:alt: Example periodic table problem
- :ref:`Periodic Table`
- An interactive periodic table of the elements shows detailed information about each element as the student moves the mouse over the element.
* - .. image:: /Images/ProteinBuilder.png
:width: 100
:alt: Example protein builder problem
- :ref:`Protein Builder`
- The Protex protein builder asks students to create specified protein shapes by stringing together amino acids.
#. 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
To download these files in a .zip archive, go to http://files.edx.org/JSInput.zip.
.. note:: If you need to bypass the SOP, you'll also need the **jschannel.js** file, and your webGLDemo.html file will be slightly different. To download all these files in a .zip archive, go to http://files.edx.org/JSInput_BypassSOP.zip.
#. Download and unpackage the files in either the JSInput.zip file or the JSInput_BypassSOP.zip file.
#. On the **Files & Uploads** page, upload all the files from the .zip file.
#. 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
================================
.. code-block:: xml
<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.
.. _JS Input Problem XML:
******************************
JavaScript Input Problem XML
******************************
JSInput allows problem authors to turn stand-alone HTML files into problems that can be integrated into the edX platform. Since its aim is flexibility, it can be seen as the input and client-side equivalent of **CustomResponse**.
A JSInput exercise creates an IFrame in a static HTML page, and passes the return value of author-specified functions to the enclosing response type (generally **CustomResponse**). JSInput can also store and retrieve state.
========
Template
========
The following is the basic format of a JSInput problem:
The **html_file** attribute specifies the HTML file that the IFrame will point to. The HTML file
must be located in the content directory.
The IFrame is created using the sandbox attribute. Although pop-ups, scripts, and pointer locks are allowed, the IFrame cannot access its parent's attributes.
The HTML file must contain a **gradefn** function that the JSInput file can access. To determine whether the **gradefn** function is accessible, in the console, make sure that **gradefn** returns the right thing. When JSInput uses the **gradefn** function, `gradefn` is called with `gradefn`.call(`obj`), where **obj** is the object-part of **gradefn**. For example, if **gradefn** is **myprog.myfn**, JSInput calls **myprog.myfun.call(myprog)**. (This is to ensure "`this`" continues to refer to what `gradefn` expects.)
Aside from that, more or less anything goes. Note that currently there is no support for inheriting CSS or JavaScript from the parent (aside from the Chrome-only **seamless** attribute, which is set to True by default).
* **gradefn**
The **gradefn** attribute specifies the name of the function that will be called when a user clicks **Check**, and that returns the student's answer. Unless both the **get_statefn** and **set_statefn** attributes are also used, this answer is passed as a string to the enclosing response type. In the **customresponse** example above, this means **cfn** will be passed this answer as ``ans``.
If the **gradefn** function throws an exception when a student attempts to submit a problem, the submission is aborted, and the student receives a generic alert. The alert can be customised by making the exception name ``Waitfor Exception``; in that case, the alert message will be the exception message.
.. important:: To make sure the student's latest answer is passed correctly, make sure that the **gradefn** function is not asynchronous. Additionally, make sure that the function returns promptly. Currently the student has no indication that her answer is being calculated or produced.
========================
Optional Attributes
========================
* **set_statefn**
Sometimes a problem author will want information about a student's previous answers ("state") to be saved and reloaded. If the attribute **set_statefn** is used, the function given as its value will be passed the state as a string argument whenever there is a state, and the student returns to a problem. The function has the responsibility to then use this state approriately.
The state that is passed is:
* The previous output of **gradefn** (i.e., the previous answer) if **get_statefn** is not defined.
* The previous output of **get_statefn** (see below) otherwise.
It is the responsibility of the iframe to do proper verification of the argument that it receives via **set_statefn**.
* **get_statefn**
Sometimes the state and the answer are quite different. For instance, a problem that involves using a javascript program that allows the student to alter a molecule may grade based on the molecule's hydrophobicity, but from the hydrophobicity it might be incapable of restoring the state. In that case, a
*separate* state may be stored and loaded by **set_statefn**. Note that if **get_statefn** is defined, the answer (i.e., what is passed to the enclosing response type) will be a json string with the following format:
.. code-block:: xml
{
answer: `[answer string]`
state: `[state string]`
}
The enclosing response type must then parse this as json.
* **height** and **width**
The **height** and **width** attributes are straightforward: they specify the height and width of the IFrame. Both are limited by the enclosing DOM elements, so for instance there is an implicit max-width of around 900.
In the future, JSInput may attempt to make these dimensions match the HTML file's dimensions (up to the aforementioned limits), but currently it defaults to `500` and `400` for **height** and **width**, respectively.
In custom Python-evaluated input (also called "write-your-own-grader" problems), the grader uses a Python script that you create and embed in the problem to evaluates a student's response or provide hints. These problems can be any type. Numerical input and text input problems are the most popular write-your-own-grader problems.
.. image:: /Images/CustomPythonExample.png
:alt: Image of a write your own grader problem
Custom Python-evaluated input problems can include the following:
* :ref:`Chemical Equation`
* :ref:`Custom JavaScript`
* :ref:`Gene Explorer`
* :ref:`Molecule Editor`
* :ref:`Protein Builder`
.. list-table::
:widths: 20 80
* - ``<script type="loncapa/python">``
- Indicates that the problem contains a Python script.
- This tag includes the ``size``, ``correct_answer``, and ``label`` attributes. The ``correct_answer`` attribute is optional.
You can create one of these problems in :ref:`Answer Tag Format` or :ref:`Script Tag Format`.
.. _Answer Tag Format:
**************************
Answer Tag Format
**************************
The answer tag format encloses the Python script in an ``<answer>`` tag:
.. code-block:: xml
<answer>
if answers[0] == expect:
correct[0] = 'correct'
overall_message = 'Good job!'
else:
correct[0] = 'incorrect'
messages[0] = 'This answer is incorrect'
overall_message = 'Please try again'
</answer>
.. important:: Python honors indentation. Within the ``<answer>`` tag, you must begin your script with no indentation.
The Python script interacts with these variables in the global context:
* ``answers``: An ordered list of answers the student provided. For example, if the student answered ``6``, ``answers[0]`` would equal ``6``.
* ``expect``: The value of the ``expect`` attribute of ``<customresponse>`` (if provided).
* ``correct``: An ordered list of strings indicating whether the student answered the question correctly. Valid values are ``"correct"``, ``"incorrect"``, and ``"unknown"``. You can set these values in the script.
* ``messages``: An ordered list of messages that appear under each response field in the problem. You can use this to provide hints to users. For example, if you include ``messages[0] = "The capital of California is Sacramento"``, that message appears under the first response field in the problem.
* ``overall_message``: A message that appears beneath the entire problem. You can use this to provide a hint that applies to the entire problem rather than a particular response field.
To create a custom Python-evaluated input problem using an ``<answer>`` tag:
#. 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 the following code.
#. Click **Save**.
.. code-block:: xml
<problem>
<p>What is the sum of 2 and 3?</p>
<customresponse expect="5">
<textline math="1" />
</customresponse>
<answer>
if answers[0] == expect:
correct[0] = 'correct'
overall_message = 'Good job!'
else:
correct[0] = 'incorrect'
messages[0] = 'This answer is incorrect'
overall_message = 'Please try again'
</answer>
</problem>
.. important:: Python honors indentation. Within the ``<answer>`` tag, you must begin your script with no indentation.
.. _Script Tag Format:
**************************
Script Tag Format
**************************
The script tag format encloses a Python script that contains a "check function" in a ``<script>`` tag, and adds the ``cfn`` attribute of the ``<customresponse>`` tag to reference that function:
.. code-block:: xml
<problem>
<script type="loncapa/python">
def test_add(expect, ans):
try:
a1=int(ans[0])
a2=int(ans[1])
return (a1+a2) == int(expect)
except ValueError:
return False
def test_add_to_ten(expect, ans):
return test_add(10, ans)
</script>
<p>Enter two integers that sum to 10. </p>
<customresponse cfn="test_add_to_ten">
<textline size="10"/><br/>
<textline size="10"/>
</customresponse>
</problem>
**Important**: Python honors indentation. Within the ``<script>`` tag, the ``def check_func(expect, ans):`` line must have no indentation.
The **check** function accepts two arguments:
* ``expect`` is the value of the ``expect`` attribute of ``<customresponse>`` (if provided)
* ``answer`` is either:
* The value of the answer the student provided, if the problem only has one response field.
* An ordered list of answers the student provided, if the problem has multiple response fields.
The **check** function can return any of the following to indicate whether the student's answer is correct:
* ``True``: Indicates that the student answered correctly for all response fields.
* ``False``: Indicates that the student answered incorrectly. All response fields are marked as incorrect.
* A dictionary of the form: ``{ 'ok': True, 'msg': 'Message' }``
If the dictionary's value for ``ok`` is set to ``True``, all response fields are marked correct; if it is set to ``False``, all response fields are marked incorrect. The ``msg`` is displayed beneath all response fields, and it may contain XHTML markup.
* A dictionary of the form
.. code-block:: xml
{ 'overall_message': 'Overall message',
'input_list': [
{ 'ok': True, 'msg': 'Feedback for input 1'},
{ 'ok': False, 'msg': 'Feedback for input 2'},
... ] }
The last form is useful for responses that contain multiple response fields. It allows you to provide feedback for each response field individually, as well as a message that applies to the entire response.
Example of a checking function:
.. code-block:: python
def check_func(expect, answer_given):
check1 = (int(answer_given[0]) == 1)
check2 = (int(answer_given[1]) == 2)
check3 = (int(answer_given[2]) == 3)
return {'overall_message': 'Overall message',
'input_list': [
{ 'ok': check1, 'msg': 'Feedback 1'},
{ 'ok': check2, 'msg': 'Feedback 2'},
{ 'ok': check3, 'msg': 'Feedback 3'} ] }
The function checks that the user entered ``1`` for the first input, ``2`` for the second input, and ``3`` for the third input. It provides feedback messages for each individual input, as well as a message displayed beneath the entire problem.
<p>Part 2: Enter two integers that sum to 20. </p>
<customresponse cfn="test_add" expect="20">
<textline size="10" label="Integer #1"/><br/>
<textline size="10" label="Integer #2"/>
</customresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>For part 1, any two numbers of the form <i>n</i> and <i>10-n</i>, where <i>n</i> is any integer, will work. One possible answer would be the pair 0 and 10.</p>
<p>For part 2, any pair <i>x</i> and <i>20-x</i> will work, where <i>x</i> is any real number with a finite decimal representation. Both inputs have to be entered either in standard decimal notation or in scientific exponential notation. One possible answer would be the pair 0.5 and 19.5. Another way to write this would be 5e-1 and 1.95e1.</p>
</div>
</solution>
</problem>
**Templates**
The following template includes answers that appear when the student clicks **Show Answer**.
The following template does not return answers when the student clicks **Show Answer**. If your problem doesn't include answers for the student to see, make sure to set **Show Answer** to **Never** in the problem component.
.. code-block:: xml
<problem>
<script type="loncapa/python">
def test_add(expect,ans):
a1=float(ans[0])
a2=float(ans[1])
return (a1+a2)== float(expect)
</script>
<p>Enter two real numbers that sum to 20: </p>
<customresponse cfn="test_add" expect="20">
<textline size="10" label="Integer #1"/><br/>
<textline size="10" label="Integer #2"/>
</customresponse>
<solution>
<div class="detailed-solution">
<p>Solution or Explanation Heading</p>
<p>Solution or explanation text</p>
</div>
</solution>
</problem>
.. _Create a Randomized Custom Python-Evaluated Input Problem:
In drag and drop problems, students respond to a question by dragging text or objects to a specific location on an image.
.. image:: /Images/DragAndDropProblem.png
:alt: Image of a drag and drop problem
*********************************
Create a Drag and Drop Problem
*********************************
To create a simple drag and drop problem in which students drag labels onto an image, you'll upload the image that you want students to drag labels onto, and then create a Problem component.
#. On the **Files & Uploads** page, upload your image file. For more information about uploading files, see :ref:`Add Files to a Course`.
#. 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 text with the text of your problem.
#. In the ``<drag_and_drop_input>`` tag, replace **https://studio.edx.org/c4x/edX/DemoX/asset/L9_buckets.png** with the URL of your image file on the **Files & Uploads** page (for example, **/static/Image.png**).
#. For at least one ``<draggable>`` tag, replace the text of the **label** attribute with the text of the label you want students to drag. For example, if you want students to drag the word "Iceland" onto your image, the new tag would resemble the following:
``<draggable id="1" label="Iceland"/>``
8. Repeat the previous step for all the labels that you want to use. Make sure that the **id** attribute is different for each ``<draggable>`` tag.
#. Determine the coordinates and radius of the correct area on the image.
#. Under ``correct_answer = {``, add an entry for each label, using the following format. These values are in pixels:
``'id': [[x coordinate, y coordinate], radius]``
For example, if your image is 600 pixels wide and 400 pixels high, and you want your students to drag the Iceland label to an area in the upper-left part of the image and drag a Sweden label near the lower-right part of your image, the code would resemble the following (where 2 is the ID for the Sweden label):
.. code-block:: xml
correct-answer = {
'1': [[50, 50], 75]
'2': [[550, 350], 75]}
.. note:: Make sure the code contains the closing curly brace (**}**).
#. Click **Save**.
==========================================
Sample Drag and Drop Problem Code
==========================================
To create the drag and drop problem that appears in the image above, you'll download two files from edX, upload these files to to the **Files & Uploads** page, and then add the code for the problem to a Problem component.
#. Download the following files from edX:
* Allopurinol.gif
* AllopurinolAnswer.gif
To download both these files in a .zip archive, click http://files.edx.org/DragAndDropProblemFiles.zip.
2. Upload the Allopurinol.gif and AllopurinolAnswer.gif files 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 **Drag and Drop**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with the following code.
#. Click **Save**.
**Problem Code**:
.. code-block:: xml
<problem>
<p> Allopurinol is a drug used to treat and prevent gout, a very painful form of arthritis. Once only a “rich man’s disease”, gout has become more and more common in recent decades – affecting about 3 million people in the United States alone. Deposits of needle-like crystals of uric acid in connective tissue or joint spaces cause the symptoms of swelling, stiffness and intense pain. Individuals with gout overproduce uric acid because they cannot eliminate it efficiently. Allopurinol treats and prevents gout by stopping the overproduction of uric acid through inhibition of an enzyme required for the synthesis of uric acid. </p>
<p> You are shown one of many possible molecules. On the structure of allopurinol below, identify the functional groups that are present by dragging the functional group name listed onto the appropriate target boxes on the structure. If you want to change an answer, you have to drag off the name as well. You may need to scroll through the names of functional groups to see all options. </p>
if draganddrop.grade(submission[0], correct_answer):
correct = ['correct']
else:
correct = ['incorrect']
</answer>
</customresponse>
</problem>
========
Tags
========
* ``<customresponse>``: Indicates that the problem is a custom response problem.
* ``<drag_and_drop_input/>``: Indicates the custom response problem is a drag and drop problem.
* ``<draggable/>``: Specifies a single object that a student will drag onto the base image.
* ``<target>``: Specifies the location on the base image where a draggable must be dropped.
**Tag:** ``<drag_and_drop_input/>``
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - img (required)
- Relative path to an image that will be the base image. All draggables can be dragged onto it.
* - target_outline
- Specifies whether an outline (gray dashed line) should be drawn around targets (if they are specified). It can be either 'true' or 'false'. If not specified, the targets do not have outlines.
* - one_per_target
- Specify whether to allow more than one draggable to be placed onto a single target. It can be either 'true' or 'false'. If not specified, the default value is 'true'.
* - no_labels (required)
- default is false, in default behaviour if label is not set, label is obtained from id. If no_labels is true, labels are not automatically populated from id, and one can not set labels and obtain only icons.
Children
* ``<draggable>``
* ``<target>``
**Tag:** ``<draggable/>``
Specifies a single draggable object in a drag and drop problem.
A draggable is what the user must drag out of the slider and drop onto the base image. After a drag operation, if the center of the draggable is located outside the rectangular dimensions of the image, it will be returned to the slider.
For the grader to work, each draggable must have a unique ID.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - id (required)
- Unique identifier of the draggable object.
* - label (optional)
- Text label that the user sees.
* - icon (optional)
- For draggables that are images, the relative path to the image file.
* - can_reuse
- true or false, default is false. If true, same draggable can be used multiple times.
Children
(none)
**Tag:** ``<target>``
Specifies the location on the base image where a student must drop a draggable item. By design, if the center of a draggable lies within the target (i.e. in the rectangle defined by [[x, y], [x + w, y + h]], it is within the target. Otherwise, it is outside.
If you specify at least one target, and a student drops a draggable item on a location that is outside a target, the draggable item returns to the slider.
If you don't specify a target, a student can drop a draggable item anywhere on the base image.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - id (required)
- Unique identifier of the target object.
* - x
- X-coordinate on the base image where the top left corner of the target will be positioned.
* - y
- Y-coordinate on the base image where the top left corner of the target will be positioned.
* - w
- Width of the target, in pixels.
* - h
- Height of the target, in pixels.
Children
(none)
For more information about how to create drag and drop problems, see `XML Format of Drag and Drop Input
Dropdown problems allow the student to choose from a collection of answer options, presented as a dropdown list. Unlike multiple choice problems, whose answers are always visible directly below the question, dropdown problems don't show answer choices until the student clicks the dropdown arrow.
.. image:: /Images/DropdownExample.png
:alt: Image of a dropdown problem
********************************
Create a Dropdown Problem
********************************
You can create dropdown problems in the Simple Editor or in the Advanced Editor.
.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<).
================
Simple Editor
================
To create a dropdown problem, follow these steps.
#. Under **Add New Component**, click **Problem**.
#. In the **Select Problem Component Type** screen, click
**Dropdown** on the **Common Problem Types** tab.
#. In the new Problem component that appears, click **Edit**.
#. Replace the default text with the text for your problem. Enter each of the possible
answers on the same line, separated by commas.
#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
#. Select all the answer options, and then click the dropdown button.
.. image:: /Images/ProbCompButton_Dropdown.png
:alt: Image of the dropdown button
When you do this, a double set of brackets ([[ ]]) appears and surrounds the
answer options.
#. Inside the brackets, surround the correct answer with parentheses.
#. In the component editor, select the text of the explanation, and then click the
explanation button to add explanation tags around the text.
.. image:: /Images/ProbCompButton_Explanation.png
:alt: Image of the explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
For the example problem above, the text in the Problem component is the
following.
::
>>What type of data are the following?<<
Age:
[[Nominal, Discrete, (Continuous)]]
Age, rounded to the nearest year:
[[Nominal, (Discrete), Continuous]]
Life stage - infant, child, and adult:
[[(Nominal), Discrete, Continuous]]
================
Advanced Editor
================
To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
**Problem Code:**
.. code-block:: xml
<problem>
<p>
<em>This exercise first appeared in HarvardX's PH207x Health in Numbers: Quantitative Methods in Clinical & Public Health Research course, fall 2012.</em>
* ``<optionresponse>`` (required): Indicates that the problem is a dropdown problem.
* ``<optioninput>`` (required): Lists the answer options.
**Tag:** ``<optionresponse>``
Indicates that the problem is a dropdown problem.
Attributes
(none)
Children
* ``<optioninput>``
**Tag:** ``<optioninput>``
Lists the answer options.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - options (required)
- Lists the answer options. The list of all answer options is surrounded by parentheses. Individual answer options are surrounded by single quotation marks (') and separated by commas (,).
* - correct (required)
- Indicates whether an answer is correct. Possible values are "true" and "false". Only one **correct** attribute can be set to "true".
An external grader is a service that receives student responses to a problem, processes those responses, and returns feedback and a problem grade to the edX platform. You build and deploy an external grader separately from the edX platform.
See the following sections for more information:
* :ref:`External Grader Example`
* :ref:`External Graders and XQueue`
* :ref:`The XQueue Interface`
* :ref:`Building an External Grader`
* :ref:`Create a Code Response Problem`
.. _External Grader Example:
***************************
External Grader Example
***************************
An external grader is particularly useful for software programming courses where students are asked to submit complex code. The grader can run tests that you define on that code and return results to a student.
For example, you define a problem that requires students to submit Python code, and create a set of tests that an external grader can run to verify the submissions. When a student enters Python code for the problem and clicks **Check**, the code is sent to the grader for testing. If the code passes all tests, the grader returns the score and a string indicating that the solution is correct.
.. image:: /Images/external-grader-correct.png
:alt: Image of a students view of a programming problem that uses an external grader, with a correct result
The external grader can return a string with results, which the student can see by clicking **See full output**. This can be particularly useful when the solution is not correct and you want to return information about the failed tests. For example:
.. image:: /Images/external-grader-incorrect.png
:alt: Image of a students view of a programming problem that uses an external grader, with a correct result
.. _External Graders and XQueue:
**************************************
External Graders and XQueue
**************************************
The edX Platform communicates with your external grader through XQueue. XQueue provides students' input to the grader; it then receives results from the grader and returns them to students.
Student submissions are collected in XQueue, where they remain until the grader actively retrieves, or pulls, the next submission from the queue for grading.
The external grader polls the XQueue through a RESTful interface at a regular interval. When the external grader pulls a submission, it runs the tests on it, then pushes the response back to XQueue through the RESTful interface. XQueue then delivers the response to the edX Learning Management System.
For example code of an external grader that uses Pull mode, see the `Stanford-Online repository xqueue_pull_ref <https://github.com/Stanford-Online/xqueue_pull_ref>`_.
============================
External Grader Workflow
============================
The following steps show the complete process:
#. The student either enters code or attaches a file for a problem, then clicks Check.
#. The external grader pulls the code from XQueue.
#. The external grader runs the tests that you created on the code.
#. The external grader returns the grade for the submission, as well as any results in a string, to XQueue.
#. The XQueue delivers the results to the edX Learning Management System.
#. The student sees the problem results and the grade.
==================
The XQueue Name
==================
Your course will use a specific XQueue name. You use this name when creating problems in edX Studio. You get this name from your edX Program Manager. As edX hosts many XQueues for different courses, it is critical that you use the exact XQueue name in your problems, as described in the section :ref:`Create a Code Response Problem`.
.. _The XQueue Interface:
**************************************
The XQueue Interface
**************************************
The student submission sent from XQueue to the grader, and the response sent from the grader to XQueue, are JSON objects, as described below.
.. note:: XQueue does not send the the student ID to the external grader. Your grader cannot access student IDs or associate student IDs with submissions.
For the code for the XQueue interface, see the file `urls.py in the edX XQueue repository <https://github.com/edx/xqueue/blob/master/queue/urls.py>`_.
The grader receives student submissions as a JSON object with two keys:
* **student_response**: A string containing the student's code submission. The string comes from either input the student enters in the edX Learning Management System or a file the student attaches.
* **grader_payload**: An optional string that you can specify when creating the problem. For more information, see the section :ref:`Create a Code Response Problem`.
After running tests and recording results for a submission, the grader must return information by posting a JSON response. The JSON string contains an indication if the submission was correct, the score, and any message the tests create.
In the following example, the grader returns a JSON string that indicates the submission was correct, the score was 1, and a message::
{
"correct": true,
"score": 1,
"msg": "<p>The code passed all tests.</p>"
}
.. _Building an External Grader:
****************************
Building an External Grader
****************************
Course staff, not edX, is responsible for building and deploying the external grader.
In addition to creating tests that are specific to the problems you use in your course, there are four areas that you must plan for when building an external grader:
* :ref:`Scale`
* :ref:`Security`
* :ref:`Reliability and Recovery`
* :ref:`Testing`
.. _Scale:
==================
Scale
==================
Your external grader must be able to scale to support the number of students in your course.
Keep in mind that student submissions will likely come in spikes, not in an even flow. For example, you should expect the load to be much greater than average in the hours before an exam is due. Therefore, you should verify that the external grader can process submissions from a majority of students in a short period of time.
.. _Security:
==================
Security
==================
Students are submitting code that executes directly on a server that you are responsible for. It is possible that a student will submit malicious code. Your system must protect against this and ensure that the external grader runs only code that is relevant to the course problems. How you implement these protections depends on the programming language you are using and your deployment architecture. You must ensure that malicious code won't damage your server.
.. _Reliability and Recovery:
==============================
Reliability and Recovery
==============================
Once your course starts, many students will submit code at any possible time, and expect to see results quickly. If your external grader is prone to failure or unexpected delays, the student experience will be poor.
Therefore, you must ensure that your grader has high availability and can recover from errors. Prior to your course starting, you must have a plan to immediately notify the team responsible for operating your grader, as well as edX operations, when the grader fails. In collaboration with edX, you should develop a procedure to quickly identify the cause of failure, which can be your grader or edX's XQueue.
Contact your edX Program Manager for more information.
If you know the grader will be unavailable at a certain time for maintenance, you should :ref:`Add a Course Update`.
.. _Testing:
==================
Testing
==================
You should test your grader thoroughly before your course starts. Be sure to test incorrect code as well as correct code to ensure that the grader responds with appropriate scores and messages.
.. _Create a Code Response Problem:
********************************
Create a Code Response Problem
********************************
You create a code response problem in edX Studio by adding a common blank problem, then editing the XML problem definition in the :ref:`Advanced Editor`.
See :ref:`Working with Problem Components` for more information.
Following is a basic example of the XML definition of a problem that uses an external grader::
* **queuename**: The value of the queuename attribute of the <coderesponse> element maps to an XQueue that edX sets up for the course. You get this name from your edX Program Manager. You must use this exact name in order for the problem to communicate with the correct XQueue.
* **Input Type**: In this example, the input type is specificed by the **<textbox>** element. When you use <textbox>, the student enters code in a browser field when viewing the course unit. The other element you can use to specify the input type is <filesubmission>, which enables the student to attach and submit a code file in the unit.
* **<grader_payload>**: You can use the <grader_payload> element to send information to the external grader in the form of a JSON object. For example, you can use <grader_payload> to tell the grader which tests to run for this problem.
Some large images are difficult for students to view in the courseware. The full screen image tool allows students to enlarge the image, so they can see all the detail in context.
****************************************
The Student View of a Full Screen Image
****************************************
The student sees the full screen image in a unit page. When the student hovers the mouse pointer over the image, the **Fullscreen** button appears:
.. image:: /Images/image-modal.png
:alt: Image of the full screen image tool with the Full Screen button.
When the student clicks **Fullscreen**, the image opens and expands in the full browser window. The buttons **Close**, **Zoom In**, and **Zoom Out** appear:
.. image:: /Images/image-modal-window.png
:alt: Image of the Image Modal tool with the Full Screen button.
The student can then zoom in on the image, and drag the image to view the desired part of it:
.. image:: /Images/image-modeal-zoomed.png
:alt: Image of the Image Modal tool with the Full Screen button.
******************************
Create a Full Screen Image
******************************
#. Upload your image file to the **Files & Uploads** page. For more information about how to do this, see :ref:`Add Files to a Course`.
#. Under **Add New Component**, click **html**, and then click **Full Screen Image**.
#. In the new component that appears, click **Edit**.
#. In the component editor, replace the default title, remove the instructional paragraph, and add text as needed.
#. Switch to the **HTML** tab.
#. Replace the following placeholders with your own content.
* Replace the value of the <a> element's href attribute with the path to your image. Do not change the value of the class attribute. For example:
* Ensure that the value of the href and src attributes are the same, and that you do not change the class attribute. Your sample code should look like the following:
The Gene Explorer (GeneX), from the biology department at `UMB <http://www.umb.edu/>`_, simulates the transcription, splicing, processing, and translation of a small hypothetical eukaryotic gene. GeneX allows students to make specific mutations in a gene sequence, and it then calculates and displays the effects of the mutations on the mRNA and protein.
Specifically, the Gene Explorer does the following:
#. Finds the promoter and terminator
#. Reads the DNA sequence to produce the pre-mRNA
#. Finds the splice sites
#. Splices and tails the mRNA
#. Finds the start codon
#. Translates the mRNA
.. image:: /Images/GeneExplorer.png
:alt: Image of the Gene Explorer
For more information about the Gene Explorer, see `The Gene Explorer <http://intro.bio.umb.edu/GX/>`_.
********************
Gene Explorer Code
********************
.. code-block:: xml
<problem>
<p>Make a single base pair substitution mutation in the gene below that results in a protein that is longer than the protein produced by the original gene. When you are satisfied with your change and its effect, click the <b>SUBMIT</b> button.</p>
<p>Note that a "single base pair substitution mutation" is when a single base is changed to another base; for example, changing the A at position 80 to a T. Deletions and insertions are not allowed.</p>
* **width** and **height** specify the dimensions of the application, in pixels.
* **genex_dna_sequence** is the default DNA sequence that appears when the problem opens.
* **dna_sequence** contains the application's state and the student's answer. This value must be the same as **genex_dna_sequence**.
* **genex_problem_number** specifies the number of the problem. This number is based on the five gene editor problems in the MITx 7.00x course--for example, if you want this problem to look like the second gene editor problem in the 7.00x course, you would set the **genex_problem_number** value to 2. The number must be 1, 2, 3, 4, or 5.
This chapter describes how you can use instant hangouts in your course. See:
* :ref:`Hangouts_Overview`
* :ref:`Instant Hangouts in Your Course`
* :ref:`The Student Experience`
* :ref:`Limitations`
* :ref:`Create the Instant Hangout`
.. _Hangouts_Overview:
*****************
Overview
*****************
You can add the ability for students to participate in instant hangouts directly from your course.
With instant hangouts, students can:
* Interact through live video and voice.
* Share screens and watch videos together.
* Collaborate on documents.
For a full list of instant hangout features, see the `Google Hangouts page <http://www.google.com/+/learnmore/hangouts/>`_.
.. note:: Students who want to participate in instant hangouts must have a Google account. You should note this in your course materials.
.. _Instant Hangouts in Your Course:
**********************************
Instant Hangouts in Your Course
**********************************
You can add one or more instant hangouts in your course. For example, you can add an instant hangout:
* In a page, to provide students with a hangout for the entire course. See :ref:`Adding Pages to a Course` for more information.
* In an HTML component, to provide a hangout for students working on that specific course unit. See :ref:`Working with HTML Components` for more information about creating HTML components.
An instant hangout is specific to the page it is opened from. For example, students who join a hangout from one course unit interact among themselves, while students who join a hangout from another unit interact in a different hangout.
.. _The Student Experience:
*************************
The Student Experience
*************************
When you add the instant hangout to your course, a control for the hangout appears on that page. The following example shows the control in a course unit. The control shows that the student can start the hangout and be the first participant.
.. image:: /Images/hangout_unit.png
:alt: Image of the instant hangout control on a unit
To start the hangout, the student clicks **Start the Hangout**. (After the first student clicks **Start the Hangout**, other students see a **Join the Hangout** button.)
The following example shows the control in a page when a hangout has already started. The control has a **Join the Hangout** button, and shows that one other student is already in the hangout.
.. image:: /Images/hangout_static_page.png
:alt: Image of the instant hangout control on a page
To join the hangout, the student clicks **Join the Hangout**.
If not already logged in, the student is prompted to log in to Google:
.. image:: /Images/google_login.png
:alt: Image of the Google login page
Students who do not have a Google account can create one from the login page.
After the student has logged in to Google, the hangout opens in a separate browser window:
.. image:: /Images/GoogleHangout_WithPeople.png
:alt: Image of the instant hangout
.. _Limitations:
****************
Limitations
****************
Currently, only ten students can join a single instant hangout. You should note this in your course materials.
Students in hangouts that are started from different pages in your course are counted separately. So you can have ten students participating in a hangout started from one unit, and ten other students in a hangout started from a different unit.
#. Get the `instant hangout JavaScript file from GitHub <https://raw.github.com/google/instant-hangouts/master/instanthangouts-0.1.0.js>`_.
#. Copy the text of this file into a text editor on your computer, and save the file as a JavaScript file (that is, when you save the file, change the extension from .txt to .js).
.. note:: Make sure that you copy the raw GitHub file, which does not contain formatting. Do not copy the formatted file. Any formatting will cause the JavaScript to not work correctly.
#. Upload the JavaScript file to the **Files & Uploads** page in your course. See :ref:`Add Files to a Course` for more information.
#. In either a page or an HTML component, open the HTML editor.
#. On the first line, add the JavaScript file you uploaded in a <script> tag. For example, if your JavaScript file is named **instanthangouts-0.1.0.js**, you would enter the following::
<script src='/static/instanthangouts-0.1.0.js'/>
#. After the <script> tag, add::
<div class='instanthangouts'/>
#. Add any additional text and tags that you want.
For example, the complete HTML could be::
<p>Join an instant hangout by clicking the button below.
You can use the hangout to have live video discussions with other students.</p>
Google will periodically update the instant hangouts JavaScript file. To receive update notifications, go to the `instant hangouts repository page <https://github.com/google/instant-hangouts/>`_, and then click **Watch** in the upper-right area of the page.
To use an updated JavaScript file in your course, we recommend that you copy the JavaScript from the repository into a file that has the same name as the file that you uploaded to your course. When you upload the new file, the new file replaces the previous file.
.. warning:: If you include version numbers in the file names of uploaded files, you will have to edit any HTML components or pages that include an instant hangout control every time that you update the JavaScript file.
An IFrame allows you to integrate ungraded exercises and tools from any Internet site into the body of your course. The IFrame appears inside an HTML component, and the exercise or tool appears inside the IFrame. IFrames can include your own tools or third-party tools.
.. image:: /Images/IFrame_1.png
:alt: IFrame tool showing a Euler line exercise
:width: 500
IFrames are well-suited for tools that demonstrate a concept but that won't be graded or store student data. If you want to add a graded tool or exercise, add the tool as a :ref:`custom JavaScript problem<Custom JavaScript>` or an :ref:`LTI component<LTI Component>`.
For more information about IFrames, see the `IFrame specification <http://www.w3.org/wiki/HTML/Elements/iframe>`_.
****************************
Create an IFrame Tool
****************************
To add an exercise or tool in an IFrame, you'll create an IFrame HTML component and add the URL of the page that contains the exercise or tool to the component. You can also add text and images both before and after the IFrame.
.. note:: The URL of the page that contains the exercise or tool must start with ``https`` instead of ``http``. If the URL starts with ``http``, you have to work with the owner of that page to find out if an ``https`` version is available. Some websites do not allow their content to be embedded in IFrames.
#. Under **Add New Component**, click **html**, and then click **IFrame**.
#. In the new component that appears, click **Edit**.
#. In the toolbar in the component editor, click **HTML**.
#. In the HTML source code editor, locate the following HTML (line 7). This HTML includes the ``<iframe>`` element:
.. code-block:: html
<p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="402" height="402" marginwidth="0" marginheight="0" frameborder="0" scrolling="no">You need an iFrame capable browser to view this.</iframe></p>
5. Replace the default URL in the **src** attribute (**https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html**) with the URL of the page that contains the exercise or tool. **This URL must start with https**. Make sure you don't delete the quotation marks that surround the URL.
#. Change the attributes in the IFrame element to specify any other settings that you want. For more information about these settings, see :ref:`IFrame Settings`. You can also change the text between the opening and closing ``<iframe>`` tags. A student only sees this text if the student uses a browser that does not support IFrames.
7. Click **OK** to close the HTML source code editor and return to the Visual editor.
#. In the Visual editor, replace the default text with your own text.
#. Click **Save**.
.. _IFrame Settings:
======================
IFrame Settings
======================
To specify settings for your IFrame, you'll add, remove, or change the attributes inside the opening ``<iframe>`` tag. The ``<iframe>`` tag **must** contain a **src** attribute that specifies the URL of the web page you want. Other attributes are optional.
You can add these attributes in any order you want.
.. list-table::
:widths: 20 80
:header-rows: 1
* - Attribute
- Description
* - **src** (required)
- Specifies the URL of the page that contains the exercise or tool.
* - **width** and **height** (optional)
- Specify the width and height of the IFrame, in pixels or as a percentage. To specify the value in pixels, enter numerals. To specify a percentage, enter numerals followed by a percent sign.
If you don't specify the width and height, the IFrame uses the dimensions that the linked page has set. These dimensions vary by website. If you change the width and height of the IFrame, the content from the linked page may be resized, or only part of the content may appear.
* - **marginwidth** and **marginheight** (optional)
- Specify the size of the space between the edges of the IFrame and your exercise or tool, in pixels.
* - **frameborder** (optional)
- Specifies whether a border appears around your IFrame. If the value is 0, no border appears. If the value is any positive number, a border appears.
* - **scrolling** (optional)
- Specifies whether a scrollbar appears to help users see all of the IFrame's content if your IFrame is smaller than the exercise or tool it contains. For example, if the content in your IFrame is very tall, you can set the IFrame's height to a smaller number and add a vertical scroll bar for users, as in the first image below.
For example, compare how the different settings in each of the ``<iframe>`` elements below affect the IFrame.
.. code-block:: html
<p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="442" height="200" marginwidth="20" marginheight="20" frameborder="1" scrolling="yes">You need an iFrame capable browser to view this.</iframe></p>
.. image:: /Images/IFrame_3.png
:alt: IFrame with only top half showing and vertical scroll bar on the side
:width: 500
.. code-block:: html
<p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="550" height="250" marginwidth="30" marginheight="60" frameborder="1" scrolling="no">You need an iFrame capable browser to view this.</iframe></p>
.. image:: /Images/IFrame_4.png
:alt:
:width: 500
For more information about IFrame attributes, see the `IFrame specification <http://www.w3.org/wiki/HTML/Elements/iframe>`_.
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.png
:alt: Image of an image mapped input problem
****************************************
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.
* ``<imageresponse>``: Indicates that the problem is an image mapped input problem.
* ``<imageinput>``: Specifies the image file and the region in the file that the student must click.
**Tag:** ``<imageresponse>``
Indicates that the problem is an image mapped input problem.
Attributes
(none)
Children
* ``<imageinput>``
**Tag:** ``<imageinput>``
Specifies the image file and the region in the file that the student must click.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - src (required)
- The URL of the image
* - height (required)
- The height of the image, in pixels
* - width (required)
- The width of the image, in pixels
* - rectangle (required)
- An attribute with four embedded values in the format (<start_width>,<start_height>)-(<end_width>,<end-height>). All coordinates start with (0,0) in the top left corner and increase in value toward the bottom right corner, very similar to the progression of reading English. The two coordinates defined form the two opposite corners of a box which a student can click inside of.
* You can add external LTI content that is displayed only, such as textbook
content that doesn’t require a student response.
* You can add external LTI content that requires a student response. An external
provider will grade student responses.
* You can use the component as a placeholder for syncing with an external
grading system.
For example, the following LTI component incorporates a Cerego tool that students interact with.
.. image:: /Images/LTIExample.png
:alt: Cerego LTI component example
.. _LTI Information:
************************
Obtain LTI Information
************************
Before you create an LTI component from an external LTI provider in a
unit, you need the following information.
- The **launch URL** (if the LTI component requires a student response
that will be graded). You obtain the launch URL from the LTI
provider. The launch URL is the URL that Studio sends to the external
LTI provider so that the provider can send back students’ grades.
- The **LTI Passports** policy key. This policy key has three parts: an LTI ID,
a client key, and a client secret.
- The **LTI ID**. This is a value that you create to refer to the external LTI
provider. You should create an LTI ID that you can remember easily.
The LTI ID can contain uppercase and lowercase alphanumeric
characters, as well as underscore characters (_). It can be any length. For example, you may create an LTI ID that is
as simple as **test_lti_id**, or your LTI ID may be a string of
numbers and letters such as **id_21441** or
**book_lti_provider_from_new_york**.
- The **client key**. This value is a sequence of characters that you
obtain from the LTI provider. The client key is used for
authentication and can contain any number of characters. For example,
your client key may be **b289378-f88d-2929-ctools.school.edu**.
- The **client secret**. This value is a sequence of characters that
you obtain from the LTI provider. The client secret is used for
authentication and can contain any number of characters. For example,
your client secret can be something as simple as **secret**, or it
may be a string of numbers and letters such as **23746387264** or
**yt4984yr8**.
To create the **LTI Passports** policy key, combine the LTI ID, client key, and client secret in the following format (make sure to include the colons):
``lti_id:client_key:client_secret``
For example, an **LTI Passports** policy key may resemble any of the following:
4. At the bottom of the page, click **Save Changes**.
The page refreshes automatically. At the top of the page, you see a
notification that your changes have been saved, and you can see your entries
for the **LTI Passports** policy key.
==========================================
Step 3. Add the LTI Component to a Unit
==========================================
#. In the unit where you want to create the problem, click **Advanced**
under **Add New Component**, and then click **LTI**.
#. In the component that appears, click **Edit**.
#. In the component editor, specify the settings that you want. See :ref:`LTI Component Settings` for a description of each setting.
#. Click **Save**.
.. _LTI Component settings:
**********************
LTI Component Settings
**********************
.. list-table::
:widths: 10 80
:header-rows: 1
* - Setting
- Description
* - Custom Parameters
- Enables you to add one or more custom parameters. For example, if you've added an e-book, you can set a custom parameter that opens the e-book to a specific page. You could also use a custom parameter to set the background color of the LTI component.
Every custom parameter has a key and a value. You must add the key and value in the following format.
::
key=value
For example, a custom parameter may resemble the following.
::
bgcolor=red
page=144
To add a custom parameter, click **Add**.
* - Display Name
- Specifies the name of the problem. This name appears above the problem and in the course ribbon at the top of the page in the courseware. Analytics reports may also use the display name to identify this component.
* - Hide External Tool
- Indicates whether you want to launch an external tool or to use this component as a placeholder for syncing with an external grading system. If you set the value to **True**, Studio hides the **Launch** button and any IFrames for this component. By default, this value is set to **False**.
* - LTI ID
- Specifies the LTI ID for the external LTI provider. This value must be the same LTI ID that you entered on the **Advanced Settings** page.
* - LTI URL
- Specifies the URL of the external tool that this component launches. This setting is applicable when **Hide External Tool** is set to False.
* - Open in New Page
- Indicates whether the problem opens in a new page. If you set this value to **True**, the student clicks a link that opens the LTI content in a new window. If you set this value to **False**, the LTI content opens in an IFrame in the current page. This setting is applicable when **Hide External Tool** is set to False.
* - Scored
- Indicates whether the LTI component receives a numerical score from the external LTI system. By default, this value is set to **False**.
* - Weight
- Specifies the number of points possible for the problem. By default, if an external LTI provider grades the problem, the problem is worth 1 point, and a student’s score can be any value between 0 and 1. This setting is applicable when **Scored** is set to **True**.
For more information about problem weights and computing point scores, see :ref:`Problem Weight`.
In math expression input problems, students enter text that represents a mathematical expression into a field, and text is converted to a symbolic expression that appears below that field. Unlike numerical input problems, which only allow integers and a few select constants, math expression problems can include unknown variables and more complicated symbolic expressions.
.. image:: /Images/MathExpressionInputExample.png
:alt: Image of math expression input problem
For more information about characters that students can enter, see :ref:`Math Response Formatting for Students`.
The grader uses a numerical sampling to determine whether the student's response matches the instructor-provided math expression, to a specified numerical tolerance. The instructor must specify the allowed variables in the expression as well as the range of values for each variable.
.. warning:: Math expression input problems cannot currently include negative numbers raised to fractional powers, such as (-1)^(1/2). Math expression input problems can include complex numbers raised to fractional powers, or positive non-complex numbers raised to fractional powers.
When you create a math expression input problem in Studio, you'll use `MathJax <http://www.mathjax.org>`_ to change your plain text into "beautiful math." For more information about how to use MathJax in Studio, see :ref:`MathJax in Studio`.
************************************************
Create a Math Expression Input Problem
************************************************
To create a math expression 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 **Math Expression Input**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with your own code. To practice, you may want to use the sample problem code below.
#. Click **Save**.
**Sample Problem Code**
.. code-block:: xml
<problem>
<p>Some problems may ask for a mathematical expression. Practice creating mathematical expressions by answering the questions below.</p>
<p>Write an expression for the product of R_1, R_2, and the inverse of R_3.</p>
<formulaequationinput size="20" label="Enter the equation" />
</formularesponse>
<script type="loncapa/python">
PYTHON SCRIPT
</script>
<solution>
<div class="detailed-solution">
<p>Explanation or Solution Header</p>
<p>Explanation or solution text</p>
</div>
</solution>
</problem>
====
Tags
====
* ``<formularesponse>``
* ``<formulaequationinput />``
* ``<responseparam>``
* ``<script>``
**Tag:** ``<formularesponse>``
Specifies that the problem is a math expression input problem. The ``<formularesponse>`` tag is similar to ``<numericalresponse>``, but ``<formularesponse>`` allows unknown variables.
Attributes
**type**: Can be "cs" (case sensitive, the default) or "ci" (case insensitive, so that capitalization doesn't matter in variable names).
**answer**: The correct answer to the problem, given as a mathematical expression. If you precede a variable name in the problem with a dollar sign ($), you can include a script in the problem that computes the expression in terms of that variable.
**samples**: Specifies important information about the problem in four lists:
* **variables**: A set of variables that students can enter.
* **lower_bounds**: For every defined variable, a lower bound on the numerical tests to use for that variable.
* **upper_bounds**: For every defined variable, an upper bound on the numerical tests to use for that variable.
* **num_samples**: The number of times to test the expression.
Commas separate items inside each of the four individual lists, and the at sign (@), colon (:), and pound sign (#) characters separate the four lists. The format is the following:
Creates a response field where a student types an answer to the problem in plain text, as well as a second field below the response field where the student sees a typeset version of the plain text. The parser that renders the student's plain text into typeset math is the same parser that evaluates the student's response for grading.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - label (required)
- Specifies the name of the response field.
* - size (optional)
- Specifies the width, in characters, of the response field where students enter answers.
Children
(none)
**Tag:** ``<responseparam>``
Used to define an upper bound on the variance of the numerical methods used to approximate a test for equality.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - default (required)
- A number or a percentage specifying how close the student and grader expressions must be. Failure to include a tolerance leaves expressions vulnerable to unavoidable rounding errors during sapling, causing some student input to be graded as incorrect, even if it is algebraically equivalent to the grader's expression.
Your MathJax equations can appear with other text in the paragraph (inline equations) or
on their own lines (display equations).
- For inline equations, you can do either of the following.
- Surround your Mathjax expression with backslashes and **parentheses**.
``\( equation \)``
- Surround your Mathjax expression with [mathjaxinline] tags. Note that these
tags use square brackets ([]).
[mathjaxinline] equation [/mathjaxinline]
- For display equations, you can do either of the following.
- Surround your Mathjax expression with backslashes and **brackets**.
``\[ equation \]``
- Surround your Mathjax expression with [mathjax] tags. Note that these tags use
square brackets ([]).
[mathjax] equation [/mathjax]
You can use MathJax in HTML (text) components and in Problem components.
.. note:: Complete MathJax documentation (together with a testing tool) can be
found at `http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm <http://www.google.com/url?q=http%3A%2F%2Fwww.onemathematicalcat.org%2FMathJaxDocumentation%2FTeXSyntax.htm&sa=D&sntz=1&usg=AFQjCNEV8PtCX6Csp0lW7lDKOLIKCOCkHg>`_.
****************************
HTML (Text) Components
****************************
In the HTML component editor, you can use MathJax both in Visual view and in HTML view.
.. image:: /Images/MathJax_HTML.png
:alt: Image of an HTML component with MathJax in both the Visual and HTML views
*********************
Problem Components
*********************
In the Problem component editor, you can use MathJax both in the Simple Editor
and in the Advanced Editor.
In the example problem below, note that the Einstein equation in the
explanation is enclosed in backslashes and parentheses, so it appears inline with the text. The
Navier-Stokes equation is enclosed in backslashes and brackets, so it appears on its
own line.
.. image:: /Images/MathJax_Problem.png
:alt: Image of a problem component with MathJax in both the Visual and HTML views
Students can use the molecule editor to learn how to create molecules. The molecule editor allows students to draw molecules that follow the rules for covalent bond formation and formal charge, even if the molecules are chemically impossible, are unstable, or do not exist in living systems. The molecule editor warns students if they try to submit a structure that is chemically impossible.
The molecule editor incorporates two tools: the JSME molecule editor created by Peter Erl and Bruno Bienfait, and JSmol, a JavaScript-based molecular viewer from Jmol. (You don't need to download either of these tools--Studio uses them automatically.) For more information about the JSME molecule editor, see `JSME Molecule Editor <http://peter-ertl.com/jsme/index.html>`_. For more information about JSmol, see `JSmol <http://sourceforge.net/projects/jsmol/>`_.
.. image:: /Images/Molecule_Editor.png
:alt: Image of the molecule editor
.. _Create the Molecule Editor:
******************************
Create the Molecule Editor
******************************
To create a molecule editor, you need the following files:
* MoleculeAnswer.png
* MoleculeEditor_HTML.png
* dopamine.mol
To download all of these files in a .zip archive, go to http://files.edx.org/MoleculeEditorFiles.zip.
.. note:: The molecule that appears when the tool starts is a dopamine molecule. To use a different molecule, download the .mol file for that molecule from the `list of molecules <http://www.biotopics.co.uk/jsmol/molecules/>`_ on the `BioTopics <http://www.biotopics.co.uk/>`_ website. Then, upload the .mol file to the **Files & Uploads** page for your course in Studio, and change "dopamine.mol" in the example code to the name of your .mol file.
To create the molecule editor that appears in the image above, you need an HTML component followed by a Problem component.
#. Upload all of the files listed above to the **Files & Uploads** page in your course.
#. Create the HTML component.
#. In the unit where you want to create the problem, click **HTML** under **Add New Component**, and then click **HTML**.
#. In the component that appears, click **Edit**.
#. In the component editor, paste the HTML component code from below.
#. Make any changes that you want, and then click **Save**.
3. Create the Problem component.
#. Under the HTML component, click **Problem** under **Add New Component**, and then click **Blank Advanced Problem**.
#. In the component that appears, click **Edit**.
#. In the component editor, paste the Problem component code from below.
#. Click **Save**.
.. _EMC Problem Code:
========================
Molecule Editor Code
========================
To create the molecule editor, you need an HTML component and a Problem component.
HTML Component Code
***************************
.. code-block:: xml
<h2>Molecule Editor</h2>
<p>The molecule editor makes creating and visualizing molecules easy. A chemistry professor may have you build and submit a molecule as part of an exercise.</p>
<div>
<script type="text/javascript">// <![CDATA[
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+ open";
}
else {
ele.style.display = "block";
text.innerHTML = "- close";
}
}
// ]]></script>
</div>
<div>
<style type="text/css"></style>
</div>
<div id="headerDiv">
<div id="titleText">Using the Molecule Editor<a id="myHeader" href="javascript:toggle2('myContent','myHeader');">+ open </a></div>
</div>
<div id="contentDiv">
<div id="myContent" style="display: none;">
<p>In this problem you will edit a molecule using the molecular drawing program shown below:</p>
<p>The chemical editor you are using ensures that the structures you draw are correct in one very narrow sense, that they follow the rules for covalent bond formation and formal charge. However, there are many structures that follow these rules that are chemically impossible, unstable, do not exist in living systems, or are beyond the scope of this course. The editor will let you draw them because, in contrast to the rules of formal charge, these properties cannot be easily and reliably predicted from structures.</p>
<p>If you submit a structure that includes atoms that are not possible or are beyond the scope of this course, the software will warn you specifically about these parts of your structure and you will be allowed to edit your structure and re-submit. Submitting an improper structure will not count as one of your tries. In general, you should try to use only the atoms most commonly cited in this course: C, H, N, O, P, and S. If you want to learn about formal charge, you can play around with other atoms and unusual configurations and look at the structures that result.</p>
</div>
</div>
<div id="ap_listener_added"> </div>
Problem Component Code
***************************
.. code-block:: xml
<problem>
<p>The dopamine molecule, as shown, cannot make ionic bonds. Edit the dopamine molecule so it can make ionic bonds.</p>
<p>When you are ready, click Check. If you need to start over, click Reset.</p>
<script type="loncapa/python">
def check1(expect, ans):
import json
mol_info = json.loads(ans)["info"]
return any(res == "Can Make Ionic Bonds" for res in mol_info)
</script>
<customresponse cfn="check1">
<editamoleculeinput file="/static/dopamine.mol">
</editamoleculeinput>
</customresponse>
<solution>
<img src="/static/MoleculeAnswer.png"/>
</solution>
</problem>
**Problem 2**
::
<problem>
<p>The dopamine molecule, as shown, cannot make strong hydrogen bonds. Edit the dopamine molecule so that it can make strong hydrogen bonds.</p>
<script type="loncapa/python">
def grader_1(expect, ans):
import json
mol_info = json.loads(ans)["info"]
return any(res == "Cannot Make Strong Hydrogen Bonds" for res in mol_info)
</script>
<customresponse cfn="grader_1">
<editamoleculeinput file="/static/dopamine.mol">
</editamoleculeinput>
</customresponse>
</problem>
**Problem 3**
::
<problem>
<p>The dopamine molecule has an intermediate hydrophobicity. Edit the dopamine molecule so that it is more hydrophobic.</p>
Studio offers two tools that you can use in discussions of molecules:
* With the **molecule viewer** tool, you can create three-dimensional representations of molecules for students to view.
* With the **molecule editor** problem type, you can allow students to draw their own molecules. For more information about this tool, see :ref:`Molecule Editor`.
Both tools use **JSmol**, a JavaScript-based molecular viewer from Jmol. (You don't need to download this tool; Studio uses it automatically.) For more information about JSmol, see `JSmol <http://sourceforge.net/projects/jsmol/>`_.
The following image shows the molecule viewer tool in a course:
.. image:: /Images/MoleculeViewer.png
:width: 500
:alt: Image of molecule viewer showing a molecule of Ciprofloxacin
.. note:: To create a molecule viewer tool, you must have permission to upload files to a third-party file hosting site such as Amazon Web Services Simple Storage Service (AWS S3). When you create the molecule viewer, you'll upload a folder that contains a large number of files to the file hosting site.
.. _Create the Molecule Viewer:
*******************************
Create the Molecule Viewer Tool
*******************************
Creating a molecule viewer tool has several steps:
#. Download files from the `BioTopics website <http://www.biotopics.co.uk/jsmol/molecules>`_ and from edX.
#. Move or edit some of the files that you downloaded.
#. Upload a folder that contains all of the files that you downloaded and edited to your own file hosting site.
#. Create an HTML component that contains an IFrame in Studio. The IFrame references the files that you upload to the file hosting site.
================================================
Download Files from BioTopics and edX
================================================
#. Create or download a .mol file for the molecule that you want to show. You can download a variety of .mol files from the `BioTopics website <http://www.biotopics.co.uk/jsmol/molecules>`_. Save the file in a place where you can easily find it.
#. Download the `MoleculeViewerFiles.zip <http://files.edx.org/MoleculeViewerFiles.zip>`_ file from edX.
#. Unzip the `MoleculeViewerFiles.zip <http://files.edx.org/MoleculeViewerFiles.zip>`_ file that you've downloaded.
When you unzip the file, you'll see a **MoleculeViewerFiles** folder that contains the following folders and files:
#. Move the .mol file that you downloaded from BioTopics into the **data** folder that you downloaded from edX.
#. Edit the MoleculeViewer.html file:
#. In a text editor, open the MoleculeViewer.html file.
#. In line 19 of the MoleculeViewer.html file, change **Example.mol** to the name of your .mol file. For example, if you downloaded the Glucose.mol file, line 19 in your file will look like the following:
You can create a problem that combines a multiple choice and numerical input problems. Students not only select a response from options that you provide, but also provide more specific information, if necessary.
In multiple choice problems, students select one option from a list of answer options. Unlike with dropdown problems, whose answer choices don't appear until the student clicks the drop-down arrow, answer choices for multiple choice problems are always visible directly below the question.
.. image:: /Images/MultipleChoiceExample.png
:alt: Image of a multiple choice problem
Multiple choice problems also have several advanced options, such as presenting a random set of choices to each student. For more information about these options, see :ref:`Multiple Choice Advanced Options`.
****************************************
Create a Multiple Choice Problem
****************************************
You can create multiple choice problems in the Simple Editor or in the Advanced Editor.
.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<).
================
Simple Editor
================
#. Under **Add New Component**, click **Problem**.
#. In the **Select Problem Component Type** screen, click **Multiple
Choice** on the **Common Problem Types** tab.
#. When the new Problem component appears, click **Edit**.
#. In the component editor, replace the sample problem text with the text of your
problem. Enter each answer option on its own line.
#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
#. Select all the answer options, and then click the multiple choice button.
.. image:: /Images/ProbCompButton_MultChoice.png
:alt: Image of the multiple choice button
When you do this, the component editor adds a pair of parentheses next to each
possible answer.
#. Add an "x" between the parentheses next to the correct answer.
#. In the component editor, select the text of the explanation, and then click the
explanation button to add explanation tags around the text.
.. image:: /Images/ProbCompButton_Explanation.png
:alt: Image of the explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
For the example problem above, the text in the Problem component is the
following.
::
>>Lateral inhibition, as was first discovered in the horsehoe crab:<<
( ) is a property of touch sensation, referring to the ability of crabs to
detect nearby predators.
( ) is a property of hearing, referring to the ability of crabs to detect
low frequency noises.
(x) is a property of vision, referring to the ability of crabs eyes to
enhance contrasts.
( ) has to do with the ability of crabs to use sonar to detect fellow horseshoe
crabs nearby.
( ) has to do with a weighting system in the crabs skeleton that allows it to
balance in turbulent water.
[Explanation]
Horseshoe crabs were essential to the discovery of lateral inhibition, a property of
vision present in horseshoe crabs as well as humans, that enables enhancement of
contrast at edges of objects as was demonstrated in class. In 1967, Haldan Hartline
received the Nobel prize for his research on vision and in particular his research
investigating lateral inhibition using horseshoe crabs.
[Explanation]
================
Advanced Editor
================
To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
.. code-block:: xml
<problem>
<p>Lateral inhibition, as was first discovered in the horsehoe crab...</p>
<multiplechoiceresponse>
<choicegroup type="MultipleChoice" label="Lateral inhibition, as was first discovered in the horsehoe crab">
<choice correct="false">is a property of touch sensation, referring to the ability of crabs to detect nearby predators.</choice>
<choice correct="false">is a property of hearing, referring to the ability of crabs to detect low frequency noises.</choice>
<choice correct="false">is a property of vision, referring to the ability of crabs eyes to enhance contrasts.</choice>
<choice correct="true">has to do with the ability of crabs to use sonar to detect fellow horseshoe crabs nearby.</choice>
<choice correct="false">has to do with a weighting system in the crabs skeleton that allows it to balance in turbulent water.</choice>
</choicegroup>
</multiplechoiceresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>Horseshoe crabs were essential to the discovery of lateral inhibition, a property of vision present in horseshoe crabs as well as humans, that enables enhancement of contrast at edges of objects as was demonstrated in class. In 1967, Haldan Hartline received the Nobel prize for his research on vision and in particular his research investigating lateral inhibition using horseshoe crabs.</p>
</div>
</solution>
</problem>
.. _Multiple Choice Advanced Options:
*********************************************
Advanced Options for Multiple Choice Problems
*********************************************
Multiple choice problems have several advanced options. You can change the order of answers in the problem, include explanations that appear when a student selects a specific incorrect answer, or present a random set of choices to each student. For more information, see the following:
* :ref:`Shuffle Answers in a Multiple Choice Problem`
* :ref:`Targeted Feedback in a Multiple Choice Problem`
* :ref:`Answer Pools in a Multiple Choice Problem`
.. _Shuffle Answers in a Multiple Choice Problem:
=============================================
Shuffle Answers in a Multiple Choice Problem
=============================================
Optionally, you can configure a multiple choice problem so that it shuffles the order of possible answers.
:alt: Image of a multiple choice problem with shuffled answers
You can also have some answers shuffled, but not others. For example, you may want to have the answer "All of the Above" fixed at the end of the list, but shuffle other answers.
You can configure the problem to shuffle answers through :ref:`Simple Editor` or :ref:`Advanced Editor`.
Use the Simple Editor to Shuffle Answers
*********************************************
You can configure the problem to shuffle answers in :ref:`Simple Editor`.
For example, the following text defines a multiple choice problem, before shuffling is enabled. The ``(x)`` indicates the correct answer::
>>What Apple device competed with the portable CD player?<<
( ) The iPad
( ) Napster
(x) The iPod
( ) The vegetable peeler
To add shuffling to this problem, add ``!`` in the parenthesis of the first answer::
>>What Apple device competed with the portable CD player?<<
(!) The iPad
( ) Napster
(x) The iPod
( ) The vegetable peeler
To fix an answer's location in the list, add ``@`` in the parenthesis of that answer::
>>What Apple device competed with the portable CD player?<<
(!) The iPad
( ) Napster
(x) The iPod
( ) The vegetable peeler
(@) All of the above
You can combine symbols within parenthesis as necessary. For example, to show the correct answer in a fixed location, you could use::
(x@) The iPod
Use the Advanced Editor to Shuffle Answers
*********************************************
You can configure the problem to shuffle answers through XML in :ref:`Advanced Editor`.
For example, the following XML defines a multiple choice problem, before shuffling is enabled:
.. code-block:: xml
<p>What Apple device competed with the portable CD player?</p>
<choice correct="false" fixed="true">All of the above</choice>
</choicegroup>
</multiplechoiceresponse>
.. _Targeted Feedback in a Multiple Choice Problem:
===============================================
Targeted Feedback in a Multiple Choice Problem
===============================================
You can configure a multiple choice problem so that explanations for incorrect answers are automatically shown to students. You can use these explanations to guide students towards the right answer. Therefore, targeted feedback is most useful for multiple choice problems for which students are allowed multiple attempts.
Use the Advanced Editor to Configure Targeted Feedback
This is followed by XML that defines the targeted feedback:
.. code-block:: xml
<targetedfeedbackset>
<targetedfeedback explanation-id="feedback1">
<div class="detailed-targeted-feedback">
<p>Targeted Feedback</p>
<p>The iPad came out later and did not directly compete with portable CD players.</p>
</div>
</targetedfeedback>
<targetedfeedback explanation-id="feedback2">
<div class="detailed-targeted-feedback">
<p>Targeted Feedback</p>
<p>Napster was not an Apple product.</p>
</div>
</targetedfeedback>
<targetedfeedback explanation-id="feedback3">
<div class="detailed-targeted-feedback">
<p>Targeted Feedback</p>
<p>Vegetable peelers don't play music.</p>
</div>
</targetedfeedback>
</targetedfeedbackset>
<solution explanation-id="correct">
<div class="detailed-solution">
<p>The iPod directly competed with portable CD players.</p>
</div>
</solution>
.. _Answer Pools in a Multiple Choice Problem:
=============================================
Answer Pools in a Multiple Choice Problem
=============================================
You can configure a multiple choice problem so that a random subset of choices are shown to each student. For example, you can add 10 possible choices to the problem, and each student views a set of five choices.
The answer pool must have at least one correct answer, and can have more than one. In each set of choices shown to a student, one correct answer is included. For example, you may configure two correct answers in the set of 10. One of the two correct answers is included in each set a student views.
You configure the problem to provide answer pools through XML in :ref:`Advanced Editor`.
Follow these XML guidelines:
* In the ``<choicegroup>`` element, add the ``answer-pool`` attribute, with the numerical value indicating the number of possible answers in the set. For example, ``<choicegroup answer-pool="4">``.
* For each correct answer, to the ``<choice>`` element, add an ``explanation-id`` attribute and value that maps to a solution. For example, ``<choice correct="true" explanation-id="iPod">The iPod</choice>``.
* For each ``<solution>`` element, add an ``explanation-id`` attribute and value that maps back to a correct answer. For example, ``<solution explanation-id="iPod">``.
.. note:: If the choices include only one correct answer, you do not have to use the ``explanation-id`` in either the ``choice`` or ``<solution>`` element. You do still use the ``<solutionset>`` element to wrap the ``<solution>`` element.
For example, for the following multiple choice problem, a student will see four choices, and in each set one of the choices will be one of the two correct ones. The explanation shown for the correct answer is the one with the same explanation ID.
.. code-block:: xml
<problem>
<p>What Apple devices let you carry your digital music library in your pocket?</p>
* ``<multiplechoiceresponse>`` (required): Indicates that the problem is a multiple choice problem.
* ``<choicegroup>`` (required): Indicates the beginning of the list of options.
* ``<choice>`` (required): Lists an answer option.
**Tag:** ``<multiplechoiceresponse>``
Indicates that the problem is a multiple choice problem.
Attributes
(none)
Children
* ``<choicegroup>``
* All standard HTML tags (can be used to format text)
**Tag:** ``<choicegroup>``
Indicates the beginning of the list of options.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - label (required)
- Specifies the name of the response field.
* - type (required)
- Must be set to "MultipleChoice".
Children
* ``<choice>``
**Tag:** ``<choice>``
Lists an answer option.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - correct (at least one required)
- Indicates a correct or incorrect answer. When the attribute is set to "true", the choice is a correct answer. When the attribute is set to "false", the choice is an incorrect answer. Only one choice can be a correct answer.
* - name
- A unique name that the back end uses to refer to the choice.
Numerical input problems are the simpler of the two mathematics tools that Studio offers. In these problems, students enter numbers or specific and relatively simple mathematical expressions to answer a question. The text that the students enter is converted to a symbolic expression that appears below the response field.
.. image:: /Images/image292.png
:alt: Image of a numerical input problem
Note that students' responses don't have to be exact for these problems. You can specify a margin of error, or tolerance. You can also specify a correct answer explicitly, or use a Python script. For more information, see the instructions below.
Responses for numerical input problems can include integers, fractions,
and constants such as *pi* and *g*. Responses can also include text
representing common functions, such as square root (sqrt) and log base 2
(log2), as well as trigonometric functions and their inverses, such as
sine (sin) and arcsine (arcsin). For these functions, the
text that the student enters is converted into mathematical symbols. The following
example shows the way the system renders students' text responses in
numerical input problems.
.. image:: /Images/Math5.png
:alt: Image of a numerical input probem rendered by Studio
For more information about characters that students can enter, see :ref:`Math Response Formatting for Students`.
***********************************
Create a Numerical Input Problem
***********************************
You can create numerical problems in the Simple Editor or in the Advanced Editor regardless of the answer to the problem. If the text of your problem doesn't include any italics, bold formatting, or special characters, you can create the problem in the Simple Editor. If the text of your problem contains special formatting or characters, or if your problem contains a Python script, you'll use the Advanced Editor.
For example, the following example problems require the Advanced Editor.
.. image:: /Images/NumericalInput_Complex.png
:alt: Image of a more complex numerical input problem
For more information about including a Python script in your problem, see :ref:`Write Your Own Grader`.
==================
Simple Editor
==================
#. Under **Add New Component**, click **Problem**.
#. In the **Select Problem Component Type** screen, click **Numerical
Input** on the **Common Problem Types** tab.
3. When the new Problem component appears, click **Edit**.
#. In the component editor, replace the sample problem text with your own text.
#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
#. Select the text of the answer, and then click the numerical input button.
.. image:: /Images/ProbCompButton_NumInput.png
:alt: Image of the numerical input button
When you do this, an equal sign appears next to the answer.
7. (Optional) Specify a margin of error, or tolerance. You can specify a percentage, number, or range.
* To specify a percentage on either side of the correct answer, add **+-NUMBER%** after the answer. For example, if you want to include a 2% tolerance, add **+-2%**.
* To specify a number on either side of the correct answer, add **+-NUMBER** after the answer. For example, if you want to include a tolerance of 5, add **+-5**.
* To specify a range, use brackets [] or parentheses (). A bracket indicates that range includes the number next to it. A parenthesis indicates that the range does not include the number next to it. For example, if you specify **[5, 8)**, correct answers can be 5, 6, and 7, but not 8. Likewise, if you specify **(5, 8]**, correct answers can be 6, 7, and 8, but not 5.
8. In the component editor, select the text of the explanation, and then click the
explanation button to add explanation tags around the text.
.. image:: /Images/ProbCompButton_Explanation.png
:alt: Image of the explanation button
9. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
For the first example problem above, the text in the Problem component is the
following.
::
>>What base is the decimal numeral system in?<<
= 10
[explanation]
The decimal numerial system is base ten.
[explanation]
==================
Advanced Editor
==================
To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
**Problem Code**:
.. code-block:: xml
<problem>
<p><b>Example Problem</b></p>
<p>What base is the decimal numeral system in?
<numericalresponse answer="10">
<formulaequationinput label="What base is the decimal numeral system in?"/>
</numericalresponse>
</p>
<p>What is the value of the standard gravity constant <i>g</i>, measured in m/s<sup>2</sup>? Give your answer to at least two decimal places.
<numericalresponse answer="9.80665">
<responseparam type="tolerance" default="0.01" />
<formulaequationinput label="Give your answer to at least two decimal places"/>
</numericalresponse>
</p>
<!-- The following uses Python script spacing. Make sure it isn't indented when you add it to the Problem component. -->
* ``<numericalresponse>`` (required): Specifies that the problem is a numerical input problem.
* ``<formulaequationinput />`` (required): Provides a response field where the student enters a response.
* ``<responseparam>`` (optional): Specifies a tolerance, or margin of error, for an answer.
* ``<script>`` (optional):
.. note:: Some older problems use the ``<textline math="1" />`` tag instead of the ``<formulaequationinput />`` tag. However, the ``<textline math="1" />`` tag has been deprecated. All new problems should use the ``<formulaequationinput />`` tag.
**Tag:** ``<numericalresponse>``
Specifies that the problem is a numerical input problem. The ``<numericalresponse>`` tag is similar to the ``<formularesponse>`` tag, but the ``<numericalresponse>`` tag does not allow unspecified variables.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - answer (required)
- The correct answer to the problem, given as a mathematical expression.
.. note:: If you include a variable name preceded with a dollar sign ($) in the problem, you can include a script in the problem that computes the expression in terms of that variable.
The grader evaluates the answer that you provide and the student's response in the same way. The grader also automatically simplifies any numeric expressions that you or a student provides. Answers can include simple expressions such as "0.3" and "42", or more complex expressions such as "1/3" and "sin(pi/5)".
Children
* ``<responseparam>``
* ``<formulaequationinput>``
**Tag:** * ``<formulaequationinput>``
Creates a response field in the LMS where students enter a response.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - label (required)
- Specifies the name of the response field.
* - size (optional)
- Defines the width, in characters, of the response field in the LMS.
Children
(none)
**Tag:** ``<responseparam>``
Specifies a tolerance, or margin of error, for an answer.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - type (optional)
- "tolerance": Defines a tolerance for a number
* - default (optional)
- A number or a percentage specifying a numerical or percent tolerance.
Children
(none)
**Tag:** ``<script>``
Specifies a script that the grader uses to evaluate a student's response. A problem behaves as if all of the code in all of the script tags were in a single script tag. Specifically, any variables that are used in multiple ``<script>`` tags share a namespace and can be overriden.
As with all Python, indentation matters, even though the code is embedded in XML.
.. warning:: **Version 1 of of our Open Response Assessments suite has been deprecated.** This documentation is meant for past courses that have used this first version of open response assessments. We no longer support new open response assessments of this type.
Version 2 of our Open Response Assessments suite was released to a few courses in April 2014 and more broadly in May 2014. If you want to create a new open response assessment in your course, see `the new ORA documentation <http://edx.readthedocs.org/projects/edx-open-response-assessments/en/latest/>`_.
*********************************************
Introduction to Open Response Assessments
*********************************************
.. note:: Problems can occur when you move your course from edge.edx.org to edx.org, or vice versa, if your course has the same URL in both places. To work around this problem, make sure that the URLs are different by specifying a different university or course number when you create each course. For example, if your university is edX and your course number is edX101, you can specify the course number as **edx_101** (note the underscore) on Edge and **edX101** on edX.
Open response assessments allow instructors to assess student learning through questions that may not have definite answers. Tens of thousands of students can receive feedback on written responses of varying lengths as well as files, such as computer code or images, that the students upload. Open response assessment technologies include self assessment and peer assessment. With self assessments, students learn by comparing their answers to a rubric that you create. With peer assessments, students compare their peers' answers to the rubric.
For more information, see the following:
* :ref:`ORA Notes`
* :ref:`ORA Components`
* :ref:`ORA Types`
* :ref:`ORA Effective Questions`
* :ref:`ORA Rubrics`
* :ref:`ORA Create an ORA Problem`
* :ref:`ORA Grade an ORA`
* :ref:`ORA Access Scores`
.. _ORA Notes:
*********************************************
A Few Notes about Open Response Assessments
*********************************************
**Open response assessment technology is still in beta.** For a good
experience with open response assessments, you'll need to follow a few
guidelines.
- Do not create a new open response assessment in a running course.
Only create open response assessments in a test course.
- If your course will include open response assessments, add and
thoroughly test all the open response assessments *before* the course
is live.
- Set open response assessments to be optional, ungraded, or droppable
exercises until you've used the technology a few times and have
become familiar with it.
- Use open response assessments sparingly at first. Only include a few
in your course, and make sure that you have contingency plans in case
you run into problems.
Finally, if you're at an edX consortium university and you plan to
include open response assessments in a MOOC, make sure to notify your
edX project manager (PM).
.. _ORA Components:
*********************************************
Components of an Open Response Assessment
*********************************************
An open response assessment has three elements:
- The assessment type or types--self, peer, or artificial intelligence
(AI). The type of assessment and the order in which the assessments
run appears in the upper right corner of the ORA problem. In the
following example, the student performs a self assessment, then peers
perform peer assessments, and then an AI assessment runs.
.. image:: /Images/CITL_AssmtTypes.png
:alt: Image of ORA with assessment types circled
- The question that you want your students to answer. This appears near
the top of the component, followed by a field where the student
enters a response.
.. image:: /Images/CITLsample.png
:alt: Image of ORA question
- A rubric that you design. After the student enters a response and
clicks **Submit**, if the assessment is a self assessment, the
student sees the rubric below his answer and compares his answer to
the rubric. (If the assessment is an AI or peer assessment, the
student sees a "Your response has been submitted" message but doesn't
see the rubric.)
.. image:: /Images/CITL_SA_Rubric.png
:alt: Image of ORA with rubric showing below the student's response
.. _ORA Types:
******************************
Open Response Assessment Types
******************************
There are three types of assessments for ORAs: self assessment, AI
assessment, and peer assessment.
- Self assessment allows students to answer a question, and then assess
their response according to the rubric you created for the question.
- In AI assessment, a computer algorithm learns how to grade according
to the rubric from 100 or more instructor-graded responses, and
attempts to grade the rest of the student responses in the same way.
- Peer assessment allows students to score each other and provide
feedback, again using the same rubric.
.. warning:: In peer assessments, the **due date** that you set for the subsection that contains the ORA problem is the date by which students must not only submit their own responses, but finish grading the required number of peer responses.
You can use one or more of these assessments in any problem. You can
also set thresholds within the problem for each assessment, so that a
response with a low score in one assessment does not move on to the next
assessment.
.. _ORA Effective Questions:
******************************
Effective Questions
******************************
When you write your question, we recommend that you specify an
approximate number of words or sentences that a student's response has
to have in the body of your question. You may also want to provide
information about how to use the LMS. If you require students to upload
a file as a response, you can provide specific instructions about how to
upload and submit their files. You can let students know what to expect
after they submit responses. You can also mention the number of times
that a student will be able to submit a response for the problem.
.. _ORA Rubrics:
***************
Rubrics
***************
The same rubric is used for all three ORA types, and it can include
anything that you want it to include.
In Studio, rubrics are arranged by *categories*. Each category has two
or more *options*, and each option has a point value.
Options must be listed in ascending order starting at 0 points. For
example, in a category with three options, the first option is worth 0
points, the second is worth 1 point, and the third is worth 2 points.
The person or algorithm that grades the problem selects one value for
each category.
Different categories in the same problem can have different numbers of
options.
.. _ORA Create an ORA Problem:
*********************************************
Create an Open Response Assessment Problem
*********************************************
.. warning:: Open response assessments are still in beta. To enable open response assessments in your course, you'll need to work with your edX program manager.
Creating an open response assessment is a multi-step process.
* :ref:`ORA Step 1`
* :ref:`ORA Step 2`
* :ref:`ORA Step 3`
* :ref:`ORA Step 4`
* :ref:`ORA Step 5`
* :ref:`ORA Step 6`
* :ref:`ORA Step 7`
* :ref:`ORA Step 8`
* :ref:`ORA Step 9`
Each of these steps is described in detail below.
.. warning:: Problems can occur when you move your course from edge.edx.org to edx.org, or vice versa, if your course has the same URL in both places. To work around this problem, make sure that the URLs are different by specifying a different university or course number when you create each course. For example, if your university is edX and your course number is edX101, you can specify the course number as **edx_101** (note the underscore) on Edge and **edX101** on edX.
.. _ORA Step 1:
================================
Step 1. Create the ORA Component
================================
#. Modify your course's advanced settings to allow open response assessments. For more information about how to do this, contact your edX program manager.
#. In Studio, open the unit where you want to create the ORA.
#. Under **Add New Component**, click **Advanced**, and then click
**Open Response Assessment**.
#. In the problem component that appears, click **Edit**, and then click
**OK** in the dialog box that appears.
#. The component editor opens. The component editor contains a sample
question ("prompt"), rubric, and the code for the assessment type and
scoring. You'll replace this sample content with the content for your
problem.
.. image:: /Images/ORAComponentEditor.png
:alt: Image of component editor with prompt, rubric, and assessment type highlighted
.. _ORA Step 2:
========================
Step 2. Add the Question
========================
#. In the component editor, locate the [prompt] tags.
.. image:: /Images/ORA_Prompt.png
:alt: Image of component editor with prompt text highlighted
2. Replace the sample text between the **[prompt]** tags with the text of
your question. When you replace the sample text, make sure you follow
these guidelines to avoid common formatting mistakes.
- Leave the **[prompt]** tags in place.
- Enclose all text in HTML tags.
.. _ORA Step 3:
========================
Step 3. Add the Rubric
========================
.. note:: After you release your problem to students in your live course, make sure
you don't make any changes to the rubric that affect scoring, such as adding or removing an option
in a category. Changing the rubric can cause errors in live courses.*
#. In the component editor, locate the [rubric] tags. (The sample rubric
is long, so you'll have to scroll down to locate the second tag.)
.. image:: /Images/ORA_Rubric.png
:alt: Image of component editor with rubric text highlighted
2. Replace the sample rubric with the text of your rubric. Make sure to
do the following.
- Include the beginning and ending [rubric] tags.
- Precede the categories with a plus (+) sign.
- Precede the options with a minus (-) sign.
- List the option that scores zero points first, followed by the option that scores one point, and so on.
For example, your rubric might resemble the following rubric.
::
[rubric]
+ Writing Applications
- The essay loses focus, has little information or supporting details, and the organization makes it difficult to follow.
- The essay presents a mostly unified theme, includes sufficient information to convey the theme, and is generally organized well.
+ Language Conventions
- The essay demonstrates a reasonable command of proper spelling and grammar.
- The essay demonstrates superior command of proper spelling and grammar.
[rubric]
.. _ORA Step 4:
============================================
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.
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
the scoring thresholds for each assessment. The code uses the following format.
::
[tasks]
(Type 1), ({min-max}Type 2), ({min-max}Type 3)
[tasks]
- The **[tasks]** tags surround the code.
- **Type 1**, **Type 2**, and **Type 3** are the names of the types of
assessments. Assessments run in the order in which they're listed.
- **min** is the point value the response must receive in the previous
assessment to move to this assessment. Note that you do not define a
scoring threshold for the first assessment, because there is no
required previous assessment.
- **max** is the maximum point value for the assessment. The maximum
score is the second number in the pair of numbers for each assessment
after the first assessment.
For example, a problem might contain the following code.
::
[tasks]
(Self), ({5-7}Peer), ({4-7}AI)
[tasks]
The problem that includes this code has the following characteristics.
- The problem has a self assessment, a peer assessment, and then an AI
assessment.
- The maximum score for the problem is 7.
- To advance to the peer assessment, the response must have a self
assessment score of 5 or greater.
- 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 Assessment Type and Scoring
************************************
#. In the component editor, locate the [tasks] tags.
.. image:: /Images/ORA_Tasks.png
:alt: Image of component editor with tasks tags and text highlighted
#. Replace the sample code with the code for your problem.
.. _ORA Step 5:
============================
Step 5. Set the Problem Name
============================
.. note:: After you release your problem to students in your live course, make sure
you don't change the name of the problem. Changing the display name when the problem
is live can cause a loss of student data.
You can change the display name of a problem while you're still testing the problem.
However, note that all the test responses and scores associated with the problem
will be lost when you change the name. To update the problem name on the
instructor dashboard, submit a new test response to the problem.
The name of the problem appears as a heading above the problem in the
courseware. It also appears in the list of problems on the **Staff
Grading** page.
.. image:: /Images/ORA_ProblemName1.png
:alt: Image of Staff Grading page with a problem name circled
To change the name:
#. In the upper-right corner of the component editor, click
**Settings**.
#. In the **Display Name** field, replace **Open Response Assessment**
with the name of your problem.
.. _ORA Step 6:
=========================
Step 6. Set Other Options
=========================
If you want to change the problem settings, which include the number of
responses a student has to peer grade and whether students can upload
files as part of their response, click the **Settings** tab, and then
specify the options that you want.
.. image:: /Images/ORA_Settings.png
:alt: Image of component editor with Settings tab selected
Open response assessments include the following settings.
You can add just one peer grading interface for the whole course, or you
can add a separate peer grading interface for each individual problem.
.. warning:: In peer assessments, the **due date** that you set for the subsection that contains the ORA problem is the date by which students must not only submit their own responses, but finish grading the required number of peer responses.
.. _ORA Add a Single PGI:
Add a Single Peer Grading Interface for the Course
.. warning:: In peer assessments, the **due date** that you set for the subsection that contains the ORA problem is the date by which students must not only submit their own responses, but finish grading the required number of peer responses.
#. Go to the **Staff Grading** page.
#. Under **Problem Name**, click the name of the problem that you want.
When the problem opens, the information about the number of responses
that are still available to grade, that have been graded, and that an
instructor is required to grade appears under the problem name. You
can also find out about the AI algorithm's error rate. The error rate
is a calculation of the difference between the scores that AI
algorithm provides and the scores that the instructor provides.
.. image:: /Images/ResponseToGrade.png
3. In the rubric below the response, select the option that best
describes the response.
#. If applicable, add additional feedback.
- You can provide comments for the student in the **Written Feedback** field.
- If you do not feel that you can grade the response (for example,
if you're a member of course staff but you would rather have the
instructor grade the response), you can click **Skip** to skip it.
- If the response contains inappropriate content, you can select the
**Flag as inappropriate content for later review** check box.
Flagged content is accessed on the **Staff Grading** page. If
necessary, course staff can ban a student from peer grading.
.. image:: /Images/AdditionalFeedback.png
5. When you are done grading the response, click **Submit**.
When your course is running, another response opens automatically after
you grade the first response, and a message appears at the top of the
page.
.. image:: /Images/FetchingNextSubmission.png
After you've graded all responses for this problem, **No more
submissions to grade** appears on the page.
.. image:: /Images/NoMoreSubmissions.png
Click **Back to problem list** to return to the list of problems. You
can also wait for a few minutes and click **Re-check for submissions**
to see if any other students have submitted responses.
.. note:: After you've graded enough responses for AI assessments to start, the number
of responses in the **Available to grade** column decreases rapidly as
the algorithm grades responses and returns them to your students in just
a few seconds. No student data is lost.
.. note:: When a response opens for you to grade, it leaves the current "grading pool"
that other instructors or students are grading from, which prevents other
instructors or students from grading the response while you are working on
it. If you do not submit a score for this response within 30 minutes,
the response returns to the grading pool (so that it again becomes available
for others to grade), even if you still have the response open on your screen.
If the response returns to the grading pool (because the 30 minutes have passed),
but the response is still open on your screen, you can still submit feedback for
that response. If another instructor or student grades the response after it returns to the
grading pool but before you submit your feedback, the response receives two grades.
If you click your browser's **Back** button to return to the problem list before you
click **Submit** to submit your feedback for a response, the response stays outside
the grading pool until 30 minutes have passed. When the response returns to the
grading pool, you can grade it.
.. _ORA Access Scores:
******************************
Access Scores and Feedback
******************************
=======
Scoring
=======
Scores for open response assessment problems that have more than one assessment type are not cumulative. That is, if a problem has a value of 10 points and it contains both a self assessment and an AI assessment, the total score is out of 10 points rather than 20.
The final score for an open response assessment is the score that the response receives in the last assessment that it undergoes. If a response doesn't score high enough to move to another assessment, the final score is the score that the response receives in the last assessment that it qualifies for.
In peer assessment, the final score is the median of the scores that the response receives from each peer grader.
For example:
A 20-point problem includes self assessment, peer assessment, and AI assessment. To move from self assessment to peer assessment, the response must score 10 points. To move from peer assessment to AI assessment, the response must score 12 points.
* Student A gives himself 9 points in the self assessment. Because the minimum score to move from self assessment to peer assessment is 10, the response cannot continue to peer assessment. Student A's final score is 9 out of 20.
* Student B gives herself 16 points in the self assessment. In the peer assessment, the response receives scores of 14, 11, and 10. Because the median is 11, the response cannot continue to AI assessment. Student B's final score is 11 out of 20.
* Student C gives herself 17 points in the self assessment. In the peer assessment, the response receives scores of 10, 18, and 14. Because the median is 14, the response moves to AI assessment. AI assessment gives the response a score of 16. Student C's final score is 16 out of 20.
Note that if the same 20-point problem changes the assessment order, the student's final score may be different. For example, suppose the assessment order for the above example changes to self assessment, then AI assessment, and then peer assessment. To move from self assessment to AI assessment, the response must score 10 points. To move from AI assessment to peer assessment, the response must score 12 points.
* Student D gives himself 17 points in the self assessment. AI assessment gives the response a score of 16. In the peer assessment, the response receives scores of 10, 18, and 14; the median is 14. Student D's final score is 14 out of 20.
.. note:: Because the assessment order can affect a student's final score, we recommend that you specify peer assessments as the last assessments for ORA problems. If the last assessment is a self assessment, the student can award herself full points for a response, even if the response received low grades from the AI and peer assessments.
================
Accessing Scores
================
You access your scores for your responses to AI and peer assessment problems through the **Open Ended Console** page.
#. From any page in the LMS, click the **Open Ended Panel** tab at the
top of the page.
.. image:: /Images/OpenEndedPanel.png
2. On the **Open Ended Console** page, click **Problems You Have
Submitted**.
.. image:: /Images/ProblemsYouHaveSubmitted.png
3. On the **Open Ended Problems** page, check the **Status** column to
see whether your responses have been graded.
#. When grading for a problem has been finished, click the name of a
problem in the list to see your score for that problem. When you
click the name of the problem, the problem opens in the courseware.
For both AI and peer assessments, the score appears below your response
in an abbreviated version of the rubric. For peer assessments, you can
also see the written feedback that your response received from different
graders.
**Graded AI Assessment**
.. image:: /Images/AI_ScoredResponse.png
**Graded Peer Assessment**
.. image:: /Images/Peer_ScoredResponse.png
If you want to see the full rubric for either an AI or peer assessment,
click **Toggle Full Rubric**.
.. note:: For a peer assessment, if you haven't yet graded enough
problems to see your score, you receive a message that lets you know how
You can create an interactive periodic table of the elements to help your students learn about various elements' properties. In the table below, detailed information about each element appears as the student moves the mouse over the element.
.. image:: /Images/Periodic_Table.png
:alt: Image of the interactive periodic table
.. _Create the Periodic Table:
******************************
Create the Periodic Table Tool
******************************
To create a periodic table, you need the following files:
* Periodic-Table.js
* Periodic-Table.css
* Periodic-Table-Colors.css
* PeriodicTableHTML.txt
To download all of these files in a .zip archive, click http://files.edx.org/PeriodicTableFiles.zip.
To create the periodic table, you need an HTML component.
#. Upload all of the files listed above *except PeriodicTable.txt* to the **Files & Uploads** page in your course.
#. In the unit where you want to create the problem, click **HTML** under **Add New Component**, and then click **HTML**.
#. In the component that appears, click **Edit**.
#. In the component editor, switch to the **HTML** tab.
#. Open the PeriodicTable.txt file in any text editor.
#. Copy all of the text in the PeriodicTable.txt file, and paste it into the HTML component editor. (Note that the PeriodicTableHTML.txt file contains over 6000 lines of code. Paste all of this code into the component editor.)
You can run polls in your course so that your students can share opinions on different questions.
.. image:: /Images/PollExample.png
.. note:: Creating a poll requires you to export your course, edit some of your course's XML files in a text editor, and then re-import your course. We recommend that you create a backup copy of your course before you create the poll. We also recommend that you only edit the files that will contain polls in the text editor if you're very familiar with editing XML.
**************
Terminology
**************
Sections, subsections, units, and components have different names in the **Course Outline** view and in the list of files that you'll see after you export your course and open the .xml files for editing. The following table lists the names of these elements in the **Course Outline** view and in a list of files.
.. list-table::
:widths: 15 15
:header-rows: 0
* - Course Outline View
- File List
* - Section
- Chapter
* - Subsection
- Sequential
* - Unit
- Vertical
* - Component
- Discussion, HTML, problem, or video
For example, when you want to find a specific section in your course, you'll look in the **Chapter** folder when you open the list of files that your course contains. To find a unit, you'll look in the **Vertical** folder.
.. _Create a Poll:
**************
Create a Poll
**************
#. In the unit where you want to create the poll, create components that contain all the content that you want *except* for the poll. Make a note of the 32-digit unit ID that appears in the **Unit Identifier** field under **Unit Location**.
#. Export your course. For information about how to do this, see :ref:`Exporting and Importing a Course`. Save the .tar.gz file that contains your course in a memorable location so that you can find it easily.
#. Locate the .tar.gz file that contains your course, and then unpack the .tar.gz file so that you can see its contents in a list of folders and files.
- To do this on a Windows computer, you'll need to download a third-party program. For more information, see `How to Unpack a tar File in Windows <http://www.haskell.org/haskellwiki/How_to_unpack_a_tar_file_in_Windows>`_, `How to Extract a Gz File <http://www.wikihow.com/Extract-a-Gz-File>`_, `The gzip Home Page <http://www.gzip.org/>`_, or the `Windows <http://www.ofzenandcomputing.com/how-to-open-tar-gz-files/#windows>`_ section of the `How to Open .tar.gz Files <http://www.ofzenandcomputing.com/how-to-open-tar-gz-files/>`_ page.
- For information about how to do this on a Mac, see the `Mac OS X <http://www.ofzenandcomputing.com/how-to-open-tar-gz-files/#mac-os-x>`_ section of the `How to Open .tar.gz Files <http://www.ofzenandcomputing.com/how-to-open-tar-gz-files/>`_ page.
#. In the list of folders and files, open the **Vertical** folder.
.. note:: If your unit is not published, open the **Drafts** folder, and then open the **Vertical** folder in the **Drafts** folder.
#. In the **Vertical** folder, locate the .xml file that has the same name as the unit ID that you noted in step 1, and then open the file in a text editor such as Sublime 2. For example, if the unit ID is e461de7fe2b84ebeabe1a97683360d31, you'll open the e461de7fe2b84ebeabe1a97683360d31.xml file.
The file contains a list of all the components in the unit, together with the URL names of the components. For example, the following file contains an HTML component followed by a Discussion component.
#. Add the following poll code in the location where you want the poll. Change the text of the prompt to the text that you want.
.. code-block:: xml
<poll_questiondisplay_name="Poll Question">
<p>Text of the prompt</p>
<answerid="yes">Yes</answer>
<answerid="no">No</answer>
</poll_question>
In the example above, if you wanted your poll to appear between the HTML component and the Discussion component in the unit, your code would resemble the following.
#. After you add the poll code, save and close the .xml file.
#. Re-package your course as a .tar.gz file.
* For information about how to do this on a Mac, see `How to Create a Tar GZip File from the Command Line <http://osxdaily.com/2012/04/05/create-tar-gzip/>`_.
* For information about how to do this on a Windows computer, see `How to Make a .tar.gz on Windows <http://stackoverflow.com/questions/12774707/how-to-make-a-tar-gz-on-windows>`_.
#. In Studio, re-import your course. You can now review the poll question and answers that you added in Studio.
.. note::
* Although polls render correctly in Studio, you cannot edit them in Studio. You will need to follow the export/import process outlined above to make any edits to your polls.
* A .csv file that contains student responses to the problem is not currently available for polls. However, you can obtain the aggregate data directly in the problem.
*********************
Format description
*********************
The main tag of Poll module input is:
.. code-block:: xml
<poll_question> ... </poll_question>
``poll_question`` can include any number of the following tags:
any xml and ``answer`` tag. All inner xml, except for ``answer`` tags, we call "question".
==================
poll_question tag
==================
Xmodule for creating poll functionality - voting system. The following attributes can
be specified for this tag::
name - Name of xmodule.
[display_name| AUTOGENERATE] - Display name of xmodule. When this attribute is not defined - display name autogenerate with some hash.
[reset | False] - Can reset/revote many time (value = True/False)
============
answer tag
============
Define one of the possible answer for poll module. The following attributes can
be specified for this tag::
id - unique identifier (using to identify the different answers)
.. warning:: This problem type is still a prototype and may not be supported in the future. By default, the ability to create these problems is not enabled in Studio. You must change the advanced settings in your course before you can create problems with LaTeX. Use this problem type with caution.
If you have an problem that is already written in LaTeX, you can use this problem type to easily convert your code into XML. After you paste your code into the LaTeX editor, you'll only need to make a few minor adjustments.
.. note:: If you want to use LaTeX to typeset mathematical expressions
in problems that you haven't yet written, use any of the other problem
templates together with `MathJax <http://www.mathjax.org>`_. For more
information about how to create mathematical expressions in Studio using
MathJax, see *A Brief Introduction to MathJax in Studio*.
.. image:: /Images/ProblemWrittenInLaTeX.png
:alt: Image of a problem written in LaTeX
************************************
Create a Problem Written in LaTeX
************************************
To create a problem written in LaTeX:
#. Enable the policy key in your course.
#. In Studio, click **Settings**, and then click **Advanced Settings**.
#. In the field for the **Enable LaTeX Compiler** policy key, change
**false** to **true**.
#. At the bottom of the page, click **Save Changes**.
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Problem Written in LaTeX**.
#. In the component editor that appears, click **Edit**.
#. In the lower left corner of the component editor, click **Launch
LaTeX Source Compiler**.
#. Replace the example code with your own code. You can also upload a Latex file into the editor from your computer by clicking **Upload** in the bottom right corner.
#. In the lower left corner of the LaTeX source compiler, click **Save &
A problem with an adaptive hint evaluates a student's response, then gives the student feedback or a hint based on that response so that the student is more likely to answer correctly on the next attempt. These problems can be text input problems.
hint = 'If the ball costs 10 cents, and the bat costs one dollar more than the ball, how much does the bat cost? If that is the cost of the bat, how much do the ball and bat cost together?'
elif '.05' in ans:
hint = 'Make sure to enter the number of cents as a whole number.'
if hint:
hint = "<font color='blue'>Hint: {0}</font>".format(hint)
new_cmap.set_hint_and_mode(aid,hint,'always')
</script>
<p>If a bat and a ball cost $1.10 together, and the bat costs $1.00 more than the ball, how much does the ball cost? Enter your answer in cents, and include only the number (that is, do not include a $ or a ¢ sign).</p>
<p>
<customresponse cfn="test_str" expect="5">
<textline correct_answer="5" label="How much does the ball cost?"/>
The Protex protein builder asks students to create specified protein shapes by stringing together amino acids. In the example below, the goal protein shape is a simple line.
.. image:: /Images/ProteinBuilder.png
:alt: Image of the protein builder
.. _Create the Protein Builder:
********************************
Create the Protein Builder Tool
********************************
To create the protein builder:
#. Under **Add New Component**, click **Problem**, and then click **Blank Advanced Problem**.
#. In the component that appears, click **Edit**.
#. In the component editor, paste the Problem component code from below.
#. Make any changes that you want, and then click **Save**.
.. _Protein Builder Code:
*************************
Protein Builder Tool Code
*************************
.. code-block:: xml
<problem>
<p>The protein builder allows you string together the building blocks of proteins, amino acids, and see how that string will form into a structure. You are presented with a goal protein shape, and your task is to try to re-create it. In the example below, the shape that you are asked to form is a simple line.</p>
<p>Be sure to click "Fold" to fold your protein before you click "Check".</p>
<script type="loncapa/python">
def protex_grader(expect,ans):
import json
ans=json.loads(ans)
if "ERROR" in ans["protex_answer"]:
raise ValueError("Protex did not understand your answer. Try folding the protein.")
Many protein sequences, such as the following example, fold to a straight line.You can play around with the protein builder if you're curious.
</p>
<ul>
<li>
Stick: RRRRRRR
</li>
</ul>
</solution>
</problem>
In this code:
* **width** and **height** specify the dimensions of the application, in pixels.
* **target_shape** lists the amino acids that, combined in the order specified, create the shape you've asked students to create. The list can only include the following letters, which correspond to the one-letter code for each amino acid. (This list appears in the upper-left corner of the protein builder.)
In text input problems, students enter text into a response field. The response can include numbers, letters, and special characters such as punctuation marks. Because the text that the student enters must match the instructor's specified answer exactly, including spelling and punctuation, we recommend that you specify more than one attempt for text input problems to allow for typographical errors.
.. image:: /Images/TextInputExample.png
:alt: Image of a text input probem
****************************
Create a Text Input Problem
****************************
You can create text input problems in the Simple Editor or in the Advanced Editor.
.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<).
==============
Simple Editor
==============
To create a text input problem in the Simple Editor, follow these steps.
#. Under **Add New Component**, click **Problem**.
#. In the **Select Problem Component Type** screen, click **Text Input**
on the **Common Problem Types** tab.
#. In the new Problem component that appears, click **Edit**.
#. Replace the default text with the text for your problem.
#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
#. Select the text of the answer, and then click the text input button.
.. image:: /Images/ProbCompButton_TextInput.png
:alt: Image of the text input button
When you do this, an equal sign appears next to the answer.
#. In the component editor, select the text of the explanation, and then click the
explanation button to add explanation tags around the text.
.. image:: /Images/ProbCompButton_Explanation.png
:alt: Image of the explanation button
#. On the **Settings** tab, specify the settings that you want.
#. Click **Save**.
For the example problem above, the text in the Problem component is the
following.
::
>>What is the technical term that refers to the fact that, when enough people
sleep under a bednet, the disease may altogether disappear?<<
= herd immunity
[explanation]
The correct answer is herd immunity. As more and more people use bednets,
the risk of malaria begins to fall for everyone – users and non-users alike.
This can fall to such a low probability that malaria is effectively eradicated
from the group (even when the group does not have 100% bednet coverage).
[explanation]
=====================
Advanced Editor
=====================
To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
.. code-block:: xml
<problem>
<p>
<em>This problem is adapted from an exercise that first appeared in MITx's 14.73x The Challenges of Global Poverty course, spring 2013.</em>
</p>
<p>What is the technical term that refers to the fact that, when enough people sleep under a bednet, the disease may altogether disappear?</p>
<textline size="20" label="What is the technical term that refers to the fact that, when enough people sleep under a bednet, the disease may altogether disappear?"/>
In contact immunity, a vaccinated individual passes along his immunity to another person through contact with feces or bodily fluids. The answer to the question above refers to the form of immunity that occurs when so many members of a population are protected, an infectious disease is unlikely to spread to the unprotected population.
Although a firewall provides protection for a population, the term "firewall" is used more in computing and technology than in epidemiology.
<endouttext />
</hintpart >
</hintgroup>
</stringresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>The correct answer is <b>herd immunity</b>. As more and more people use bednets, the risk of malaria begins to fall for everyone – users and non-users alike. This can fall to such a low probability that malaria is effectively eradicated from the group (even when the group does not have 100% bednet coverage).</p>
</div>
</solution>
</problem>
******************************************
Multiple Responses in Text Input Problems
******************************************
You can specify more than one correct response for text input problems.
For example, instead of requiring students to enter exactly "Dr. Martin Luther
King, Junior," you can allow answers of "Martin Luther King," "Doctor Martin
Luther King," and other variations. To do this, you can use the Simple Editor or the Advanced Editor.
==============
Simple Editor
==============
To specify additional correct responses in the Simple Editor, include "or=" (without the quotation marks) before each additional correct response.
::
>>What African-American led the United States civil rights movement during the 1960s?<<
= Dr. Martin Luther King, Jr.
or= Dr. Martin Luther King, Junior
or= Martin Luther King, Jr.
or= Martin Luther King
=====================
Advanced Editor
=====================
To specify additional correct responses in the Advanced Editor, add an ``<additional_answer>`` for each correct response inside the opening and closing ``<stringresponse>`` tags.
.. code-block:: xml
<problem>
<p>What African-American led the United States civil rights movement during the 1960s?</p>
<stringresponse answer="Dr. Martin Luther King, Jr." type="ci" >
<additional_answer>Dr. Martin Luther King, Junior</additional_answer>
You can provide hints that appear when students enter common incorrect answers in text input problems. You can also set a text input problem to allow a regular expression as an answer. To do this, you'll have to modify the problem's XML in the Advanced Editor.
The regular expression that the student enters must contain the part of the answer that the instructor specifies. For example, if an instructor has specified ``<answer="example answer" type="regexp">``, correct answers include ``example answered``, ``two example answers``, or even ``==example answer==``, but not ``examples`` or ``example anser``.
You can add ``regexp`` to the value of the ``type`` attribute, for example: ``type="ci regexp"`` or ``type="regexp"`` or ``type="regexp cs"``. In this case, any answer or hint are treated as regular expressions.
<startouttext />Text of hint for incorrect answer C<endouttext />
</hintpart >
</hintgroup>
</stringresponse>
<solution>
<div class="detailed-solution">
<p>Explanation or Solution Header</p>
<p>Explanation or solution text</p>
</div>
</solution>
</problem>
=======
Tags
=======
* ``<stringresponse>``: Indicates that the problem is a text input problem.
* ``<textline>``: Child of ``<stringresponse>``. Creates a response field in the LMS where the student enters a response.
* ``<additional_answer>`` (optional): Specifies an additional correct answer for the problem. A problem can contain an unlimited number of additional answers.
* ``<hintgroup>`` (optional): Indicates that the instructor has provided hints for certain common incorrect answers.
* ``<stringhint />`` (optional): Child of ``<hintgroup>``. Specifies the text of the incorrect answer to provide the hint for. Contains answer, type, name.
* ``<hintpart>``: Contains the name from ``<stringhint>``. Associates the incorrect answer with the hint text for that incorrect answer.
* ``<startouttext />``: Indicates the beginning of the text of the hint.
* ``<endouttext />``: Indicates the end of the text of the hint.
**Tag:** ``<stringresponse>``
Indicates that the problem is a text input problem.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - answer (required)
- Specifies the correct answer. To designate the answer as a regular expression, add "regexp" to the **type** attribute. If you do not add "regexp" to the **type** attribute, the student's answer must match the value in this attribute exactly.
* - type (optional)
- Can specify whether the problem is case sensitive and allows regular expressions. If the ``<stringresponse>`` tag includes ``type="ci"``, the problem is not case sensitive. If the tag includes ``type="cs"``, the problem is case sensitive. If the tag includes ``type="regexp"``, the problem allows regular expressions. A **type** attribute in a ``<stringresponse>`` tag can also combine these values. For example, ``<stringresponse type="regexp cs">`` specifies that the prolem allows regular expressions and is case sensitive.
Children
* ``<textline />`` (required)
* ``<additional_answer>`` (optional)
* ``<hintgroup>`` (optional)
**Tag:** ``<textline />``
Creates a response field in the LMS where the student enters a response.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - label (required)
- Contains the text of the problem.
* - size (optional)
- Specifies the size, in characters, of the response field in the LMS.
* - hidden (optional)
- If set to "true", students cannot see the response field.
* - correct_answer (optional)
- Lists the correct answer to the problem.
Children
(none)
**Tag:** ``<additional_answer>``
Specifies an additional correct answer for the problem. A problem can contain an unlimited number of additional answers.
Attributes
(none)
Children
(none)
**Tag:** ``<hintgroup>``
Indicates that the instructor has provided hints for certain common incorrect answers.
Attributes
(none)
Children
* ``<stringhint>`` (required)
**Tag:** ``<stringhint>``
Specifies a common incorrect answer to the problem.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - answer (required)
- The text of the incorrect answer.
* - name (required)
- The name of the hint that you want to provide.
* - type
- Specifies whether the text of the specified incorrect answer is case sensitive. Can be set to "cs" (case sensitive) or "ci" (case insensitive).
Children
* ``<hintpart>`` (required)
**Tag:** ``<hintpart>``
Associates a common incorrect answer with the hint for that incorrect answer.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - on
- The name of the hint. This must be the same as the **name** attribute of the ``<stringhint>`` tag. (The ``<stringhint>`` tag provides the name of the hint and the incorrect answer to associate with the hint. The ``<hintpart>`` tag contains the name of the hint and the text of the hint.)
Children
* ``<startouttext />`` (required)
* ``<endouttext />`` (required)
**Tags:** ``<startouttext />`` and ``<endouttext>``
The VitalSource Bookshelf e-reader tool provides your students with easy access to electronic books. In addition to reading text, students can quickly browse and search content (including figures and notes), use multiple highlighters, create and manage notes, and copy notes into external documents.
.. image:: /Images/VitalSource.png
:width: 500
:alt: VitalSource e-book with highlighted note
For more information about Vital Source and its features, visit the `VitalSource Bookshelf support site <https://support.vitalsource.com>`_.
.. note:: Before you add a VitalSource Bookshelf e-reader to your course, you must work with Vital Source to make sure the content you need already exists in the Vital Source inventory. If the content is not yet available, Vital Source works with the publisher of the e-book to create an e-book that meets the VitalSource Bookshelf specifications. **This process can take up to four months.** The following steps assume that the e-book you want is already part of the Vital Source inventory.
**************************
Add a VitalSource E-Reader
**************************
Adding a VitalSource Bookshelf e-reader has several steps:
#. :ref:`Obtain specific information<VS Obtain VS Info>` about your e-book from Vital Source.
#. :ref:`Modify the course's advanced settings<VS Modify Advanced Settings>` to allow you to create a Vital Source Learning Tools Interoperability (LTI) component.
#. :ref:`Add the VitalSource Bookshelf e-reader<VS Add VS EReader>` to a unit.
.. _VS Obtain VS Info:
===========================================
Step 1. Obtain Information from VitalSource
===========================================
To create a VitalSource Bookshelf e-reader, you need the following information from Vital Source:
- The **LTI Passports** policy key. This policy key enables you to create an
LTI component for the VitalSource Bookshelf e-reader. For more information
about the **LTI Passports** policy key, see :ref:`LTI Information` in
:ref:`LTI Component`.
- The Vital Souce Book ID (VBID) for your e-book. This is a specific code that Vital Source creates for the book when Vital Source adds the e-book to its inventory.
To obtain this information, your course team selects a member point person
(MPP) to work with Vital Source. Vital Source delivers the **LTI Passports**
policy key and VBID to the MPP.
.. _VS Modify Advanced Settings:
=============================================
Step 1. Modify the Course's Advanced Settings
=============================================
In this step, you'll modify the course's advanced settings to allow you to
create an LTI component and add the **LTI Passports** policy key for Vital
Source.
#. In Studio, click the **Settings** menu, and then click **Advanced Settings**.
#. In the field for the **Advanced Module List** policy key, place your cursor
between the brackets.
#. Enter ``“lti”``. Make sure to include the quotation marks, but not the
period.
.. image:: /Images/LTIPolicyKey.png
:alt: Image of the Advanced Module List key in the Advanced Settings page, with the LTI value added
.. note:: If the value field already contains text, place your cursor directly after the closing quotation mark for the final item, and then enter a comma followed by ``“lti”`` (make sure that you include the quotation marks). For example, the value for **Advanced Module List** may resemble the following:
``["value_1","lti"]``
4. Scroll down to the **LTI Passports** policy key.
#. In the policy value field, place your cursor between the brackets, and then
enter the value for the **LTI Passports** policy key that you obtained from
Vital Source. Make sure to surround the value with quotation marks.
For example, the value in this field may resemble the following:
To add the VitalSource Bookshelf e-reader to a unit, you'll create an LTI component, and then configure several settings in the component.
#. In the unit where you want to create the problem, click **Advanced** under **Add New Component**, and then click **LTI**.
#. In the component that appears, click **Edit**.
#. In the **Display Name** field, type the name of your e-book. This name appears at the top of the component and in the course ribbon at the top of the page in the courseware.
#. Next to **Custom Parameters**, click **Add**.
#. In the field that appears, enter the following (where ``VitalSourceCode`` is the VBID for the e-book):
``vbid=VitalSourceCode``
If you want to experiment with an e-book in your course, but you don't yet have a VBID for your e-book, you can enter ``vbid=L-999-70103`` to create a link to *Pride and Prejudice*.
#. If you want your e-book to open to a specific page, click **Add** next to **Custom Parameters** again, and then add the following (where ``35`` is the page of the e-book):
``book_location=page/35``
#. In the **Launch URL** field, enter the following (make sure to use ``https`` instead of ``http``):
``https://bc.vitalsource.com/books/book``
8. In the **LTI ID** field, enter the following:
``vital_source``
9. Click **Save**.
**************************
Information for Students
**************************
Each institution's Vital Source account manager will train the MPP on the VitalSource Bookshelf e-reader and provide supporting documentation as part of the onboarding process. However, to improve the learner experience, we recommend that you provide the following explanation of the e-reader to your students:
Digital textbooks in the VitalSource Bookshelf e-reader offer simple, user-friendly navigation and instant, intuitive access to content. You'll most often use several VitalSource Bookshelf e-reader features during the course:
* Browse content, figures, and notes and filter search results.
* Use multiple highlighters.
* Create and manage notes.
* Copy and paste notes into external documents.
For more information about how to use these features, visit the `VitalSource Bookshelf support site <https://support.vitalsource.com>`_.
You may want to present information to your students as an image. If your image is very large or very detailed, students may not be able to see all the information in the image. You can use the zooming image tool to enlarge areas of your image as the student moves the mouse over the image, as in the example below.
.. image:: /Images/Zooming_Image.png
:alt: Example zooming image tool showing a chemistry exercise
***********************************
Components of a Zooming Image Tool
***********************************
To create a zooming image tool, you need the following files.
* The image that you want students to see when they access the unit.
* The image that appears in the magnified area when a student clicks the regular image. This image may be larger than the regular image.
* The **jquery.loupeAndLightbox.js** JavaScript file. Every zooming image tool uses this JavaScript file, and you won't make any changes to it. `To download this file, right-click here <http://files.edx.org/jquery.loupeAndLightbox.js>`_, and then click **Save Link As** to save the file on your computer.
****************************
Create a Zooming Image Tool
****************************
#. Upload your regular-sized image file, your small image file, and the **jquery.loupeAndLightbox.js** file to the **Files & Uploads** page. For more information about how to do this, see :ref:`Add Files to a Course`.
#. Under **Add New Component**, click **html**, and then click **Zooming Image**.
#. In the new component that appears, click **Edit**.
#. In the component editor, replace the default problem text with your own text.
#. Switch to the **HTML** tab.
#. Replace the following placeholders with your own content.
- Replace the following file name and path with the name and path of the image that you want to appear magnified when the user hovers over the regular image.
Because you uploaded the **jquery.loupeAndLightbox.js** file to the **Files & Uploads** page, your file name and path is **/static/jquery.loupeAndLightbox.js**.
- (Optional) If you want the magnified area to be larger or smaller, change the **width** and **height** values from 350 to larger or smaller numbers. For example, you can change both numbers to 450. Or, if you want a horizontal oval instead of a circle, you can change the **width** value to a number such as 500 and the **height** value to a number such as 150.
The HTML in your zooming image tool may resemble the following.
