JSmol in Moodle

Feel free to skip the blurb and get to the instructions section below.

The blurb

When I studied undergrad chemistry at Glasgow we needed to buy textbooks and a simple ‘Orbit’ molecular models kit (they’re still for sale too!). It was a simple, but useful, way of picturing what was happening in chemical reactions at an atomic level. I really wanted to try and get an online system for allowing students to ‘interact’ with molecules and help them understand the 3 dimensional thinking that required for topic like stereochemistry.

I’d played around with various ideas until I settled on using Jmol and JSmol. These use javascript and/or http 5 to produce chemical structures that users can interact with. There seemed to be lots of (what is for me) complicated code online, but then I came across some documentation that linked to some simple instructions that gave me a lead. (See note 1)

I really wanted to embed the interactive images into our online learning website (we call it myplace: it’s a customised version of moodle). However, myplace doesn’t allow scripts to run, or embedded iframes of the type I wanted to use. (WordPress, this blogging site, also has similar restrictions.) I’d played around with the idea of writing the javascript into my own uni webpages, and striping the required display parameters out of the refering URL – but my javascript just isn’t good enough! I went back to using anchors, href and src tags in iframes and embedded weblinks (which display automatically below the weblink) but I couldn’t get anything to work, Eventually I settled on the ‘in pop-up’ webpage resource.

So how does it work?


There are two parts to this set of instructions: first, the line of code that you need to create (which I will call a URL from here on), and second, how to add it to your teaching materials (including Strathcylde Uni’s myplace).

Creating the URL: information you need

Before you create the URL you need some information. Do you want to display the structure of a chemical, or a protein? (See note 2.)

If it’s a chemical then you will need either the name of the compound, the SMILES string or CAS registry number – either of which you can get from the wikipedia page of your compound. (You can also use the InChI key, but I’ve never heard of that identifier before so I havent used it!) Any one of these three (or four) different identifiers will retreive the chenical structure from the NIH’s Catcus server.

If it’s a protein structure then you need the four digit identifier from the Protein Structural Database.

Think about whether you want a ‘caption’ – which will appear at the bottom of the new window (perhaps a simple instruction, or description) – and a ‘title’ which will appear in the title bar of the new window.

Finally think about the size you want the window. My favourite defaults are 400 and 570 for height and width respectively, because they work nicely in Strathclyde’s myplace webpage ‘resources’.

Creating the URL: generating the code

Once you have the information you need there are two ways of generating the line of code.

Firstly, the easy way! I have written a small webpage here where you type the answers to the questions above and when you click the button it will automatically generate the line of code for you. Just copy the result and paste it into your webpage. (See note 3)

Secondly, the manual way. Copy the line of text below into a text editor (Word will do if that what you normally use). The line below is for acetone, but you can customise it according to the instructions below.

http://chemapps.stolaf.edu/jmol/jmol.php?model=acetone&caption=ATTHEBOTTOM&title=ATTHE TOP&height=400&width=570

The first thing to change is ‘model=’: use ‘model=’ to show a chemical, and ‘pdbid=’ to show a protein. After ‘model=’, replace ‘acetone’ with the name of the compound, the SMILES string or CAS registry number of your compound. If you have changed ‘model=’ to ‘pdbid=’, add the four digital identifiying code from the Protein Structural database.

The second things to change are are ‘ATTHE TOP’ (after the ‘caption=’) and the ‘ATTHE BOTTOM'(‘after the ‘title=’). The text that replaces ‘ATTHETOP’ appears in the top bar of the new window that opens: perhaps the name of the compound could be use for the caption. The tetx that replaces ‘ATTHEBOTTOM’ goes into the window itself at the lower left hand side: an ideal place for instructions or extra information.

Finally the window size can be changed by changing the two numbers after ‘height=’ and ‘width=’. The numbers in the line above (400 and 570) work nicely in Strathclyde’s myplace webpage ‘resources’.

Testing and using the URL

Before using the URL in myplace, moodle or any other webpage (or powerpoint slide or word document), test it first. Paste the URL into your browser and make sure it gives you the result you want.

Assuming it does, then you can add the URL to your program. The following instructions are written for Strathclyde University’s myplace VLE (virtual learning environment), but I expect they will work on any moodle site.

On your class page create a ‘webpage’ resource. Add the name of your structure. In the ‘External web address’ box, paste your URL. In the description box, provide some isntructions (such as “This link opens a new window for structure X”) and check the ‘Display description on course page’ box. Under the ‘Appearance’ menu choose ‘In pop-up’ and leave the width and height at 620 and 450 respectively (unless you want to do something else with the window sizes.). Save and return to class and your good to go!


  1. Jmol and JSmol are open source projects that you could not work without the creativity and generousity of many volunteers. The URL link is credited to “Bob Hanson and the servers at St. Olaf College” and the system I have developed here could not work with out it.
  2. The two databases used to get the structures probably have some overlap, so you may be able to get some small molecules in the protein database, and some small proteins in the Cactus chemical database.
  3. I know almost nothing about javascript! The code on the webpage (and its previous incarnation) was built with help from this video by Mike Dane, Stackoverflow contibutors and W3 schools.

Categories: Tags: , , , , , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s