NOTICE: These pages are no longer maintained. Please visit https://symotter.org

Technical Details

Origins

This tutorial was created for the sophmore-junior level Inorganic Chemistry course at Otterbein University. The tutorial was originally created using the Chime plug-in. Due to the lack of cross-platform capability for Chime and the rapid development of the Jmol applet, development of Jmol-based materials begin in 2006. All current development is exclusively with Jmol.

Web Content and HTML

HTML pages and accompanying Javascript code were created using Dreamweaver. Graphics were created using Photoshop and Jmol. Molecular structures were either constructed using HyperChem or retrieved from the Cambridge Structural Database. Some structure clean up and symmetrization was performed with Schrödinger Maestro 8.5.

Structure files

All structures are stored as JSON (Javascript object notation) files. JSON is a lightweight data format that allows storage of atomic coordinates, bonds, and symmetry information in a single file. An example JSON file for water is shown below: 

    {
        "name":"water",
        "pointGroup":"C<sub>2v</sub>",
        "atomArray":[
            { "element":"O", "x":0.00000, "y": 0.00000, "z": 0.36960 },
            { "element":"H", "x":0.00000, "y":-0.78385, "z":-0.18480 },
            { "element":"H", "x":0.00000, "y": 0.78385, "z":-0.18480 } ],
        "bondArray":[
            { "a1":1, "a2":2, "type": "SINGLE" },
            { "a1":1, "a2":3, "type": "SINGLE" } ],
        "faceArray":[ ],
        "inversionCenter": null,
        "properArray":[
            { "order":2, "direction": { "x":0, "y":0, "z":1 }} ],
        "improperArray":[ ],
        "reflectionArray":[
            { "direction": { "x":0, "y":1, "z":0 }, "label": "xz" },
            { "direction": { "x":-1, "y":0, "z":0 }, "label": "yz" } ]
    }

By using JSON files, the Javascript code can use “AJAX”-style methods to retrieve the information from the server and then feed the necessary structural information to Jmol via Jmol's inline data command. The JSON files are evaluated using the evalJSON command within the Prototype Javascript framework.

Animations and symmetry element display

Animations are created “on-the-fly”, again using the Jmol inline data command, appending each new animation to the current structure as a new set of models. Rotation axes and reflection planes are drawn using the Jmol draw FIXED command, ensuring that they are displayed even during animations.

Javascript specifics

A number of outside resources and libraries have been used in the development of this web site. The most significant are listed below:

  • The Prototype Javascript Framework - www.prototypejs.org - used for AJAX, DOM manipulation, JSON, and creation of various oo-style classes.
  • The drop-down menu and molecule selection list (complete with subscripts!) was derived from the <select> Something New article written by Aaron Gustafson.
  • The slider code for control of animations was written by Erik Arvidsson.
  • The script.aculo.us library - http://script.aculo.us/ - was used to create the flowchart moving effects for the Symmetry Challenge.

Web Standards

Apart from a minor tabindex property for the slider control, this web site validates according to the XHTML 1.0 Transitional standard. The CSS validates as CSS 2.1.

Valid XHTML 1.0 Transitional Valid CSS!