Lab3D is an online resource of animated organic chemistry reactions. The resource is targeted at undergraduate students in their first or second year of organic chemistry. The reactions featured, nucleophilic substitutions and eliminations, are taught in the first year curriculum. Following ‘best use’ guidelines for instructional animations (Burke, Greenbowe, and Windschitl 1998), the animations in Lab3D are short, accurate, interactive, and are accessible outside of the classroom on the web. In addition, Lab3D is unique in displaying synchronized 2-D and 3-D animations simultaneously. The split screen video display is intended to help students intuitively connect the sub-micro and symbolic levels of molecular representation and construct more comprehensive and dynamic mental models of chemical reactions.
 Lab3D was created towards the requirements of a MSc in Biomedical Communications (BMC.erin.utoronto.ca, University of Toronto)
Visualizations are symbolic constructions used to codify information in order to make it meaningful to learners (Kleinman, Griffin, and Kerner 2005). Visualizations (graphs, tables, illustrations, animations) are valuable in educational settings because they “help make complex information accessible and cognitively tractable”, and “help us think in visual rather than abstract, symbolic terms” (Uttal and Doherty 2008). In chemistry education, where the principle actors cannot be seen by eye, visualizations are of even greater significance.
In the history of molecular representation (Perkins 2006b, 2006a), numerous visualizations have been created to represent the different properties of a molecule. These can be generally divided into 2-D symbolic and 3-D particulate or sub-micro “representational levels” (Gilbert 2008). 2-D chemical structures (wedge-dash, Haworth, Fischer and Newman projections, etc.) are generally preferred for coding atom connectivity and stereochemistry, while 3-D representations (ball-and-stick, CPK, electron isodensity surface, etc.) are preferred for coding atom spatial arrangement, size and other molecular properties such as electrostatic potential, hydrophobicity and so on. The ability to switch rapidly between the representational levels and relate the complementary information that they offer can provide a deeper understanding of chemical reactivity.
Linking 2-D and 3-D representational levels is a challenge for undergraduate chemistry students (Gilbert 2008). That these visualizations are significant abstractions from reality (colour and value are meaningless at the molecular level) and cannot be directly compared to their referent make it difficult to develop 'representational insight' (Uttal and Doherty 2008), the understanding that the representation stands for something else, and that different representations can stand for the same thing (Fig. 1). In addition, the molecular visualization can demand a knowledge of topics in chemistry that the student might not yet have mastered, and consequently require greater cognitive processing. To be adept consumers of chemistry visualizations and take full advantage of their benefits, it would be helpful to provide students with a “visual education” of what the different levels show, and how they are related (Gilbert 2008).
Fig. 1. Various representations of glucose.
Ainsworth (2008) suggests that by showing multiple presentations simultaneously, a visual education can be provided. Firstly, a student can draw on the representation with which they are more familiar to inform their understanding of a newer or more complex representation: the more-familiar representation constrains inappropriate interpretations of the less-familiar. Secondly, cross-comparison of the representations highlights their shared, invariant features. This would enable students to more easily translate one representation to another. At the same time, cross-comparison also clarifies what features are unique to that representation and hints at the type of information that can be gleaned from it. Multi-representational displays may also serve as a tacit reminder that these are merely different ways of ‘dressing’ the molecular data and help to build representational insight.
Web applications are particularly well suited as a medium for chemistry visual education since rich media, such as 2-D and 3-D displays and interactivity, can be integrated. Interactive features allow students to interrogate information at their own pace, which can reduce the burden on cognitive processing (Lowe 2004). Interactive movies can show reaction dynamics explicitly, further reducing the burden on the student, since he or she would otherwise need to perform the transformations mentally (Lowe 2004). Digital media may also increase visuo-spatial reasoning. The use of molecular software contributed to significantly improved student performance in stereochemical tests over the textbook and hand-held model groups (Abraham, Varghese, and Tang 2010). The researchers proposed that the visuals generated by the software reinforced the natural method by which we form and manipulate mental models of molecules: first, by forming a mental image of the molecule, then performing a mental transformation (Abraham, Varghese, and Tang 2010). A stationary image is also initially presented in Lab3D, which the student then has the opportunity to freely manipulate.
The objective of Lab3D (Fig. 2) is to provide a learning resource for undergraduate students that facilitates comparison of the two representational modalities of chemistry visuals by showing side-by-side, synchronized 2-D and 3-D interactive movies. For each reaction, there are two organic reaction viewer windows, the 3-D animation viewer where the 3-D scene can be rotated, translated and scaled as the animation plays, and the 2-D animation viewer where a symbolic animation is shown. In addition, the type of 3-D representation (ball-and-stick, etc.) can be toggled using buttons to right of the 3-D viewer. An overview of the Lab3D user interface is shown in Fig. 2.
Fig. 2. Overview of the Lab3D user interface. (or click here for a walkthrough of the current site functionality). A) 3-D Animation viewer. As the animation plays, the scene can be rotated, translated, and scaled. B) The overall reaction equation is shown by default, but can also be hidden from view. C) 2-D Animation viewer. D) The animations are controlled through the media controls and slider. Play, pause, advance or rewind by a frame, move to the start or end, and scrub through the animation at your own speed. The slider functions also as a reaction coordinate, showing the location of transition state(s). E) From a list of general reaction categories, select a set of conditions. F) Toggle stick, ball-and-stick, and CPK representations. G) Toggle atom labels. H) Play a movie of the reaction with a surface representation. I) For smaller screens, click and drag to adjust the height of the 3-D viewer and bring the 2-D viewer “above the fold” of the browser window. J) Curated, contextual links are provided for additional information about each reaction.
The website was created in a multi-stage process:
1) 3-D data collection. Reactions were modelled in Spartan Student ‘10 (Wavefunction Inc.) using a coordinate driven approach at the B3LYP/6-31G* level of theory.
2) 3-D data ‘work-up’. Energy vs. constraint (internuclear) length was plotted and used to identify the transition state. Bonding information was updated to match and the resulting sequence of structures exported as a MDL SD File. Isodensity surfaces showing electrostatic potential maps were calculated and a movie was generated.
i) 3-D molecular viewer. The 3-D viewer uses native Web technologies to load and display molecular graphics data. ChemDoodle Web Components (iChemLabs) was implemented to parse the molecular data (a MDL SD File is retrieved from the server) and generate 3-D WebGL representations.
ii) Reaction equation. Reaction equations were drawn in the ChemDoodle Web Sketcher and exported for further editing. Additional features were generated using a custom library (Lab3D.js). Finally, the ChemDoodle ViewerCanvas class was used to display the reaction equation in the browser.
Following expansion of the reactions library and further testing and debugging, We hope to find partners in chemistry education would be interested in incorporating use of the tool in the classroom and providing feedback on use, changes in misconceptions (resolves previous misconceptions or creates new ones), and achievement.
I would like to eventually realize the incorporation of 3-D interactive chemistry animations within digital textbooks. While visuals have been constrained so far by the limitations of print medium, "rich-media", such as audio, video and 3-D objects can be incorporated within e-textbooks. For example, some biochemistry titles available on the Inkling platform showcase 3-D rotatable molecules. The movement of educational publishers towards digital publishing – despite perhaps slow adoption by students and teachers (Greenfield 2013) – creates opportunities to revisit and potentially elevate the quality of visuals in chemistry textbooks.
Abraham, M., V. Varghese, and H. Tang. 2010. "Using Molecular Representations To Aid Student Understanding of Stereochemical Concepts." Journal of Chemical Education no. 87 (12):1425-1429.
Ainsworth, S. 2008. "The educational value of multiple-representations when learning complex scientific concepts." Visualization: Theory and practice in science education:191-208.
Burke, K. A., T. J. Greenbowe, and M. A. Windschitl. 1998. "Developing and using conceptual computer animations for chemistry instruction." Journal of Chemical Education no. 75 (12):1658-1661.
Gilbert, J K. 2008. "Visualization: An emergent field of practice and enquiry in science education." Visualization: Theory and practice in science education:3-24.
Greenfield, Jeremy. Students, Professors Still Not Yet Ready for Digital Textbooks 2013. Available from http://www.digitalbookworld.com/2013/students-professors-still-not-yet-r....
Kleinman, R., H. Griffin, and N. K. Kerner. 2005. "Images in chemistry."1-5 and references therein.
Lowe, Richard. 2004. "Interrogation of a dynamic visualization during learning." Learning and Instruction no. 14 (3):257-274.
Perkins, James A. A History of Molecular Representation Part 2: The 1960s - Present, Feb 17 2006a.
———. A History of Molecular Representation Part One, Feb 17 2006b.
Uttal, D. H., and K. O. Doherty. 2008. "Comprehending and Learning from ‘Visualizations’: A Developmental Perspective." Visualization: Theory and practice in science education:53-72.