Skip to content

E
edx-platform
Commit dfd00a02 by Sylvia Pearce
Options

Migrate exercises and tools to shared folder

parent 0735141a
Showing with 218 additions and 2614 deletions
docs/en_us/course_authors/source/exercises_tools/annotation.rst
.. _Annotation:
###################
Annotation Problem
###################
.. note:: This version of the annotation problem type is a provisional feature. Support for this feature is limited.
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>
<option choice="partially-correct">PLACEHOLDER: Partially correct answer
(to make this option a correct or partially correct answer,
change choice="partially-correct" to choice="correct" or choice="incorrect")
</option>
</options>
</annotationinput>
</annotationresponse>
<solution>
<p>PLACEHOLDER: Detailed explanation of solution</p>
</solution>
</problem>
#. Click **Save**.
.. include:: ../../../shared/exercises_tools/annotation.rst
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/checkbox.rst
.. _Checkbox:
.. include:: ../../../shared/exercises_tools/checkbox.rst
##################
Checkbox Problem
##################
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>
</div>
</solution>
</problem>
.. _Checkbox Problem XML:
****************************
Checkbox Problem XML
****************************
============
Template
============
.. code-block:: xml
<problem>
<p>Question text</p>
<choiceresponse>
<checkboxgroup direction="vertical" label="label text">
<choice correct="false"><text>Answer option 1 (incorrect)</text></choice>
<choice correct="true"><text>Answer option 2 (correct)</text></choice>
</checkboxgroup>
</choiceresponse>
<solution>
<div class="detailed-solution">
<p>Solution or Explanation Heading</p>
<p>Solution or explanation text</p>
</div>
</solution>
</problem>
======
Tags
======
* ``<choiceresponse>`` (required): Specifies that the problem contains options for students to choose from.
* ``<checkboxgroup>`` (required): Specifies that the problem is a checkbox problem.
* ``<choice>`` (required): Designates an answer option.
**Tag:** ``<choiceresponse>``
Specifies that the problem contains options for students to choose from.
Attributes
(none)
Children
* ``<checkboxgroup>``
**Tag:** ``<checkboxgroup>``
Specifies that the problem is a checkbox problem.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - direction (optional)
- Specifies the orientation of the list of answers. The default is vertical.
* - label (required)
- Specifies the name of the response field.
Children
* ``<choice>``
**Tag:** ``<choice>``
Designates an answer option.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - true (at least one required)
- Indicates a correct answer. For checkbox problems, one or more ``<choice>`` tags can contain a correct answer.
* - false (at least one required)
- Indicates an incorrect answer.
Children
(none)
docs/en_us/course_authors/source/exercises_tools/chemical_equation.rst
.. _Chemical Equation:
.. include:: ../../../shared/exercises_tools/chemical_equation.rst
################################
Chemical Equation Problem
################################
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>
\( \text{H}_2\text{SO}_4 \longrightarrow \text { H}^+ + \text{ HSO}_4^-\)
<customresponse>
<chemicalequationinput size="50" label="Enter the chemical equation"/>
<answer type="loncapa/python">
if chemcalc.chemical_equations_equal(submission[0], 'H2SO4 -> H^+ + HSO4^-'):
correct = ['correct']
else:
correct = ['incorrect']
</answer>
</customresponse>
<p>Some tips:</p>
<ul>
<li>Use real element symbols.</li>
<li>Create subscripts by using plain text.</li>
<li>Create superscripts by using a caret (^).</li>
<li>Create the reaction arrow (\(\longrightarrow\)) by using "->".</li>
</ul>
<endouttext/>
<solution>
<div class="detailed-solution">
<p>Solution</p>
<p>To create this equation, enter the following:</p>
<p>H2SO4 -> H^+ + HSO4^-</p>
</div>
</solution>
</problem>
.. _Chemical Equation Problem XML:
************************************
Chemical Equation Problem XML
************************************
============
Template
============
.. code-block:: xml
<problem>
<startouttext/>
<p>Problem text</p>
<customresponse>
<chemicalequationinput size="NUMBER" label="LABEL TEXT"/>
<answer type="loncapa/python">
if chemcalc.chemical_equations_equal(submission[0], 'TEXT REPRESENTING CHEMICAL EQUATION'):
correct = ['correct']
else:
correct = ['incorrect']
</answer>
</customresponse>
<endouttext/>
<solution>
<div class="detailed-solution">
<p>Solution or Explanation Header</p>
<p>Solution or explanation text</p>
</div>
</solution>
</problem>
======
Tags
======
* ``<customresponse>``: Indicates that this problem has a custom response.
* ``<chemicalequationinput>``: Specifies that the answer to this problem is a chemical equation.
* ``<answer type=loncapa/python>``: Contains the Python script that grades the problem.
**Tag:** ``<customresponse>``
Indicates that this problem has a custom response. The ``<customresponse>`` tags must surround the ``<chemicalequation>`` tags.
Attributes
(none)
Children
* ``<chemicalequationinput>``
* ``<answer>``
**Tag:** ``<chemicalequationinput>``
Indicates that the answer to this problem is a chemical equation and creates a response field where the student enters an answer.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - size
- Specifies the size of the response field, in characters.
* - label (required)
- Contains the text of the principal question in the problem.
Children
(none)
**Tag:** ``<answer>``
Contains the Python script that grades the problem.
Attributes
.. list-table::
:widths: 20 80
* - Attribute
- Description
* - type (required)
- Must be "loncapa/python".
Children
(none)
docs/en_us/course_authors/source/exercises_tools/circuit_schematic_builder.rst
.. _Circuit Schematic Builder:
.. include:: ../../../shared/exercises_tools/circuit_schematic_builder.rst
##################################
Circuit Schematic Builder 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/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>
<schematicresponse>
<center>
<schematic height="500" width="600" parts="g,r" analyses="dc"
initial_value="[["v",[168,144,0],{"value":"dc(1)","_json_":0},["1","0"]],["r",[296,120,0],{"r":"1","_json_":1},["1","output"]],["L",[296,168,3],{"label":"output","_json_":2},["output"]],["w",[296,216,168,216]],["w",[168,216,168,192]],["w",[168,144,168,120]],["w",[168,120,296,120]],["g",[168,216,0],{"_json_":7},["0"]],["view",-67.49999999999994,-78.49999999999994,1.6000000000000003,"50","10","1G",null,"100","1","1000"]]"
/>
</center>
<answer type="loncapa/python">
dc_value = "dc analysis not found"
for response in submission[0]:
if response[0] == 'dc':
for node in response[1:]:
dc_value = node['output']
if dc_value == .5:
correct = ['correct']
else:
correct = ['incorrect']
</answer>
</schematicresponse>
<schematicresponse>
<p>Make a high pass filter.</p>
<center>
<schematic height="500" width="600" parts="g,r,s,c" analyses="ac"
submit_analyses="{"ac":[["NodeA",1,9]]}"
initial_value="[["v",[160,152,0],{"name":"v1","value":"sin(0,1,1,0,0)","_json_":0},["1","0"]],["w",[160,200,240,200]],["g",[160,200,0],{"_json_":2},["0"]],["L",[240,152,3],{"label":"NodeA","_json_":3},["NodeA"]],["s",[240,152,0],{"color":"cyan","offset":"0","_json_":4},["NodeA"]],["view",64.55878906250004,54.114697265625054,2.5000000000000004,"50","10","1G",null,"100","1","1000"]]"/>
</center>
<answer type="loncapa/python">
ac_values = None
for response in submission[0]:
if response[0] == 'ac':
for node in response[1:]:
ac_values = node['NodeA']
print "the ac analysis value:", ac_values
if ac_values == None:
correct = ['incorrect']
elif ac_values[0][1] < ac_values[1][1]:
correct = ['correct']
else:
correct = ['incorrect']
</answer>
</schematicresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</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><img src="/c4x/edX/edX101/asset/images_voltage_divider.png"/></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>
<p><img src="/c4x/edX/edX101/asset/images_high_pass_filter.png"/></p>
</div>
</solution>
</problem>
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/conditional_module.rst
.. _Conditional Module:
####################
Conditional Module
####################
********************
Format description
********************
The main tag of conditional module input is:
.. code-block:: xml
<conditional> ... </conditional>
``conditional`` can include any number of any xmodule tags (``html``, ``video``, ``poll``, etc.) or ``show`` tags.
================
conditional tag
================
The main container for a single instance of a conditional module. The following attributes can
be specified for this tag:
.. code-block:: xml
sources - location id of required modules, separated by ';'
[message | ""] - message for case, where one or more are not passed. Here you can use variable {link}, which generate link to required module.
[submitted] - map to `is_submitted` module method.
(pressing RESET button makes this function to return False.)
[correct] - map to `is_correct` module method
[attempted] - map to `is_attempted` module method
[poll_answer] - map to `poll_answer` module attribute
[voted] - map to `voted` module attribute
========
show tag
========
Symlink to some set of xmodules. The following attributes can
be specified for this tag:
.. code-block:: xml
sources - location id of modules, separated by ';'
*********
Example
*********
========================================
Examples of conditional depends on poll
========================================
.. code-block:: xml
<conditional sources="i4x://MITx/0.000x/poll_question/first_real_poll_seq_with_reset" poll_answer="man"
message="{link} must be answered for this to become visible.">
<html>
<h2>You see this because your vote value for "First question" was "man"</h2>
</html>
</conditional>
========================================================
Examples of conditional depends on poll (use <show> tag)
========================================================
.. code-block:: xml
<conditional sources="i4x://MITx/0.000x/poll_question/first_real_poll_seq_with_reset" poll_answer="man"
message="{link} must be answered for this to become visible.">
<html>
<show sources="i4x://MITx/0.000x/problem/test_1; i4x://MITx/0.000x/Video/Avi_resources; i4x://MITx/0.000x/problem/test_1"/>
</html>
</conditional>
================================================
Examples of conditional depends on problem
================================================
.. code-block:: xml
<conditional sources="i4x://MITx/0.000x/problem/Conditional:lec27_Q1" attempted="True">
<html display_name="HTML for attempted problem">You see this, cause "lec27_Q1" is attempted.</html>
</conditional>
<conditional sources="i4x://MITx/0.000x/problem/Conditional:lec27_Q1" attempted="False">
<html display_name="HTML for not attempted problem">You see this because "lec27_Q1" is not attempted.</html>
</conditional>
.. include:: ../../../shared/exercises_tools/conditional_module.rst
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/dropdown.rst
.. _Dropdown:
.. include:: ../../../shared/exercises_tools/dropdown.rst
#####################
Dropdown Problem
#####################
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
.. note:: Answers in dropdown problems cannot contain greater than signs or less than signs, also known as angle bracket characters (<>). If answer options for your problem must contain angle brackets, use the :ref:`multiple choice<Multiple Choice>` problem type.
********************************
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.
.. note:: Answers in dropdown problems cannot contain greater than signs or less than signs, also known as angle bracket characters (<>). If answer options for your problem must contain angle brackets, use the :ref:`multiple choice<Multiple Choice>` problem type.
#. 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 &amp; Public Health Research course, fall 2012.</em>
</p>
<p>What type of data are the following?</p>
<p>Age:</p>
<optionresponse>
<optioninput options="('Nominal','Discrete','Continuous')" correct="Continuous" label="Age"/>
</optionresponse>
<p>Age, rounded to the nearest year:</p>
<optionresponse>
<optioninput options="('Nominal','Discrete','Continuous')" correct="Discrete" label="Age, rounded to the nearest year"/>
</optionresponse>
<p>Life stage - infant, child, and adult:</p>
<optionresponse>
<optioninput options="('Nominal','Discrete','Continuous')" correct="Nominal" label="Life stage"/>
</optionresponse>
</problem>
.. _Dropdown Problem XML:
************************
Dropdown Problem XML
************************
========
Template
========
.. code-block:: xml
<problem>
<p>
Problem text</p>
<optionresponse>
<optioninput options="('Option 1','Option 2','Option 3')" correct="Option 2" label="label text"/>
</optionresponse>
<solution>
<div class="detailed-solution">
<p>Explanation or Solution Header</p>
<p>Explanation or solution text</p>
</div>
</solution>
</problem>
.. code-block:: xml
<problem>
<p>Problem text</p>
<optionresponse>
options="('A','B')"
correct="A"/>
label="label text"
</optionresponse>
<solution>
<div class="detailed-solution">
<p>Explanation or Solution Header</p>
<p>Explanation or solution text</p>
</div>
</solution>
</problem>
========
Tags
========
* ``<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".
* - label (required)
- Specifies the name of the response field.
Children
(none)
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/full_screen_image.rst
.. _Full Screen Image:
######################
Full Screen Image Tool
######################
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:
**<a href="/static/Image1.jpg" class="modal-content">**
* Replace the value of the <img> element's src attribute with the path to your image. For example:
**<img alt="Full screen image" src="/static/Image1.jpg"/>**
* 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:
.. code-block:: xml
<h2>Sample Image Modal</h2>
<a href="/static/Image1.jpg" class="modal-content">
<img alt="Full screen image" src="/static/Image1.jpg"/>
</a>
.. note:: You can use this same HTML code in any HTML component, not just those components you created as full screen images.
#. Click **Save** to save the HTML component.
\ No newline at end of file
.. include:: ../../../shared/exercises_tools/full_screen_image.rst
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/gene_explorer.rst
.. _Gene Explorer:
.. include:: ../../../shared/exercises_tools/gene_explorer.rst
##################
Gene Explorer Tool
##################
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>
<script type="loncapa/python">
def genex_grader(expect,ans):
if ans=="CORRECT": return True
import json
ans=json.loads(ans)
return ans["genex_answer"]=="CORRECT"
</script>
<customresponse cfn="genex_grader">
<editageneinput width="818" height="1000" dna_sequence="TAAGGCTATAACCGAGATTGATGCCTTGTGCGATAAGGTGTGTCCCCCCCCAAAGTGTCGGATGTCGAGTGCGCGTGCAAAAAAAAACAAAGGCGAGGACCTTAAGAAGGTGTGAGGGGGCGCTCGAT" genex_dna_sequence="TAAGGCTATAACCGAGATTGATGCCTTGTGCGATAAGGTGTGTCCCCCCCCAAAGTGTCGGATGTCGAGTGCGCGTGCAAAAAAAAACAAAGGCGAGGACCTTAAGAAGGTGTGAGGGGGCGCTCGAT" genex_problem_number="2"/>
</customresponse>
</problem>
In this code:
* **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.
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/google_hangouts.rst
.. _Google Instant Hangout:
###########################################
Google Instant Hangout Tool
###########################################
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.
.. _Create the Instant Hangout:
**************************************************
Create the Instant Hangout
**************************************************
To create an instant hangout in your course:
#. 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>
<script src='/static/instanthangouts-0.1.0.js'></script>
<div class='instanthangouts'/>
#. Test the instant hangout in your course.
=============================
Updating the JavaScript File
=============================
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.
.. include:: ../../../shared/exercises_tools/google_hangouts.rst
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/iframe.rst
.. _IFrame:
##################
IFrame Tool
##################
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>`_.
.. include:: ../../../shared/exercises_tools/iframe.rst
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/image_mapped_input.rst
.. _Image Mapped Input:
###########################
Image Mapped Input Problem
###########################
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.
#. Click **Save**.
**Problem Code**:
.. code-block:: xml
<problem>
<p><b>Example Problem</b></p>
<startouttext/>
<p>In the image below, click the triangle.</p>
<endouttext/>
<imageresponse>
<imageinput src="/static/threeshapes.png" width="220" height="150" rectangle="(80,40)-(130,90)" />
</imageresponse>
</problem>
.. _Image Mapped Input Problem XML:
******************************
Image Mapped Input Problem XML
******************************
==========
Template
==========
.. code-block:: xml
<problem>
<startouttext/>
<p>In the image below, click the triangle.</p>
<endouttext/>
<imageresponse>
<imageinput src="IMAGE FILE PATH" width="NUMBER" height="NUMBER" rectangle="(X-AXIS,Y-AXIS)-(X-AXIS,Y-AXIS)" />
</imageresponse>
</problem>
=====
Tags
=====
* ``<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.
Children
(none)
.. include:: ../../../shared/exercises_tools/image_mapped_input.rst
docs/en_us/course_authors/source/exercises_tools/index.rst
.. _Exercises and Tools Index:
.. _Problems and Tools:
############################
Creating Exercises and Tools
############################
#################################
Problems
#################################
Use the chapters in this section to understand how to create exercises and
tools in your course.
The format for edX problems is based on the `LONCAPA XML format`_,
although the two are not quite compatible. In the edX variant, problems are
composed of four types of tags:
For information on how to develop your course content in the Studio Outline
page, see :ref:`Developing Your Course Index`.
* **inputtypes** are similar to XBlocks. They define ways for users to enter
input into the problem.
* **responsetypes** are graders. They define how inputs are mapped to grades.
* **hinters** are used to provide feedback to problems.
* Standard HTML tags are used for formatting.
For information on building specific course component types, see :ref:`Creating
Course Content Index`.
OLX is designed to allow mixing-and-matching of inputtypes,
responsetypes, and hinters. For example, a numerical grader could match
7+-0.1%. It would be okay to use this with any inputtype which output a number,
whether this was a text box, equation input, slider, or multiple choice
question. In practice, this doesn't always work. For example, in the former
case, a multiple choice question would not give an output in a format a
numerical grader could handle.
In addition, in many cases, there is a 1:1 mapping between graders and inputs.
For some types of inputs (especially discipline-specific specialized ones), it
simply does not make sense to have more than one grader.
The most general grader is ``customresponse``. This uses Python code
to evaluate the input. By design, this ought to work with any inputtype,
although there are bugs mixing this with a small number of the newer
inputtypes.
Like LON-CAPA, OLX allows embedding of code to generate parameterized problems.
Unlike LON-CAPA, edX supports Python (and not Perl). Otherwise, the syntax is
approximately identical.
.. toctree::
:maxdepth: 2
create_exercises_and_tools
annotation
checkbox
chemical_equation
circuit_schematic_builder
conditional_module
custom_javascript
custom_python
drag_and_drop
dropdown
external_graders
full_screen_image
gene_explorer
google_hangouts
iframe
image_mapped_input
lti_component
math_expression_input
mathjax
molecule_editor
molecule_viewer
multiple_choice
mult_choice_num_input
multiple_choice
numerical_input
open_response_assessment
periodic_table
poll
problem_with_hint
problem_in_latex
problem_with_hint
protein_builder
symbolic_response
text_input
word_cloud
custom_python
zooming_image
mathjax
\ No newline at end of file
.. include:: ../links.rst
docs/en_us/course_authors/source/exercises_tools/lti_component.rst
.. _LTI Component:
###############
LTI Component
###############
You may have discovered or developed an external learning application
that you want to add to your online course. Or, you may have a digital
copy of your textbook that uses a format other than PDF. You can add
external learning applications or textbooks to Studio by using a
Learning Tools Interoperability (LTI) component. The LTI component is
based on the `IMS Global Learning Tools
Interoperability <http://www.imsglobal.org/LTI/v1p1p1/ltiIMGv1p1p1.html>`_
version 1.1.1 specifications.
You can use an LTI component in several ways.
* 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:
``test_lti_id:b289378-f88d-2929-ctools.school.edu:secret``
``id_21441:b289378-f88d-2929-ctools.school.edu:23746387264``
``book_lti_provider_from_new_york:b289378-f88d-2929-ctools.company.com:yt4984yr8``
************************
Create an LTI Component
************************
Creating an LTI component in your course has three steps.
#. Add LTI to the **Advanced Module List** policy key.
#. Register the LTI provider.
#. Create the LTI component in an individual unit.
======================================================
Step 1. Add LTI to the Advanced Module List Policy Key
======================================================
#. On the **Settings** menu, 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
:width: 500
:alt: Image of the advanced_modules key in the Advanced Settings page, with the LTI value added
.. note:: If the **Advanced Module List** 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).
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.
==========================================
Step 2. Register the External LTI Provider
==========================================
To register the external LTI provider, you’ll add the **LTI Passports** policy
key to the course's advanced settings.
#. On the **Advanced Settings** page, locate the **LTI Passports**
policy key.
#. Place your cursor between the brackets.
#. Enter the **LTI Passports** policy key surrounded by quotation marks.
For example, the text in the **LTI Passports** field may resemble the following.
``"test_lti_id:b289378-f88d-2929-ctools.umich.edu:secret"``
If you have multiple LTI providers, separate the values for each **LTI
Passports** policy key with a comma. Make sure to surround each entry with
quotation marks.
.. code-block:: xml
"test_lti_id:b289378-f88d-2929-ctools.umich.edu:secret",
"id_21441:b289378-f88d-2929-ctools.school.edu:23746387264",
"book_lti_provider_from_new_york:b289378-f88d-2929-ctools.company.com:yt4984yr8"
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`.
.. include:: ../../../shared/exercises_tools/lti_component.rst
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/math_expression_input.rst
.. _Math Expression Input:
####################################
Math Expression Input Problems
####################################
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>
<formularesponse type="ci" samples="R_1,R_2,R_3@1,2,3:3,4,5#10" answer="$VoVi">
<responseparam type="tolerance" default="0.00001"/>
<formulaequationinput size="40" label="Enter the equation"/>
</formularesponse>
<script type="loncapa/python">
VoVi = "(R_1*R_2)/R_3"
</script>
<p>Let <i>x</i> be a variable, and let <i>n</i> be an arbitrary constant. What is the derivative of <i>x<sup>n</sup></i>?</p>
<script type="loncapa/python">
derivative = "n*x^(n-1)"
</script>
<formularesponse type="ci" samples="x,n@1,2:3,4#10" answer="$derivative">
<responseparam type="tolerance" default="0.00001"/>
<formulaequationinput size="40" label="Enter the equation"/>
</formularesponse>
<solution>
<div class="detailed-solution">
<p>Explanation or Solution Header</p>
<p>Explanation or solution text</p>
</div>
</solution>
</problem>
.. _Math Expression Input Problem XML:
**********************************
Math Expression Input Problem XML
**********************************
============
Templates
============
.. code-block:: xml
<problem>
<p>Write an expression for the product of R_1, R_2, and the inverse of R_3.</p>
<formularesponse type="ci" samples="R_1,R_2,R_3@1,2,3:3,4,5#10" answer="R_1*R_2/R_3">
<responseparam type="tolerance" default="0.00001"/>
<formulaequationinput size="40" label="Enter the equation" />
</formularesponse>
</problem>
.. code-block:: xml
<problem>
<p>Problem text</p>
<formularesponse type="ci" samples="VARIABLES@LOWER_BOUNDS:UPPER_BOUNDS#NUMBER_OF_SAMPLES" answer="$VoVi">
<responseparam type="tolerance" default="0.00001"/>
<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:
``"variables@lower_bounds:upper_bounds#num_samples``
For example, a ``<formularesponse>`` tag that includes the **samples** attribute may look like either of the following.
``<formularesponse samples="x,n@1,2:3,4#10">``
``<formularesponse samples="R_1,R_2,R_3@1,2,3:3,4,5#10">``
Children
* ``<formulaequationinput />``
**Tag:** ``<formulaequationinput />``
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.
* - type
- "tolerance"--defines a tolerance for a number
Children
(none)
.. include:: ../../../shared/exercises_tools/math_expression_input.rst
docs/en_us/course_authors/source/exercises_tools/mathjax.rst
.. _MathJax in Studio:
.. include:: ../../../shared/exercises_tools/mathjax.rst
############################################
A Brief Introduction to MathJax in Studio
############################################
To write clear and professional-looking symbols and equations, we use a LaTeX-like
language called
`MathJax <http://www.google.com/url?q=http%3A%2F%2Fwww.mathjax.org%2F&sa=D&sntz=1&usg=AFQjCNGef2H-mZCdmCo7-kWHfu9fUGVCfg>`_.
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
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/molecule_editor.rst
.. _Molecule Editor:
.. include:: ../../../shared/exercises_tools/molecule_editor.rst
########################
Molecule Editor Problem
########################
Studio offers two tools that you can use in discussions of molecules:
* With the **molecule viewer**, you can create three-dimensional representations of molecules for students to view. For more information about this tool, see :ref:`Molecule Viewer`.
* With the **molecule editor**, you can allow students to draw their own molecules.
Both tools use **JSmol**, a JavaScript-based molecular viewer from Jmol. In addition, the molecule editor problem type uses the JSME molecule editor created by Peter Erl and Bruno Bienfait. (You don't need to download either of these tools; Studio uses them automatically.) For more information about JSmol, see `JSmol <http://sourceforge.net/projects/jsmol/>`_. For more information about the JSME molecule editor, see `JSME Molecule Editor <http://peter-ertl.com/jsme/index.html>`_.
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.
.. image:: /Images/Molecule_Editor.png
:width: 500
:alt: Image of the molecule editor
.. _Create the Molecule Editor:
******************************
Create the Molecule Editor
******************************
To create a molecule editor problem:
#. Under **Add New Component**, click **Problem**, and then click **Molecular Structure**.
#. In the component that appears, click **Edit**.
#. In the component editor, modify the code to correspond to your problem.
#. Click **Save**.
.. _EMC Problem Code:
========================
Molecule Editor Code
========================
.. code-block:: xml
<problem>
<p>
A molecular structure problem lets the user use the JSME editor
component to draw a new molecule or update an existing drawing and then
submit their work. Answers are specified as SMILES strings.
</p>
<p>
I was trying to draw my favorite molecule, caffeine. Unfortunately,
I'm not a very good biochemist. Can you correct my molecule?
</p>
<jsmeresponse>
<jsme>
<!--
You can set initial state of the editor by including a molfile
inside of the jsme tag.
Take care that indentation is preserved. The molfile format is
sensitive to whitespace, so the best policy is to cut and paste
as-is on a new line without adjusting the indentation. If you
do indent the molfile data, make sure every line is indented the
same amount using space characters only, no tabs.
-->
<initial-state>
CN2Cc1[nH]cnc1N(C)C2=O
JME 2014-06-28 Wed Jul 23 13:41:18 GMT-400 2014
12 13 0 0 0 0 0 0 0 0999 V2000
3.6373 2.1000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
3.6373 3.5000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
2.4249 4.2000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
1.2124 3.5000 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0
1.2124 2.1000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
2.4249 1.4000 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0
4.9688 1.6674 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0
5.7917 2.8000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
4.9688 3.9326 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0
0.0000 1.4000 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0
0.0000 4.2000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
2.4249 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
1 2 2 0 0 0 0
2 3 1 0 0 0 0
3 4 1 0 0 0 0
4 5 1 0 0 0 0
5 6 1 0 0 0 0
6 1 1 0 0 0 0
7 8 2 0 0 0 0
8 9 1 0 0 0 0
2 9 1 0 0 0 0
1 7 1 0 0 0 0
5 10 2 0 0 0 0
4 11 1 0 0 0 0
6 12 1 0 0 0 0
M END
</initial-state>
<!-- Answers are specified as SMILES strings. -->
<answer>Cn1cnc2c1c(=O)n(C)c(=O)n2C</answer>
</jsme>
<!-- This answer is shown to the student when they click the
"Show Answer" button in the UI. It is not used for grading and
should be human readable. -->
<answer>C8H10N4O2</answer>
</jsmeresponse>
<solution>
<div class="detailed-solution">
<p>Explanation</p>
<p>
Some scholars have hypothesized that the renaissance was made
possible by the introduction of coffee to Italy. Likewise scholars
have linked the Enlightenment with the rise of coffee houses in
England.
</p>
</div>
</solution>
</problem>
docs/en_us/course_authors/source/exercises_tools/molecule_viewer.rst
.. _Molecule Viewer:
.. include:: ../../../shared/exercises_tools/molecule_viewer.rst
#######################
Molecule Viewer Tool
#######################
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:
* data (folder)
* j2s (folder)
* js (folder)
* MoleculeViewer.html (file)
================================================================
Move the .mol File and Edit the MoleculeViewer.html File
================================================================
#. 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:
``script: "set antialiasDisplay; background black; load data/Glucose.mol;"``
3. Save the MoleculeViewer.html file.
================================
Upload Files to a Hosting Site
================================
#. Make sure that your **MoleculeViewerFiles** folder contains the following folders and files:
* data (folder): Earlier, you added a .mol file to this folder.
* j2s (folder)
* js (folder)
* MoleculeViewer.html (file): Earlier, you changed line 19 in this file.
2. Upload the entire **MoleculeViewerFiles** folder to your file hosting site.
.. note:: Because this folder contains many files, uploading the folder may take several minutes, even over a fast connection.
===============================
Create a Component in Studio
===============================
#. In Studio, open the unit where you want to add the molecule viewer.
#. Under **Add New Component**, click **HTML**, and then click **IFrame**.
#. In the component editor that opens, replace the existing content with your own text.
#. In the toolbar, click **HTML**.
#. In the **HTML Source Code** box, enter the following line in the place where you want the molecule viewer to appear:
``<p><iframe name="moleculeiframe" src="https://path_to_folder/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>``
6. Replace ``path_to_file`` with the URL of your file hosting site. For example, the line may look like the following:
``<p><iframe name="moleculeiframe" src="https://myfiles.example.com/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>``
7. Click **OK** to close the **HTML Source Code** box, and then click **Save** to save the component.
#. Click **Preview** to see your component as a student would see it.
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/mult_choice_num_input.rst
.. _Multiple Choice and Numerical Input:
.. include:: ../../../shared/exercises_tools/mult_choice_num_input.rst
############################################
Multiple Choice and Numerical Input Problem
############################################
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.
.. image:: /Images/MultipleChoice_NumericalInput.png
:alt: Image of a multiple choice and numerical input problem
.. note:: Currently, students can only enter numerals in the text field. Students cannot enter words or mathematical expressions.
.. _Create an MCNI Problem:
********************************************************
Create a Multiple Choice and Numerical Input Problem
********************************************************
To create a multiple choice and numerical 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 **Blank Advanced Problem**.
#. In the component that appears, click **Edit**.
#. In the component editor, paste the code from below.
#. Replace the example problem and response options with your own text.
#. Click **Save**.
.. _MCNI Problem Code:
************************************************
Multiple Choice and Numerical Input Problem Code
************************************************
.. code-block:: xml
<problem>
The numerical value of pi, rounded to two decimal points, is 3.24.
<choicetextresponse>
<radiotextgroup>
<choice correct="false">True.</choice>
<choice correct="true">False. The correct value is <numtolerance_input answer="3.14"/>.</choice>
</radiotextgroup>
</choicetextresponse>
</problem>
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/periodic_table.rst
.. _Periodic Table:
.. include:: ../../../shared/exercises_tools/periodic_table.rst
#####################
Periodic Table Tool
#####################
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.)
#. Click **Save**.
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/poll.rst
.. include:: ../../../shared/exercises_tools/poll.rst
.. _Poll:
##########
Poll Tool
##########
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.
.. code-block:: xml
<vertical display_name="Test Unit">
<html url_name="b59c54e2f6fc4cf69ba3a43c49097d0b"/>
<discussion url_name="8320c3d511484f3b96bdedfd4a44ac8b"/>
</vertical>
#. 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_question display_name="Poll Question">
<p>Text of the prompt</p>
<answer id="yes">Yes</answer>
<answer id="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.
.. code-block:: xml
<vertical display_name="Test Unit">
<html url_name="b59c54e2f6fc4cf69ba3a43c49097d0b"/>
<poll_question display_name="Poll Question">
<p>Text of the prompt</p>
<answer id="yes">Yes</answer>
<answer id="no">No</answer>
</poll_question>
<discussion url_name="8320c3d511484f3b96bdedfd4a44ac8b"/>
</vertical>
#. 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)
Inner text - Display text for answer choice.
***********
Example
***********
==================
Example of poll
==================
.. code-block:: xml
<poll_question name="second_question" display_name="Second question">
<h3>Age</h3>
<p>How old are you?</p>
<answer id="less18">&lt; 18</answer>
<answer id="10_25">from 10 to 25</answer>
<answer id="more25">&gt; 25</answer>
</poll_question>
================================================
Example of poll with unable reset functionality
================================================
.. code-block:: xml
<poll_question name="first_question_with_reset" display_name="First question with reset"
reset="True">
<h3>Your gender</h3>
<p>You are man or woman?</p>
<answer id="man">Man</answer>
<answer id="woman">Woman</answer>
</poll_question>
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/problem_in_latex.rst
.. _Problem Written in LaTeX:
############################
Problem Written in LaTeX
############################
.. 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 &
Compile to edX XML**.
\ No newline at end of file
.. include:: ../../../shared/exercises_tools/problem_in_latex.rst
docs/en_us/course_authors/source/exercises_tools/problem_with_hint.rst
.. _Problem with Adaptive Hint:
.. include:: ../../../shared/exercises_tools/problem_with_hint.rst
################################
Problem with Adaptive Hint
################################
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 multiple choice, text input, numerical input, or math expression input problems.
.. image:: /Images/ProblemWithAdaptiveHintExample.png
:alt: Image of a problem with an adaptive hint
******************************************
Create a Problem with an Adaptive Hint
******************************************
To create the above problem:
#. In the unit where you want to create the problem, click **Problem**
under **Add New Component**, and then click the **Advanced** tab.
#. Click **Problem with Adaptive Hint**.
#. In the component that appears, click **Edit**.
#. In the component editor, replace the example code with the code below.
#. Click **Save**.
.. code-block:: xml
<problem>
<text>
<script type="text/python" system_path="python_lib">
def test_str(expect, ans):
print expect, ans
ans = ans.strip("'")
ans = ans.strip('"')
return expect == ans.lower()
def hint_fn(answer_ids, student_answers, new_cmap, old_cmap):
aid = answer_ids[0]
ans = str(student_answers[aid]).lower()
print 'hint_fn called, ans=', ans
hint = ''
if '10' in ans:
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 = "&lt;font color='blue'&gt;Hint: {0}&lt;/font&gt;".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?"/>
<hintgroup hintfn="hint_fn"/>
</customresponse>
</p>
</text>
</problem>
.. _Problem with Adaptive Hint XML:
*********************************
Problem with Adaptive Hint XML
*********************************
========
Template
========
.. code-block:: xml
<problem>
<text>
<script type="text/python" system_path="python_lib">
def test_str(expect, ans):
print expect, ans
ans = ans.strip("'")
ans = ans.strip('"')
return expect == ans.lower()
def hint_fn(answer_ids, student_answers, new_cmap, old_cmap):
aid = answer_ids[0]
ans = str(student_answers[aid]).lower()
print 'hint_fn called, ans=', ans
hint = ''
if 'incorrect answer 1' in ans:
hint = 'hint for incorrect answer 1'
elif 'incorrect answer 2' in ans:
hint = 'hint for incorrect answer 2'
if hint:
hint = "&lt;font color='blue'&gt;Hint: {0}&lt;/font&gt;".format(hint)
new_cmap.set_hint_and_mode(aid,hint,'always')
</script>
<p>TEXT OF PROBLEM</p>
<p>
<customresponse cfn="test_str" expect="ANSWER">
<textline correct_answer="answer" label="LABEL TEXT"/>
<hintgroup hintfn="hint_fn"/>
</customresponse>
</p>
</text>
</problem>
.. note:: If the hints that you supply include characters, the letters must be lowercase.
========
Tags
========
* ``<text>``: Surrounds the script and text in the problem.
* ``<customresponse>``: Indicates that this problem has a custom response.
* ``<textline>``: Creates a response field in the LMS where the student enters a response.
* ``<hintgroup>``: Specifies that the problem contains at least one hint.
**Tag:** ``<customresponse>``
Attributes
(none)
Children
* ``<textline>``
* ``<hintgroup>``
**Tag:** ``<textline>``
Attributes
.. list-table::
:widths: 20 80
:header-rows: 1
* - 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)
- The answer to the problem. To supply a correct_answer value that
includes letters, all letters **must be lowercase**. (Students'
responses to the problem are not case sensitive. They can contain both
uppercase and lowercase letters.)
Children
(none)
**Tag:** ``<hintgroup>``
Attributes
.. list-table::
:widths: 20 80
:header-rows: 1
* - Attribute
- Description
* - hintfn
- Must be set to **hint_fn** (that is, the tag must appear as ``<hintgroup hintfn="hint_fn"/>``).
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/protein_builder.rst
.. _Protein Builder:
.. include:: ../../../shared/exercises_tools/protein_builder.rst
############################
Protex Protein Builder Tool
############################
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.")
return ans["protex_answer"]=="CORRECT"
</script>
<text>
<customresponse cfn="protex_grader">
<designprotein2dinput width="855" height="500" target_shape="W;W;W;W;W;W;W"/>
</customresponse>
</text>
<solution>
<p>
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.)
.. list-table::
:widths: 15 15 15 15
:header-rows: 0
* - A
- R
- N
- D
* - C
- Q
- E
- G
* - H
- I
- L
- K
* - M
- F
- P
- S
* - T
- W
- Y
- V
docs/en_us/course_authors/source/exercises_tools/symbolic_response.rst 0 → 100644
.. _Symbolic Response:
#################
Symbolic Response
#################
This document plans to document features that the current symbolic response
supports. In general it allows the input and validation of math expressions,
up to commutativity and some identities.
********
Features
********
This is a partial list of features, to be revised as we go along:
* sub and superscripts: an expression following the ``^`` character
indicates exponentiation. To use superscripts in variables, the syntax
is ``b_x__d`` for the variable ``b`` with subscript ``x`` and super
``d``.
An example of a problem::
<symbolicresponse expect="a_b^c + b_x__d" size="30">
<textline math="1"
preprocessorClassName="SymbolicMathjaxPreprocessor"
preprocessorSrc="/static/js/capa/symbolic_mathjax_preprocessor.js"/>
</symbolicresponse>
It's a bit of a pain to enter that.
* The script-style math variant. What would be outputted in latex if you
entered ``\mathcal{N}``. This is used in some variables.
An example::
<symbolicresponse expect="scriptN_B + x" size="30">
<textline math="1"/>
</symbolicresponse>
There is no fancy preprocessing needed, but if you had superscripts or
something, you would need to include that part.
docs/en_us/course_authors/source/exercises_tools/word_cloud.rst
.. _Word Cloud:
.. include:: ../../../shared/exercises_tools/word_cloud.rst
##################
Word Cloud Tool
##################
In a word cloud tool, students enter words into a field in response
to a question or prompt. The words all the students have entered then
appear instantly as a colorful graphic, with the most popular responses
appearing largest. The graphic becomes larger as more students answer.
Students can both see the way their peers have answered and contribute
their thoughts to the group.
For example, the following word cloud was created from students'
responses to a question in a HarvardX course.
.. image:: /Images/WordCloudExample.png
:alt: Image of a word cloud problem
****************************
Create a Word Cloud Tool
****************************
To create a word cloud tool:
#. Add the Word Cloud advanced component.
#. On the **Settings** menu, click **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.
``"word_cloud"``
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.
#. In the unit where you want to create the problem, click **Advanced**
under **Add New Component**.
#. In the list of problem types, click **Word Cloud**.
#. In the component that appears, click **Edit**.
#. In the component editor, specify the settings that you want. You can
leave the default value for everything except **Display Name**.
- **Display Name**: The name that appears in the course ribbon and
as a heading above the problem.
- **Inputs**: The number of text boxes into which students can enter
words, phrases, or sentences.
- **Maximum Words**: The maximum number of words that the word cloud
displays. If students enter 300 different words but the maximum is
set to 250, only the 250 most commonly entered words appear in the
word cloud.
- **Show Percents**: The number of times that students have entered
a given word as a percentage of all words entered appears near
that word.
#. Click **Save**.
docs/en_us/course_authors/source/exercises_tools/zooming_image.rst
.. _Zooming Image:
##################
Zooming Image Tool
##################
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.
**https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png**
For example, your file name and path may be **/static/Image1.jpg**.
- Replace the following file name and path with the name and path of the image that you want to appear when the page opens.
**https://studio.edx.org/c4x/edX/DemoX/asset/pathways_overview_01.png**
For example, your file name and path may be **/static/Image2.jpg**.
- Replace the following name and file path with the name and path of the JavaScript file for your course.
**https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js**
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.
.. image:: /Images/ZoomingImage_Modified.png
:alt: Example HTML for a zooming image tool
#. Click **Save** to save the HTML component.
.. include:: ../../../shared/exercises_tools/zooming_image.rst
docs/en_us/shared/exercises_tools/create_exercises_and_tools.rst
......@@ -91,11 +91,7 @@ General Exercises and Tools
: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:: /Images/VitalSource.png
:width: 100
:alt: VitalSource e-book with highlighted note
- :ref:`VitalSource`
- The VitalSource Online Bookshelf e-reader allows students to read, browse, and search content (including figures and notes), as well as work with multiple highlighters and copy notes into external documents.
********************************
Image-Based Exercises and Tools
......@@ -185,6 +181,11 @@ STEM Exercises and Tools
: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
......
docs/en_us/shared/exercises_tools/molecule_viewer.rst 0 → 100644
.. _Molecule Viewer:
#######################
Molecule Viewer Tool
#######################
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:
* data (folder)
* j2s (folder)
* js (folder)
* MoleculeViewer.html (file)
================================================================
Move the .mol File and Edit the MoleculeViewer.html File
================================================================
#. 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:
``script: "set antialiasDisplay; background black; load data/Glucose.mol;"``
3. Save the MoleculeViewer.html file.
================================
Upload Files to a Hosting Site
================================
#. Make sure that your **MoleculeViewerFiles** folder contains the following folders and files:
* data (folder): Earlier, you added a .mol file to this folder.
* j2s (folder)
* js (folder)
* MoleculeViewer.html (file): Earlier, you changed line 19 in this file.
2. Upload the entire **MoleculeViewerFiles** folder to your file hosting site.
.. note:: Because this folder contains many files, uploading the folder may take several minutes, even over a fast connection.
===============================
Create a Component in Studio
===============================
#. In Studio, open the unit where you want to add the molecule viewer.
#. Under **Add New Component**, click **HTML**, and then click **IFrame**.
#. In the component editor that opens, replace the existing content with your own text.
#. In the toolbar, click **HTML**.
#. In the **HTML Source Code** box, enter the following line in the place where you want the molecule viewer to appear:
``<p><iframe name="moleculeiframe" src="https://path_to_folder/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>``
6. Replace ``path_to_file`` with the URL of your file hosting site. For example, the line may look like the following:
``<p><iframe name="moleculeiframe" src="https://myfiles.example.com/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>``
7. Click **OK** to close the **HTML Source Code** box, and then click **Save** to save the component.
#. Click **Preview** to see your component as a student would see it.
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment