diff --git a/docs/en_us/ORA2/source/Images/PA_CourseStaffInfo_Collapsed.png b/docs/en_us/ORA2/source/Images/PA_CourseStaffInfo_Collapsed.png deleted file mode 100644 index 9a66e4ce0b..0000000000 Binary files a/docs/en_us/ORA2/source/Images/PA_CourseStaffInfo_Collapsed.png and /dev/null differ diff --git a/docs/en_us/course_authors/source/Format Cheat Sheet.rstnouse b/docs/en_us/course_authors/source/Format Cheat Sheet.rstnouse index 24b733d02e..f0874c9895 100644 --- a/docs/en_us/course_authors/source/Format Cheat Sheet.rstnouse +++ b/docs/en_us/course_authors/source/Format Cheat Sheet.rstnouse @@ -1,30 +1,29 @@ -****************** +################## Format cheat sheet -****************** +################## -Levels of Subheads +Title: # above and below (as lines 1 and 3 above) -#### -text -#### - -**** -text -**** - -text -**** - -text -==== - -text -^^^^ +********* +Heading 1 +********* +========= +Heading 2 +========= +Heading 3 +********* +Heading 4 +========= +Heading 5 +^^^^^^^^^ +************ +Image Format +************ Image format, uses images as a reference from the soure/image file @@ -34,10 +33,9 @@ Image format, uses images as a reference from the soure/image file .. image:: images/image009.png :width: 800 - -For references to edX1010 pages: - - `Writing Exercises `_ has more in-depth discussion about problem types, and some general pedagogical considerations for adapting to the online format and a `Gallery of Response Types `_ +**************** +Code Formatting +**************** To set text in a "Code format" :: @@ -47,6 +45,52 @@ To set text in a "Code format" (text in code-block:: xml is in different colors) +**************** +Table Formatting +**************** + +With a header row + +.. list-table:: + :widths: 10 80 + :header-rows: 1 + + * - First Name + - Last Name + - Residence + * - Elizabeth + - Bennett + - Longbourne + * - Fitzwilliam + - Darcy + - Pemberley + +-- or -- + +With a bolded first column + +.. list-table:: + :widths: 10 80 + :stub-columns: 1 + + * - First Name + - Elizabeth + - Fitzwilliam + * - Last Name + - Bennett + - Darcy + * - Residence + - Longboure + - Pemberley + +******************* +Cross-References +******************* + +For references to edX101 pages: + + `Writing Exercises `_ has more in-depth discussion about problem types, and some general pedagogical considerations for adapting to the online format and a `Gallery of Response Types `_ + To cross reference between sections of a document At the paragraph you are cross referencing: diff --git a/docs/en_us/course_authors/source/Images/CircuitSchematicExample_short.png b/docs/en_us/course_authors/source/Images/CircuitSchematicExample_short.png new file mode 100644 index 0000000000..8c8ff27370 Binary files /dev/null and b/docs/en_us/course_authors/source/Images/CircuitSchematicExample_short.png differ diff --git a/docs/en_us/course_authors/source/Images/GoogleHangout_WithPeople.png b/docs/en_us/course_authors/source/Images/GoogleHangout_WithPeople.png new file mode 100644 index 0000000000..cc2f707d66 Binary files /dev/null and b/docs/en_us/course_authors/source/Images/GoogleHangout_WithPeople.png differ diff --git a/docs/en_us/course_authors/source/Images/LTIExample.png b/docs/en_us/course_authors/source/Images/LTIExample.png new file mode 100644 index 0000000000..70c9ca2c57 Binary files /dev/null and b/docs/en_us/course_authors/source/Images/LTIExample.png differ diff --git a/docs/en_us/course_authors/source/change_log.rst b/docs/en_us/course_authors/source/change_log.rst index 31f16cd6fc..720c39e1e4 100644 --- a/docs/en_us/course_authors/source/change_log.rst +++ b/docs/en_us/course_authors/source/change_log.rst @@ -12,6 +12,8 @@ April, 2014 * - Date - Change + * - 4/23/14 + - Reorganized info about problems into :ref:`Exercises and Tools Index` section * - 04/22/14 - Updated the :ref:`Bulk Email` section with information about the dashboard option to opt out of course email. * - @@ -37,7 +39,6 @@ April, 2014 new HTML editor. * - 04/07/14 - Expanded the :ref:`Course Data`, :ref:`Enrollment`, and - :ref:`Course_Staffing` sections. * - 04/03/14 - Updated the :ref:`Adding Pages to a Course` chapter to reflect ability to :ref:`Show or Hide the Course Wiki Page`. * - 04/02/14 @@ -82,7 +83,7 @@ March, 2014 * :ref:`Creating Course Content Index` - * :ref:`Working with Problems Index` + * :ref:`Exercises and Tools Index` * :ref:`Releasing Your Course Index` @@ -140,19 +141,18 @@ February, 2014 - Added the :ref:`Course Data`, :ref:`Course_Staffing`, and :ref:`Enrollment` chapters. * - 02/11/14 - - Added :ref:`Gene Explorer` and updated :ref:`Interactive Periodic Table` - and :ref:`Molecule Editor` in :ref:`Additional Tools`. + - Added :ref:`Gene Explorer` and updated :ref:`Periodic Table` + and :ref:`Molecule Editor`. * - 02/07/14 - Added section on :ref:`Full Screen Image`. * - 02/06/14 - - Added :ref:`Interactive Periodic Table` and :ref:`Molecule Editor` to - :ref:`Additional Tools` + - Added :ref:`Periodic Table` and :ref:`Molecule Editor` * - 02/05/14 - Added section :ref:`Set the Advertised Start Date`. * - 02/04/14 - Added the :ref:`Student Data` and :ref:`Grades` chapters. * - - - Added :ref:`Additional Tools` topic with :ref:`Multiple Choice and + - Added :ref:`Multiple Choice and Numerical Input` and :ref:`Protein Builder`. @@ -167,7 +167,7 @@ January, 2014 * - Date - Change * - 01/29/2014 - - Added the chapter :ref:`Using an Instant Hangout in Your Course`. + - Added the chapter :ref:`Google Instant Hangout`. * - 01/24/2014 - Added the :ref:`Discussions` and :ref:`Guidance for Discussion Moderators` chapters. @@ -178,7 +178,7 @@ January, 2014 Textbooks`. * - 01/14/2014 - Added info about scoring (:ref:`ORA Access Scores`) and due dates in - :ref:`Open Response Assessment Problems`. + :ref:`Open Response Assessment`. * - 01/13/2014 - Extensive updates to :ref:`Organizing Your Course Content` and :ref:`Working with HTML Components`. @@ -193,7 +193,7 @@ January, 2014 * - - Added info about template to :ref:`Checkbox`. * - 01/06/2014 - - Created :ref:`Custom JavaScript Display and Grading` + - Created :ref:`Custom JavaScript` * - 01/06/2014 - Created :ref:`Zooming image` * - 01/01/2014 @@ -215,7 +215,7 @@ December, 2013 - Made :ref:`ORA for Students` into template that instructors can customize. * - 12/19/2013 - - Created :ref:`Tools`. + - Created "Tools" topic. (Note 4/10/14: Topic merged into :ref:`Create Exercises`.) * - 12/18/2013 - Updated documentation about video player options in :ref:`Working with Video Components`. @@ -229,7 +229,7 @@ December, 2013 - Added the chapter :ref:`Guidelines for Creating Accessible Content`. * - 12/10/2013 - Added note about number of responses in "Available to Grade" column in - :ref:`Open Response Assessment Problems`. + :ref:`Open Response Assessment`. * - - Added :ref:`MathJax in Studio`. * - 12/09/2013 diff --git a/docs/en_us/course_authors/source/creating_content/create_html_component.rst b/docs/en_us/course_authors/source/creating_content/create_html_component.rst index 50deb14384..8a8311e981 100644 --- a/docs/en_us/course_authors/source/creating_content/create_html_component.rst +++ b/docs/en_us/course_authors/source/creating_content/create_html_component.rst @@ -21,7 +21,7 @@ For more information, see the following topics: .. note:: Review :ref:`Organizing Your Course Content` and :ref:`Best Practices for HTML Markup` before you start working with HTML components. -To add an instant hangout to an HTML component, see :ref:`Using an Instant Hangout in Your Course`. +To add an instant hangout to an HTML component, see :ref:`Google Instant Hangout`. .. _The HTML Editor: diff --git a/docs/en_us/course_authors/source/problems_tools/create_problem_component.rst b/docs/en_us/course_authors/source/creating_content/create_problem.rst similarity index 80% rename from docs/en_us/course_authors/source/problems_tools/create_problem_component.rst rename to docs/en_us/course_authors/source/creating_content/create_problem.rst index a1c6ef5726..ce8709fd8e 100644 --- a/docs/en_us/course_authors/source/problems_tools/create_problem_component.rst +++ b/docs/en_us/course_authors/source/creating_content/create_problem.rst @@ -17,32 +17,29 @@ toward a student's grade. If you want the problems to count toward the student's grade, change the assignment type of the subsection that contains the problems. +This section covers the basics of Problem components--what they look like to you and your students, and the options that every problem component has. For more information about individual problem types, see :ref:`Create Exercises`. + For more information, see the following topics. -* :ref:`Components and the User Interface` +* :ref:`Problem Student View` +* :ref:`Problem Studio View` * :ref:`Problem Settings` -* :ref:`Multiple Problems in One Component` -* :ref:`Problem Randomization` * :ref:`Modifying a Released Problem` +* :ref:`Additional Work with Problems` + * :ref:`Multiple Problems in One Component` + * :ref:`Problem Randomization` + -.. _Components and the User Interface: +.. _Problem Student View: ************************************ -Components and the User Interface -************************************ - -This section contains a description of the various components of a -problem as students see it in the LMS, as well as an introduction to the -Studio user interface for course creators. - -============================== The Student View of a Problem -============================== +************************************ All problems on the edX platform have several component parts. -.. image:: ../Images//AnatomyOfExercise1.png +.. image:: ../Images/AnatomyOfExercise1.png :alt: Image of a problem from a student's point of view, with callouts for elements of the problem #. **Problem text.** The problem text can contain any standard HTML formatting. @@ -120,32 +117,29 @@ visible. You can set these attributes in Studio. given different weights. - **Label.** To improve accessibility for students who have disabilities, each problem needs a descriptive label. The label typically contains part or all of the text of the question in the problem. Most templates include a space for a label. You can find example labels in the documentation for each problem or tool type. -.. _Studio UI: +.. _Problem Studio View: -============================== -The Studio User Interface -============================== +************************************ +The Studio View of a Problem +************************************ -Studio offers two interfaces for editing problem components: the Simple -Editor and the Advanced Editor. +All problems are written in XML. However, Studio offers two interfaces for editing problem components: the Simple Editor and the Advanced Editor. - The **Simple Editor** allows you to edit problems visually, without having to work with XML. - The **Advanced Editor** converts the problem to edX’s XML standard and allows you to edit that XML directly. -.. note:: You can switch at any time from the Simple Editor to the - Advanced Editor by clicking **Advanced Editor** in the top right corner - of the Simple Editor interface. However, it is not possible to switch from - the Advanced Editor to the Simple Editor. - +You can switch at any time from the Simple Editor to the Advanced Editor by clicking **Advanced Editor** in the top right corner of the Simple Editor interface. However, it is not possible to switch from the Advanced Editor to the Simple Editor. .. _Simple Editor: The Simple Editor -~~~~~~~~~~~~~~~~~ -The Common Problem templates, including multiple choice, open in the Simple Editor. The -following image shows a multiple choice problem in the Simple Editor. +================= +Several problem templates, including multiple choice and text input problem templates, open in the Simple Editor. The following image shows a multiple choice problem in the Simple Editor. + +.. image:: ../Images//MultipleChoice_SimpleEditor.png + :alt: Image of a problem in the simple editor The Simple Editor includes a toolbar that helps you format the text of your problem. When you select text and then click the formatting buttons, the Simple Editor formats @@ -161,19 +155,29 @@ the text for you automatically. The toolbar buttons are the following: 8. Open the problem in the Advanced Editor. 9. Open a list of formatting hints. -The following image shows a multiple choice problem in the Simple Editor. +The following problem templates open in the Simple Editor. + +- :ref:`Checkbox` In checkbox problems, students select one or more options + from a list of possible answers. +- :ref:`Dropdown` In dropdown problems, students select one answer from a + dropdown list. +- :ref:`Multiple Choice` Multiple choice problems require students to + select one answer from a list of choices that appear directly below + the question. +- :ref:`Numerical Input` Numerical input problems require answers that + include only integers, fractions, and a few common constants and + operators. +- :ref:`Text Input` In text input problems, students enter a short text + answer to a question. -.. image:: ../Images//MultipleChoice_SimpleEditor.png - :alt: Image of a problem in the simple editor .. _Advanced Editor: +=================== The Advanced Editor -~~~~~~~~~~~~~~~~~~~ -The **Advanced Editor** opens a problem in XML. The Advanced Problem templates, -such as the circuit schematic builder, open directly in the Advanced Editor. - -For more information about the XML for different problem types, see :ref:`Appendix E`. +=================== +The **Advanced Editor** opens a problem in XML. Templates for problems such as +such as drag and drop and math expression input open directly in the Advanced Editor. The following image shows the multiple choice problem above in the Advanced Editor instead of the Simple Editor. @@ -181,14 +185,34 @@ instead of the Simple Editor. .. image:: ../Images//MultipleChoice_AdvancedEditor.png :alt: Image of a problem in the advanced editor +The following problem templates open in the Advanced Editor. + +- :ref:`Circuit Schematic Builder` In circuit schematic problems, students + create and modify circuits on an interactive grid and submit + computer-generated analyses of the circuits for grading. +- :ref:`Custom JavaScript` With custom JavaScript display + and grading problems, you can incorporate problem types that you've created + in HTML into Studio via an IFrame. +- :ref:`Drag and Drop` Drag and drop problems require students to drag text + or objects to a specific location on an image. +- :ref:`Image Mapped Input` Image mapped input problems require students to + click a specific location on an image. +- :ref:`Math Expression Input` Math expression input problems require + students to enter a mathematical expression as text, such as + e=m\*c^2. +- :ref:`Problem with Adaptive Hint` These problems can give students + feedback or hints based on their responses. Problems with adaptive + hints can be text input or multiple choice problems. +- :ref:`Problem Written in LaTeX` This problem type allows you to convert problems that you’ve already written in LaTeX into the edX format. Note that this problem type is still a prototype, however, and may not be supported in the future. +- :ref:`Write Your Own Grader` Custom Python-evaluated input (also called "write-your-own-grader" problems evaluate students' responses using an embedded Python script that you create. These problems can be any type. + .. _Problem Settings: ****************** Problem Settings ****************** -Most problems have the following settings. These settings appear on the **Settings** tab in -the component editor. +In addition to the text of the problem, problems that you create using a Problem component have the following settings. These settings appear on the **Settings** tab in the component editor. - **Display Name** - **Maximum Attempts** @@ -196,7 +220,7 @@ the component editor. - **Randomization** - **Show Answer** -.. image:: ../Images//ProbComponent_Attributes.png +.. image:: ../Images/ProbComponent_Attributes.png :alt: Image of the Settings tab in a Problem component =============== @@ -207,7 +231,7 @@ This setting indicates the name of your problem. The display name appears as a heading over the problem in the LMS and in the course ribbon at the top of the page. -.. image:: ../Images//ProbComponent_LMS_DisplayName.png +.. image:: ../Images/ProbComponent_LMS_DisplayName.png :alt: Image of the problem in a unit page from a student's point of view ============================== @@ -230,7 +254,7 @@ Problem Weight This setting specifies the maximum number of points possible for the problem. The problem weight appears next to the problem title. -.. image:: ../Images//ProblemWeight_DD.png +.. image:: ../Images/ProblemWeight_DD.png :alt: Image of a problem from a student's point of view, with the possible points circled By default, each response field, or “answer space,” in a Problem @@ -242,11 +266,11 @@ to answer, and thus has three response fields. The following Problem component contains one text input problem, and has just one response field. -.. image:: ../Images//ProblemWeight_TI.png +.. image:: ../Images/ProblemWeight_TI.png :alt: Image of a text input problem from a student's point of view Computing Scores -~~~~~~~~~~~~~~~~ +**************** The score that a student earns for a problem is the result of the following formula: @@ -297,13 +321,15 @@ This setting specifies whether certain values in your problem change each time a -.. image:: ../Images//Rerandomize.png +.. image:: ../Images/Rerandomize.png If you want to change, or "randomize," specific values in your problem, you have to do both the following: - Make sure that your problem contains a Python script that randomizes the values that you want. - Enable randomization in the Problem component. +.. note:: Note that specifying this **Randomization** setting is different from *problem randomization*. The **Randomization** setting randomizes variables within a single problem. Problem randomization offers different problems or problem versions to different students. For more information, see :ref:`Problem Randomization`. + To enable randomization, select an option for the **Randomization** setting. This setting has four options. @@ -365,36 +391,63 @@ This setting has seven options. | | or in the LMS. | +-------------------+--------------------------------------+ +.. _Modifying a Released Problem: + +********************************* +Modifying a Released Problem +********************************* + +.. warning:: Be careful when you modify problems after they have been released! + +After a student submits a response to a problem, Studio stores the +student’s response, the score that the student received, and the maximum +score for the problem. Studio updates these values when a student +submits a new response to a problem. However, if an instructor changes a +problem or its attributes, Studio does not automatically update existing +student information for that problem. + +For example, you may release a problem and specify that its answer is 3. +After some students have submitted responses, you notice that the answer +should be 2 instead of 3. When you update the problem with the correct +answer, Studio doesn’t update scores for students who answered 2 for the +original problem and thus received the wrong score. + +For another example, you may change the number of response fields to +three. Students who submitted answers before the change have a score of +0, 1, or 2 out of 2.0 for that problem. Students who submitted answers +after the change have scores of 0, 1, 2, or 3 out of 3.0 for the same +problem. + +If you change the weight of the problem, however, the existing scores +update when you refresh the **Progress** page. + =============== -Problem Types +Workarounds =============== -Studio includes templates for many different types of problems, from -simple multiple choice problems to advanced problems that require the -student to “build” a virtual circuit. Details about each problem type, -including information about how to create the problem, appears in the -page for the problem type. +If you have to modify a released problem in a way that affects grading, +you have two options. Note that both options require you to ask your +students to go back and resubmit a problem. -- :ref:`Common Problems` appear on the **Common Problem Types** tab when you - create a new Problem component in Studio. You create these problems - using the Simple Editor. -- :ref:`Advanced Problems` appear on the **Advanced** tab when you create a - new Problem component. You create these problems using the Advanced - Editor. -- :ref:`Specialized Problems` are advanced problems that aren’t available by - default. To add these problems, you first have to modify the advanced - settings in your course. The Advanced component then appears under - **Add New Component** in each unit, and these problems are available - in the Advanced component. -- :ref:`Open Response Assessment Problems` are a new kind of problem that allow you, the - students in your course, or a computer algorithm to grade responses in the form - of essays, files such as computer code, and ../Images/. +- In the Problem component, increase the number of attempts for the + problem. Then ask all your students to redo the problem. +- Delete the entire Problem component in Studio and create a new + Problem component with the content and settings that you want. Then + ask all your students to complete the new problem. + +.. _Additional Work with Problems: + +************************************ +Additional Work with Problems +************************************ + +You have some further options when you work with problems. You can include more than one problem in a single problem component, or you can set up a problem that presents different versions to different students. .. _Multiple Problems in One Component: -************************************ +==================================== Multiple Problems in One Component -************************************ +==================================== You may want to create a problem that has more than one response type. For example, you may want to create a numerical input problem, and then @@ -404,7 +457,7 @@ many problems at one time. To do this, you can include multiple problems inside a single Problem component. The problems can be different types. To create multiple problems in one component, create a new Blank -Advanced Problem component, and then paste the XML for each problem in +Advanced Problem component, and then add the XML for each problem in the component editor. You only need to include the XML for the problem and its answers. You don’t have to include the code for other elements, such as the **Check** button. @@ -421,9 +474,9 @@ the component appear. .. _Problem Randomization: -********************* +=========================== Problem Randomization -********************* +=========================== You may want to present different students with different problems, or different versions of the same problem. To do this, you'll create a Problem component for each problem or version in Studio, and then edit your course outside of Studio to randomize the problem that students see. @@ -431,9 +484,8 @@ Note that *problem randomization* is different from the **Randomization** settin .. note:: Creating problems with versions that can be randomized requires you to export your course, edit some of your course's XML files in a text editor, and then re-import your course. We recommend that you create a backup copy of your course before you do this. We also recommend that you only edit the files that will contain polls in the text editor if you're very familiar with editing XML. -=========== Terminology -=========== +************ Sections, subsections, units, and components have different names in the **Course Outline** view and in the list of files that you'll see after you export your course and open the .xml files for editing. The following table lists the names of these elements in the **Course Outline** view and in a list of files. @@ -456,9 +508,8 @@ For example, when you want to find a specific section in your course, you'll loo .. _Create Randomized Problems: -========================== Create Randomized Problems -========================== +**************************** #. In the unit where you want to create a randomized problem, create a separate Problem component for each version or problem that you want to randomize. For example, if you want to offer four versions or problems, you'll create four separate Problem components. Make a note of the 32-digit unit ID that appears in the **Unit Identifier** field under **Unit Location**. @@ -515,79 +566,3 @@ Create Randomized Problems * Once you've implemented randomization, you can only see one of the versions or problems in Studio. You can edit that single problem directly in Studio, but to edit any of the other problems, you'll have to export your course, edit the problems in a text editor, and then re-import the course. This is true for instructors as well as course teams. * A .csv file for student responses contains the responses to each of the problems in the problem bank. - - - .. _Modifying a Released Problem: - -************************************ -Modifying a Released Problem -************************************ - -.. warning:: Be careful when you modify problems after they have been released! - -After a student submits a response to a problem, Studio stores the -student’s response, the score that the student received, and the maximum -score for the problem. Studio updates these values when a student -submits a new response to a problem. However, if an instructor changes a -problem or its attributes, Studio does not automatically update existing -student information for that problem. - -For example, you may release a problem and specify that its answer is 3. -After some students have submitted responses, you notice that the answer -should be 2 instead of 3. When you update the problem with the correct -answer, Studio doesn’t update scores for students who answered 2 for the -original problem and thus received the wrong score. - -For another example, you may change the number of response fields to -three. Students who submitted answers before the change have a score of -0, 1, or 2 out of 2.0 for that problem. Students who submitted answers -after the change have scores of 0, 1, 2, or 3 out of 3.0 for the same -problem. - -If you change the weight of the problem, however, the existing scores -update when you refresh the **Progress** page. - -=============== -Workarounds -=============== - -If you have to modify a released problem in a way that affects grading, -you have two options. Note that both options require you to ask your -students to go back and resubmit a problem. - -- In the Problem component, increase the number of attempts for the - problem. Then ask all your students to redo the problem. -- Delete the entire Problem component in Studio and create a new - Problem component with the content and settings that you want. Then - ask all your students to complete the new problem. - -.. _Problem XML: - -*********** -Problem XML -*********** - -XML tags are generally specific to a problem type. For example, only multiple choice problems contain the ```` tag, and only drag and drop problems use the ```` tag. However, the following tags are common to most problems. - -.. list-table:: - :widths: 20 80 - - * - `` `` - - These must be the first and last tags for any content created in the Advanced - Editor in a Problem component. - * - ```` - - The ```` tag indicates the beginning of a line or block of text. - * - ```` - - The ```` tag indicates the end of a line or block of text. - * - ``
`` (optional) - - If you want to include more information in the problem, such as a detailed explanation of the problem's answer, you'll enter the text between the two ``
`` tags, which are inside the ```` tags. (These tags do not have to be on the same line.) - -Additionally, several different problem types use the following tags. - -.. list-table:: - :widths: 20 80 - - * - ```` - - Creates an answer space where students enter a response. Must contain a **size** attribute; may contain **label**, **math**, **correct_answer**. Used in text input and some custom Python-evaluated input problems. - * - `` `` - - diff --git a/docs/en_us/course_authors/source/creating_content/index.rst b/docs/en_us/course_authors/source/creating_content/index.rst index 00fb647601..89a9983bd3 100644 --- a/docs/en_us/course_authors/source/creating_content/index.rst +++ b/docs/en_us/course_authors/source/creating_content/index.rst @@ -17,4 +17,5 @@ Creating Course Content create_html_component create_video create_discussion + create_problem diff --git a/docs/en_us/course_authors/source/creating_content/pages.rst b/docs/en_us/course_authors/source/creating_content/pages.rst index f8fab32c3f..cffcc281da 100644 --- a/docs/en_us/course_authors/source/creating_content/pages.rst +++ b/docs/en_us/course_authors/source/creating_content/pages.rst @@ -33,7 +33,7 @@ You can create other pages for the grading policy, course slides, or any other p * A dynamic HTML calendar, using the template in :ref:`Code for Dynamic HTML Schedule`. -* An instant hangout. See :ref:`Using an Instant Hangout in Your Course` for more information. +* An instant hangout. See :ref:`Google Instant Hangout` for more information. See: diff --git a/docs/en_us/course_authors/source/exercises_tools/annotation.rst b/docs/en_us/course_authors/source/exercises_tools/annotation.rst new file mode 100644 index 0000000000..92331c7b1c --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/annotation.rst @@ -0,0 +1,95 @@ +.. _Annotation: + +################### +Annotation Problem +################### + + +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. + + #. On the **Settings** menu, click **Advanced Settings**. + + #. On the **Advanced Settings** page, locate the **Manual Policy Definition** section, and then locate the **advanced_modules** policy key (this key is at the top of the list). + + .. image:: /Images/AdvancedModulesEmpty.png + :alt: Image of the Manual Policy Definition section of the Advanced Settings page + + 3. Under **Policy Value**, place your cursor between the brackets, and + then enter the following. Make sure to include the quotation marks. + + ``"annotatable"`` + + #. 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. + + #. 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, click **Advanced** + under **Add New Component**. + #. 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**. + + diff --git a/docs/en_us/course_authors/source/exercises_tools/checkbox.rst b/docs/en_us/course_authors/source/exercises_tools/checkbox.rst new file mode 100644 index 0000000000..c96b48de6e --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/checkbox.rst @@ -0,0 +1,185 @@ +.. _Checkbox: + +################## +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) \ No newline at end of file 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 new file mode 100644 index 0000000000..bc73d1dc42 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/chemical_equation.rst @@ -0,0 +1,164 @@ +.. _Chemical Equation: + +################################ +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 new file mode 100644 index 0000000000..e70f7dd1c6 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/circuit_schematic_builder.rst @@ -0,0 +1,80 @@ +.. _Circuit Schematic Builder: + +################################## +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 new file mode 100644 index 0000000000..94db3b1b51 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/conditional_module.rst @@ -0,0 +1,91 @@ +.. _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. + 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 new file mode 100644 index 0000000000..12ebccad15 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst @@ -0,0 +1,192 @@ +.. _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: 30 25 80 + + * - .. image:: /Images/AnnotationExample.png + :width: 100 + :alt: Example annotation problem + - :ref:`Annotation` + - Annotation problems ask students to respond to questions about a specific block of text. The question appears above the text when the student hovers the mouse over the highlighted text so that students can think about the question as they read. + * - .. image:: /Images/PollExample.png + :width: 100 + :alt: Example poll + - :ref:`Conditional Module` + - You can create a conditional module to control versions of content that groups of students see. For example, students who answer "Yes" to a poll question then see a different block of text from the students who answer "No" to that question. + * - .. image:: /Images/JavaScriptInputExample.png + :width: 100 + :alt: Example JavaScript problem + - :ref:`Custom JavaScript` + - Custom JavaScript display and grading problems (also called *custom JavaScript problems* or *JS Input problems*) allow you to create a custom problem or tool that uses JavaScript and then add the problem or tool directly into Studio. + * - .. 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/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 or multiple choice problems. + * - .. image:: /Images/ProblemWrittenInLaTeX.png + :width: 100 + :alt: Example problem written in LaTeX + - :ref:`Problem Written in LaTeX` + - If you have an problem that is already written in LaTeX, you can use this problem type to easily convert your code into XML. + * - .. image:: /Images/TextInputExample.png + :width: 100 + :alt: Example text input problem + - :ref:`Text Input` + - In text input problems, students enter text into a response field. The response can include numbers, letters, and special characters such as punctuation marks. + * - .. image:: /Images/WordCloudExample.png + :width: 100 + :alt: Example word cloud + - :ref:`Word Cloud` + - Word clouds arrange text that students enter - for example, in response to a question - into a colorful graphic that students can see. + * - .. image:: /Images/CustomPythonExample.png + :width: 100 + :alt: Example write-your-own-grader problem + - :ref:`Write Your Own Grader` + - In custom Python-evaluated input (also called "write-your-own-grader") problems, the grader uses a Python script that you create and embed in the problem to evaluates a student's response or provide hints. These problems can be any type. + +******************************** +Image-Based Exercises and Tools +******************************** + +.. list-table:: + :widths: 30 25 80 + + * - .. image:: /Images/DragAndDropProblem.png + :width: 100 + :alt: Example drag and drop problem + - :ref:`Drag and Drop` + - In drag and drop problems, students respond to a question by dragging text or objects to a specific location on an image. + * - .. image:: /Images/image-modal.png + :width: 100 + :alt: Example full screen image tool + - :ref:`Full Screen Image` + - The Full Screen Image tool allows a student to enlarge an image in the whole browser window. This is useful when the image contains a large amount of detail and text that is easier to view in context when enlarged. + * - .. 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/image292.png + :width: 100 + :alt: Example numerical input problem + - :ref:`Numerical Input` + - The simpler of Studio's two types of math problems. In numerical input problems, students enter numbers or specific and relatively simple mathematical expressions to answer a question. These problems only allow integers and a few select constants. You can specify a margin of error, and you can specify a correct answer either explicitly or by using a Python script. + * - .. image:: /Images/Periodic_Table.png + :width: 100 + :alt: Example periodic table problem + - :ref:`Periodic Table` + - An interactive periodic table of the elements shows detailed information about each element as the student moves the mouse over the element. + * - .. image:: /Images/ProteinBuilder.png + :width: 100 + :alt: Example protein builder problem + - :ref:`Protein Builder` + - The Protex protein builder asks students to create specified protein shapes by stringing together amino acids. \ 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 new file mode 100644 index 0000000000..ec88183712 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/custom_javascript.rst @@ -0,0 +1,233 @@ +.. _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. + + 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 new file mode 100644 index 0000000000..9f19bcb12b --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/custom_python.rst @@ -0,0 +1,290 @@ +.. _Write Your Own Grader: + +############################## +Write-Your-Own-Grader Problem +############################## + +In custom Python-evaluated input (also called "write-your-own-grader problems" 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.

+ +
+ + + def test_add(expect, ans): + try: + a1=int(ans[0]) + a2=int(ans[1]) + return (a1+a2) == int(expect) + except ValueError: + return False + + def test_add_to_ten(expect, ans): + return test_add(10, ans) + + + +

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

+
+ + + 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 new file mode 100644 index 0000000000..3b11d3162f --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/drag_and_drop.rst @@ -0,0 +1,181 @@ +.. _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 drag and drop problem, you'll need the following files: + +* Allopurinol.gif +* AllopurinolAnswer.gif + +To download both these files in a .zip archive, go to http://files.edx.org/DragAndDropProblemFiles.zip. + +To create the molecule editor that appears in the image above, you'll upload the files for this problem, and then paste the code below into a Problem component. + +#. 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 +======== + +.. code-block:: xml + + +

Problem text

+ + + + + + + + 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'] + + + + + + +======== +Tags +======== + +* ````: Indicates the 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 +`_. + diff --git a/docs/en_us/course_authors/source/exercises_tools/dropdown.rst b/docs/en_us/course_authors/source/exercises_tools/dropdown.rst new file mode 100644 index 0000000000..a516e2d3cf --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/dropdown.rst @@ -0,0 +1,177 @@ +.. _Dropdown: + +##################### +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 + +******************************** +Create a Dropdown Problem +******************************** + +You can create dropdown problems in the Simple Editor or in the Advanced Editor. + +.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<). + +================ +Simple Editor +================ + +To create a dropdown problem, follow these steps. + +#. Under **Add New Component**, click **Problem**. +#. In the **Select Problem Component Type** screen, click + **Dropdown** on the **Common Problem Types** tab. +#. In the new Problem component that appears, click **Edit**. +#. Replace the default text with the text for your problem. Enter each of the possible + answers on the same line, separated by commas. +#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<). +#. Select all the answer options, and then click the dropdown button. + + .. image:: /Images/ProbCompButton_Dropdown.png + :alt: Image of the dropdown button + + When you do this, a double set of brackets ([[ ]]) appears and surrounds the + answer options. + +#. Inside the brackets, surround the correct answer with parentheses. +#. In the component editor, select the text of the explanation, and then click the + explanation button to add explanation tags around the text. + + .. image:: /Images/ProbCompButton_Explanation.png + :alt: Image of the explanation button + +#. On the **Settings** tab, specify the settings that you want. +#. Click **Save**. + +For the example problem above, the text in the Problem component is the +following. + +:: + + >>What type of data are the following?<< + + Age: + [[Nominal, Discrete, (Continuous)]] + Age, rounded to the nearest year: + [[Nominal, (Discrete), Continuous]] + Life stage - infant, child, and adult: + [[(Nominal), Discrete, Continuous]] + +================ +Advanced Editor +================ + +To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code. + +**Problem Code:** + +.. code-block:: xml + + +

+ 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/problems_tools/external_graders.rst b/docs/en_us/course_authors/source/exercises_tools/external_graders.rst similarity index 98% rename from docs/en_us/course_authors/source/problems_tools/external_graders.rst rename to docs/en_us/course_authors/source/exercises_tools/external_graders.rst index 29d7d040c4..a2aab863f2 100644 --- a/docs/en_us/course_authors/source/problems_tools/external_graders.rst +++ b/docs/en_us/course_authors/source/exercises_tools/external_graders.rst @@ -1,7 +1,7 @@ -.. _Using External Graders: +.. _External Grader: ########################### -Using External Graders +External Grader ########################### @@ -31,13 +31,13 @@ An external grader is particularly useful for software programming courses where 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 +.. 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 +.. 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: 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 new file mode 100644 index 0000000000..24aa5be150 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/full_screen_image.rst @@ -0,0 +1,63 @@ +.. _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 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 new file mode 100644 index 0000000000..14bff451eb --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/gene_explorer.rst @@ -0,0 +1,49 @@ +.. _Gene Explorer: + +################## +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/problems_tools/google_hangouts.rst b/docs/en_us/course_authors/source/exercises_tools/google_hangouts.rst similarity index 96% rename from docs/en_us/course_authors/source/problems_tools/google_hangouts.rst rename to docs/en_us/course_authors/source/exercises_tools/google_hangouts.rst index 61b46ea96d..f7d2c5d4da 100644 --- a/docs/en_us/course_authors/source/problems_tools/google_hangouts.rst +++ b/docs/en_us/course_authors/source/exercises_tools/google_hangouts.rst @@ -1,7 +1,7 @@ -.. _Using an Instant Hangout in Your Course: +.. _Google Instant Hangout: ########################################### -Using an Instant Hangout in Your Course +Google Instant Hangout Tool ########################################### This chapter describes how you can use instant hangouts in your course. See: @@ -52,28 +52,28 @@ 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 +.. 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 +.. 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 +.. 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/hangout.png +.. image:: /Images/GoogleHangout_WithPeople.png :alt: Image of the instant hangout .. _Limitations: 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 new file mode 100644 index 0000000000..56ff4147df --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/image_mapped_input.rst @@ -0,0 +1,103 @@ +.. _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) + diff --git a/docs/en_us/course_authors/source/exercises_tools/index.rst b/docs/en_us/course_authors/source/exercises_tools/index.rst new file mode 100644 index 0000000000..7e090519bc --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/index.rst @@ -0,0 +1,40 @@ +.. _Exercises and Tools Index: + +############################ +Creating Exercises and Tools +############################ + +.. 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 + image_mapped_input + lti_component + math_expression_input + molecule_editor + multiple_choice + mult_choice_num_input + numerical_input + open_response_assessment + periodic_table + poll + problem_with_hint + problem_in_latex + protein_builder + text_input + word_cloud + zooming_image + mathjax \ No newline at end of file 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 new file mode 100644 index 0000000000..cd4bc4161f --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/lti_component.rst @@ -0,0 +1,196 @@ +.. _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 two 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. + +For example, the following LTI component incorporates a Cerego tool that students interact with. + +.. image:: /Images/LTIExample.png + :alt: Cerebro LTI component example + +Before you create an LTI component from an external LTI provider in a +unit, you need the following information. + +- 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 contain any + number of characters. 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.umich.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 may be something as simple as **secret**, or it + may be a string of numbers and letters such as **23746387264** or + **yt4984yr8**. +- 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. + +************************ +Create an LTI Component +************************ + +Creating an LTI component in your course has three steps. + +#. Add LTI to the **advanced_modules** policy key. +#. Register the LTI provider. +#. Create the LTI component in an individual unit. + +====================================================== +Step 1. Add LTI to the Advanced Modules Policy Key +====================================================== + +#. On the **Settings** menu, click **Advanced Settings**. +#. On the **Advanced Settings** page, locate the **Manual Policy + Definition** section, and then locate the **advanced_modules** + policy key (this key is at the top of the list). + + .. image:: /Images/AdvancedModulesEmpty.png + :alt: Image of the advanced_modules key in the Advanced Settings page + +#. Under **Policy Value**, place your cursor between the brackets, and + then enter **“lti”**. Make sure to include the quotation marks, but + not the period. + + .. image:: /Images/LTIPolicyKey.png + :alt: Image of the advanced_modules key in the Advanced Settings page, with the LTI value added + + **Note** If the **Policy Value** field already contains text, place your + cursor directly after the closing quotation mark for the final item, and + then enter a comma followed by **“lti”** (make sure that you include the + quotation marks). + +#. 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 regiser the external LTI provider, you’ll add the LIT ID, the client +key, and the client secret in the **lti_passports** policy key. + +#. On the **Advanced Settings** page, locate the **lti_passports** + policy key. + +#. Under **Policy Value**, place your cursor between the brackets, and + then enter the LTI ID, client key, and client secret in the following + format (make sure to include the quotation marks and the colons). + + :: + + “lti_id:client_key:client_secret” + + For example, the value in the **lti_passports** field may be the following. + + :: + + “test_lti_id:b289378-f88d-2929-ctools.umich.edu:secret” + + If you have multiple LTI providers, separate the values with a comma. + Make sure to surround each entry with quotation marks. + + :: + + "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" + + +#. 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 in 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, set the options that you want. See the table + below for a description of each option. +#. Click **Save**. + + .. list-table:: + :widths: 10 80 + :header-rows: 1 + + * - `Setting` + - Description + * - `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. + * - `custom_parameters` + - Enables you to add one or more custom parameters. For example, if you've added an + e-book, a custom parameter may include the page that your e-book should open to. + 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**. + * - `graded` + - Indicates whether the grade for the problem counts towards student's total grade. By + default, this value is set to **False**. + * - `has_score` + - Specifies whether the problem has a numerical score. By default, this value + is set to **False**. + * - `launch_url` + - Lists the URL that Studio sends to the external LTI provider so that the provider + can send back students' grades. This setting is only used if **graded** is set to + **True**. + * - `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. + * - `open_in_a_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. + * - `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. + + For more information about problem weights and computing point scores, see :ref:`Problem Weight`. \ 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 new file mode 100644 index 0000000000..b5f7df2720 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/math_expression_input.rst @@ -0,0 +1,185 @@ +.. _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 +==== + +* ```` +* ```` +* ```` +* `` +
+
+ +
+
+
Using the Molecule Editor+ open
+
+
+ +
+

 

+
+
Are the molecules I've drawn chemically possible?+ open
+
+
+ +
+
 
+ + + + +Problem Component Code +*************************** + +.. code-block:: xml + + +

The dopamine molecule, as shown, cannot make ionic bonds. Edit the dopamine molecule so it can make ionic bonds.

+

When you are ready, click Check. If you need to start over, click Reset.

+ + + + + + + + + + +**Problem 2** + +:: + + +

The dopamine molecule, as shown, cannot make strong hydrogen bonds. Edit the dopamine molecule so that it can make strong hydrogen bonds.

+ + + + + + + +**Problem 3** + +:: + + +

The dopamine molecule has an intermediate hydrophobicity. Edit the dopamine molecule so that it is more hydrophobic.

+ + + + + + \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/mult_choice_num_input.rst b/docs/en_us/course_authors/source/exercises_tools/mult_choice_num_input.rst new file mode 100644 index 0000000000..eb0af081ce --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/mult_choice_num_input.rst @@ -0,0 +1,45 @@ +.. _Multiple Choice and Numerical Input: + +############################################ +Multiple Choice and Numerical Input Problem +############################################ + +You can create a problem that combines a multiple choice and numerical input problems. Students not only select a response from options that you provide, but also provide more specific information, if necessary. + +.. image:: /Images/MultipleChoice_NumericalInput.png + :alt: Image of a multiple choice and numerical input problem + +.. note:: Currently, students can only enter numerals in the text field. Students cannot enter words or mathematical expressions. + +.. _Create an MCNI Problem: + +******************************************************** +Create a Multiple Choice and Numerical Input Problem +******************************************************** + +To create a multiple choice and numerical input problem: + +#. In the unit where you want to create the problem, click **Problem** under **Add New Component**, and then click the **Advanced** tab. +#. Click **Blank Advanced Problem**. +#. In the component that appears, click **Edit**. +#. In the component editor, paste the code from below. +#. Replace the example problem and response options with your own text. +#. Click **Save**. + +.. _MCNI Problem Code: + +************************************************ +Multiple Choice and Numerical Input Problem Code +************************************************ + +.. code-block:: xml + + + The numerical value of pi, rounded to two decimal points, is 3.24. + + + True. + False. The correct value is . + + + \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/multiple_choice.rst b/docs/en_us/course_authors/source/exercises_tools/multiple_choice.rst new file mode 100644 index 0000000000..7c0d4173f9 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/multiple_choice.rst @@ -0,0 +1,191 @@ +.. _Multiple Choice: + +######################## +Multiple Choice Problem +######################## + +In multiple choice problems, students select one option from a list of answer options. Unlike with dropdown problems, whose answer choices don't appear until the student clicks the drop-down arrow, answer choices for multiple choice problems are always visible directly below the question. + +.. image:: /Images/MultipleChoiceExample.png + :alt: Image of a multiple choice problem + +**************************************** +Create a Multiple Choice Problem +**************************************** + +You can create multiple choice problems in the Simple Editor or in the Advanced Editor. + +.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<). + +================ +Simple Editor +================ + +#. Under **Add New Component**, click **Problem**. +#. In the **Select Problem Component Type** screen, click **Multiple + Choice** on the **Common Problem Types** tab. +#. When the new Problem component appears, click **Edit**. +#. In the component editor, replace the sample problem text with the text of your + problem. Enter each answer option on its own line. +#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<). +#. Select all the answer options, and then click the multiple choice button. + + .. image:: /Images/ProbCompButton_MultChoice.png + :alt: Image of the multiple choice button + + When you do this, the component editor adds a pair of parentheses next to each + possible answer. + +#. Add an "x" between the parentheses next to the correct answer. + +#. In the component editor, select the text of the explanation, and then click the + explanation button to add explanation tags around the text. + + .. image:: /Images/ProbCompButton_Explanation.png + :alt: Image of the explanation button + +#. On the **Settings** tab, specify the settings that you want. +#. Click **Save**. + +For the example problem above, the text in the Problem component is the +following. + +:: + + >>Lateral inhibition, as was first discovered in the horsehoe crab:<< + + ( ) is a property of touch sensation, referring to the ability of crabs to + detect nearby predators. + ( ) is a property of hearing, referring to the ability of crabs to detect + low frequency noises. + (x) is a property of vision, referring to the ability of crabs eyes to + enhance contrasts. + ( ) has to do with the ability of crabs to use sonar to detect fellow horseshoe + crabs nearby. + ( ) has to do with a weighting system in the crabs skeleton that allows it to + balance in turbulent water. + + [Explanation] + Horseshoe crabs were essential to the discovery of lateral inhibition, a property of + vision present in horseshoe crabs as well as humans, that enables enhancement of + contrast at edges of objects as was demonstrated in class. In 1967, Haldan Hartline + received the Nobel prize for his research on vision and in particular his research + investigating lateral inhibition using horseshoe crabs. + [Explanation] + +================ +Advanced Editor +================ + +To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code. + +.. code-block:: xml + + +

Lateral inhibition, as was first discovered in the horsehoe crab...

+ + + is a property of touch sensation, referring to the ability of crabs to detect nearby predators. + is a property of hearing, referring to the ability of crabs to detect low frequency noises. + is a property of vision, referring to the ability of crabs eyes to enhance contrasts. + has to do with the ability of crabs to use sonar to detect fellow horseshoe crabs nearby. + has to do with a weighting system in the crabs skeleton that allows it to balance in turbulent water. + + + +
+

Explanation

+

Horseshoe crabs were essential to the discovery of lateral inhibition, a property of vision present in horseshoe crabs as well as humans, that enables enhancement of contrast at edges of objects as was demonstrated in class. In 1967, Haldan Hartline received the Nobel prize for his research on vision and in particular his research investigating lateral inhibition using horseshoe crabs.

+
+ + + +.. _Multiple Choice Problem XML: + +****************************** +Multiple Choice Problem XML +****************************** + +================ +Template +================ + +.. code-block:: xml + + +

Question text

+ + + Incorrect choice + Correct choice + + + + +
+

Explanation or solution header

+

Explanation or solution text

+
+ + + +================ +Tags +================ + +* ```` (required): Indicates that the problem is a multiple choice problem. +* ```` (required): Indicates the beginning of the list of options. +* ```` (required): Lists an answer option. + +**Tag:** ```` + +Indicates that the problem is a multiple choice problem. + + Attributes + + (none) + + Children + + * ```` + * All standard HTML tags (can be used to format text) + +**Tag:** ```` + +Indicates the beginning of the list of options. + + Attributes + + .. list-table:: + :widths: 20 80 + + * - Attribute + - Description + * - label (required) + - Specifies the name of the response field. + * - type (required) + - Must be set to "MultipleChoice". + + Children + + * ```` + +**Tag:** ```` + +Lists an answer option. + + Attributes + + .. list-table:: + :widths: 20 80 + + * - Attribute + - Description + * - correct (at least one required) + - Indicates a correct or incorrect answer. When the attribute is set to "true", the choice is a correct answer. When the attribute is set to "false", the choice is an incorrect answer. Only one choice can be a correct answer. + * - name + - A unique name that the back end uses to refer to the choice. + + Children + + (none) \ No newline at end of file diff --git a/docs/en_us/course_authors/source/exercises_tools/numerical_input.rst b/docs/en_us/course_authors/source/exercises_tools/numerical_input.rst new file mode 100644 index 0000000000..de900497da --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/numerical_input.rst @@ -0,0 +1,327 @@ +.. _Numerical Input: + +######################## +Numerical Input +######################## + +Numerical input problems are the simpler of the two mathematics tools that Studio offers. In these problems, students enter numbers or specific and relatively simple mathematical expressions to answer a question. The text that the students enter is converted to a symbolic expression that appears below the response field. + +.. image:: /Images/image292.png + :alt: Image of a numerical input problem + +Note that students' responses don't have to be exact for these problems. You can specify a margin of error, or tolerance. You can also specify a correct answer explicitly, or use a Python script. For more information, see the instructions below. + +Responses for numerical input problems can include integers, fractions, +and constants such as *pi* and *g*. Responses can also include text +representing common functions, such as square root (sqrt) and log base 2 +(log2), as well as trigonometric functions and their inverses, such as +sine (sin) and arcsine (arcsin). For these functions, the +text that the student enters is converted into mathematical symbols. The following +example shows the way the system renders students' text responses in +numerical input problems. + +.. image:: /Images/Math5.png + :alt: Image of a numerical input probem rendered by Studio + +For more information about characters that students can enter, see :ref:`Math Response Formatting for Students`. + +*********************************** +Create a Numerical Input Problem +*********************************** + +You can create numerical problems in the Simple Editor or in the Advanced Editor regardless of the answer to the problem. If the text of your problem doesn't include any italics, bold formatting, or special characters, you can create the problem in the Simple Editor. If the text of your problem contains special formatting or characters, or if your problem contains a Python script, you'll use the Advanced Editor. + +For example, the following example problems require the Advanced Editor. + +.. image:: /Images/NumericalInput_Complex.png + :alt: Image of a more complex numerical input problem + +For more information about including a Python script in your problem, see :ref:`Write Your Own Grader`. + +.. 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 **Numerical + Input** on the **Common Problem Types** tab. + +3. When the new Problem component appears, click **Edit**. +#. In the component editor, replace the sample problem text with your own text. +#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<). +#. Select the text of the answer, and then click the numerical input button. + +.. image:: /Images/ProbCompButton_NumInput.png + :alt: Image of the numerical input button + +When you do this, an equal sign appears next to the answer. + +7. (Optional) Specify a margin of error, or tolerance. You can specify a percentage, number, or range. + + * To specify a percentage on either side of the correct answer, add **+-NUMBER%** after the answer. For example, if you want to include a 2% tolerance, add **+-2%**. + + * To specify a number on either side of the correct answer, add **+-NUMBER** after the answer. For example, if you want to include a tolerance of 5, add **+-5**. + + * To specify a range, use brackets [] or parentheses (). A bracket indicates that range includes the number next to it. A parenthesis indicates that the range does not include the number next to it. For example, if you specify **[5, 8)**, correct answers can be 5, 6, and 7, but not 8. Likewise, if you specify **(5, 8]**, correct answers can be 6, 7, and 8, but not 5. + +8. In the component editor, select the text of the explanation, and then click the + explanation button to add explanation tags around the text. + + .. image:: /Images/ProbCompButton_Explanation.png + :alt: Image of the explanation button + +9. On the **Settings** tab, specify the settings that you want. +#. Click **Save**. + +For the first example problem above, the text in the Problem component is the +following. + +:: + + >>What base is the decimal numeral system in?<< + + = 10 + + [explanation] + The decimal numerial system is base ten. + [explanation] + +================== +Advanced Editor +================== + +To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code. + +**Problem Code**: + +.. code-block:: xml + + +

Example Problem

+ +

What base is the decimal numeral system in? + + + +

+ +

What is the value of the standard gravity constant g, measured in m/s2? Give your answer to at least two decimal places. + + + + +

+ + + + +

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

+ 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/text_input.rst b/docs/en_us/course_authors/source/exercises_tools/text_input.rst new file mode 100644 index 0000000000..b23429c25f --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/text_input.rst @@ -0,0 +1,394 @@ +.. _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 multiple choice problems in the Simple Editor or in the Advanced Editor. + +.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<). + +============== +Simple Editor +============== + +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) + 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 new file mode 100644 index 0000000000..8fbfa1fd16 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/word_cloud.rst @@ -0,0 +1,66 @@ +.. _Word Cloud: + +################## +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**. + + #. On the **Advanced Settings** page, locate the **Manual Policy Definition** section, and then locate the **advanced_modules** policy key (this key is at the top of the list). + + #. Under **Policy Value**, place your cursor between the brackets, and + then enter the following. Make sure to include the quotation marks. + + ``"word_cloud"`` + + #. 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. + + #. 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 new file mode 100644 index 0000000000..65bd5408f5 --- /dev/null +++ b/docs/en_us/course_authors/source/exercises_tools/zooming_image.rst @@ -0,0 +1,65 @@ +.. _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. + + diff --git a/docs/en_us/course_authors/source/getting_started/glossary.rst b/docs/en_us/course_authors/source/getting_started/glossary.rst index 15b93c8aa5..f071c487dd 100644 --- a/docs/en_us/course_authors/source/getting_started/glossary.rst +++ b/docs/en_us/course_authors/source/getting_started/glossary.rst @@ -135,7 +135,7 @@ C **Custom Response Problem** - A custom response problem evaluates text responses from students using an embedded Python script. These problems are also called "write-your-own-grader" problems. For more information, see :ref:`Custom Python Evaluated Input` Custom Python-evaluated input (also called "write-your-own-grader" problems evaluate students'. + A custom response problem evaluates text responses from students using an embedded Python script. These problems are also called "write-your-own-grader" problems. For more information, see :ref:`Write Your Own Grader`. .. _D: @@ -324,7 +324,7 @@ M A problem that requires students to enter a mathematical expression as text, such as e=m*c^2. - See :ref:`Math Expression Syntax` for more information. + See :ref:`Math Response Formatting for Students` for more information. .. _MathJax: @@ -462,7 +462,7 @@ S **Simple Editor** - The graphical user interface in a Problem component that contains formatting buttons and is available for some problem types. For more information, see :ref:`Studio UI`. + The graphical user interface in a Problem component that contains formatting buttons and is available for some problem types. For more information, see :ref:`Problem Studio View`. diff --git a/docs/en_us/course_authors/source/index.rst b/docs/en_us/course_authors/source/index.rst index 88f15705a5..6b609afa59 100755 --- a/docs/en_us/course_authors/source/index.rst +++ b/docs/en_us/course_authors/source/index.rst @@ -16,7 +16,7 @@ Building and Running an edX Course getting_started/index building_course/index creating_content/index - problems_tools/index + exercises_tools/index releasing_course/index running_course/index students/index \ No newline at end of file diff --git a/docs/en_us/course_authors/source/problems_tools/additional_tools.rst b/docs/en_us/course_authors/source/problems_tools/additional_tools.rst deleted file mode 100644 index 7ed91368b1..0000000000 --- a/docs/en_us/course_authors/source/problems_tools/additional_tools.rst +++ /dev/null @@ -1,736 +0,0 @@ -.. _Additional Tools: - - -############################# -Additional Tools -############################# - -************************* -Additional Tools Overview -************************* - -Individual course teams frequently create tools and problem types that don't have templates in Studio. We want to make these tools available to all our course teams. - -Below, we provide you with all the files and code that you need to create the following tools and problem types. - -* :ref:`Chemical Equation` -* :ref:`Conditional Module` -* :ref:`Gene Explorer` -* :ref:`Interactive Periodic Table` -* :ref:`Molecule Editor` -* :ref:`Multiple Choice and Numerical Input` -* :ref:`Polls` -* :ref:`Protein Builder` - - -.. _Chemical Equation: - -************************** -Chemical Equation Problem -************************** - -The chemical equation problem type allows the student to enter text that represents a chemical equation into a text box. The LMS 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^-

-
- - - -.. _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 Conditional module. The following attributes can -be specified for this tag:: - - 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:: - - sources - location id of modules, separated by ';' - -======= -Example -======= - -Examples of conditional depends on poll -------------------------------------------- - -.. code-block:: xml - - - -

You see this, cause 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, cause "lec27_Q1" is not attempted. - - - -.. _Gene Explorer: - -************************** -Gene Explorer -************************** - -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 -===================== - -:: - - -

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. - - -.. _Interactive Periodic Table: - -************************** -Interactive Periodic Table -************************** - -You can create an interactive periodic table of the elements to help your students learn about various elements' properties. In the table below, detailed information about each element appears as the student moves the mouse over the element. - -.. image:: ../Images/Periodic_Table.png - :alt: Image of the interactive periodic table - -.. _Create the Periodic Table: - -========================== -Create the Periodic Table -========================== - -To create a periodic table, you need the following files: - -* Periodic-Table.js -* Periodic-Table.css -* Periodic-Table-Colors.css -* PeriodicTableHTML.txt - -To download all of these files in a .zip archive, click http://files.edx.org/PeriodicTableFiles.zip. - -To create the periodic table, you need an HTML component. - -#. Upload all of the files listed above *except PeriodicTable.txt* to the **Files & Uploads** page in your course. -#. In the unit where you want to create the problem, click **HTML** under **Add New Component**, and then click **HTML**. -#. In the component that appears, click **Edit**. -#. In the component editor, switch to the **HTML** tab. -#. Open the PeriodicTable.txt file in any text editor. -#. Copy all of the text in the PeriodicTable.txt file, and paste it into the HTML component editor. (Note that the PeriodicTableHTML.txt file contains over 6000 lines of code. Paste all of this code into the component editor.) -#. Click **Save**. - -.. _Molecule Editor: - -************************ -Molecule Editor -************************ - -Students can use the molecule editor to learn how to create molecules. The molecule editor allows students to draw molecules that follow the rules for covalent bond formation and formal charge, even if the molecules are chemically impossible, are unstable, or do not exist in living systems. The molecule editor warns students if they try to submit a structure that is chemically impossible. - -The molecule editor incorporates two tools: the JSME molecule editor created by Peter Erl and Bruno Bienfait, and JSmol, a JavaScript-based molecular viewer from Jmol. (You don't need to download either of these tools--Studio uses them automatically.) For more information about the JSME molecule editor, see `JSME Molecule Editor `_. For more information about JSmol, see `JSmol `_. - -.. image:: ../Images/Molecule_Editor.png - :alt: Image of the molecule editor - -.. _Create the Molecule Editor: - -========================== -Create the Molecule Editor -========================== - -To create a molecule editor, you need the following files: - -* MoleculeAnswer.png -* MoleculeEditor_HTML.png -* dopamine.mol - -To download all of these files in a .zip archive, go to http://files.edx.org/MoleculeEditorFiles.zip. - -.. note:: The molecule that appears when the tool starts is a dopamine molecule. To use a different molecule, download the .mol file for that molecule from the `list of molecules `_ on the `BioTopics `_ website. Then, upload the .mol file to the **Files & Uploads** page for your course in Studio, and change "dopamine.mol" in the example code to the name of your .mol file. - -To create the molecule editor that appears in the image above, you need an HTML component followed by a Problem component. - -#. Upload all of the files listed above to the **Files & Uploads** page in your course. -#. Create the HTML component. - - #. In the unit where you want to create the problem, click **HTML** under **Add New Component**, and then click **HTML**. - #. In the component that appears, click **Edit**. - #. In the component editor, paste the HTML component code from below. - #. Make any changes that you want, and then click **Save**. - -3. Create the Problem component. - - #. Under the HTML component, click **Problem** under **Add New Component**, and then click **Blank Advanced Problem**. - #. In the component that appears, click **Edit**. - #. In the component editor, paste the Problem component code from below. - #. Click **Save**. - -.. _EMC Problem Code: - -===================== -Molecule Editor Code -===================== - -To create the molecule editor, you need an HTML component and a Problem component. - -HTML Component Code -------------------- - -.. code-block:: xml - -

