Skip to content
Snippets Groups Projects
Commit 0130a837 authored by srpearce's avatar srpearce
Browse files

Merge pull request #5273 from edx/sylvia/docs/DOC-759 

Sylvia/docs/doc 759
parents aba76a09 e663c932
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 192 additions and 136 deletions
docs/en_us/course_authors/source/Images/MoleculeViewer.png 0 → 100644
+ 0
− 0
View file @ 0130a837
docs/en_us/course_authors/source/Images/MoleculeViewer.png

55.3 KiB

docs/en_us/course_authors/source/Images/Molecule_Editor.png
+ 0
− 0
View replaced file @ aba76a09 View file @ 0130a837
docs/en_us/course_authors/source/Images/Molecule_Editor.png

65.9 KiB | W: | H:

docs/en_us/course_authors/source/Images/Molecule_Editor.png

52.5 KiB | W: | H:

docs/en_us/course_authors/source/Images/Molecule_Editor.png
docs/en_us/course_authors/source/Images/Molecule_Editor.png
docs/en_us/course_authors/source/Images/Molecule_Editor.png
docs/en_us/course_authors/source/Images/Molecule_Editor.png
  • 2-up
  • Swipe
  • Onion skin
docs/en_us/course_authors/source/change_log.rst
+ 2
− 0
View file @ 0130a837
......@@ -22,6 +22,8 @@ September, 2014
- Removed "These problems only allow integers and a few select constants" from table of problem types in :ref:`Create Exercises`.
* -
- Added a note about angle bracket characters to the :ref:`Dropdown` topic.
* - 09/26/14
- Added :ref:`Molecule Viewer` to :ref:`Create Exercises`
**************
August, 2014
......
docs/en_us/course_authors/source/exercises_tools/create_exercises_and_tools.rst
+ 5
− 0
View file @ 0130a837
......@@ -185,6 +185,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/MoleculeViewer.png
:width: 100
:alt: Example molecule viewer
- :ref:`Molecule Viewer`
- With the molecule viewer, you can create three-dimensional representations of molecules for your students to see.
* - .. image:: /Images/image292.png
:width: 100
:alt: Example numerical input problem
......
docs/en_us/course_authors/source/exercises_tools/index.rst
+ 1
− 0
View file @ 0130a837
......@@ -35,6 +35,7 @@ Course Content Index`.
lti_component
math_expression_input
molecule_editor
molecule_viewer
multiple_choice
mult_choice_num_input
numerical_input
......
docs/en_us/course_authors/source/exercises_tools/molecule_editor.rst
+ 86
− 136
View file @ 0130a837
.. _Molecule Editor:
#######################
Molecule Editor Tool
#######################
########################
Molecule Editor Problem
########################
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.
Studio offers two tools that you can use in discussions of molecules:
* With the **molecule viewer**, you can create three-dimensional representations of molecules for students to view. For more information about this tool, see :ref:`Molecule Viewer`.
* With the **molecule editor**, you can allow students to draw their own molecules.
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 <http://peter-ertl.com/jsme/index.html>`_. For more information about JSmol, see `JSmol <http://sourceforge.net/projects/jsmol/>`_.
Both tools use **JSmol**, a JavaScript-based molecular viewer from Jmol. In addition, the molecule editor problem type uses the JSME molecule editor created by Peter Erl and Bruno Bienfait. (You don't need to download either of these tools; Studio uses them automatically.) For more information about JSmol, see `JSmol <http://sourceforge.net/projects/jsmol/>`_. For more information about the JSME molecule editor, see `JSME Molecule Editor <http://peter-ertl.com/jsme/index.html>`_.
Students can use the molecule editor to learn how to create molecules. The molecule editor allows students to draw molecules that follow the rules for covalent bond formation and formal charge, even if the molecules are chemically impossible, are unstable, or do not exist in living systems. The molecule editor warns students if they try to submit a structure that is chemically impossible.
.. image:: /Images/Molecule_Editor.png
:width: 500
:alt: Image of the molecule editor
.. _Create the Molecule Editor:
......@@ -17,32 +23,12 @@ The molecule editor incorporates two tools: the JSME molecule editor created by
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 <http://www.biotopics.co.uk/jsmol/molecules/>`_ on the `BioTopics <http://www.biotopics.co.uk/>`_ 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.
To create a molecule editor problem:
#. 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**.
#. Under **Add New Component**, click **Problem**, and then click **Molecular Structure**.
#. In the component that appears, click **Edit**.
#. In the component editor, modify the code to correspond to your problem.
#. Click **Save**.
.. _EMC Problem Code:
......@@ -50,115 +36,79 @@ To create the molecule editor that appears in the image above, you need an HTML
Molecule Editor Code
========================
To create the molecule editor, you need an HTML component and a Problem component.
HTML Component Code
***************************
.. code-block:: xml
<h2>Molecule Editor</h2>
<p>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.</p>
<div>
<script type="text/javascript">// <![CDATA[
function toggle2(showHideDiv, switchTextDiv) {
var ele = document.getElementById(showHideDiv);
var text = document.getElementById(switchTextDiv);
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+ open";
}
else {
ele.style.display = "block";
text.innerHTML = "- close";
}
}
// ]]></script>
</div>
<div>
<style type="text/css"></style>
</div>
<div id="headerDiv">
<div id="titleText">Using the Molecule Editor<a id="myHeader" href="javascript:toggle2('myContent','myHeader');">+ open </a></div>
</div>
<div id="contentDiv">
<div id="myContent" style="display: none;">
<p>In this problem you will edit a molecule using the molecular drawing program shown below:</p>
<img alt="" src="/static/MoleculeEditor_HTML.png" /></div>
</div>
<p>&nbsp;</p>
<div id="headerDiv">
<div id="titleText">Are the molecules I've drawn chemically possible?<a id="IntroductionHeader" href="javascript:toggle2('IntroductionContent','IntroductionHeader');">+ open </a></div>
</div>
<div id="contentDiv">
<div id="IntroductionContent" style="display: none;">
<p>The chemical editor you are using ensures that the structures you draw are correct in one very narrow sense, that they follow the rules for covalent bond formation and formal charge. However, there are many structures that follow these rules that are chemically impossible, unstable, do not exist in living systems, or are beyond the scope of this course. The editor will let you draw them because, in contrast to the rules of formal charge, these properties cannot be easily and reliably predicted from structures.</p>
<p>If you submit a structure that includes atoms that are not possible or are beyond the scope of this course, the software will warn you specifically about these parts of your structure and you will be allowed to edit your structure and re-submit. Submitting an improper structure will not count as one of your tries. In general, you should try to use only the atoms most commonly cited in this course: C, H, N, O, P, and S. If you want to learn about formal charge, you can play around with other atoms and unusual configurations and look at the structures that result.</p>
</div>
</div>
<div id="ap_listener_added">&nbsp;</div>
Problem Component Code
***************************
.. code-block:: xml
<problem>
<p>The dopamine molecule, as shown, cannot make ionic bonds. Edit the dopamine molecule so it can make ionic bonds.</p>
<p>When you are ready, click Check. If you need to start over, click Reset.</p>
<script type="loncapa/python">
def check1(expect, ans):
import json
mol_info = json.loads(ans)["info"]
return any(res == "Can Make Ionic Bonds" for res in mol_info)
</script>
<customresponse cfn="check1">
<editamoleculeinput file="/static/dopamine.mol">
</editamoleculeinput>
</customresponse>
<p>
A molecular structure problem lets the user use the JSME editor
component to draw a new molecule or update an existing drawing and then
submit their work. Answers are specified as SMILES strings.
</p>
<p>
I was trying to draw my favorite molecule, caffeine. Unfortunately,
I'm not a very good biochemist. Can you correct my molecule?
</p>
<jsmeresponse>
<jsme>
<!--
You can set initial state of the editor by including a molfile
inside of the jsme tag.
Take care that indentation is preserved. The molfile format is
sensitive to whitespace, so the best policy is to cut and paste
as-is on a new line without adjusting the indentation. If you
do indent the molfile data, make sure every line is indented the
same amount using space characters only, no tabs.
-->
<initial-state>
CN2Cc1[nH]cnc1N(C)C2=O
JME 2014-06-28 Wed Jul 23 13:41:18 GMT-400 2014
12 13 0 0 0 0 0 0 0 0999 V2000
3.6373 2.1000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
3.6373 3.5000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
2.4249 4.2000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
1.2124 3.5000 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0
1.2124 2.1000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
2.4249 1.4000 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0
4.9688 1.6674 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0
5.7917 2.8000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
4.9688 3.9326 0.0000 N 0 0 0 0 0 0 0 0 0 0 0 0
0.0000 1.4000 0.0000 O 0 0 0 0 0 0 0 0 0 0 0 0
0.0000 4.2000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
2.4249 0.0000 0.0000 C 0 0 0 0 0 0 0 0 0 0 0 0
1 2 2 0 0 0 0
2 3 1 0 0 0 0
3 4 1 0 0 0 0
4 5 1 0 0 0 0
5 6 1 0 0 0 0
6 1 1 0 0 0 0
7 8 2 0 0 0 0
8 9 1 0 0 0 0
2 9 1 0 0 0 0
1 7 1 0 0 0 0
5 10 2 0 0 0 0
4 11 1 0 0 0 0
6 12 1 0 0 0 0
M END
</initial-state>
<!-- Answers are specified as SMILES strings. -->
<answer>Cn1cnc2c1c(=O)n(C)c(=O)n2C</answer>
</jsme>
<!-- This answer is shown to the student when they click the
"Show Answer" button in the UI. It is not used for grading and
should be human readable. -->
<answer>C8H10N4O2</answer>
</jsmeresponse>
<solution>
<img src="/static/MoleculeAnswer.png"/>
<div class="detailed-solution">
<p>Explanation</p>
<p>
Some scholars have hypothesized that the renaissance was made
possible by the introduction of coffee to Italy. Likewise scholars
have linked the Enlightenment with the rise of coffee houses in
England.
</p>
</div>
</solution>
</problem>
**Problem 2**
::
<problem>
<p>The dopamine molecule, as shown, cannot make strong hydrogen bonds. Edit the dopamine molecule so that it can make strong hydrogen bonds.</p>
<script type="loncapa/python">
def grader_1(expect, ans):
import json
mol_info = json.loads(ans)["info"]
return any(res == "Cannot Make Strong Hydrogen Bonds" for res in mol_info)
</script>
<customresponse cfn="grader_1">
<editamoleculeinput file="/static/dopamine.mol">
</editamoleculeinput>
</customresponse>
</problem>
**Problem 3**
::
<problem>
<p>The dopamine molecule has an intermediate hydrophobicity. Edit the dopamine molecule so that it is more hydrophobic.</p>
<script type="loncapa/python">
def grader_2(expect, ans):
import json
mol_info = json.loads(ans)["info"]
hydrophobicity_index_str=mol_info[0]
hydrophobicity_index=float(hydrophobicity_index_str[23:])
return hydrophobicity_index &gt; .490
</script>
<customresponse cfn="grader_2">
<editamoleculeinput file="/static/dopamine.mol">
</editamoleculeinput>
</customresponse>
</problem>
\ No newline at end of file
docs/en_us/course_authors/source/exercises_tools/molecule_viewer.rst 0 → 100644
+ 98
− 0
View file @ 0130a837
.. _Molecule Viewer:
#######################
Molecule Viewer Tool
#######################
Studio offers two tools that you can use in discussions of molecules:
* With the **molecule viewer** tool, you can create three-dimensional representations of molecules for students to view.
* With the **molecule editor** problem type, you can allow students to draw their own molecules. For more information about this tool, see :ref:`Molecule Editor`.
Both tools use **JSmol**, a JavaScript-based molecular viewer from Jmol. (You don't need to download this tool; Studio uses it automatically.) For more information about JSmol, see `JSmol <http://sourceforge.net/projects/jsmol/>`_.
The following image shows the molecule viewer tool in a course:
.. image:: /Images/MoleculeViewer.png
:width: 500
:alt: Image of molecule viewer showing a molecule of Ciprofloxacin
.. note:: To create a molecule viewer tool, you must have permission to upload files to a third-party file hosting site such as Amazon Web Services Simple Storage Service (AWS S3). When you create the molecule viewer, you'll upload a folder that contains a large number of files to the file hosting site.
.. _Create the Molecule Viewer:
*******************************
Create the Molecule Viewer Tool
*******************************
Creating a molecule viewer tool has several steps:
#. Download files from the `BioTopics website <http://www.biotopics.co.uk/jsmol/molecules>`_ and from edX.
#. Move or edit some of the files that you downloaded.
#. Upload a folder that contains all of the files that you downloaded and edited to your own file hosting site.
#. Create an HTML component that contains an IFrame in Studio. The IFrame references the files that you upload to the file hosting site.
================================================
Download Files from BioTopics and edX
================================================
#. Create or download a .mol file for the molecule that you want to show. You can download a variety of .mol files from the `BioTopics website <http://www.biotopics.co.uk/jsmol/molecules>`_. Save the file in a place where you can easily find it.
#. Download the `MoleculeViewerFiles.zip <http://files.edx.org/MoleculeViewerFiles.zip>`_ file from edX.
#. Unzip the `MoleculeViewerFiles.zip <http://files.edx.org/MoleculeViewerFiles.zip>`_ file that you've downloaded.
When you unzip the file, you'll see a **MoleculeViewerFiles** folder that contains the following folders and files:
* data (folder)
* j2s (folder)
* js (folder)
* MoleculeViewer.html (file)
================================================================
Move the .mol File and Edit the MoleculeViewer.html File
================================================================
#. Move the .mol file that you downloaded from BioTopics into the **data** folder that you downloaded from edX.
#. Edit the MoleculeViewer.html file:
#. In a text editor, open the MoleculeViewer.html file.
#. In line 19 of the MoleculeViewer.html file, change **Example.mol** to the name of your .mol file. For example, if you downloaded the Glucose.mol file, line 19 in your file will look like the following:
``script: "set antialiasDisplay; background black; load data/Glucose.mol;"``
3. Save the MoleculeViewer.html file.
================================
Upload Files to a Hosting Site
================================
#. Make sure that your **MoleculeViewerFiles** folder contains the following folders and files:
* data (folder): Earlier, you added a .mol file to this folder.
* j2s (folder)
* js (folder)
* MoleculeViewer.html (file): Earlier, you changed line 19 in this file.
2. Upload the entire **MoleculeViewerFiles** folder to your file hosting site.
.. note:: Because this folder contains many files, uploading the folder may take several minutes, even over a fast connection.
===============================
Create a Component in Studio
===============================
#. In Studio, open the unit where you want to add the molecule viewer.
#. Under **Add New Component**, click **HTML**, and then click **IFrame**.
#. In the component editor that opens, replace the existing content with your own text.
#. In the toolbar, click **HTML**.
#. In the **HTML Source Code** box, enter the following line in the place where you want the molecule viewer to appear:
``<p><iframe name="moleculeiframe" src="https://path_to_folder/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>``
6. Replace ``path_to_file`` with the URL of your file hosting site. For example, the line may look like the following:
``<p><iframe name="moleculeiframe" src="https://myfiles.example.com/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>``
7. Click **OK** to close the **HTML Source Code** box, and then click **Save** to save the component.
#. Click **Preview** to see your component as a student would see it.
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment