EdX does not support this 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 Molecule Editor Tool (Deprecated).
The following image shows the molecule viewer tool in a course.
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.
Creating a molecule viewer tool has several steps.
Download files from the BioTopics website and from edX.
Move or edit some of the files that you downloaded.
Upload a folder that contains all of the files that you downloaded and edited to your own file hosting site.
Create a Text component that contains an
iframe element in Studio. The
iframe references the files that you upload to the file hosting site.
Create or download a .mol file for the molecule that you want to show. You can download a variety of .mol files from the BioTopics website. Save the file in a place where you can easily find it.
Download the MoleculeViewerFiles.zip file from edX.
Unzip the MoleculeViewerFiles.zip file that you downloaded.
When you unzip the file, it contains a MoleculeViewerFiles folder with the following folders and files.
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;"
Save the MoleculeViewer.html file.
Make sure that your MoleculeViewerFiles folder contains the following folders and files.
data (folder): Earlier, you added a .mol file to this folder.
MoleculeViewer.html (file): Earlier, you changed line 19 in this file.
Upload the entire MoleculeViewerFiles folder to your file hosting site.
Because this folder contains many files, uploading the folder may take several minutes, even over a fast connection.
In Studio, open the unit where you want to add the molecule viewer.
Under Add New Component, select Text, and then select IFrame Tool.
In the component editor that opens, replace the existing content with your own text.
In the toolbar, select 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>
path_to_folder with the URL of your file hosting site. The
revised line might look like this example.
<p><iframe name="moleculeiframe" src="https://myfiles.example.com/MoleculeViewerFiles/MoleculeViewer.html" width="500" height="500"></iframe></p>
Select OK to close the HTML Source Code box, and then select Save.
Select Preview to see your component as a student would see it.