Molecule Editor

-

The molecule editor makes creating and visualizing molecules easy. A chemistry professor may have you build and submit a molecule as part of an exercise.

-
- -
-
- -
-
-
Using the Molecule Editor+ open
-
-
- -
-

 

-
-
Are the molecules I've drawn chemically possible?+ open
-
-
- -
-
 
- - - - -Problem Component Code ----------------------- -.. code-block:: xml - - -

The dopamine molecule, as shown, cannot make ionic bonds. Edit the dopamine molecule so it can make ionic bonds.

-

When you are ready, click Check. If you need to start over, click Reset.

- - - - - - - - - - -**Problem 2** - -:: - - -

The dopamine molecule, as shown, cannot make strong hydrogen bonds. Edit the dopamine molecule so that it can make strong hydrogen bonds.

- - - - - - - -**Problem 3** - -:: - - -

The dopamine molecule has an intermediate hydrophobicity. Edit the dopamine molecule so that it is more hydrophobic.

- - - - - - - -.. _Multiple Choice and Numerical Input: - -******************************************* -Multiple Choice and Numerical Input Problem -******************************************* - -You can create a problem that combines a multiple choice and numerical input problems. Students not only select a response from options that you provide, but also provide more specific information, if necessary. - -.. image:: ../Images/MultipleChoice_NumericalInput.png - :alt: Image of a multiple choice and numerical input problem - -.. note:: Currently, students can only enter numerals in the text field. Students cannot enter words or mathematical expressions. - -.. _Create an MCNA Problem: - -==================================================== -Create a Multiple Choice and Numerical Input Problem -==================================================== - -To create a multiple choice and numerical input problem: - -#. In the unit where you want to create the problem, click **Problem** under **Add New Component**, and then click the **Advanced** tab. -#. Click **Blank Advanced Problem**. -#. In the component that appears, click **Edit**. -#. In the component editor, paste the code from below. -#. Replace the example problem and response options with your own text. -#. Click **Save**. - -.. _MCNA Problem Code: - -=================================================== -Multiple Choice and Numerical Input Problem Code -=================================================== - -.. code-block:: xml - - - The numerical value of pi, rounded to two decimal points, is 3.24. - - - True. - False. The correct value is . - - - - -.. _Polls: - -****** -Polls -****** - -You can run polls in your course so that your students can share opinions on different questions. - -.. image:: ../Images/PollExample.png - -.. note:: Creating a poll requires you to export your course, edit some of your course's XML files in a text editor, and then re-import your course. We recommend that you create a backup copy of your course before you create the poll. We also recommend that you only edit the files that will contain polls in the text editor if you're very familiar with editing XML. - -=========== -Terminology -=========== - -Sections, subsections, units, and components have different names in the **Course Outline** view and in the list of files that you'll see after you export your course and open the .xml files for editing. The following table lists the names of these elements in the **Course Outline** view and in a list of files. - -.. list-table:: - :widths: 15 15 - :header-rows: 0 - - * - Course Outline View - - File List - * - Section - - Chapter - * - Subsection - - Sequential - * - Unit - - Vertical - * - Component - - Discussion, HTML, problem, or video - -For example, when you want to find a specific section in your course, you'll look in the **Chapter** folder when you open the list of files that your course contains. To find a unit, you'll look in the **Vertical** folder. - -.. _Create a Poll: - -============= -Create a Poll -============= - -#. In the unit where you want to create the poll, create components that contain all the content that you want *except* for the poll. Make a note of the 32-digit unit ID that appears in the **Unit Identifier** field under **Unit Location**. - -#. Export your course. For information about how to do this, see :ref:`Exporting and Importing a Course`. Save the .tar.gz file that contains your course in a memorable location so that you can find it easily. - -#. Locate the .tar.gz file that contains your course, and then unpack the .tar.gz file so that you can see its contents in a list of folders and files. - - - To do this on a Windows computer, you'll need to download a third-party program. For more information, see `How to Unpack a tar File in Windows `_, `How to Extract a Gz File `_, `The gzip Home Page `_, or the `Windows `_ section of the `How to Open .tar.gz Files `_ page. - - - For information about how to do this on a Mac, see the `Mac OS X `_ section of the `How to Open .tar.gz Files `_ page. - -#. In the list of folders and files, open the **Vertical** folder. - - .. note:: If your unit is not published, open the **Drafts** folder, and then open the **Vertical** folder in the **Drafts** folder. - -#. In the **Vertical** folder, locate the .xml file that has the same name as the unit ID that you noted in step 1, and then open the file in a text editor such as Sublime 2. For example, if the unit ID is e461de7fe2b84ebeabe1a97683360d31, you'll open the e461de7fe2b84ebeabe1a97683360d31.xml file. - - The file contains a list of all the components in the unit, together with the URL names of the components. For example, the following file contains an HTML component followed by a Discussion component. - - .. code-block:: xml - - - - - - -#. Add the following poll code in the location where you want the poll. Change the text of the prompt to the text that you want. - - .. code-block:: xml - - -

Text of the prompt

- Yes - No - - - In the example above, if you wanted your poll to appear between the HTML component and the Discussion component in the unit, your code would resemble the following. - - .. code-block:: xml - - - - -

Text of the prompt

- Yes - No - - - - -#. After you add the poll code, save and close the .xml file. - -#. Re-package your course as a .tar.gz file. - - * For information about how to do this on a Mac, see `How to Create a Tar GZip File from the Command Line `_. - - * For information about how to do this on a Windows computer, see `How to Make a .tar.gz on Windows `_. - -#. In Studio, re-import your course. You can now review the poll question and answers that you added in Studio. - -.. note:: - - * Although polls render correctly in Studio, you cannot edit them in Studio. You will need to follow the export/import process outlined above to make any edits to your polls. - - * A .csv file that contains student responses to the problem is not currently available for polls. However, you can obtain the aggregate data directly in the problem. - -================== -Format description -================== - -The main tag of Poll module input is: - -.. code-block:: xml - - ... - -``poll_question`` can include any number of the following tags: -any xml and ``answer`` tag. All inner xml, except for ``answer`` tags, we call "question". - -poll_question tag ------------------ - -Xmodule for creating poll functionality - voting system. The following attributes can -be specified for this tag:: - - name - Name of xmodule. - [display_name| AUTOGENERATE] - Display name of xmodule. When this attribute is not defined - display name autogenerate with some hash. - [reset | False] - Can reset/revote many time (value = True/False) - - -answer tag ----------- - -Define one of the possible answer for poll module. The following attributes can -be specified for this tag:: - - id - unique identifier (using to identify the different answers) - -Inner text - Display text for answer choice. - -Example -======= - -Examples of poll ----------------- - -.. code-block:: xml - - -

Age

-

How old are you?

- < 18 - from 10 to 25 - > 25 - - -Examples of poll with unable reset functionality ------------------------------------------------- - -.. code-block:: xml - - -

Your gender

-

You are man or woman?

- Man - Woman - - -.. _Protein Builder: - -************************ -Protex Protein Builder -************************ - -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 -========================== - -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 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/problems_tools/advanced_problems.rst b/docs/en_us/course_authors/source/problems_tools/advanced_problems.rst deleted file mode 100644 index 2a1038e50e..0000000000 --- a/docs/en_us/course_authors/source/problems_tools/advanced_problems.rst +++ /dev/null @@ -1,808 +0,0 @@ -.. _Advanced Problems: - -Advanced Problems -================= - -Advanced problems are problems such as drag and drop, circuit schematic -builder, and math expression problems. Many of these problems appear on the -Advanced tab when you create a new Problem component. Studio provides -templates for these problems, but the problems open directly in the -**Advanced Editor** and have to be created in XML. - -- :ref:`Circuit Schematic Builder` In circuit schematic problems, students - create and modify circuits on an interactive grid and submit - computer-generated analyses of the circuits for grading. -- :ref:`Custom JavaScript Display and Grading` With custom JavaScript display - and grading problems, you can incorporate problem types that you've created - in HTML into Studio via an IFrame. -- :ref:`Custom Python Evaluated Input` Custom Python-evaluated input (also called "write-your-own-grader" problems evaluate students' responses using an embedded Python script that you create. These problems can be any type. -- :ref:`Drag and Drop` Drag and drop problems require students to drag text - or objects to a specific location on an image. -- :ref:`Image Mapped Input` Image mapped input problems require students to - click a specific location on an image. -- :ref:`Math Expression Input` Math expression input problems require - students to enter a mathematical expression as text, such as - e=m\*c^2. -- :ref:`Problem with Adaptive Hint` These problems can give students - feedback or hints based on their responses. Problems with adaptive - hints can be text input or multiple choice problems. -- :ref:`Problem Written in LaTeX` This problem type allows you to convert problems that you’ve already written in LaTeX into the edX format. Note that this problem type is still a prototype, however, and may not be supported in the future. - -These problems are easy to access in Studio. To create them, click -**Problem** under **Add New Component**, click the **Advanced** tab, and -then click the name of the problem that you want to create. - - -.. _Circuit Schematic Builder: - -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/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 picture, 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.

-

-
- - - -.. _Custom JavaScript Display and Grading: - -Custom JavaScript Display and Grading -------------------------------------- - -Custom JavaScript display and grading problems (also called *custom JavaScript problems* -or *JS Input problems*) allow you to create a custom problem or tool that uses JavaScript -and then add the problem or tool directly into Studio. When you create a JS Input problem, -Studio embeds the problem in an inline frame (IFrame) so that your students can interact with -it in the LMS. You can grade your students’ work using JavaScript and some basic Python, and -the grading is integrated into the edX grading system. - -The JS Input problem that you create must use HTML, JavaScript, and cascading style sheets -(CSS). You can use any application creation tool, such as the Google Web Toolkit (GWT), to -create your JS Input problem. - -.. image:: ../Images/JavaScriptInputExample.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. - -.. _Custom Python Evaluated Input: - -Custom Python-Evaluated Input ("Write-Your-Own-Grader") -------------------------------------------------------- - - -In custom Python-evaluated input (also called "write-your-own-grader problems" 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 Display and Grading` -* :ref:`Custom Python Evaluated Input` -* :ref:`Gene Explorer` -* :ref:`Molecule Editor` -* :ref:`Protein Builder` - -.. list-table:: - :widths: 20 80 - - * - `` - -

Enter two integers that sum to 10.

- -
- - - def test_add(expect, ans): - try: - a1=int(ans[0]) - a2=int(ans[1]) - return (a1+a2) == int(expect) - except ValueError: - return False - - def test_add_to_ten(expect, ans): - return test_add(10, ans) - - - -

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

-
- - - - -.. _Drag and Drop: - -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/DragAndDropProblem.png - :alt: Image of a drag and drop problem - -Create a Drag and Drop Problem -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -To create a drag and drop problem, you'll need the following files: - -* Allopurinol.gif -* AllopurinolAnswer.gif - -To download both these files in a .zip archive, go to http://files.edx.org/DragAndDropProblemFiles.zip. - -To create the molecule editor that appears in the image above, you'll upload the files for this problem, and then paste the code below into a Problem component. - -#. 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'] - - - - - - - -.. _Image Mapped Input: - -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/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.

- - - - - - - - -.. _Math Expression Input: - -Math Expression Input ---------------------- - -In math expression input problems, students enter text that represents a mathematical expression into a field, and the LMS changes that text to a symbolic expression that appears below that field. - - -.. image:: ../Images/MathExpressionInputExample.png - :alt: Image of math expression input problem - -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. 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. -#. Click **Save**. - -**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

-
- - - -**Notes for Students** - -When you answer a math expression input problem, follow these guidelines. - -* Use standard arithmetic operation symbols. -* Indicate multiplication explicitly by using an asterisk (*). -* Use a caret (^) to raise to a power. -* Use an underscore (_) to indicate a subscript. -* Use parentheses to specify the order of operations. - -The LMS automatically converts the following Greek letter names into the corresponding Greek characters when a student types them in the answer field: - -.. list-table:: - :widths: 20 20 20 20 - :header-rows: 0 - - * - alpha - - beta - - gamma - - delta - * - epsilon - - varepsilon - - zeta - - eta - * - theta - - vartheta - - iota - - kappa - * - lambda - - mu - - nu - - xi - * - pi - - rho - - sigma - - tau - * - upsilon - - phi - - varphi - - chi - * - psi - - omega - - - - - -note:: ``epsilon`` is the lunate version, whereas ``varepsilon`` looks like a backward 3. - -.. _Problem with Adaptive Hint: - -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 or multiple choice problems. - -.. image:: ../Images/ProblemWithAdaptiveHintExample.png - :alt: Image of a problem with an adaptive hint - -Create a Problem with an Adaptive Hint -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -To create a problem with an adaptive hint: - -#. In the unit where you want to create the problem, click **Problem** - under **Add New Component**, and then click the **Advanced** tab. -#. Click **Problem with Adaptive Hint**. -#. In the component that appears, click **Edit**. -#. In the component editor, replace the example code with your own code. -#. Click **Save**. - -.. _Problem Written in LaTeX: - -Problem Written in LaTeX ------------------------- - -.. warning:: This problem type is still a prototype and may not be supported in the future. By default, the ability to create these problems is not enabled in Studio. You must change the advanced settings in your course before you can create problems with LaTeX. Use this problem type with caution. - -If you have an problem that is already written in LaTeX, you can use -this problem type to easily convert your code into XML. After you paste -your code into the LaTeX editor, you'll only need to make a few minor -adjustments. - -.. note:: If you want to use LaTeX to typeset mathematical expressions - in problems that you haven't yet written, use any of the other problem - templates together with `MathJax `_. For more - information about how to create mathematical expressions in Studio using - MathJax, see *A Brief Introduction to MathJax in Studio*. - -.. image:: ../Images/ProblemWrittenInLaTeX.png - :alt: Image of a problem written in LaTeX - -Create a Problem Written in LaTeX -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -To create a problem written in LaTeX: - -#. Enable the policy key in your course. - - #. In Studio, click **Settings**, and then click **Advanced Settings**. - #. On the **Advanced Settings** page, scroll down to the **use_latex_compiler** policy key. - #. In the **Policy Value** field next to the **use_latex_compiler** policy key, change **false** to **true**. - #. At the bottom of the page, click **Save Changes**. - -#. In the unit where you want to create the problem, click **Problem** - under **Add New Component**, and then click the **Advanced** tab. -#. Click **Problem Written in LaTeX**. -#. In the component editor that appears, click **Edit**. -#. In the lower left corner of the component editor, click **Launch - LaTeX Source Compiler**. -#. Replace the example code with your own code. You can also upload a Latex file into the editor from your computer by clicking **Upload** in the bottom right corner. -#. In the lower left corner of the LaTeX source compiler, click **Save & - Compile to edX XML**. \ No newline at end of file diff --git a/docs/en_us/course_authors/source/problems_tools/common_problems.rst b/docs/en_us/course_authors/source/problems_tools/common_problems.rst deleted file mode 100644 index 4aaed74188..0000000000 --- a/docs/en_us/course_authors/source/problems_tools/common_problems.rst +++ /dev/null @@ -1,1157 +0,0 @@ -.. _Common Problems: - -############### -Common Problems -############### - -*Common problems* are typical problems such as multiple choice problems and other problems whose answers are simple for students to select or enter. You can create all of these problems using the Simple Editor in Studio. You don't have to use XML or switch to the Advanced Editor. (However, this section also provides sample XML code for these problems in the Advanced Editor.) - -The following are the common problem types in Studio: - -- :ref:`Checkbox` In checkbox problems, students select one or more options - from a list of possible answers. -- :ref:`Dropdown` In dropdown problems, students select one answer from a - dropdown list. -- :ref:`Multiple Choice` Multiple choice problems require students to - select one answer from a list of choices that appear directly below - the question. -- :ref:`Numerical Input` Numerical input problems require answers that - include only integers, fractions, and a few common constants and - operators. -- :ref:`Text Input` In text input problems, students enter a short text - answer to a question. - -These problems are easy to access in Studio. To create them, click -**Problem** under **Add New Component**, click the **Common Problem -Types** tab, and then click the name of the problem. - -.. 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*<<). - -.. _Checkbox: - -******************* -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. 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. - -++++++++++++++++++++++++++++++++++++++++++ -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.

-
- - - - - - -.. _Dropdown: - -******************* -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/DropdownExample.png - :alt: Image of a dropdown problem - -========================== -Create a Dropdown Problem -========================== - -You can create dropdown problems in the Simple Editor or in the Advanced Editor. - -++++++++++++++++++++++++++++++++++++++++++ -Simple Editor -++++++++++++++++++++++++++++++++++++++++++ - -To create a dropdown problem, follow these steps. - -#. Under **Add New Component**, click **Problem**. -#. In the **Select Problem Component Type** screen, click - **Dropdown** on the **Common Problem Types** tab. -#. In the new Problem component that appears, click **Edit**. -#. Replace the default text with the text for your problem. Enter each of the possible - answers on the same line, separated by commas. -#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<). -#. Select all the answer options, and then click the dropdown button. - - .. image:: ../Images/ProbCompButton_Dropdown.png - :alt: Image of the dropdown button - - When you do this, a double set of brackets ([[ ]]) appears and surrounds the - answer options. - -#. Inside the brackets, surround the correct answer with parentheses. -#. In the component editor, select the text of the explanation, and then click the - explanation button to add explanation tags around the text. - - .. image:: ../Images/ProbCompButton_Explanation.png - :alt: Image of the explanation button - -#. On the **Settings** tab, specify the settings that you want. -#. Click **Save**. - -For the example problem above, the text in the Problem component is the -following. - -:: - - >>What type of data are the following?<< - - Age: - [[Nominal, Discrete, (Continuous)]] - Age, rounded to the nearest year: - [[Nominal, (Discrete), Continuous]] - Life stage - infant, child, and adult: - [[(Nominal), Discrete, Continuous]] - -++++++++++++++++++++++++++++++++++++++++++ -Advanced Editor -++++++++++++++++++++++++++++++++++++++++++ - -To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code. - -**Problem Code:** - -.. code-block:: xml - - -

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

- - - - - -.. _Multiple Choice: - -******************* -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/MultipleChoiceExample.png - :alt: Image of a multiple choice problem - -You can also configure the following: - -* :ref:`Shuffle Answers in a Multiple Choice Problem` -* :ref:`Targeted Feedback in a Multiple Choice Problem` -* :ref:`Answer Pools in a Multiple Choice Problem` - -================================== -Create a Multiple Choice Problem -================================== - -You can create multiple choice problems in the Simple Editor or in the Advanced Editor. - -++++++++++++++++++++++++++++++++++++++++++ -Simple Editor -++++++++++++++++++++++++++++++++++++++++++ - -#. Under **Add New Component**, click **Problem**. -#. In the **Select Problem Component Type** screen, click **Multiple - Choice** on the **Common Problem Types** tab. -#. When the new Problem component appears, click **Edit**. -#. In the component editor, replace the sample problem text with the text of your - problem. Enter each answer option on its own line. -#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<). -#. Select all the answer options, and then click the multiple choice button. - - .. image:: ../Images/ProbCompButton_MultChoice.png - :alt: Image of the multiple choice button - - When you do this, the component editor adds a pair of parentheses next to each - possible answer. - -#. Add an "x" between the parentheses next to the correct answer. - -#. In the component editor, select the text of the explanation, and then click the - explanation button to add explanation tags around the text. - - .. image:: ../Images/ProbCompButton_Explanation.png - :alt: Image of the explanation button - -#. On the **Settings** tab, specify the settings that you want. -#. Click **Save**. - -For the example problem above, the text in the Problem component is the -following. - -:: - - >>Lateral inhibition, as was first discovered in the horsehoe crab:<< - - ( ) is a property of touch sensation, referring to the ability of crabs to - detect nearby predators. - ( ) is a property of hearing, referring to the ability of crabs to detect - low frequency noises. - (x) is a property of vision, referring to the ability of crabs eyes to - enhance contrasts. - ( ) has to do with the ability of crabs to use sonar to detect fellow horseshoe - crabs nearby. - ( ) has to do with a weighting system in the crabs skeleton that allows it to - balance in turbulent water. - - [Explanation] - Horseshoe crabs were essential to the discovery of lateral inhibition, a property of - vision present in horseshoe crabs as well as humans, that enables enhancement of - contrast at edges of objects as was demonstrated in class. In 1967, Haldan Hartline - received the Nobel prize for his research on vision and in particular his research - investigating lateral inhibition using horseshoe crabs. - [Explanation] - -++++++++++++++++++++++++++++++++++++++++++ -Advanced Editor -++++++++++++++++++++++++++++++++++++++++++ - -To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code. - -.. code-block:: xml - - -

Lateral inhibition, as was first discovered in the horsehoe crab...

- - - is a property of touch sensation, referring to the ability of crabs to detect nearby predators. - is a property of hearing, referring to the ability of crabs to detect low frequency noises. - is a property of vision, referring to the ability of crabs eyes to enhance contrasts. - has to do with the ability of crabs to use sonar to detect fellow horseshoe crabs nearby. - has to do with a weighting system in the crabs skeleton that allows it to balance in turbulent water. - - - -
-

Explanation

-

Horseshoe crabs were essential to the discovery of lateral inhibition, a property of vision present in horseshoe crabs as well as humans, that enables enhancement of contrast at edges of objects as was demonstrated in class. In 1967, Haldan Hartline received the Nobel prize for his research on vision and in particular his research investigating lateral inhibition using horseshoe crabs.

-
- - - -.. _Shuffle Answers in a Multiple Choice Problem: - -============================================= -Shuffle Answers in a Multiple Choice Problem -============================================= - -Optionally, you can configure a multiple choice problem so that it shuffles the order of possible answers. - -For example, one view of the problem could be: - -.. image:: ../Images/multiple-choice-shuffle-1.png - :alt: Image of a multiple choice problem - -And another view of the same problem, for another student or for the same student of a subsequent view of the unit, could be: - -.. image:: ../Images/multiple-choice-shuffle-2.png - :alt: Image of a multiple choice problem with shuffled answers - -You can also have some answers shuffled, but not others. For example, you may want to have the answer "All of the Above" fixed at the end of the list, but shuffle other answers. - -You can configure the problem to shuffle answers through :ref:`Simple Editor` or :ref:`Advanced Editor`. - -++++++++++++++++++++++++++++++++++++++++++ -Use the Simple Editor to Shuffle Answers -++++++++++++++++++++++++++++++++++++++++++ - -You can configure the problem to shuffle answers in :ref:`Simple Editor`. - -For example, the following text defines a multiple choice problem, before shuffling is enabled. The ``(x)`` indicates the correct answer:: - - >>What Apple device competed with the portable CD player?<< - ( ) The iPad - ( ) Napster - (x) The iPod - ( ) The vegetable peeler - -To add shuffling to this problem, add ``!`` in the parenthesis of the first answer:: - - >>What Apple device competed with the portable CD player?<< - (!) The iPad - ( ) Napster - (x) The iPod - ( ) The vegetable peeler - -To fix an answer's location in the list, add ``@`` in the parenthesis of that answer:: - - >>What Apple device competed with the portable CD player?<< - (!) The iPad - ( ) Napster - (x) The iPod - ( ) The vegetable peeler - (@) All of the above - -You can combine symbols within parenthesis as necessary. For example, to show the correct answer in a fixed location, you could use:: - - (x@) The iPod - -++++++++++++++++++++++++++++++++++++++++++ -Use the Advanced Editor to Shuffle Answers -++++++++++++++++++++++++++++++++++++++++++ - -You can configure the problem to shuffle answers through XML in :ref:`Advanced Editor`. - -For example, the following XML defines a multiple choice problem, before shuffling is enabled: - -.. code-block:: xml - -

What Apple device competed with the portable CD player?

- - - The iPad - Napster - The iPod - The vegetable peeler - - - - -To add shuffling to this problem, add ``shuffle="true"`` to the ```` element: - -.. code-block:: xml - -

What Apple device competed with the portable CD player?

- - - The iPad - Napster - The iPod - The vegetable peeler - - - -To fix an answer's location in the list, add ``fixed="true"`` to the ``choice`` element for the answer: - -.. code-block:: xml - -

What Apple device competed with the portable CD player?

- - - The iPad - Napster - The iPod - The vegetable peeler - All of the above - - - - -.. _Targeted Feedback in a Multiple Choice Problem: - -=============================================== -Targeted Feedback in a Multiple Choice Problem -=============================================== - -You can configure a multiple choice problem so that explanations for incorrect answers are automatically shown to students. You can use these explanations to guide students towards the right answer. Therefore, targeted feedback is most useful for multiple choice problems for which students are allowed multiple attempts. - - -++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -Use the Advanced Editor to Configure Targeted Feedback -++++++++++++++++++++++++++++++++++++++++++++++++++++++++ - -You configure the problem to provide targeted feedback through XML in :ref:`Advanced Editor`. - -Follow these XML guidelines: - -* Add a ``targeted-feedback`` attribute to the ```` element, with no value: ```` -* Add a ```` element before the ```` element. -* Within ````, add one or more ```` elements. -* Within each ```` element, enter your explanation for the incorrect answer in HTML as markup described below. -* Connect the ```` element with a specific incorrect answer by using the same ``explanation-id`` attribute value for each. -* Use the ```` element for the correct answer, with the same ``explanation-id`` attribute value as the correct ````. - -For example, the XML for the multiple choice problem is: - -.. code-block:: xml - -

What Apple device competed with the portable CD player?

- - - The iPad - Napster - The iPod - The vegetable peeler - - - -This is followed by XML that defines the targeted feedback: - -.. code-block:: xml - - - -
-

Targeted Feedback

-

The iPad came out later and did not directly compete the portable CD players.

-
- - -
-

Targeted Feedback

-

Napster was not an Apple product.

-
- - -
-

Targeted Feedback

-

No, not even close.

-
- - - - -
-

Yes, the iPod competed with portable CD players.

-
- - - -.. _Answer Pools in a Multiple Choice Problem: - -============================================= -Answer Pools in a Multiple Choice Problem -============================================= - -You can configure a multiple choice problem so that a random subset of choices are shown to each student. For example, you can add 10 possible choices to the problem, and each student views a set of five choices. - -The answer pool must have at least one correct answer, and can have more than one. In each set of choices shown to a student, one correct answer is included. For example, you may configure two correct answers in the set of 10. One of the two correct answers is included in each set a student views. - -++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -Use the Advanced Editor to Configure Answer Pools -++++++++++++++++++++++++++++++++++++++++++++++++++++++++ - -You configure the problem to provide answer pools through XML in :ref:`Advanced Editor`. - -Follow these XML guidelines: - -* In the ```` element, add the ``answer-pool`` attribute, with the numerical value indicating the number of possible answers in the set. For example, ````. - -* For each correct answer, to the ```` element, add an ``explanation-id`` attribute and value that maps to a solution. For example, ``The iPod``. - -* For each ```` element, add an ``explanation-id`` attribute and value that maps back to a correct answer. For example, ````. - -.. note:: If the choices include only one correct answer, you do not have to use the ``explanation-id`` in either the ``choice`` or ```` element. You do still use the ```` element to wrap the ```` element. - -For example, for the following multiple choice problem, a student will see four choices, and in each set one of the choices will be one of the two correct ones. The explanation shown for the correct answer is the one with the same explanation ID. - -.. code-block:: xml - - -

What Apple devices let you carry your digital music library in your pocket?

- - - The iPad - Napster - The iPod - The vegetable peeler - The iMac - The iPhone - - - - - -
-

Explanation

-

Yes, the iPod is Apple's portable digital music player.

-
- - -
-

Explanation

-

In addition to being a cell phone, the iPhone can store and play your digital music.

-
- - - - - -.. _Numerical Input: - -******************* -Numerical Input -******************* - -In numerical input problems, students enter numbers or specific and -relatively simple mathematical expressions to answer a question. - -.. image:: ../Images/image292.png - :alt: Image of a numerical input problem - -Note that students' responses don't have to be exact for these problems. You can -specify a margin of error, or tolerance. You can also specify a correct answer explicitly, or use a Python script. For more information, see the instructions below. - -Responses for numerical input problems can include integers, fractions, -and constants such as *pi* and *g*. Responses can also include text -representing common functions, such as square root (sqrt) and log base 2 -(log2), as well as trigonometric functions and their inverses, such as -sine (sin) and arcsine (arcsin). For these functions, Studio changes the -text that the student enters into mathematical symbols. The following -example shows the way Studio renders students' text responses in -numerical input problems. - -.. image:: ../Images/Math5.png - :alt: Image of a numerical input probem rendered by Studio - -The following are a few more examples of the way that Studio renders numerical input -text that students enter. - -.. image:: ../Images/Math1.png - :alt: Image of a numerical input probem rendered by Studio -.. image:: ../Images/Math2.png - :alt: Image of a numerical input probem rendered by Studio -.. image:: ../Images/Math3.png - :alt: Image of a numerical input probem rendered by Studio -.. image:: ../Images/Math4.png - :alt: Image of a numerical input probem rendered by Studio -.. image:: ../Images/Math5.png - :alt: Image of a numerical input probem rendered by Studio - -================== -Student Answers -================== - -.. _Math Expression Syntax: - -+++++++++++++++++++++++ -Math Expression Syntax -+++++++++++++++++++++++ - -In numerical input problems, the **student's input** may be more complicated than a -simple number. Expressions like ``sqrt(3)`` and even ``1+e^(sin(pi/2)+2*i)`` -are valid, and evaluate to 1.73 and -0.13 + 2.47i, respectively. - -A summary of the syntax follows: - -Numbers -~~~~~~~ - -Accepted number types: - -- Integers: '2520' -- Normal floats: '3.14' -- With no integer part: '.98' -- Scientific notation: '1.2e-2' (=0.012) -- More s.n.: '-4.4e+5' = '-4.4e5' (=-440,000) -- Appending SI suffixes: '2.25k' (=2,250). The full list: - - ====== ========== =============== - Suffix Stands for One of these is - ====== ========== =============== - % percent 0.01 = 1e-2 - k kilo 1000 = 1e3 - M mega 1e6 - G giga 1e9 - T tera 1e12 - c centi 0.01 = 1e-2 - m milli 0.001 = 1e-3 - u micro 1e-6 - n nano 1e-9 - p pico 1e-12 - ====== ========== =============== - -The largest possible number handled currently is exactly the largest float -possible (in the Python language). This number is 1.7977e+308. Any expression -containing larger values will not evaluate correctly, so it's best to avoid -this situation. - -Default Constants -~~~~~~~~~~~~~~~~~ - -Simple and commonly used mathematical/scientific constants are included by -default. These include: - -- ``i`` and ``j`` as ``sqrt(-1)`` -- ``e`` as Euler's number (2.718...) -- ``pi`` -- ``k``: the Boltzmann constant (~1.38e-23 in Joules/Kelvin) -- ``c``: the speed of light in m/s (2.998e8) -- ``T``: the positive difference between 0K and 0°C (285.15) -- ``q``: the fundamental charge (~1.602e-19 Coloumbs) - -Operators and Functions -~~~~~~~~~~~~~~~~~~~~~~~ - -The normal operators apply (with normal order of operations): -``+ - * / ^``. Also provided is a special "parallel resistors" operator given -by ``||``. For example, an input of ``1 || 2`` would represent the resistance -of a pair of parallel resistors (of resistance 1 and 2 ohms), evaluating to 2/3 -(ohms). - -At the time of writing, factorials written in the form '3!' are invalid, but -there is a workaround. Students can specify ``fact(3)`` or ``factorial(3)`` to -access the factorial function. - -The default included functions are the following: - -- Trig functions: sin, cos, tan, sec, csc, cot -- Their inverses: arcsin, arccos, arctan, arcsec, arccsc, arccot -- Other common functions: sqrt, log10, log2, ln, exp, abs -- Factorial: ``fact(3)`` or ``factorial(3)`` are valid. However, you must take - care to only input integers. For example, ``fact(1.5)`` would fail. -- Hyperbolic trig functions and their inverses: sinh, cosh, tanh, sech, csch, - coth, arcsinh, arccosh, arctanh, arcsech, arccsch, arccoth - - -================================= -Create a Numerical Input Problem -================================= - -You can create numerical problems in the Simple Editor and in the Advanced Editor regardless of the answer to the problem. If the text of your problem doesn't include any italics, bold formatting, or special characters, you can create the problem in the Simple Editor. If the text of your problem contains special formatting or characters, or if your problem contains a Python script, you'll use the Advanced Editor. - -For example, the following example problems require the Advanced Editor. - -.. image:: ../Images/NumericalInput_Complex.png - :alt: Image of a more complex numerical input problem - -For more information about including a Python script in your problem, see :ref:`Custom Python Evaluated Input`. - - -+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -Create a Numerical Input Problem in the Simple Editor -+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ - -#. Under **Add New Component**, click **Problem**. -#. In the **Select Problem Component Type** screen, click **Numerical - Input** on the **Common Problem Types** tab. - -3. When the new Problem component appears, click **Edit**. -#. In the component editor, replace the sample problem text with your own text. -#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<). -#. Select the text of the answer, and then click the numerical input button. - -.. image:: ../Images//ProbCompButton_NumInput.png - :alt: Image of the numerical input button - -When you do this, an equal sign appears next to the answer. - -7. (Optional) Specify a margin of error, or tolerance. You can specify a percentage, number, or range. - - * To specify a percentage on either side of the correct answer, add **+-NUMBER%** after the answer. For example, if you want to include a 2% tolerance, add **+-2%**. - - * To specify a number on either side of the correct answer, add **+-NUMBER** after the answer. For example, if you want to include a tolerance of 5, add **+-5**. - - * To specify a range, use brackets [] or parentheses (). A bracket indicates that range includes the number next to it. A parenthesis indicates that the range does not include the number next to it. For example, if you specify **[5, 8)**, correct answers can be 5, 6, and 7, but not 8. Likewise, if you specify **(5, 8]**, correct answers can be 6, 7, and 8, but not 5. - -8. In the component editor, select the text of the explanation, and then click the - explanation button to add explanation tags around the text. - - .. image:: ../Images/ProbCompButton_Explanation.png - :alt: Image of athe explanation button - -9. On the **Settings** tab, specify the settings that you want. -#. Click **Save**. - -For the first example problem above, the text in the Problem component is the -following. - -:: - - >>What base is the decimal numeral system in?<< - - = 10 - - [explanation] - The decimal numerial system is base ten. - [explanation] - - - -+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -Create a Numerical Input Problem in the Advanced Editor -+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ - -**Examples** - -The following are a few more examples of the way that Studio renders numerical input -text that students enter. - -.. image:: ../Images/Math1.gif - :alt: Image of a numerical input probem rendered by Studio -.. image:: ../Images/Math2.gif - :alt: Image of a numerical input probem rendered by Studio -.. image:: ../Images/Math3.gif - :alt: Image of a numerical input probem rendered by Studio -.. image:: ../Images/Math4.gif - :alt: Image of a numerical input probem rendered by Studio -.. image:: ../Images/Math5.gif - :alt: Image of a numerical input probem rendered by Studio - -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 - - -

Example Problem

- -

What base is the decimal numeral system in? - - - -

- -

What is the value of the standard gravity constant g, measured in m/s2? Give your answer to at least two decimal places. - - - - -

- - - - -

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

-
- - - - - - -.. _Text input: - -******************* -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. 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 multiple choice problems in the Simple Editor or in the Advanced Editor. - -++++++++++++++++++++++++++++++++++++++++++ -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. - - -You can provide hints for 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. For more information, see :ref:`Text Input`. - -Although you can create text input problems by using the Simple Editor in Studio, you may want to see or change the problem's underlying XML. For example, you can add hints that appear when students enter common incorrect answers, or modify the problem's XML so that students can submit regular expressions as answers. - -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 will be treated as regular expressions. - -**Sample Problem** - -.. image:: /Images/TextInputExample.gif - :alt: Image of a string response problem - -**XML Tags** - -.. list-table:: - :widths: 20 80 - - * - ```` - - Indicates that the problem is a text input problem. - * - ```` - - Child of ````. Lists the answer options and contains the ``label`` attribute. - * - ```` (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. - -**Sample Problem 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).

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

-
- - - -You can provide hints for 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. For more information, see :ref:`Text Input`. diff --git a/docs/en_us/course_authors/source/problems_tools/e.rst b/docs/en_us/course_authors/source/problems_tools/e.rst deleted file mode 100644 index 31195909ee..0000000000 --- a/docs/en_us/course_authors/source/problems_tools/e.rst +++ /dev/null @@ -1,1165 +0,0 @@ - -.. _Appendix E: - -################################ -Problem and Tool XML -################################ - -This section provides information about the XML tags for most problem and tool types in Studio: - -* :ref:`General` -* :ref:`Checkbox Problem XML` -* :ref:`Chemical Equation Problem XML` -* :ref:`Drag and Drop Problem XML` -* :ref:`Dropdown Problem XML` -* :ref:`Image Mapped Input Problem XML` -* :ref:`JS Input Problem XML` -* :ref:`Multiple Choice Problem XML` -* :ref:`Numerical Input Problem XML` -* :ref:`Math Expression Input Problem XML` -* :ref:`Text Input Problem XML` - -.. _General: - -======= -General -======= - -Most problems have the following tags. - -.. list-table:: - :widths: 20 80 - - * - `` `` - - These must be the first and last tags for any content created in the Advanced Editor in a Problem component. - * - ```` - - The ```` tag indicates the beginning of a line or block of text. - * - ```` - - The ```` tag indicates the end of a line or block of text. - * - ``
`` (optional) - - If you want to include more information in the problem, such as a detailed explanation of the problem's answer, you'll enter the text between the two ``
`` tags, which are inside the ```` tags. (These tags do not have to be on the same line.) - -Additionally, all problems must include a **label** attribute. This attribute adds a descriptive label that helps visually impaired students navigate through the problem. - -You'll add a **label** attribute to one of the XML tags for the problem. Each example problem below includes a label. - -.. _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) - - -.. _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) - - -.. _Drag and Drop Problem XML: - -========================= -Drag and Drop Problem XML -========================= - -Template --------- - -.. code-block:: xml - - -

Problem text

- - - - - - - - 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'] - - - - - - -Tags ----- - -* ````: Indicates the 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 -`_. - - -.. _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) - -.. _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) - - - -.. _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. - -.. _Multiple Choice Problem XML: - -============================= -Multiple Choice Problem XML -============================= - -Template --------- - -.. code-block:: xml - - -

