Migrate exercises and tools to shared folder

docs/en_us/shared/exercises_tools/create_exercises_and_tools.rst

@@ -91,11 +91,7 @@ General Exercises and Tools
           :alt: Example write-your-own-grader problem
      - :ref:`Write Your Own Grader`
      - In custom Python-evaluated input (also called "write-your-own-grader") problems, the grader uses a Python script that you create and embed in the problem to evaluates a student's response or provide hints. These problems can be any type.
-   * - .. image:: /Images/VitalSource.png
-          :width: 100
-          :alt: VitalSource e-book with highlighted note
-     - :ref:`VitalSource`
-     - The VitalSource Online Bookshelf e-reader allows students to read, browse, and search content (including figures and notes), as well as work with multiple highlighters and copy notes into external documents.
+
 
 ********************************
 Image-Based Exercises and Tools
@@ -185,6 +181,11 @@ STEM Exercises and Tools
           :alt: Example molecule editor problem
      - :ref:`Molecule Editor`
      - The molecule editor allows students to draw molecules that follow the rules for covalent bond formation and formal charge, even if the molecules are chemically impossible, are unstable, or do not exist in living systems.
+   * - .. image:: /Images/Molecule_Viewer.png
+          :width: 100
+          :alt: Example molecule viewer tool
+     - :ref:`Molecule Viewer`
+     - The molecule viewer allows you to create three-dimensional representations of molecules for students to view.
    * - .. image:: /Images/image292.png
           :width: 100
           :alt: Example numerical input problem

docs/en_us/shared/exercises_tools/molecule_viewer.rst

@@ -0,0 +1,98 @@
+.. _Molecule Viewer:
+
+#######################
+Molecule Viewer Tool
+#######################
+
+Studio offers two tools that you can use in discussions of molecules:
+
+* With the **molecule viewer** tool, you can create three-dimensional representations of molecules for students to view. 
+* With the **molecule editor** problem type, you can allow students to draw their own molecules. For more information about this tool, see :ref:`Molecule Editor`.
+
+Both tools use **JSmol**, a JavaScript-based molecular viewer from Jmol. (You don't need to download this tool; Studio uses it automatically.) For more information about JSmol, see `JSmol <http://sourceforge.net/projects/jsmol/>`_.
+
+The following image shows the molecule viewer tool in a course:
+
+.. image:: /Images/MoleculeViewer.png
+   :width: 500
+   :alt: Image of molecule viewer showing a molecule of Ciprofloxacin
+
+
+
+.. note:: To create a molecule viewer tool, you must have permission to upload files to a third-party file hosting site such as Amazon Web Services Simple Storage Service (AWS S3). When you create the molecule viewer, you'll upload a folder that contains a large number of files to the file hosting site. 
+
+.. _Create the Molecule Viewer:
+
+*******************************
+Create the Molecule Viewer Tool
+*******************************
+
+Creating a molecule viewer tool has several steps:
+
+#. Download files from the `BioTopics website <http://www.biotopics.co.uk/jsmol/molecules>`_ and from edX.
+#. Move or edit some of the files that you downloaded.
+#. Upload a folder that contains all of the files that you downloaded and edited to your own file hosting site.
+#. Create an HTML component that contains an IFrame in Studio. The IFrame references the files that you upload to the file hosting site.
+
+================================================
+Download Files from BioTopics and edX
+================================================
+
+#. Create or download a .mol file for the molecule that you want to show. You can download a variety of .mol files from the `BioTopics website <http://www.biotopics.co.uk/jsmol/molecules>`_. Save the file in a place where you can easily find it.
+#. Download the `MoleculeViewerFiles.zip <http://files.edx.org/MoleculeViewerFiles.zip>`_ file from edX.
+#. Unzip the `MoleculeViewerFiles.zip <http://files.edx.org/MoleculeViewerFiles.zip>`_ file that you've downloaded.
+
+   When you unzip the file, you'll see a **MoleculeViewerFiles** folder that contains the following folders and files:
+
+    * data (folder)
+    * j2s (folder)
+    * js (folder)
+    * MoleculeViewer.html (file)
+
+================================================================
+Move the .mol File and Edit the MoleculeViewer.html File
+================================================================
+
+#. Move the .mol file that you downloaded from BioTopics into the **data** folder that you downloaded from edX.
+#. Edit the MoleculeViewer.html file:
+
+   #. In a text editor, open the MoleculeViewer.html file.
+   #. In line 19 of the MoleculeViewer.html file, change **Example.mol** to the name of your .mol file. For example, if you downloaded the Glucose.mol file, line 19 in your file will look like the following:
+
+   		``script: "set antialiasDisplay; background black; load data/Glucose.mol;"``
+
+3. Save the MoleculeViewer.html file.
+
+================================
+Upload Files to a Hosting Site
+================================
+
+#. Make sure that your **MoleculeViewerFiles** folder contains the following folders and files:
+
+   * data (folder): Earlier, you added a .mol file to this folder.
+   * j2s (folder)
+   * js (folder)
+   * MoleculeViewer.html (file): Earlier, you changed line 19 in this file.
+
+2. Upload the entire **MoleculeViewerFiles** folder to your file hosting site. 
+
+   .. note:: Because this folder contains many files, uploading the folder may take several minutes, even over a fast connection.
+
+===============================
+Create a Component in Studio
+===============================
+
+#. In Studio, open the unit where you want to add the molecule viewer.
+#. Under **Add New Component**, click **HTML**, and then click **IFrame**.
+#. In the component editor that opens, replace the existing content with your own text.
+#. In the toolbar, click **HTML**.
+#. In the **HTML Source Code** box, enter the following line in the place where you want the molecule viewer to appear:
+
+   ``<p><iframe name="moleculeiframe" src="https://path_to_folder/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>``
+
+6. Replace ``path_to_file`` with the URL of your file hosting site. For example, the line may look like the following:
+
+   ``<p><iframe name="moleculeiframe" src="https://myfiles.example.com/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>``
+
+7. Click **OK** to close the **HTML Source Code** box, and then click **Save** to save the component.
+#. Click **Preview** to see your component as a student would see it.