From dfd00a02762f6c53e3aaa4ea5670e4fdd1cc0fa4 Mon Sep 17 00:00:00 2001 From: Sylvia Pearce Date: Mon, 27 Oct 2014 15:36:45 -0400 Subject: [PATCH] Migrate exercises and tools to shared folder --- .../source/exercises_tools/annotation.rst | 94 +- .../source/exercises_tools/checkbox.rst | 183 +--- .../exercises_tools/chemical_equation.rst | 164 +--- .../circuit_schematic_builder.rst | 80 +- .../exercises_tools/conditional_module.rst | 92 +- .../create_exercises_and_tools.rst | 203 +---- .../exercises_tools/custom_javascript.rst | 233 +---- .../source/exercises_tools/custom_python.rst | 290 +------ .../source/exercises_tools/drag_and_drop.rst | 256 +----- .../source/exercises_tools/dropdown.rst | 182 +--- .../exercises_tools/external_graders.rst | 221 +---- .../exercises_tools/full_screen_image.rst | 64 +- .../source/exercises_tools/gene_explorer.rst | 49 +- .../exercises_tools/google_hangouts.rst | 135 +-- .../source/exercises_tools/iframe.rst | 96 +-- .../exercises_tools/image_mapped_input.rst | 103 +-- .../source/exercises_tools/index.rst | 69 +- .../source/exercises_tools/lti_component.rst | 205 +---- .../exercises_tools/math_expression_input.rst | 187 +--- .../source/exercises_tools/mathjax.rst | 62 +- .../exercises_tools/molecule_editor.rst | 114 +-- .../exercises_tools/molecule_viewer.rst | 98 +-- .../exercises_tools/mult_choice_num_input.rst | 45 +- .../exercises_tools/multiple_choice.rst | 441 +--------- .../exercises_tools/numerical_input.rst | 333 +------- .../open_response_assessment.rst | 803 +----------------- .../source/exercises_tools/periodic_table.rst | 35 +- .../source/exercises_tools/poll.rst | 173 +--- .../exercises_tools/problem_in_latex.rst | 43 +- .../exercises_tools/problem_with_hint.rst | 164 +--- .../exercises_tools/protein_builder.rst | 94 +- .../exercises_tools/symbolic_response.rst | 42 + .../source/exercises_tools/text_input.rst | 394 +-------- .../source/exercises_tools/word_cloud.rst | 66 +- .../source/exercises_tools/zooming_image.rst | 65 +- .../create_exercises_and_tools.rst | 11 +- .../exercises_tools/molecule_viewer.rst | 98 +++ 37 files changed, 220 insertions(+), 5767 deletions(-) create mode 100644 docs/en_us/course_authors/source/exercises_tools/symbolic_response.rst create mode 100644 docs/en_us/shared/exercises_tools/molecule_viewer.rst diff --git a/docs/en_us/course_authors/source/exercises_tools/annotation.rst b/docs/en_us/course_authors/source/exercises_tools/annotation.rst index 7ef992836d..1b12d13415 100644 --- a/docs/en_us/course_authors/source/exercises_tools/annotation.rst +++ b/docs/en_us/course_authors/source/exercises_tools/annotation.rst @@ -1,93 +1 @@ -.. _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 - - - - - PLACEHOLDER: Text of annotation - PLACEHOLDER: Text of question - PLACEHOLDER: Type your response below: - PLACEHOLDER: In your response to this question, which tag below - do you choose? - - - - - - - - -

PLACEHOLDER: Detailed explanation of solution

- - - -#. Click **Save**. - - +.. include:: ../../../shared/exercises_tools/annotation.rst \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/checkbox.rst b/docs/en_us/course_authors/source/exercises_tools/checkbox.rst index f83f7cbaae..a7834d27b5 100644 --- a/docs/en_us/course_authors/source/exercises_tools/checkbox.rst +++ b/docs/en_us/course_authors/source/exercises_tools/checkbox.rst @@ -1,183 +1,2 @@ -.. _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 - - -

Learning about the benefits of preventative healthcare can be particularly difficult. Check all of the reasons below why this may be the case.

- - - - A large amount of time passes between undertaking a preventative measure and seeing the result. - Non-immunized people will always fall sick. - If others are immunized, fewer people will fall sick regardless of a particular individual's choice to get immunized or not. - 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.

-
- - - -.. _Checkbox Problem XML: - -**************************** -Checkbox Problem XML -**************************** - -============ -Template -============ - -.. code-block:: xml - - -

Question text

- - - - - Answer option 1 (incorrect) - Answer option 2 (correct) - - - - -
-

Solution or Explanation Heading

-

Solution or explanation text

-
- - - - -====== -Tags -====== - -* ```` (required): Specifies that the problem contains options for students to choose from. -* ```` (required): Specifies that the problem is a checkbox problem. -* ```` (required): Designates an answer option. - -**Tag:** ```` - -Specifies that the problem contains options for students to choose from. - - Attributes - - (none) - - Children - - * ```` - -**Tag:** ```` - -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 - - * ```` - -**Tag:** ```` - -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 ```` tags can contain a correct answer. - * - false (at least one required) - - Indicates an incorrect answer. - - Children - - (none) diff --git a/docs/en_us/course_authors/source/exercises_tools/chemical_equation.rst b/docs/en_us/course_authors/source/exercises_tools/chemical_equation.rst index bc73d1dc42..57c97cfcc7 100644 --- a/docs/en_us/course_authors/source/exercises_tools/chemical_equation.rst +++ b/docs/en_us/course_authors/source/exercises_tools/chemical_equation.rst @@ -1,164 +1,2 @@ -.. _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 - - - -

Some problems may ask for a particular chemical equation. Practice by writing out the following reaction in the box below.

- - \( \text{H}_2\text{SO}_4 \longrightarrow \text { H}^+ + \text{ HSO}_4^-\) - - - - - - if chemcalc.chemical_equations_equal(submission[0], 'H2SO4 -> H^+ + HSO4^-'): - correct = ['correct'] - else: - correct = ['incorrect'] - - - -

Some tips:

-
    -
  • Use real element symbols.
    • -
  • Create subscripts by using plain text.
    • -
  • Create superscripts by using a caret (^).
    • -
  • Create the reaction arrow (\(\longrightarrow\)) by using "->".
    • -
- - - - -
-

Solution

-

To create this equation, enter the following:

-

H2SO4 -> H^+ + HSO4^-

-
- - - -.. _Chemical Equation Problem XML: - -************************************ -Chemical Equation Problem XML -************************************ - -============ -Template -============ - -.. code-block:: xml - - - -

Problem text

- - - - - - if chemcalc.chemical_equations_equal(submission[0], 'TEXT REPRESENTING CHEMICAL EQUATION'): - correct = ['correct'] - else: - correct = ['incorrect'] - - - - - - - -
-

Solution or Explanation Header

-

Solution or explanation text

-
- - - -====== -Tags -====== - -* ````: Indicates that this problem has a custom response. -* ````: Specifies that the answer to this problem is a chemical equation. -* ````: Contains the Python script that grades the problem. - -**Tag:** ```` - -Indicates that this problem has a custom response. The ```` tags must surround the ```` tags. - - Attributes - - (none) - - Children - - * ```` - * ```` - -**Tag:** ```` - -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:** ```` - -Contains the Python script that grades the problem. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - type (required) - - Must be "loncapa/python". - - Children - - (none) - diff --git a/docs/en_us/course_authors/source/exercises_tools/circuit_schematic_builder.rst b/docs/en_us/course_authors/source/exercises_tools/circuit_schematic_builder.rst index e70f7dd1c6..ba60f15ca4 100644 --- a/docs/en_us/course_authors/source/exercises_tools/circuit_schematic_builder.rst +++ b/docs/en_us/course_authors/source/exercises_tools/circuit_schematic_builder.rst @@ -1,80 +1,2 @@ -.. _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 - - -

Make a voltage divider that splits the provided voltage evenly.

- -
- -
- - 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'] - - - -

Make a high pass filter.

-
- -
- - 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'] - - - -
-

Explanation

-

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.

-

-

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.

-

-
- - \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/conditional_module.rst b/docs/en_us/course_authors/source/exercises_tools/conditional_module.rst index 94db3b1b51..66d16c3485 100644 --- a/docs/en_us/course_authors/source/exercises_tools/conditional_module.rst +++ b/docs/en_us/course_authors/source/exercises_tools/conditional_module.rst @@ -1,91 +1 @@ -.. _Conditional Module: - -#################### -Conditional Module -#################### - -******************** -Format description -******************** - -The main tag of conditional module input is: - -.. code-block:: xml - - ... - -``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 - - - -

You see this because your vote value for "First question" was "man"

- - - -======================================================== -Examples of conditional depends on poll (use tag) -======================================================== - -.. code-block:: xml - - - - - - - -================================================ -Examples of conditional depends on problem -================================================ - -.. code-block:: xml - - - You see this, cause "lec27_Q1" is attempted. - - - You see this because "lec27_Q1" is not attempted. - +.. include:: ../../../shared/exercises_tools/conditional_module.rst \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst b/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst index 1c06abf1d9..eac4e4cc55 100644 --- a/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst +++ b/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst @@ -1,202 +1 @@ -.. _Create Exercises: - -############################ -Creating Exercises and Tools -############################ - -************************************ -Introduction to Exercises and Tools -************************************ - -Studio allows you to create a wide variety of exercises and tools for your course. Many of these exercises and tools have templates in Studio so that you can create them easily. In addition, individual course teams frequently create exercises that don't have templates in Studio. We're striving to make these tools available to all our course teams as well, and we have instructions for creating some of them in this section. - -Depending on the exercise or tool, you'll use an HTML, Problem, or Advanced component. The page for each individual exercise or tool contains an example of each exercise or tool, together with all the files, code, and step-by-step instructions that you need to create the exercise or tool. - -.. note:: Problems must include labels for accessibility. The label generally includes the text of the main question in your problem. Instructions for adding labels appear in the page for each individual problem. - -**************************** -General Exercises and Tools -**************************** - -.. list-table:: - :widths: 25 25 50 - - * - .. image:: /Images/AnnotationExample.png - :width: 100 - :alt: Example annotation problem - - :ref:`Annotation` - - Annotation problems ask students to respond to questions about a specific block of text. The question appears above the text when the student hovers the mouse over the highlighted text so that students can think about the question as they read. Note that this problem type is not fully supported. - * - .. image:: /Images/PollExample.png - :width: 100 - :alt: Example poll - - :ref:`Conditional Module` - - You can create a conditional module to control versions of content that groups of students see. For example, students who answer "Yes" to a poll question then see a different block of text from the students who answer "No" to that question. - * - .. image:: /Images/JavaScriptInputExample.png - :width: 100 - :alt: Example JavaScript problem - - :ref:`Custom JavaScript` - - Custom JavaScript display and grading problems (also called *custom JavaScript problems* or *JS Input problems*) allow you to create a custom problem or tool that uses JavaScript and then add the problem or tool directly into Studio. - * - .. image:: /Images/external-grader-correct.png - :width: 100 - :alt: Example external grader - - :ref:`External Grader` - - An external grader is a service that receives student responses to a problem, processes those responses, and returns feedback and a problem grade to the edX platform. You build and deploy an external grader separately from the edX platform. An external grader is particularly useful for software programming courses where students are asked to submit complex code. - * - .. image:: /Images/GoogleHangout_WithPeople.png - :width: 100 - :alt: Google Hangout - - :ref:`Google Instant Hangout` - - You can add the ability for students to participate in instant hangouts directly from your course. With instant hangouts, students can interact through live video and voice, share screens and watch videos together, and collaborate on documents. - * - .. image:: /Images/IFrame_1.png - :width: 100 - :alt: Example IFrame tool - - :ref:`IFrame` - - IFrames allow you to integrate ungraded exercises and tools from any Internet site into an HTML component in your course. - * - .. image:: /Images/LTIExample.png - :width: 100 - :alt: Example LTI component - - :ref:`LTI Component` - - LTI components allow you to add an external learning application or non-PDF textbook to Studio. - * - .. image:: /Images/CITL_AssmtTypes.png - :width: 100 - :alt: Example open response assessment - - :ref:`Open Response Assessment` - - In open response assessments, students receive feedback on written responses of varying lengths as well as files, such as computer code or images, that the students upload. Open response assessments include self assessment and peer assessment. - * - .. image:: /Images/PollExample.png - :width: 100 - :alt: Example poll - - :ref:`Poll` - - You can run polls in your course so that your students can share opinions on different questions. - * - .. image:: /Images/ProblemWithAdaptiveHintExample.png - :width: 100 - :alt: Example problem with adaptive hint - - :ref:`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 text input, multiple choice, numerical input, or math expression input problems. - * - .. image:: /Images/ProblemWrittenInLaTeX.png - :width: 100 - :alt: Example problem written in LaTeX - - :ref:`Problem Written in LaTeX` - - If you have an problem that is already written in LaTeX, you can use this problem type to easily convert your code into XML. - * - .. image:: /Images/TextInputExample.png - :width: 100 - :alt: Example text input problem - - :ref:`Text Input` - - In text input problems, students enter text into a response field. The response can include numbers, letters, and special characters such as punctuation marks. - * - .. image:: /Images/WordCloudExample.png - :width: 100 - :alt: Example word cloud - - :ref:`Word Cloud` - - Word clouds arrange text that students enter - for example, in response to a question - into a colorful graphic that students can see. - * - .. image:: /Images/CustomPythonExample.png - :width: 100 - :alt: Example write-your-own-grader problem - - :ref:`Write Your Own Grader` - - In custom Python-evaluated input (also called "write-your-own-grader") problems, the grader uses a Python script that you create and embed in the problem to evaluates a student's response or provide hints. These problems can be any type. - -******************************** -Image-Based Exercises and Tools -******************************** - -.. list-table:: - :widths: 30 25 80 - - * - .. image:: /Images/DragAndDropProblem.png - :width: 100 - :alt: Example drag and drop problem - - :ref:`Drag and Drop` - - In drag and drop problems, students respond to a question by dragging text or objects to a specific location on an image. - * - .. image:: /Images/image-modal.png - :width: 100 - :alt: Example full screen image tool - - :ref:`Full Screen Image` - - The Full Screen Image tool allows a student to enlarge an image in the whole browser window. This is useful when the image contains a large amount of detail and text that is easier to view in context when enlarged. - * - .. image:: /Images/ImageMappedInputExample.png - :width: 100 - :alt: Example image mapped input problem - - :ref:`Image Mapped Input` - - In an image mapped input problem, students click inside a defined area in an image. You define this area by including coordinates in the body of the problem. - * - .. image:: /Images/Zooming_Image.png - :width: 100 - :alt: Example zooming image tool - - :ref:`Zooming Image` - - Zooming images allow you to enlarge sections of an image so that students can see the section in detail. - -************************************ -Multiple Choice Exercises and Tools -************************************ - -.. list-table:: - :widths: 30 25 80 - - * - .. image:: /Images/CheckboxExample.png - :width: 100 - :alt: Example checkbox problem - - :ref:`Checkbox` - - In checkbox problems, the student selects one or more options from a list of possible answers. The student must select all the options that apply to answer the problem correctly. - * - .. image:: /Images/DropdownExample.png - :width: 100 - :alt: Example dropdown problem - - :ref:`Dropdown` - - Dropdown problems allow the student to choose from a collection of answer options, presented as a dropdown list. Unlike multiple choice problems, whose answers are always visible directly below the question, dropdown problems don't show answer choices until the student clicks the dropdown arrow. - * - .. image:: /Images/MultipleChoiceExample.png - :width: 100 - :alt: Example multiple choice problem - - :ref:`Multiple Choice` - - In multiple choice problems, students select one option from a list of answer options. Unlike with dropdown problems, whose answer choices don't appear until the student clicks the drop-down arrow, answer choices for multiple choice problems are always visible directly below the question. - * - .. image:: /Images/MultipleChoice_NumericalInput.png - :width: 100 - :alt: Example multiple choice and numerical input problem - - :ref:`Multiple Choice and Numerical Input` - - You can create a problem that combines a multiple choice and numerical input problems. Students not only select a response from options that you provide, but also provide more specific information, if necessary. - -******************************** -STEM Exercises and Tools -******************************** - -.. list-table:: - :widths: 30 25 80 - - * - .. image:: /Images/ChemicalEquationExample.png - :width: 100 - :alt: Example chemical equation problem - - :ref:`Chemical Equation` - - Chemical equation problems allow the student to enter text that represents a chemical equation into a text box. The grader evaluates the student's response by using a Python script that you create and embed in the problem. - * - .. image:: /Images/CircuitSchematicExample_short.png - :width: 100 - :alt: Example circuit schematic builder problem - - :ref:`Circuit Schematic Builder` - - In circuit schematic builder problems, students can arrange circuit elements such as voltage sources, capacitors, resistors, and MOSFETs on an interactive grid. They then submit a DC, AC, or transient analysis of their circuit to the system for grading. - * - .. image:: /Images/GeneExplorer.png - :width: 100 - :alt: Example gene explorer problem - - :ref:`Gene Explorer` - - The Gene Explorer (GeneX) simulates the transcription, splicing, processing, and translation of a small hypothetical eukaryotic gene. GeneX allows students to make specific mutations in a gene sequence, and it then calculates and displays the effects of the mutations on the mRNA and protein. - * - .. image:: /Images/MathExpressionInputExample.png - :width: 100 - :alt: Example math expression input problem - - :ref:`Math Expression Input` - - The more complex of Studio's two types of math problems. In math expression input problems, students enter mathematical expressions to answer a question. These problems can include unknown variables and more complex symbolic expressions. You can specify a correct answer either explicitly or by using a Python script. - * - .. image:: /Images/Molecule_Editor.png - :width: 100 - :alt: Example molecule editor problem - - :ref:`Molecule Editor` - - The molecule editor allows students to draw molecules that follow the rules for covalent bond formation and formal charge, even if the molecules are chemically impossible, are unstable, or do not exist in living systems. - * - .. image:: /Images/MoleculeViewer.png - :width: 100 - :alt: Example molecule viewer - - :ref:`Molecule Viewer` - - With the molecule viewer, you can create three-dimensional representations of molecules for your students to see. - * - .. image:: /Images/image292.png - :width: 100 - :alt: Example numerical input problem - - :ref:`Numerical Input` - - The simpler of Studio's two types of math problems. In numerical input problems, students enter numbers or specific and relatively simple mathematical expressions to answer a question. You can specify a margin of error, and you can specify a correct answer either explicitly or by using a Python script. - * - .. image:: /Images/Periodic_Table.png - :width: 100 - :alt: Example periodic table problem - - :ref:`Periodic Table` - - An interactive periodic table of the elements shows detailed information about each element as the student moves the mouse over the element. - * - .. image:: /Images/ProteinBuilder.png - :width: 100 - :alt: Example protein builder problem - - :ref:`Protein Builder` - - The Protex protein builder asks students to create specified protein shapes by stringing together amino acids. \ No newline at end of file +.. include:: ../../../shared/exercises_tools/create_exercises_and_tools.rst \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/custom_javascript.rst b/docs/en_us/course_authors/source/exercises_tools/custom_javascript.rst index 94f2b9b401..8505fae2f5 100644 --- a/docs/en_us/course_authors/source/exercises_tools/custom_javascript.rst +++ b/docs/en_us/course_authors/source/exercises_tools/custom_javascript.rst @@ -1,233 +1,2 @@ -.. _Custom JavaScript: - -########################### -Custom JavaScript Problem -########################### - -Custom JavaScript display and grading problems (also called *custom JavaScript problems* -or *JS Input problems*) allow you to create a custom problem or tool that uses JavaScript -and then add the problem or tool directly into Studio. When you create a JS Input problem, -Studio embeds the problem in an inline frame (IFrame) so that your students can interact with -it in the LMS. You can grade your students’ work using JavaScript and some basic Python, and -the grading is integrated into the edX grading system. - -The JS Input problem that you create must use HTML, JavaScript, and cascading style sheets -(CSS). You can use any application creation tool, such as the Google Web Toolkit (GWT), to -create your JS Input problem. - -.. image:: /Images/JavaScriptInputExample.png - :alt: Image of a JavaScript Input problem - -************************************************************ -Create a Custom JavaScript Display and Grading Problem -************************************************************ - -#. Create your JavaScript application, and then upload all files associated with - that application to the **Files & Uploads** page. -#. In the unit where you want to create the problem, click **Problem** - under **Add New Component**, and then click the **Advanced** tab. -#. Click **Custom JavaScript Display and Grading**. -#. In the component that appears, click **Edit**. -#. In the component editor, modify the example code according to your problem. - - - All problems have more than one element. Most problems conform to the same-origin - policy (SOP), meaning that all elements have the same protocol, host, and port. - For example, **http**://**store.company.com**:**81**/subdirectory_1/JSInputElement.html and - **http**://**store.company.com**:**81**/subdirectory_2/JSInputElement.js have the same protocol - (http), host (store.company.com), and port (81). - - If any elements of your problem use a different protocol, host, or port, you need to - bypass the SOP. For example, **https**://**info.company.com**/JSInputElement2.html - uses a different protocol, host, and port. To bypass the SOP, change - **sop="false"** in line 8 of the example code to **sop="true"**. For more information, see the same-origin policy - page on the `Mozilla Developer Network `_ - or on `Wikipedia `_. -#. If you want your problem to have a **Save** button, click the **Settings** tab, and then set - **Maximum Attempts** to a number larger than zero. -#. Click **Save**. - -================================ -Re-create the Example Problem -================================ - -To re-create the example problem above, you'll need the following files. - - - webGLDemo.html - - webGLDemo.js - - webGLDemo.css - - three.min.js - -To download these files in a .zip archive, go to http://files.edx.org/JSInput.zip. - -.. note:: If you need to bypass the SOP, you'll also need the **jschannel.js** file, and your webGLDemo.html file will be slightly different. To download all these files in a .zip archive, go to http://files.edx.org/JSInput_BypassSOP.zip. - -#. Download and unpackage the files in either the JSInput.zip file or the JSInput_BypassSOP.zip file. -#. On the **Files & Uploads** page, upload all the files from the .zip file. -#. Create a new custom JavaScript display and grading problem component. -#. On the **Settings** tab, set **Maximum Attempts** to a number larger than - zero. -#. In the problem component editor, replace the example code with the code below. -#. Click **Save.** - -================================ -JavaScript Input Problem Code -================================ - -.. code-block:: xml - - - In the image below, click the cone. - - - - - - - - -.. note:: When you create this problem, keep the following in mind. - - - The webGLDemo.js file defines the three JavaScript functions (**WebGLDemo.getGrade**, **WebGLDemo.getState**, and **WebGLDemo.setState**). - - - The JavaScript input problem code uses **WebGLDemo.getGrade**, **WebGLDemo.getState**, and **WebGLDemo.setState** to grade, save, or restore a problem. These functions must be global in scope. - - - **WebGLDemo.getState** and **WebGLDemo.setState** are optional. You only have to define these functions if you want to conserve the state of the problem. - - - **Width** and **height** represent the dimensions of the IFrame that holds the application. - - - When the problem opens, the cone and the cube are both blue, or "unselected." When you click either shape once, the shape becomes yellow, or "selected." To unselect the shape, click it again. Continue clicking the shape to select and unselect it. - - - The response is graded as correct if the cone is selected (yellow) when the user clicks **Check**. - - - Clicking **Check** or **Save** registers the problem's current state. - - -.. _JS Input Problem XML: - -****************************** -JavaScript Input Problem XML -****************************** - -JSInput allows problem authors to turn stand-alone HTML files into problems that can be integrated into the edX platform. Since its aim is flexibility, it can be seen as the input and client-side equivalent of **CustomResponse**. - -A JSInput exercise creates an IFrame in a static HTML page, and passes the return value of author-specified functions to the enclosing response type (generally **CustomResponse**). JSInput can also store and retrieve state. - -======== -Template -======== - -The following is the basic format of a JSInput problem: - -.. code-block:: xml - - - - - - - - -The accepted attributes are: - -============== ============== ========= ========== -Attribute Name Value Type Required Default -============== ============== ========= ========== -html_file URL string Yes None -gradefn Function name Yes `gradefn` -set_statefn Function name No None -get_statefn Function name No None -height Integer No `500` -width Integer No `400` -============== ============== ========= ========== - -======================== -Required Attributes -======================== - -* **html_file** - - The **html_file** attribute specifies the HTML file that the IFrame will point to. The HTML file - must be located in the content directory. - - The IFrame is created using the sandbox attribute. Although pop-ups, scripts, and pointer locks are allowed, the IFrame cannot access its parent's attributes. - - The HTML file must contain a **gradefn** function that the JSInput file can access. To determine whether the **gradefn** function is accessible, in the console, make sure that **gradefn** returns the right thing. When JSInput uses the **gradefn** function, `gradefn` is called with `gradefn`.call(`obj`), where **obj** is the object-part of **gradefn**. For example, if **gradefn** is **myprog.myfn**, JSInput calls **myprog.myfun.call(myprog)**. (This is to ensure "`this`" continues to refer to what `gradefn` expects.) - - Aside from that, more or less anything goes. Note that currently there is no support for inheriting CSS or JavaScript from the parent (aside from the Chrome-only **seamless** attribute, which is set to True by default). - -* **gradefn** - - The **gradefn** attribute specifies the name of the function that will be called when a user clicks **Check**, and that returns the student's answer. Unless both the **get_statefn** and **set_statefn** attributes are also used, this answer is passed as a string to the enclosing response type. In the **customresponse** example above, this means **cfn** will be passed this answer as ``ans``. - - If the **gradefn** function throws an exception when a student attempts to submit a problem, the submission is aborted, and the student receives a generic alert. The alert can be customised by making the exception name ``Waitfor Exception``; in that case, the alert message will be the exception message. - - .. important:: To make sure the student's latest answer is passed correctly, make sure that the **gradefn** function is not asynchronous. Additionally, make sure that the function returns promptly. Currently the student has no indication that her answer is being calculated or produced. - -======================== -Optional Attributes -======================== - -* **set_statefn** - - Sometimes a problem author will want information about a student's previous answers ("state") to be saved and reloaded. If the attribute **set_statefn** is used, the function given as its value will be passed the state as a string argument whenever there is a state, and the student returns to a problem. The function has the responsibility to then use this state approriately. - - The state that is passed is: - - * The previous output of **gradefn** (i.e., the previous answer) if **get_statefn** is not defined. - * The previous output of **get_statefn** (see below) otherwise. - - It is the responsibility of the iframe to do proper verification of the argument that it receives via **set_statefn**. - -* **get_statefn** - - Sometimes the state and the answer are quite different. For instance, a problem that involves using a javascript program that allows the student to alter a molecule may grade based on the molecule's hydrophobicity, but from the hydrophobicity it might be incapable of restoring the state. In that case, a - *separate* state may be stored and loaded by **set_statefn**. Note that if **get_statefn** is defined, the answer (i.e., what is passed to the enclosing response type) will be a json string with the following format: - - .. code-block:: xml - - { - answer: `[answer string]` - state: `[state string]` - } - - - The enclosing response type must then parse this as json. - -* **height** and **width** - - The **height** and **width** attributes are straightforward: they specify the height and width of the IFrame. Both are limited by the enclosing DOM elements, so for instance there is an implicit max-width of around 900. - - In the future, JSInput may attempt to make these dimensions match the HTML file's dimensions (up to the aforementioned limits), but currently it defaults to `500` and `400` for **height** and **width**, respectively. - +.. include:: ../../../shared/exercises_tools/custom_javascript.rst diff --git a/docs/en_us/course_authors/source/exercises_tools/custom_python.rst b/docs/en_us/course_authors/source/exercises_tools/custom_python.rst index f5b0a3b4b9..e0ec65176b 100644 --- a/docs/en_us/course_authors/source/exercises_tools/custom_python.rst +++ b/docs/en_us/course_authors/source/exercises_tools/custom_python.rst @@ -1,290 +1,2 @@ -.. _Write Your Own Grader: - -############################## -Write-Your-Own-Grader Problem -############################## - -In custom Python-evaluated input (also called "write-your-own-grader" problems), the grader uses a Python script that you create and embed in the problem to evaluates a student's response or provide hints. These problems can be any type. Numerical input and text input problems are the most popular write-your-own-grader problems. - -.. image:: /Images/CustomPythonExample.png - :alt: Image of a write your own grader problem - -Custom Python-evaluated input problems can include the following: - -* :ref:`Chemical Equation` -* :ref:`Custom JavaScript` -* :ref:`Gene Explorer` -* :ref:`Molecule Editor` -* :ref:`Protein Builder` - -.. list-table:: - :widths: 20 80 - - * - `` - -

Enter two integers that sum to 10.

- -
- - - - - -**Important**: Python honors indentation. Within the `` - -

Part 1: Enter two integers that sum to 10.

- -
- - - -

Part 2: Enter two integers that sum to 20.

- -
- - - - -
-

Explanation

-

For part 1, any two numbers of the form n and 10-n, where n is any integer, will work. One possible answer would be the pair 0 and 10.

-

For part 2, any pair x and 20-x will work, where x is any real number with a finite decimal representation. Both inputs have to be entered either in standard decimal notation or in scientific exponential notation. One possible answer would be the pair 0.5 and 19.5. Another way to write this would be 5e-1 and 1.95e1.

-
- - - -**Templates** - -The following template includes answers that appear when the student clicks **Show Answer**. - -.. code-block:: xml - - - - - -

Problem text

- -
- - - - -
-

Solution or Explanation Heading

-

Solution or explanation text

-
- - - -The following template does not return answers when the student clicks **Show Answer**. If your problem doesn't include answers for the student to see, make sure to set **Show Answer** to **Never** in the problem component. - -.. code-block:: xml - - - - - -

Enter two real numbers that sum to 20:

- -
- - - - -
-

Solution or Explanation Heading

-

Solution or explanation text

-
- - +.. include:: ../../../shared/exercises_tools/custom_python.rst diff --git a/docs/en_us/course_authors/source/exercises_tools/drag_and_drop.rst b/docs/en_us/course_authors/source/exercises_tools/drag_and_drop.rst index a36732ded0..ecec7082ab 100644 --- a/docs/en_us/course_authors/source/exercises_tools/drag_and_drop.rst +++ b/docs/en_us/course_authors/source/exercises_tools/drag_and_drop.rst @@ -1,256 +1,2 @@ -.. _Drag and Drop: - -########################## -Drag and Drop Problem -########################## - -In drag and drop problems, students respond to a question by dragging text or objects to a specific location on an image. - -.. image:: /Images/DragAndDropProblem.png - :alt: Image of a drag and drop problem - -********************************* -Create a Drag and Drop Problem -********************************* - -To create a simple drag and drop problem in which students drag labels onto an image, you'll upload the image that you want students to drag labels onto, and then create a Problem component. - -#. On the **Files & Uploads** page, upload your image file. For more information about uploading files, see :ref:`Add Files to a Course`. -#. In the unit where you want to create the problem, click **Problem** under **Add New Component**, and then click the **Advanced** tab. -#. Click **Drag and Drop**. -#. In the component that appears, click **Edit**. -#. In the component editor, replace the example text with the text of your problem. -#. In the ```` tag, replace **https://studio.edx.org/c4x/edX/DemoX/asset/L9_buckets.png** with the URL of your image file on the **Files & Uploads** page (for example, **/static/Image.png**). -#. For at least one ```` tag, replace the text of the **label** attribute with the text of the label you want students to drag. For example, if you want students to drag the word "Iceland" onto your image, the new tag would resemble the following: - - ```` - -8. Repeat the previous step for all the labels that you want to use. Make sure that the **id** attribute is different for each ```` tag. -#. Determine the coordinates and radius of the correct area on the image. -#. Under ``correct_answer = {``, add an entry for each label, using the following format. These values are in pixels: - - ``'id': [[x coordinate, y coordinate], radius]`` - - For example, if your image is 600 pixels wide and 400 pixels high, and you want your students to drag the Iceland label to an area in the upper-left part of the image and drag a Sweden label near the lower-right part of your image, the code would resemble the following (where 2 is the ID for the Sweden label): - - .. code-block:: xml - - correct-answer = { - '1': [[50, 50], 75] - '2': [[550, 350], 75]} - - .. note:: Make sure the code contains the closing curly brace (**}**). -#. Click **Save**. - -========================================== -Sample Drag and Drop Problem Code -========================================== - -To create the drag and drop problem that appears in the image above, you'll download two files from edX, upload these files to to the **Files & Uploads** page, and then add the code for the problem to a Problem component. - -#. Download the following files from edX: - - * Allopurinol.gif - * AllopurinolAnswer.gif - - To download both these files in a .zip archive, click http://files.edx.org/DragAndDropProblemFiles.zip. - -2. Upload the Allopurinol.gif and AllopurinolAnswer.gif files to the **Files & Uploads** page. -#. In the unit where you want to create the problem, click **Problem** under **Add New Component**, and then click the **Advanced** tab. -#. Click **Drag and Drop**. -#. In the component that appears, click **Edit**. -#. In the component editor, replace the example code with the following code. -#. Click **Save**. - -**Problem Code**: - -.. code-block:: xml - - -

Allopurinol is a drug used to treat and prevent gout, a very painful form of arthritis. Once only a “rich man’s disease”, gout has become more and more common in recent decades – affecting about 3 million people in the United States alone. Deposits of needle-like crystals of uric acid in connective tissue or joint spaces cause the symptoms of swelling, stiffness and intense pain. Individuals with gout overproduce uric acid because they cannot eliminate it efficiently. Allopurinol treats and prevents gout by stopping the overproduction of uric acid through inhibition of an enzyme required for the synthesis of uric acid.

-

You are shown one of many possible molecules. On the structure of allopurinol below, identify the functional groups that are present by dragging the functional group name listed onto the appropriate target boxes on the structure. If you want to change an answer, you have to drag off the name as well. You may need to scroll through the names of functional groups to see all options.

- - - - - - - - - - - - - - - - correct_answer = [ {'draggables': ['2'], 'targets': ['0' ], 'rule':'unordered_equal' }, - {'draggables': ['none'], 'targets': ['1' ], 'rule':'unordered_equal' }] - if draganddrop.grade(submission[0], correct_answer): - correct = ['correct'] - else: - correct = ['incorrect'] - - - - - - - - -.. _Drag and Drop Problem XML: - -********************************* -Drag and Drop Problem XML -********************************* - -================================ -Template for Simple Problem -================================ - -.. code-block:: xml - - -

PROBLEM TEXT

- - - - - - - correct_answer = { - '1': [[x, y], radius], - '2': [[x, y], radius]} - if draganddrop.grade(submission[0], correct_answer): - correct = ['correct'] - else: - correct = ['incorrect'] - - - - -================================ -Template for Advanced Problem -================================ - -.. code-block:: xml - - - - -

PROBLEM TEXT

- - - - - - - - - correct_answer = [{ - 'draggables': ['1', '2'], - 'targets': ['A', 'B' ], - 'rule':'anyof' - }] - if draganddrop.grade(submission[0], correct_answer): - correct = ['correct'] - else: - correct = ['incorrect'] - - - - -======== -Tags -======== - -* ````: Indicates that the problem is a custom response problem. -* ````: Indicates the custom response problem is a drag and drop problem. -* ````: Specifies a single object that a student will drag onto the base image. -* ````: Specifies the location on the base image where a draggable must be dropped. - -**Tag:** ```` - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - img (required) - - Relative path to an image that will be the base image. All draggables can be dragged onto it. - * - target_outline - - Specifies whether an outline (gray dashed line) should be drawn around targets (if they are specified). It can be either 'true' or 'false'. If not specified, the targets do not have outlines. - * - one_per_target - - Specify whether to allow more than one draggable to be placed onto a single target. It can be either 'true' or 'false'. If not specified, the default value is 'true'. - * - no_labels (required) - - default is false, in default behaviour if label is not set, label is obtained from id. If no_labels is true, labels are not automatically populated from id, and one can not set labels and obtain only icons. - - Children - - * ```` - * ```` - -**Tag:** ```` - -Specifies a single draggable object in a drag and drop problem. - -A draggable is what the user must drag out of the slider and drop onto the base image. After a drag operation, if the center of the draggable is located outside the rectangular dimensions of the image, it will be returned to the slider. - -For the grader to work, each draggable must have a unique ID. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - id (required) - - Unique identifier of the draggable object. - * - label (optional) - - Text label that the user sees. - * - icon (optional) - - For draggables that are images, the relative path to the image file. - * - can_reuse - - true or false, default is false. If true, same draggable can be used multiple times. - - Children - - (none) - -**Tag:** ```` - -Specifies the location on the base image where a student must drop a draggable item. By design, if the center of a draggable lies within the target (i.e. in the rectangle defined by [[x, y], [x + w, y + h]], it is within the target. Otherwise, it is outside. - -If you specify at least one target, and a student drops a draggable item on a location that is outside a target, the draggable item returns to the slider. - -If you don't specify a target, a student can drop a draggable item anywhere on the base image. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - id (required) - - Unique identifier of the target object. - * - x - - X-coordinate on the base image where the top left corner of the target will be positioned. - * - y - - Y-coordinate on the base image where the top left corner of the target will be positioned. - * - w - - Width of the target, in pixels. - * - h - - Height of the target, in pixels. - - Children - - (none) - - -For more information about how to create drag and drop problems, see `XML Format of Drag and Drop Input -`_. +.. include:: ../../../shared/exercises_tools/drag_and_drop.rst diff --git a/docs/en_us/course_authors/source/exercises_tools/dropdown.rst b/docs/en_us/course_authors/source/exercises_tools/dropdown.rst index 87f6c9ba43..238b31a4c1 100644 --- a/docs/en_us/course_authors/source/exercises_tools/dropdown.rst +++ b/docs/en_us/course_authors/source/exercises_tools/dropdown.rst @@ -1,182 +1,2 @@ -.. _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` 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` 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 - - -

- This exercise first appeared in HarvardX's PH207x Health in Numbers: Quantitative Methods in Clinical & Public Health Research course, fall 2012. -

-

What type of data are the following?

-

Age:

- - - -

Age, rounded to the nearest year:

- - - -

Life stage - infant, child, and adult:

- - - - - -.. _Dropdown Problem XML: - -************************ -Dropdown Problem XML -************************ - -======== -Template -======== - -.. code-block:: xml - - -

- Problem text

- - - - -
-

Explanation or Solution Header

-

Explanation or solution text

-
- - - -.. code-block:: xml - - -

Problem text

- - options="('A','B')" - correct="A"/> - label="label text" - - - -
-

Explanation or Solution Header

-

Explanation or solution text

-
- - - -======== -Tags -======== - -* ```` (required): Indicates that the problem is a dropdown problem. -* ```` (required): Lists the answer options. - -**Tag:** ```` - -Indicates that the problem is a dropdown problem. - - Attributes - - (none) - - Children - - * ```` - -**Tag:** ```` - -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 diff --git a/docs/en_us/course_authors/source/exercises_tools/external_graders.rst b/docs/en_us/course_authors/source/exercises_tools/external_graders.rst index a2aab863f2..de17bbaa03 100644 --- a/docs/en_us/course_authors/source/exercises_tools/external_graders.rst +++ b/docs/en_us/course_authors/source/exercises_tools/external_graders.rst @@ -1,220 +1 @@ -.. _External Grader: - -########################### -External Grader -########################### - - -.. _External Grader Overview: - -******************* -Overview -******************* - -An external grader is a service that receives student responses to a problem, processes those responses, and returns feedback and a problem grade to the edX platform. You build and deploy an external grader separately from the edX platform. - -See the following sections for more information: - -* :ref:`External Grader Example` -* :ref:`External Graders and XQueue` -* :ref:`The XQueue Interface` -* :ref:`Building an External Grader` -* :ref:`Create a Code Response Problem` - -.. _External Grader Example: - -*************************** -External Grader Example -*************************** - -An external grader is particularly useful for software programming courses where students are asked to submit complex code. The grader can run tests that you define on that code and return results to a student. - -For example, you define a problem that requires students to submit Python code, and create a set of tests that an external grader can run to verify the submissions. When a student enters Python code for the problem and clicks **Check**, the code is sent to the grader for testing. If the code passes all tests, the grader returns the score and a string indicating that the solution is correct. - -.. image:: /Images/external-grader-correct.png - :alt: Image of a students view of a programming problem that uses an external grader, with a correct result - - -The external grader can return a string with results, which the student can see by clicking **See full output**. This can be particularly useful when the solution is not correct and you want to return information about the failed tests. For example: - -.. image:: /Images/external-grader-incorrect.png - :alt: Image of a students view of a programming problem that uses an external grader, with a correct result - -.. _External Graders and XQueue: - -************************************** -External Graders and XQueue -************************************** - -The edX Platform communicates with your external grader through XQueue. XQueue provides students' input to the grader; it then receives results from the grader and returns them to students. - -Student submissions are collected in XQueue, where they remain until the grader actively retrieves, or pulls, the next submission from the queue for grading. - -The external grader polls the XQueue through a RESTful interface at a regular interval. When the external grader pulls a submission, it runs the tests on it, then pushes the response back to XQueue through the RESTful interface. XQueue then delivers the response to the edX Learning Management System. - -For example code of an external grader that uses Pull mode, see the `Stanford-Online repository xqueue_pull_ref `_. - - -============================ -External Grader Workflow -============================ - -The following steps show the complete process: - -#. The student either enters code or attaches a file for a problem, then clicks Check. -#. The external grader pulls the code from XQueue. -#. The external grader runs the tests that you created on the code. -#. The external grader returns the grade for the submission, as well as any results in a string, to XQueue. -#. The XQueue delivers the results to the edX Learning Management System. -#. The student sees the problem results and the grade. - - -================== -The XQueue Name -================== - -Your course will use a specific XQueue name. You use this name when creating problems in edX Studio. You get this name from your edX Program Manager. As edX hosts many XQueues for different courses, it is critical that you use the exact XQueue name in your problems, as described in the section :ref:`Create a Code Response Problem`. - - -.. _The XQueue Interface: - -************************************** -The XQueue Interface -************************************** - -The student submission sent from XQueue to the grader, and the response sent from the grader to XQueue, are JSON objects, as described below. - -.. note:: XQueue does not send the the student ID to the external grader. Your grader cannot access student IDs or associate student IDs with submissions. - -For the code for the XQueue interface, see the file `urls.py in the edX XQueue repository `_. - -====================================================== -Inputs to the External Grader -====================================================== - -The grader receives student submissions as a JSON object with two keys: - -* **student_response**: A string containing the student's code submission. The string comes from either input the student enters in the edX Learning Management System or a file the student attaches. - -* **grader_payload**: An optional string that you can specify when creating the problem. For more information, see the section :ref:`Create a Code Response Problem`. - -For example:: - - { - "xqueue_body": - "{ - "student_response": "def double(x):\n return 2*x\n", - "grader_payload": "problem_2" - }" - } - -====================================================== -External Grader Responses -====================================================== - -After running tests and recording results for a submission, the grader must return information by posting a JSON response. The JSON string contains an indication if the submission was correct, the score, and any message the tests create. - -In the following example, the grader returns a JSON string that indicates the submission was correct, the score was 1, and a message:: - - { - "correct": true, - "score": 1, - "msg": "

The code passed all tests.

" - } - -.. _Building an External Grader: - -**************************** -Building an External Grader -**************************** - -Course staff, not edX, is responsible for building and deploying the external grader. - -In addition to creating tests that are specific to the problems you use in your course, there are four areas that you must plan for when building an external grader: - -* :ref:`Scale` -* :ref:`Security` -* :ref:`Reliability and Recovery` -* :ref:`Testing` - - -.. _Scale: - -================== -Scale -================== - -Your external grader must be able to scale to support the number of students in your course. - -Keep in mind that student submissions will likely come in spikes, not in an even flow. For example, you should expect the load to be much greater than average in the hours before an exam is due. Therefore, you should verify that the external grader can process submissions from a majority of students in a short period of time. - -.. _Security: - -================== -Security -================== - -Students are submitting code that executes directly on a server that you are responsible for. It is possible that a student will submit malicious code. Your system must protect against this and ensure that the external grader runs only code that is relevant to the course problems. How you implement these protections depends on the programming language you are using and your deployment architecture. You must ensure that malicious code won't damage your server. - -.. _Reliability and Recovery: - -============================== -Reliability and Recovery -============================== - -Once your course starts, many students will submit code at any possible time, and expect to see results quickly. If your external grader is prone to failure or unexpected delays, the student experience will be poor. - -Therefore, you must ensure that your grader has high availability and can recover from errors. Prior to your course starting, you must have a plan to immediately notify the team responsible for operating your grader, as well as edX operations, when the grader fails. In collaboration with edX, you should develop a procedure to quickly identify the cause of failure, which can be your grader or edX's XQueue. - -Contact your edX Program Manager for more information. - -If you know the grader will be unavailable at a certain time for maintenance, you should :ref:`Add a Course Update`. - -.. _Testing: - -================== -Testing -================== - -You should test your grader thoroughly before your course starts. Be sure to test incorrect code as well as correct code to ensure that the grader responds with appropriate scores and messages. - -.. _Create a Code Response Problem: - -******************************** -Create a Code Response Problem -******************************** - -You create a code response problem in edX Studio by adding a common blank problem, then editing the XML problem definition in the :ref:`Advanced Editor`. - -See :ref:`Working with Problem Components` for more information. - -Following is a basic example of the XML definition of a problem that uses an external grader:: - - - -

Write a program that prints "hello world".

- - - - - - # students please write your program here - print "" - - - print "hello world" - - - {"output": "hello world", "max_length": 2} - - - - - -Note the following about the XML definition: - -* **queuename**: The value of the queuename attribute of the element maps to an XQueue that edX sets up for the course. You get this name from your edX Program Manager. You must use this exact name in order for the problem to communicate with the correct XQueue. - -* **Input Type**: In this example, the input type is specificed by the **** element. When you use , the student enters code in a browser field when viewing the course unit. The other element you can use to specify the input type is , which enables the student to attach and submit a code file in the unit. - -* ****: You can use the element to send information to the external grader in the form of a JSON object. For example, you can use to tell the grader which tests to run for this problem. \ No newline at end of file +.. include:: ../../../shared/exercises_tools/external_graders.rst \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/full_screen_image.rst b/docs/en_us/course_authors/source/exercises_tools/full_screen_image.rst index 24aa5be150..a97913598a 100644 --- a/docs/en_us/course_authors/source/exercises_tools/full_screen_image.rst +++ b/docs/en_us/course_authors/source/exercises_tools/full_screen_image.rst @@ -1,63 +1 @@ -.. _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 element's href attribute with the path to your image. Do not change the value of the class attribute. For example: - - **** - - * Replace the value of the element's src attribute with the path to your image. For example: - - **Full screen image** - - * 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 - -

Sample Image Modal

- - Full screen image - - - .. 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 diff --git a/docs/en_us/course_authors/source/exercises_tools/gene_explorer.rst b/docs/en_us/course_authors/source/exercises_tools/gene_explorer.rst index 14bff451eb..66e2180708 100644 --- a/docs/en_us/course_authors/source/exercises_tools/gene_explorer.rst +++ b/docs/en_us/course_authors/source/exercises_tools/gene_explorer.rst @@ -1,49 +1,2 @@ -.. _Gene Explorer: +.. include:: ../../../shared/exercises_tools/gene_explorer.rst -################## -Gene Explorer Tool -################## - -The Gene Explorer (GeneX), from the biology department at `UMB `_, 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 `_. - -******************** -Gene Explorer Code -******************** - -.. code-block:: xml - - -

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 SUBMIT button.

-

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.

- - - - - - -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 diff --git a/docs/en_us/course_authors/source/exercises_tools/google_hangouts.rst b/docs/en_us/course_authors/source/exercises_tools/google_hangouts.rst index f7d2c5d4da..d6433f7153 100644 --- a/docs/en_us/course_authors/source/exercises_tools/google_hangouts.rst +++ b/docs/en_us/course_authors/source/exercises_tools/google_hangouts.rst @@ -1,134 +1 @@ -.. _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 `_. - -.. 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 `_. - -#. 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 -
- -#. 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 `_, 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 diff --git a/docs/en_us/course_authors/source/exercises_tools/iframe.rst b/docs/en_us/course_authors/source/exercises_tools/iframe.rst index 40f054153e..61af9d5428 100644 --- a/docs/en_us/course_authors/source/exercises_tools/iframe.rst +++ b/docs/en_us/course_authors/source/exercises_tools/iframe.rst @@ -1,95 +1 @@ -.. _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` or an :ref:`LTI component`. - -For more information about IFrames, see the `IFrame specification `_. - -**************************** -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 ``

- -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 ``

- -.. image:: /Images/IFrame_3.png - :alt: IFrame with only top half showing and vertical scroll bar on the side - :width: 500 - -.. code-block:: html - -

- -.. image:: /Images/IFrame_4.png - :alt: - :width: 500 - -For more information about IFrame attributes, see the `IFrame specification `_. +.. include:: ../../../shared/exercises_tools/iframe.rst \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/image_mapped_input.rst b/docs/en_us/course_authors/source/exercises_tools/image_mapped_input.rst index 56ff4147df..fd92ea8c58 100644 --- a/docs/en_us/course_authors/source/exercises_tools/image_mapped_input.rst +++ b/docs/en_us/course_authors/source/exercises_tools/image_mapped_input.rst @@ -1,103 +1,2 @@ -.. _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 - - -

Example Problem

- -

In the image below, click the triangle.

- - - - - - - -.. _Image Mapped Input Problem XML: - -****************************** -Image Mapped Input Problem XML -****************************** - -========== -Template -========== - -.. code-block:: xml - - - -

In the image below, click the triangle.

- - - - - - -===== -Tags -===== - -* ````: Indicates that the problem is an image mapped input problem. -* ````: Specifies the image file and the region in the file that the student must click. - -**Tag:** ```` - -Indicates that the problem is an image mapped input problem. - - Attributes - - (none) - - Children - - * ```` - -**Tag:** ```` - -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 (,)-(,). 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 diff --git a/docs/en_us/course_authors/source/exercises_tools/index.rst b/docs/en_us/course_authors/source/exercises_tools/index.rst index e55b6cd5e9..e63b7e331f 100644 --- a/docs/en_us/course_authors/source/exercises_tools/index.rst +++ b/docs/en_us/course_authors/source/exercises_tools/index.rst @@ -1,52 +1,63 @@ -.. _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 diff --git a/docs/en_us/course_authors/source/exercises_tools/lti_component.rst b/docs/en_us/course_authors/source/exercises_tools/lti_component.rst index da628396f1..ac29f52320 100644 --- a/docs/en_us/course_authors/source/exercises_tools/lti_component.rst +++ b/docs/en_us/course_authors/source/exercises_tools/lti_component.rst @@ -1,204 +1 @@ -.. _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 `_ -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 diff --git a/docs/en_us/course_authors/source/exercises_tools/math_expression_input.rst b/docs/en_us/course_authors/source/exercises_tools/math_expression_input.rst index b9fe7ee78b..7d70c40186 100644 --- a/docs/en_us/course_authors/source/exercises_tools/math_expression_input.rst +++ b/docs/en_us/course_authors/source/exercises_tools/math_expression_input.rst @@ -1,187 +1,2 @@ -.. _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 `_ 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 - - -

Some problems may ask for a mathematical expression. Practice creating mathematical expressions by answering the questions below.

- -

Write an expression for the product of R_1, R_2, and the inverse of R_3.

- - - - - - - -

Let x be a variable, and let n be an arbitrary constant. What is the derivative of xn?

- - - - - - - -
-

Explanation or Solution Header

-

Explanation or solution text

-
- - - -.. _Math Expression Input Problem XML: - -********************************** -Math Expression Input Problem XML -********************************** - -============ -Templates -============ - -.. code-block:: xml - - -

Write an expression for the product of R_1, R_2, and the inverse of R_3.

- - - - - - -.. code-block:: xml - - -

Problem text

- - - - - - - - -
-

Explanation or Solution Header

-

Explanation or solution text

-
- - - -==== -Tags -==== - -* ```` -* ```` -* ```` -* `` - -

What is the distance in the plane between the points (pi, 0) and (0, e)? You can type math. - - - - -

- -
-

Explanation

-

The decimal numerical system is base ten.

-

The standard gravity constant is defined to be precisely 9.80665 m/s2. - This is 9.80 to two decimal places. Entering 9.8 also works.

-

By the distance formula, the distance between two points in the plane is - the square root of the sum of the squares of the differences of each coordinate. - Even though an exact numerical value is checked in this case, the - easiest way to enter this answer is to type - sqrt(pi^2+e^2) into the editor. - Other answers like sqrt((pi-0)^2+(0-e)^2) also work. -

-
- - - -.. _Numerical Input Problem XML: - -**************************** -Numerical Input Problem XML -**************************** - -========= -Templates -========= - -The following templates represent problems with and without a decimal or percentage tolerance. - -Problem with no tolerance -*************************** - -.. code-block:: xml - -

TEXT OF PROBLEM - - - -

- - -
-

TEXT OF SOLUTION

-
- - - -Problem with a decimal tolerance -************************************ - -.. code-block:: xml - - - -

TEXT OF PROBLEM - - - - -

- - -
-

TEXT OF SOLUTION

-
- - - -Problem with a percentage tolerance -************************************ - -.. code-block:: xml - - - -

TEXT OF PROBLEM - - - - -

- - -
-

TEXT OF SOLUTION

-
- - - -Answer created with a script -************************************ - -.. code-block:: xml - - - - - - -

TEXT OF PROBLEM - - - - -

- - -
-

TEXT OF SOLUTION

-
- - - -==== -Tags -==== - -* ```` (required): Specifies that the problem is a numerical input problem. -* ```` (required): Provides a response field where the student enters a response. -* ```` (optional): Specifies a tolerance, or margin of error, for an answer. -* `` -

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).

-

- - - - -

- - - -.. _Problem with Adaptive Hint XML: - -********************************* -Problem with Adaptive Hint XML -********************************* - -======== -Template -======== - -.. code-block:: xml - - - - -

TEXT OF PROBLEM

-

- - - - -

- - - -.. note:: If the hints that you supply include characters, the letters must be lowercase. - -======== -Tags -======== - -* ````: Surrounds the script and text in the problem. -* ````: Indicates that this problem has a custom response. -* ````: Creates a response field in the LMS where the student enters a response. -* ````: Specifies that the problem contains at least one hint. - -**Tag:** ```` - - Attributes - - (none) - - Children - - * ```` - * ```` - -**Tag:** ```` - - 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:** ```` - - 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 ````). \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/protein_builder.rst b/docs/en_us/course_authors/source/exercises_tools/protein_builder.rst index 785c5010c8..ee1e76ad9d 100644 --- a/docs/en_us/course_authors/source/exercises_tools/protein_builder.rst +++ b/docs/en_us/course_authors/source/exercises_tools/protein_builder.rst @@ -1,94 +1,2 @@ -.. _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 - - -

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.

-

Be sure to click "Fold" to fold your protein before you click "Check".

- - - - - - - - - -

- 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. -

-
    -
  • - Stick: RRRRRRR -
    • -
- - - -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 diff --git a/docs/en_us/course_authors/source/exercises_tools/symbolic_response.rst b/docs/en_us/course_authors/source/exercises_tools/symbolic_response.rst new file mode 100644 index 0000000000..01e1b550c2 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/symbolic_response.rst @@ -0,0 +1,42 @@ +.. _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:: + + + + + + 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:: + + + + + + There is no fancy preprocessing needed, but if you had superscripts or + something, you would need to include that part. diff --git a/docs/en_us/course_authors/source/exercises_tools/text_input.rst b/docs/en_us/course_authors/source/exercises_tools/text_input.rst index d02fa3c595..d8580dbbbd 100644 --- a/docs/en_us/course_authors/source/exercises_tools/text_input.rst +++ b/docs/en_us/course_authors/source/exercises_tools/text_input.rst @@ -1,394 +1,2 @@ -.. _Text Input: - -######################## -Text Input Problem -######################## - - - -In text input problems, students enter text into a response field. The response can include numbers, letters, and special characters such as punctuation marks. Because the text that the student enters must match the instructor's specified answer exactly, including spelling and punctuation, we recommend that you specify more than one attempt for text input problems to allow for typographical errors. - -.. image:: /Images/TextInputExample.png - :alt: Image of a text input probem - -**************************** -Create a Text Input Problem -**************************** - -You can create text input problems in the Simple Editor or in the Advanced Editor. - -.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<). - -============== -Simple Editor -============== - -To create a text input problem in the Simple Editor, follow these steps. - -#. Under **Add New Component**, click **Problem**. -#. In the **Select Problem Component Type** screen, click **Text Input** - on the **Common Problem Types** tab. -#. In the new Problem component that appears, click **Edit**. -#. Replace the default text with the text for your problem. -#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<). -#. Select the text of the answer, and then click the text input button. - - .. image:: /Images/ProbCompButton_TextInput.png - :alt: Image of the text input button - - When you do this, an equal sign appears next to the answer. - - -#. In the component editor, select the text of the explanation, and then click the - explanation button to add explanation tags around the text. - - .. image:: /Images/ProbCompButton_Explanation.png - :alt: Image of the explanation button - -#. On the **Settings** tab, specify the settings that you want. -#. Click **Save**. - -For the example problem above, the text in the Problem component is the -following. - -:: - - >>What is the technical term that refers to the fact that, when enough people - sleep under a bednet, the disease may altogether disappear?<< - = herd immunity - - [explanation] - The correct answer is herd immunity. As more and more people use bednets, - the risk of malaria begins to fall for everyone – users and non-users alike. - This can fall to such a low probability that malaria is effectively eradicated - from the group (even when the group does not have 100% bednet coverage). - [explanation] - -===================== -Advanced Editor -===================== - -To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code. - -.. code-block:: xml - - -

- This problem is adapted from an exercise that first appeared in MITx's 14.73x The Challenges of Global Poverty course, spring 2013. -

-

What is the technical term that refers to the fact that, when enough people sleep under a bednet, the disease may altogether disappear?

- - community immunity - population immunity - - - - - - In contact immunity, a vaccinated individual passes along his immunity to another person through contact with feces or bodily fluids. The answer to the question above refers to the form of immunity that occurs when so many members of a population are protected, an infectious disease is unlikely to spread to the unprotected population. - - - - - - Although a firewall provides protection for a population, the term "firewall" is used more in computing and technology than in epidemiology. - - - - - -
-

Explanation

-

The correct answer is herd immunity. As more and more people use bednets, the risk of malaria begins to fall for everyone – users and non-users alike. This can fall to such a low probability that malaria is effectively eradicated from the group (even when the group does not have 100% bednet coverage).

-
- - - - - - -****************************************** -Multiple Responses in Text Input Problems -****************************************** - -You can specify more than one correct response for text input problems. -For example, instead of requiring students to enter exactly "Dr. Martin Luther -King, Junior," you can allow answers of "Martin Luther King," "Doctor Martin -Luther King," and other variations. To do this, you can use the Simple Editor or the Advanced Editor. - -============== -Simple Editor -============== - -To specify additional correct responses in the Simple Editor, include "or=" (without the quotation marks) before each additional correct response. - -:: - - >>What African-American led the United States civil rights movement during the 1960s?<< - = Dr. Martin Luther King, Jr. - or= Dr. Martin Luther King, Junior - or= Martin Luther King, Jr. - or= Martin Luther King - -===================== -Advanced Editor -===================== - -To specify additional correct responses in the Advanced Editor, add an ```` for each correct response inside the opening and closing ```` tags. - -.. code-block:: xml - - - -

What African-American led the United States civil rights movement during the 1960s?

- - - Dr. Martin Luther King, Junior - Martin Luther King, Jr. - Martin Luther King - - - - - - -****************************************** -Case Sensitivity and Text Input Problems -****************************************** - -By default, text input problems do not require a case sensitive response. You can change this -and require a case sensitive answer. - -To make a text input response case sensitive, you must use :ref:`Advanced Editor`. - -In the Advanced Editor, you see that the **type** attribute of the **stringresponse** -element equals **ci**, for *case insensitive*. For example: - -:: - - - - - -To make the response case sensitive, change the value of the **type** attribute to **cs**. - -:: - - - - - -************************************************* -Response Field Length of Text Input Problems -************************************************* - -By default, the response field for text input problems is 20 characters long. - -You should preview the unit to ensure that the length of the response input field -accommodates the correct answer, and provides extra space for possible incorrect answers. - -If the default response field length is not sufficient, you can change it using :ref:`Advanced Editor`. - -In the advanced editor, in the XML block for the answer, you see that the **size** attribute of the **textline** element equals **20**: - -:: - - - - - -To change the response field length, change the value of the **size** attribute: - -:: - - - - - -******************************************************** -Hints and Regular Expressions in Text Input Problems -******************************************************** - -You can provide hints that appear when students enter common incorrect answers in text input problems. You can also set a text input problem to allow a regular expression as an answer. To do this, you'll have to modify the problem's XML in the Advanced Editor. - -The regular expression that the student enters must contain the part of the answer that the instructor specifies. For example, if an instructor has specified ````, correct answers include ``example answered``, ``two example answers``, or even ``==example answer==``, but not ``examples`` or ``example anser``. - -You can add ``regexp`` to the value of the ``type`` attribute, for example: ``type="ci regexp"`` or ``type="regexp"`` or ``type="regexp cs"``. In this case, any answer or hint are treated as regular expressions. - -.. _Text Input Problem XML: - -*********************** -Text Input Problem XML -*********************** - -============== -Template -============== - -.. code-block:: xml - - -

Problem text

- - Correct answer 2 - Correct answer 3 - - - - - Text of hint for incorrect answer A - - - - Text of hint for incorrect answer B - - - - Text of hint for incorrect answer C - - - - -
-

Explanation or Solution Header

-

Explanation or solution text

-
- - - -======= -Tags -======= - -* ````: Indicates that the problem is a text input problem. -* ````: Child of ````. Creates a response field in the LMS where the student enters a response. -* ```` (optional): Specifies an additional correct answer for the problem. A problem can contain an unlimited number of additional answers. -* ```` (optional): Indicates that the instructor has provided hints for certain common incorrect answers. -* ```` (optional): Child of ````. Specifies the text of the incorrect answer to provide the hint for. Contains answer, type, name. -* ````: Contains the name from ````. Associates the incorrect answer with the hint text for that incorrect answer. -* ````: Indicates the beginning of the text of the hint. -* ````: Indicates the end of the text of the hint. - -**Tag:** ```` - -Indicates that the problem is a text input problem. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - answer (required) - - Specifies the correct answer. To designate the answer as a regular expression, add "regexp" to the **type** attribute. If you do not add "regexp" to the **type** attribute, the student's answer must match the value in this attribute exactly. - * - type (optional) - - Can specify whether the problem is case sensitive and allows regular expressions. If the ```` tag includes ``type="ci"``, the problem is not case sensitive. If the tag includes ``type="cs"``, the problem is case sensitive. If the tag includes ``type="regexp"``, the problem allows regular expressions. A **type** attribute in a ```` tag can also combine these values. For example, ```` specifies that the prolem allows regular expressions and is case sensitive. - - Children - - * ```` (required) - * ```` (optional) - * ```` (optional) - -**Tag:** ```` - -Creates a response field in the LMS where the student enters a response. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - label (required) - - Contains the text of the problem. - * - size (optional) - - Specifies the size, in characters, of the response field in the LMS. - * - hidden (optional) - - If set to "true", students cannot see the response field. - * - correct_answer (optional) - - Lists the correct answer to the problem. - - Children - - (none) - -**Tag:** ```` - -Specifies an additional correct answer for the problem. A problem can contain an unlimited number of additional answers. - - Attributes - - (none) - - Children - - (none) - -**Tag:** ```` - -Indicates that the instructor has provided hints for certain common incorrect answers. - - Attributes - - (none) - - Children - - * ```` (required) - -**Tag:** ```` - -Specifies a common incorrect answer to the problem. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - answer (required) - - The text of the incorrect answer. - * - name (required) - - The name of the hint that you want to provide. - * - type - - Specifies whether the text of the specified incorrect answer is case sensitive. Can be set to "cs" (case sensitive) or "ci" (case insensitive). - - Children - - * ```` (required) - -**Tag:** ```` - -Associates a common incorrect answer with the hint for that incorrect answer. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - on - - The name of the hint. This must be the same as the **name** attribute of the ```` tag. (The ```` tag provides the name of the hint and the incorrect answer to associate with the hint. The ```` tag contains the name of the hint and the text of the hint.) - - Children - - * ```` (required) - * ```` (required) - -**Tags:** ```` and ```` - -Surround the text of the hint. - - Attributes - - (none) - - Children - - (none) +.. include:: ../../../shared/exercises_tools/text_input.rst diff --git a/docs/en_us/course_authors/source/exercises_tools/word_cloud.rst b/docs/en_us/course_authors/source/exercises_tools/word_cloud.rst index 9b9e94d4fe..11ec1a53d6 100644 --- a/docs/en_us/course_authors/source/exercises_tools/word_cloud.rst +++ b/docs/en_us/course_authors/source/exercises_tools/word_cloud.rst @@ -1,66 +1,2 @@ -.. _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**. diff --git a/docs/en_us/course_authors/source/exercises_tools/zooming_image.rst b/docs/en_us/course_authors/source/exercises_tools/zooming_image.rst index 65bd5408f5..0980b687ee 100644 --- a/docs/en_us/course_authors/source/exercises_tools/zooming_image.rst +++ b/docs/en_us/course_authors/source/exercises_tools/zooming_image.rst @@ -1,65 +1,2 @@ -.. _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 `_, 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 diff --git a/docs/en_us/shared/exercises_tools/create_exercises_and_tools.rst b/docs/en_us/shared/exercises_tools/create_exercises_and_tools.rst index 860f316fd2..dd55ca5c8d 100644 --- a/docs/en_us/shared/exercises_tools/create_exercises_and_tools.rst +++ b/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 diff --git a/docs/en_us/shared/exercises_tools/molecule_viewer.rst b/docs/en_us/shared/exercises_tools/molecule_viewer.rst new file mode 100644 index 0000000000..1774fe3821 --- /dev/null +++ b/docs/en_us/shared/exercises_tools/molecule_viewer.rst @@ -0,0 +1,98 @@ +.. _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 `_. + +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 `_ 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 `_. Save the file in a place where you can easily find it. +#. Download the `MoleculeViewerFiles.zip `_ file from edX. +#. Unzip the `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: + + ``

`` + +6. Replace ``path_to_file`` with the URL of your file hosting site. For example, the line may look like the following: + + ``

`` + +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