Question text

- - - Incorrect choice - Correct choice - - - - -
-

Explanation or solution header

-

Explanation or solution text

-
- - - -Tags ----- - -* ```` (required): Indicates that the problem is a multiple choice problem. -* ```` (required): Indicates the beginning of the list of options. -* ```` (required): Lists an answer option. - -**Tag:** ```` - -Indicates that the problem is a multiple choice problem. - - Attributes - - (none) - - Children - - * ```` - * All standard HTML tags (can be used to format text) - -**Tag:** ```` - -Indicates the beginning of the list of options. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - label (required) - - Specifies the name of the response field. - * - type (required) - - Must be set to "MultipleChoice". - - Children - - * ```` - -**Tag:** ```` - -Lists an answer option. - - Attributes - - .. list-table:: - :widths: 20 80 - - * - Attribute - - Description - * - correct (at least one required) - - Indicates a correct or incorrect answer. When the attribute is set to "true", the choice is a correct answer. When the attribute is set to "false", the choice is an incorrect answer. Only one choice can be a correct answer. - * - name - - A unique name that the back end uses to refer to the choice. - - Children - - (none) - -.. _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. -* `` - - -
-

Explanation or Solution Header

-

Explanation or solution text

-
- - - -Tags ----- - -* ```` -* ```` -* ```` -* `` - - - -
- - - -If you need to bypass the SOP, use the following code. - -:: - - - - - - - - - - -
- - - -.. _webGLDemo.css: - -webGLDemo.css -------------- - -:: - - #container { - background-color: black; - width: 400px; - height:400px; - } - - -.. _webGLDemo.js: - -webGLDemo.js ------------- - -:: - - var WebGLDemo = (function() { - - var width = 400, height = 400; - var container, renderer, scene, camera, projector, - ambientlight, directionalLight, - cylinder, cube, nonSelectedMaterial, selectedMaterial; - // Revolutions per second - var angularSpeed = 0.5, lastTime = 0; - var state = { - 'selectedObjects': { - 'cylinder': false, - 'cube': false - } - }, - channel; - - // Establish a channel only if this application is embedded in an iframe. - // This will let the parent window communicate with this application using - // RPC and bypass SOP restrictions. - if (window.parent !== window) { - channel = Channel.build({ - window: window.parent, - origin: "*", - scope: "JSInput" - }); - - channel.bind("getGrade", getGrade); - channel.bind("getState", getState); - channel.bind("setState", setState); - } - - function init() { - container = document.getElementById('container'); - // Renderer - // First check if WebGL is supported. If not, rely on the canvas - // render and use a scene with less triangles as it is slow. - var testCanvas = document.createElement("canvas"); - var webglContext = null; - var contextNames = ["experimental-webgl", "webgl", "moz-webgl", - "webkit-3d"]; - var radiusSegments, heightSegments; - for (var i = 0; i < contextNames.length; i++) { - try { - webglContext = testCanvas.getContext(contextNames[i]); - if (webglContext) { - break; - } - } - catch (e) { - } - } - - if (webglContext) { - renderer = new THREE.WebGLRenderer({antialias:true}); - radiusSegments = 50; - heightSegments = 50; - } - else { - renderer = new THREE.CanvasRenderer(); - radiusSegments = 10; - heightSegments = 10; - } - - renderer.setSize(width, height); - renderer.setClearColor(0x000000, 1); - container.appendChild(renderer.domElement); - - // Scene - scene = new THREE.Scene(); - - // Camera - camera = new THREE.PerspectiveCamera(45, width/height, 1, 1000); - camera.position.z = 700; - - // Materials - unselectedMaterial = new THREE.MeshPhongMaterial({ - specular: '#a9fcff', - color: '#00abb1', - emissive: '#006063', - shininess: 100 - }); - - selectedMaterial = new THREE.MeshPhongMaterial({ - specular: '#a9fcff', - color: '#abb100', - emissive: '#606300', - shininess: 100 - }); - - if (!webglContext) { - unselectedMaterial.overdraw = 1.0; - selectedMaterial.overdraw = 1.0; - } - - // Cylinder: bottomRadius, topRadius, height, segmentsRadius, - // segmentsHeight - cylinder = new THREE.Mesh(new THREE.CylinderGeometry(0, 100, 150, - radiusSegments, - heightSegments, - false), - unselectedMaterial); - cylinder.position.x = -125; - cylinder.overdraw = true; - scene.add(cylinder); - - // Cube - cube = new THREE.Mesh(new THREE.CubeGeometry(120, 120, 120), - unselectedMaterial); - cube.position.x = 125; - cube.overdraw = true; - scene.add(cube); - - // Ambient light - ambientLight = new THREE.AmbientLight(0x222222); - scene.add(ambientLight); - - // Directional light - directionalLight = new THREE.DirectionalLight(0xffffff); - directionalLight.position.set(1, 1, 1).normalize(); - scene.add(directionalLight); - - // Used to select element with mouse click - projector = new THREE.Projector(); - - renderer.domElement.addEventListener('click', onMouseClick, false); - - // Start animation - animate(); - } - - // This function is executed on each animation frame - function animate() { - // Request new frame - requestAnimationFrame(animate); - render(); - } - - function render() { - // Update - var time = (new Date()).getTime(), - timeDiff = time - lastTime, - angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000; - cylinder.rotation.x += angleChange; - cylinder.rotation.z += angleChange; - cube.rotation.x += angleChange; - cube.rotation.y += angleChange; - lastTime = time; - - // Render - renderer.render(scene, camera); - } - - function onMouseClick(event) { - var vector, raycaster, intersects; - - vector = new THREE.Vector3((event.clientX / width) * 2 - 1, - -(event.clientY / height) * 2 + 1, 1); - projector.unprojectVector(vector, camera); - raycaster = new THREE.Raycaster(camera.position, - vector.sub(camera.position).normalize()); - intersects = raycaster.intersectObjects(scene.children); - - if (intersects.length > 0) { - if (intersects[0].object === cylinder) { - state.selectedObjects.cylinder = !state.selectedObjects.cylinder; - } - else if (intersects[0].object === cube) { - state.selectedObjects.cube = !state.selectedObjects.cube; - } - updateMaterials(); - } - } - - function updateMaterials() { - if (state.selectedObjects.cylinder) { - cylinder.material = selectedMaterial; - } - else { - cylinder.material = unselectedMaterial; - } - - if (state.selectedObjects.cube) { - cube.material = selectedMaterial; - } - else { - cube.material = unselectedMaterial; - } - } - - init(); - - function getGrade() { - // The following return value may or may not be used to grade - // server-side. - // If getState and setState are used, then the Python grader also gets - // access to the return value of getState and can choose it instead to - // grade. - return JSON.stringify(state['selectedObjects']); - } - - function getState() { - return JSON.stringify(state); - } - - // This function will be called with 1 argument when JSChannel is not used, - // 2 otherwise. In the latter case, the first argument is a transaction - // object that will not be used here - // (see http://mozilla.github.io/jschannel/docs/) - function setState() { - stateStr = arguments.length === 1 ? arguments[0] : arguments[1]; - state = JSON.parse(stateStr); - updateMaterials(); - } - - return { - getState: getState, - setState: setState, - getGrade: getGrade - }; - }()); diff --git a/docs/en_us/course_authors/source/problems_tools/index.rst b/docs/en_us/course_authors/source/problems_tools/index.rst deleted file mode 100644 index 6ff45e5d08..0000000000 --- a/docs/en_us/course_authors/source/problems_tools/index.rst +++ /dev/null @@ -1,21 +0,0 @@ -.. _Working with Problems Index: - -########################## -Working with Problems -########################## - -.. toctree:: - :maxdepth: 2 - - create_problem_component - common_problems - advanced_problems - specialized_problems - e - external_graders - open_response_assessment - tools - additional_tools - google_hangouts - f - g diff --git a/docs/en_us/course_authors/source/problems_tools/specialized_problems.rst b/docs/en_us/course_authors/source/problems_tools/specialized_problems.rst deleted file mode 100644 index b5c6a8d63e..0000000000 --- a/docs/en_us/course_authors/source/problems_tools/specialized_problems.rst +++ /dev/null @@ -1,154 +0,0 @@ -.. _Specialized Problems: - -Specialized Problems -==================== - -Specialized problems are advanced problems such as annotations. These problems are available through the Advanced component in Studio. To add the Advanced component to your course, you'll modify your course's advanced settings. The Advanced component then appears under **Add New Component** in each unit. - -- :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. -- :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. - -.. _ Add Advanced Component: - -**Add the Advanced Component to Your Course** - -By default, when you create a new component in Studio, you see the -following options. - -.. image:: ../Images/AddNewComponent.png - :alt: Image of the Add a New Component panel - -To create a specialized problem, you must first add the Advanced -component to your course. To do this, follow these steps. - -#. On the **Settings** menu, click **Advanced Settings**. - -#. On the **Advanced Settings** page, locate the **Manual Policy - Definition** section, and then locate the **advanced_modules** - policy key (this key is at the top of the list). - -.. image:: ../Images/AdvancedModulesEmpty.png - :alt: Image of the Manual Policy Definition section of the Advanced Settings page - -3. Under **Policy Value**, place your cursor between the brackets, and - then enter the value for the type of problem that you want to create. - Make sure to include the quotation marks, but not the period. - - - For annotations, enter **"annotatable"**. - - - For word clouds, enter **"word_cloud"**. - - You can enter more than one problem type at a time. When you do, - make sure to surround each problem type with quotation marks and - separate each problem type with a comma, but do not include any - spaces. - - For example, if you wanted to add annotations and word cloud problems in your course, you would enter - the following between the brackets. - - :: - - "annotatable","word_cloud" - - .. image:: ../Images/AdvSettings_Before.png - :alt: Image of the Manual Policy Definition section of the Advanced Settings page, with specialized problems added - -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. - - The text in the **Policy Value** field now appears as follows. - -.. image:: ../Images/AdvSettings_After.png - :alt: Image of the Manual Policy Definition section of the Advanced Settings page, with specialized problems added after saving - -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 - -When you click the Advanced component, you can see **Annotation** and **Word cloud** in the list. More information about how to create each problem is provided in the page for that problem type. - -.. _Annotation: - -Annotation ----------- - - -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. - -.. image:: ../Images/AnnotationExample.png - :alt: Image of an annotation problem - -Create an Annotation Problem -~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - - -To create an annotation problem: - -Add the Annotation advanced component. To do this, add the "annotatable" -key value to the **Advanced Settings** page. (For more information, see -the instructions in :ref:`Specialized Problems`.) - -Add the **Instructions** and **Guided Discussion** segments of the -problem. - - -#. In the unit where you want to create the problem, click **Advanced** - under **Add New Component**. -#. 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**. - - -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. - - -:: - - - - - 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**. - - diff --git a/docs/en_us/course_authors/source/problems_tools/tools.rst b/docs/en_us/course_authors/source/problems_tools/tools.rst deleted file mode 100644 index 222ca5b5c6..0000000000 --- a/docs/en_us/course_authors/source/problems_tools/tools.rst +++ /dev/null @@ -1,389 +0,0 @@ -.. _Tools: - - -############################# -Working with Tools -############################# - -*************************** -Overview of Tools in Studio -*************************** - -In addition to text, images, and different types of problems, Studio allows you -to add customized learning tools such as word clouds to your course. - -- :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. -- :ref:`LTI Component`: LTI components allow you to add an external learning application or textbook to Studio. -- :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. -- :ref:`Zooming image`: Zooming images allow you to enlarge sections of an image so that students can see the section in detail. - -.. _Full Screen Image: - -****************** -Full Screen Image -****************** - -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. - -.. _LTI Component: - -************** -LTI Components -************** - -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 two 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. - -Before you create an LTI component from an external LTI provider in a -unit, you need the following information. - -- 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 contain any - number of characters. 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.umich.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 may be something as simple as **secret**, or it - may be a string of numbers and letters such as **23746387264** or - **yt4984yr8**. -- 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. - -Create an LTI Component ------------------------ - -Creating an LTI component in your course has three steps. - -#. Add LTI to the **advanced_modules** policy key. -#. Register the LTI provider. -#. Create the LTI component in an individual unit. - -Step 1. Add LTI to the Advanced Modules Policy Key -~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ - -#. On the **Settings** menu, click **Advanced Settings**. -#. On the **Advanced Settings** page, locate the **Manual Policy - Definition** section, and then locate the **advanced_modules** - policy key (this key is at the top of the list). - - .. image:: ../Images/AdvancedModulesEmpty.png - :alt: Image of the advanced_modules key in the Advanced Settings page - -#. Under **Policy Value**, place your cursor between the brackets, and - then enter **“lti”**. Make sure to include the quotation marks, but - not the period. - - .. image:: ../Images/LTIPolicyKey.png - :alt: Image of the advanced_modules key in the Advanced Settings page, with the LTI value added - - **Note** If the **Policy Value** field already contains text, place your - cursor directly after the closing quotation mark for the final item, and - then enter a comma followed by **“lti”** (make sure that you include the - quotation marks). - -#. 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 regiser the external LTI provider, you’ll add the LIT ID, the client -key, and the client secret in the **lti_passports** policy key. - -#. On the **Advanced Settings** page, locate the **lti_passports** - policy key. - -#. Under **Policy Value**, place your cursor between the brackets, and - then enter the LTI ID, client key, and client secret in the following - format (make sure to include the quotation marks and the colons). - - :: - - “lti_id:client_key:client_secret” - - For example, the value in the **lti_passports** field may be the following. - - :: - - “test_lti_id:b289378-f88d-2929-ctools.umich.edu:secret” - - If you have multiple LTI providers, separate the values with a comma. - Make sure to surround each entry with quotation marks. - - :: - - "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" - - -#. 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 in 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, set the options that you want. See the table - below for a description of each option. -#. Click **Save**. - - .. list-table:: - :widths: 10 80 - :header-rows: 1 - - * - `Setting` - - Description - * - `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. - * - `custom_parameters` - - Enables you to add one or more custom parameters. For example, if you've added an - e-book, a custom parameter may include the page that your e-book should open to. - 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**. - * - `graded` - - Indicates whether the grade for the problem counts towards student's total grade. By - default, this value is set to **False**. - * - `has_score` - - Specifies whether the problem has a numerical score. By default, this value - is set to **False**. - * - `launch_url` - - Lists the URL that Studio sends to the external LTI provider so that the provider - can send back students' grades. This setting is only used if **graded** is set to - **True**. - * - `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. - * - `open_in_a_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. - * - `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. - - For more information about problem weights and computing point scores, see :ref:`Problem Weight`. - -.. _Word Cloud: - -********** -Word Cloud -********** - - -In a word cloud exercise, 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 Exercise ----------------------------- - -To create a word cloud exercise: - - -#. Add the Word Cloud advanced component. To do this, add the - "word_cloud" key value to the **Advanced Settings** page. (For more - information, see the instructions in :ref:`Specialized Problems`.) -#. 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**. - - -For more information, see `Xml Format of "Word Cloud" Module -`_. - -.. _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. - - diff --git a/docs/en_us/course_authors/source/students/index.rst b/docs/en_us/course_authors/source/students/index.rst index 913ef4a002..4925dce791 100644 --- a/docs/en_us/course_authors/source/students/index.rst +++ b/docs/en_us/course_authors/source/students/index.rst @@ -7,5 +7,6 @@ Information for Your Students .. toctree:: :maxdepth: 2 - ora_students login_guide + math_students + ora_students diff --git a/docs/en_us/course_authors/source/students/math_students.rst b/docs/en_us/course_authors/source/students/math_students.rst new file mode 100644 index 0000000000..a88c34a826 --- /dev/null +++ b/docs/en_us/course_authors/source/students/math_students.rst @@ -0,0 +1,144 @@ +.. _Math Response Formatting for Students: + +##################################### +Math Response Formatting for Students +##################################### + +In numerical input problems, the student's response may be more complicated than a +simple number. Expressions like ``sqrt(3)`` and even ``1+e^(sin(pi/2)+2*i)`` +are valid, and evaluate to 1.73 and -0.13 + 2.47i, respectively. + +The parser renders text that students enter into "beautiful math" that appears below the problem's response field: + +.. image:: /Images/Math1.png + :alt: Image of a numerical input probem rendered by the parser +.. image:: /Images/Math2.png + :alt: Image of a numerical input probem rendered by the parser +.. image:: /Images/Math3.png + :alt: Image of a numerical input probem rendered by the parser +.. image:: /Images/Math4.png + :alt: Image of a numerical input probem rendered by the parser +.. image:: /Images/Math5.png + :alt: Image of a numerical input probem rendered by the parser + +Students can enter any of the following into the response field. + +******* +Numbers +******* + +- Integers: '2520' +- Fractions: 2/3 +- Normal floats: '3.14' +- With no integer part: '.98' +- Scientific notation: '1.2e-2' (=0.012) +- More scientific notation: '-4.4e+5' = '-4.4e5' (=-440,000) +- SI suffixes: '2.25k' (=2,250). The full list: + + ====== ========== =============== + Suffix Stands for Example + ====== ========== =============== + % percent 0.01 = 1e-2 + k kilo 1000 = 1e3 + M mega 1e6 + G giga 1e9 + T tera 1e12 + c centi 0.01 = 1e-2 + m milli 0.001 = 1e-3 + u micro 1e-6 + n nano 1e-9 + p pico 1e-12 + ====== ========== =============== + +The largest possible number handled currently is exactly the largest float +possible (in the Python language). This number is 1.7977e+308. Any expression +containing larger values will not evaluate correctly, so it's best to avoid +this situation. + +********************* +Default Constants +********************* + +Simple and commonly used mathematical/scientific constants are included by +default. These include: + +- ``i`` and ``j`` as ``sqrt(-1)`` +- ``e`` as Euler's number (2.718...) +- ``g``: gravity (9.80 m/s^2) +- ``pi`` +- ``k``: the Boltzmann constant (~1.38e-23 in Joules/Kelvin) +- ``c``: the speed of light in m/s (2.998e8) +- ``T``: the positive difference between 0K and 0°C (285.15) +- ``q``: the fundamental charge (~1.602e-19 Coloumbs) + +************** +Greek Letters +************** + +The parser automatically converts the following Greek letter names into the corresponding Greek characters: + +.. list-table:: + :widths: 20 20 20 20 + :header-rows: 0 + + * - alpha + - beta + - gamma + - delta + * - epsilon + - varepsilon + - zeta + - eta + * - theta + - vartheta + - iota + - kappa + * - lambda + - mu + - nu + - xi + * - pi + - rho + - sigma + - tau + * - upsilon + - phi + - varphi + - chi + * - psi + - omega + - + - + +.. note:: ``epsilon`` is the lunate version, whereas ``varepsilon`` looks like a backward 3. + + +**************************** +Operators and Functions +**************************** + +* Use standard arithmetic operation symbols. +* Indicate multiplication explicitly by using an asterisk (*). +* Use a caret (^) to raise to a power. +* Use an underscore (_) to indicate a subscript. +* Use parentheses to specify the order of operations. + +The normal operators apply (with normal order of operations): +``+ - * / ^``. Also provided is a special "parallel resistors" operator given +by ``||``. For example, an input of ``1 || 2`` would represent the resistance +of a pair of parallel resistors (of resistance 1 and 2 ohms), evaluating to 2/3 +(ohms). + +Currently, factorials written in the form '3!' are invalid, but +there is a workaround. Students can specify ``fact(3)`` or ``factorial(3)`` to +access the factorial function. + +The default included functions are the following: + +- Trig functions: sin, cos, tan, sec, csc, cot +- Their inverses: arcsin, arccos, arctan, arcsec, arccsc, arccot +- Other common functions: sqrt, log10, log2, ln, exp, abs +- Factorial: ``fact(3)`` or ``factorial(3)`` are valid. However, you must take + care to only input integers. For example, ``fact(1.5)`` would fail. +- Hyperbolic trig functions and their inverses: sinh, cosh, tanh, sech, csch, + coth, arcsinh, arccosh, arctanh, arcsech, arccsch, arccoth \ No newline at end of file