diff --git a/docs/en_us/course_authors/source/Images/Molecule_Editor.gif b/docs/en_us/course_authors/source/Images/Molecule_Editor.gif new file mode 100644 index 0000000000..b5d3913349 Binary files /dev/null and b/docs/en_us/course_authors/source/Images/Molecule_Editor.gif differ diff --git a/docs/en_us/course_authors/source/Images/Periodic_Table.gif b/docs/en_us/course_authors/source/Images/Periodic_Table.gif new file mode 100644 index 0000000000..8242489faf Binary files /dev/null and b/docs/en_us/course_authors/source/Images/Periodic_Table.gif differ diff --git a/docs/en_us/course_authors/source/additional_tools.rst b/docs/en_us/course_authors/source/additional_tools.rst index 1cd39538c3..1abca76bc8 100644 --- a/docs/en_us/course_authors/source/additional_tools.rst +++ b/docs/en_us/course_authors/source/additional_tools.rst @@ -13,16 +13,172 @@ Individual course teams frequently create tools and problem types that don't hav Below, you'll find the information you need to create the following tools. +* :ref:`Interactive Periodic Table` +* :ref:`Molecule Editor` * :ref:`Multiple Choice and Numerical Input` * :ref:`Protein Builder` +.. _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.gif + :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.) +#. Make any changes that you want, and then 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, but are chemically impossible. The molecule editor warns students if they try to submit a structure that is not possible. + +.. image:: /Images/Molecule_Editor.gif + :alt: Image of the molecule editor + +.. _Create the Molecule Editor: + +========================== +Create the Molecule Editor +========================== + +To create a molecule editor, you need the following files: + +* Molecules_Dopamine.mol +* MoleculeAnswer.png +* MoleculeEditor_HTML.png + +To download all of these files in a .zip archive, go to http://files.edx.org/MoleculeEditorFiles.zip. + +To create the molecule editor, 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**. +#. 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. + #. Make any changes that you want, and then click **Save**. + +.. _EMC Problem Code: + +===================== +Molecule Editor Code +===================== + +To create the molecule editor, you'll need an HTML component followed by a Problem component. + +HTML Component Code +------------------- + +:: + +

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

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.

+ + + + + + + + +
+ .. _Multiple Choice and Numerical Input: ******************************************* Multiple Choice and Numerical Input Problem ******************************************* -A multiple choice and numerical input problem combines a multiple choice problem with a numerical input problem. Students not only select a response from options that you provide, but also provide more specific information, if necessary. +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.gif :alt: Image of a multiple choice and numerical input problem @@ -82,8 +238,7 @@ Create the Protein Builder To create the protein builder: -#. Upload all of the files listed above to the *Files & Uploads* page in your course. -#. Under the HTML component, click **Problem** under **Add New Component**, and then click **Blank Advanced Problem**. +#. 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**.