Information
•
Textbooks
•
Media
•
Resources
The Use of the Free, Open-Source Program Jmol To Generate an Interactive Web Site To Teach Molecular Symmetry W Marion E. Cass* Department of Chemistry, Carleton College, Northfield, MN 55057; *
[email protected] Henry S. Rzepa, David R. Rzepa, and Charlotte K. Williams Department of Chemistry, Imperial College London, Kensington Campus, London, SW7 2AZ UK
The ability to design and to dream of the future design of 3D molecular animations to teach molecular symmetry is an exciting outcome of computer-driven technologies. With the use of appropriate molecular viewing programs, a molecule can be animated to undergo a reflection, inversion, or improper rotation, a process that needs considerable imagination if attempted with a physical molecular model. In this article, we share some of the details and key issues we addressed in developing a set of Web pages to teach molecular symmetry at Imperial College London using crafted animations. Our endeavors can be found on the JCE Web site (1). We encourage you to visit the site and try out our animations as you read this article. We begin by acknowledging that we are by no means the first chemical educators to develop Web pages for the teaching of symmetry. We found a number of sites that focused on the teaching of symmetry. These ranged from collections of (passive) lecture notes, to interactive sites with 3D animations (2) or with point group determination schemes (3, 4). Two sites in particular are worth highlighting. The first (5) uses the freeware browser plugin Chime and HTML to produce visually impressive animations of symmetry operations and the second (6) has many aesthetic animations of symmetry operations encoded using the Shockwave plugin. We aspired to update an earlier Web-based project designed in 1997 by Arie Aizman to teach molecular symmetry that had also made use of the MDL Chime software (7). Although this site was advanced for its day in the use of interactive content and 3D animations, the use of Chime as a “plug-in” has increasingly become limited in its application to Windows-only Web browsers, and even use of modern browsers such as Firefox and Mozilla on this platform can be prob-
Figure 1. The Jmol applet interface, showing the pull-down menus.
1736
Journal of Chemical Education
•
lematic. The passage of time has also introduced the possibility of better animation and visual presentation and more interactive content. Furthermore, we wanted to post many more inorganic molecules on our site so that students could interrogate the symmetry of each molecule using movable 3D images. Our aspiration was not to animate every symmetry operation for each molecule, but to provide some instructional pages and a modular and expandable library of 3D molecular images. To achieve this, we chose to structure our Web pages to work with the Jmol Java applet, which has become increasingly compatible with Chime and even now includes a Perl script to convert “plug-in” based HTML syntax to the required “applet” syntax. Unlike Chime, Jmol is an open-source (8) alternative for the viewing of molecular images and is currently undergoing rapid development and improvement by a highly active community, coordinated by Miguel Howard. Jmol has filled the void created by the relative lack of recent development of Chime and, being Javabased, is truly cross-platform, unlike Chime. Both Jmol and Chime programs utilize Rasmol scripts for the presentation of molecular structures and the scripting of animations. The Jmol program also supports a much wider selection of chemistry file formats (an incomplete list includes output files generated in Gaussian, Hyperchem, Spartan, as well as standard pdb or MDL Mol files). Once the molecule is enabled on a Web page by invoking Jmol, the viewer can access the site and manipulate the images without pre-installing or purchasing additional software. When the Web page loads, the small (∼540 K) “Jmol applet” is transferred from the server to the local browser, and it provides program control over subsequently downloaded molecular files. Without any additional scripts, the Jmol applet allows a series of mouse controls that enables the viewer to manipulate the molecular model embedded within the Web page. Furthermore, a right (or control) click with the mouse displays a list of clearly identifiable additional options with which to further examine the molecule (Figure 1). These allow you to label the atoms, spin the molecule around an axis, change the rendering (ball and stick versus space fill), measure distances and angles, and inspect the original molecule data file (see Figure 1, where the data file is named pesmij_1.xml) in a separate browser window for reuse in other contexts. These procedures can be enhanced with scripts that act on the target image and can be linked to a line of text displayed on the page. Clicking on such text (which may also be shown as a “button”) executes the script. For example, to carry out a C2 rotation for the water molecule around the principal rotation axis (labeled by us as z but orientated on the screen as y ) we simply use a move script. The HTML code, gener-
Vol. 82 No. 11 November 2005
•
www.JCE.DivCHED.org
Information
ated by JavaScript, is shown in Figure 2; the purpose of this code is to invoke Jmol and to run a Rasmol script. Our example loads a molecule from a specified directory, resets the molecule to its original position, centers the oxygen atom, and moves the molecule exactly 180⬚ around the y axis of the screen taking two seconds to do so. The various components of this HTML syntax can be generated using JavaScript functions, included in the library distributed with Jmol called Jmol.js. This library handles various tasks such as checking for browser compatibility that would otherwise be difficult for those not expert in JavaScript to accomplish. The rationale is that building a Web site in this manner allows it to be easily extended so that new tutorials and new molecules can be added without having to constantly duplicate the HTML or JavaScript codes. In points 1 to 6 below a description of the necessary JavaScript is given to help anyone wishing to understand how the basic concepts link together. 1. The browser behavior has to be defined. In our case, we are using a Java applet to actually display the molecule, but JavaScript embedded in the HTML page to control the data passed to the applet. This requires a browser that supports a protocol known as LiveConnect that allows JavaScript to “talk” to Java applets. This feature must be enabled within the applet loading instructions using the line . 2. We have used scripted hyperlinks in the HTML pages to issue the JavaScript instructions when the link is invoked by the user. Below is an example of such a link:
