Insights into Molecular Visualization Design

Introduction

The purpose of this paper is to provide an overview of how an Electronic Learning Tool (ELT) on precipitation reactions was designed with input from both instructors and students. It is important to note that the research conducted with students was previously published (Kelly et al, 2010), and this paper will emphasize the instructors’ perspectives and the overall design process.

The process of developing the tool began with first thinking about what the molecular animations should emphasize and how the content would actually be unpacked. Since instructors are the ones who ultimately decide whether to use the tool, they were interviewed to learn ways that the tool could be made more appealing to them. For example, what would they want an animation about atomic level details associated with precipitation reactions to show? More importantly, the hope was that by interviewing instructors to learn the features on which they wanted their students to focus and by also being mindful of how students understand the reactions, a scaffold could be developed to assist students in adapting their understanding to fit with their instructors’ vision. Thus a sample population of instructors at a University located in the Western United States was interviewed to learn what they expected students to be able to convey about precipitation reactions to show mastery of atomic level details associated with precipitation reactions. In addition to interviewing instructors, as mentioned, students were also interviewed to learn how they viewed the atomic level and the kinds of misconceptions they held. This work informed the design of the atomic level visualizations. Later, the framework was built around the visualizations to build context and connections to the macroscopic and symbolic levels and to make the tool more interactive and reflective.

In the fall of 2005, eleven chemistry instructors (7 males and 4 females of diverse ethnicity) all with doctorate degrees in chemistry disciplines were interviewed to examine how they segmented their understanding of precipitation reactions to teach first year, General Chemistry students.  The instructors were asked to draw their submicroscopic level understanding of three molecular equations presented to them on worksheets.  The worksheets consisted primarily of four blank box frames for drawing submicroscopic events for each of three molecular equations; however, instructors were told that they could use as many boxes as they felt were necessary.  The three equations were:

                        1) AgNO₃(aq) + NaCl(aq) → AgCl(s) + NaNO₃(aq)

                        2) KNO₃(aq) + NaCl(aq) → No Rxn

                        3) MnCl₂(aq) + 2 AgNO₃(aq) → 2 AgCl(s) + Mn(NO₃)₂(aq)

The first equation had only monovalent ions. The second reaction provided an example of a situation in which no reaction occurs. The third reaction showed more complicated formulas and coefficients.  The specific research question was: How do instructors segment these reaction equations and what key features do they incorporate in their segments?

Constructivism was used as the theoretical framework guiding this qualitative study. According to Fergusen (2007), constructivism is best suited for studies that focus on sense- or meaning-making, concept construction, or elucidation of alternative concepts.  Instructors’ drawings were analyzed to ascertain how the instructors communicated molecular-level understandings of the given equations. Special attention was paid to learn how the instructors organized their understanding. The worksheet drawings were coded and examined using a constant comparison method of analysis (Merriam, 2001). 

Informing the Segmentation of Precipitation Reactions

The findings indicated that instructors drew three segments to convey changes in time as the reaction progressed from reactants to products.  The first segment (Figure 1) consisted of events that occurred prior to the start of the reaction. Seven instructors emphasized the nature of the aqueous reactant solutions prior to mixing while two depicted how the aqueous solutions were made.

Figure 1. An example of an instructor's depiction of how aqueous solutions were made.

The second segment illustrated the nature of the reaction solution at the moment of mixing.  Seven instructors drew a step at the initiation of the reaction just after mixing, at which point the solution consisted entirely of unreacted aqueous ions.  Some drew pictures that consisted of events that occurred during the reaction, such as collisions between the various species.  Eight instructors depicted the dynamics of the processes that occurred during the reaction in which some collisions resulted in the formation of a precipitate while others did not (Figure 2).

Figure 2. An instructor's depiction of collision dynamics in the reaction.

The third and final segment illustrated the nature of the species at the conclusion of the reaction (Figure 3).  Eleven instructors drew the make-up of the precipitate and ten drew the aqueous product solution. 

Figure 3. An instructor’s depiction of precipitate aggregate formation.

Additional findings from this research indicated ways that experts used elements of graphic language to simplify complex reaction features to communicate the essential features of the reaction. For example, many used lines to create separation between the reactant solutions. In some instances wavy lines were used to indicate the nature of a solution instead of drawing water molecules or boxes to separate the precipitate from the aqueous solution environment.  Nine of the eleven professors simplified the role of water in the reaction by drawing: a cloud around ions to indicate the presence of water, circles to represent water molecules, or graphic features such as a beaker filled with a liquid or a wavy line to represent water’s presence. Six instructors drew only water molecules involved in the hydration of the ions.  To depict the species involved in the reaction, ten instructors used the symbolic representation of the species with the element symbol and charge and four of these drew a circle around the symbol to represent the ions.  Only two instructors drew geometric shapes to represent the species and provided a legend to clarify the identity of the shapes. 

Students’ Explanations

In addition to studying the experts, 21 General Chemistry students were interviewed to learn how they understood the particulate nature of the reaction events to occur (Kelly, Barrera and Mohamed, 2010). To summarize, several misconceptions were uncovered. Most importantly it was revealed that students tended to map their atomic level understanding onto their symbolic portrayal of chemical equations. In the case of precipitation reactions, they believed that the ionic compounds existed as molecules, which broke apart when they were mixed together, then changed partners, before they formed molecular products. Students also had a weak understanding of the term aqueous. When students are taught formulas and chemical equation, they are often provided with affirmation when their symbolic representations are correct, thus when students map their understanding of the atomic level onto their “correct” symbolic representations, they trust and infer that their atomic pictures are also “correct”. This makes it very challenging to convince them that a dilute aqueous salt solution does not consist of ion pairs. 

How do you design it?

To design the learning tool a learning cycle approach was adopted. The storyboard for the learning cycle design began with an exploration video in which the questions – why is it that when two aqueous solutions are mixed, sometimes a precipitate is formed yet when other solutions are mixed nothing happens? How do we account for this? This was an attempt to tap into students’ curiosity and get them to consider a “why” type question to frame their viewing experience. In addition, an effort was made to start with the familiarity of the macroscopic representation of the reaction and to ask students to consider what could account for this result at the atomic level? Care was taken to represent at most two levels at a time. After the exploration phase, the next phase of the learning cycle was concept development. This section was informed by the interviews with the instructors and students and consisted of an atomic level animation section as well as cartoon tutorials to help students connect the symbolic and submicroscopic levels. Finally, the tool ended with a concept application section in which students were given a laboratory context with which to connect their atomic level understanding. 

Who Designs it?

When the project began, two animation artists, students enrolled in the Bachelor of Fine Arts (BFA) program at SJSU, were hired to develop the first prototype based on the author’s research and guidance. The team soon grew to consist of five animation artists (students in the SJSU BFA program). One of the artists was able to construct Maya animations to create the atomic level animations, while the other artists were skilled in Flash animation and video. The artists constructed the major components of the tools, but in order to allow navigation to the different components and to make it interactive a programmer was needed. Therefore, a student majoring in computer programming was hired to create: the navigation between the tool components, interactive features, and data entry and feedback components. Rounding out the team was a student majoring in graphics design, and a narrator with an authentic British accent, which was desired by the animation team. 

Design Aspects

Simple and Intuitive. The ELT employs the use of simple interactive features consisting of buttons and click-and-drag type tools. The design team tried to make these as intuitive as possible by using pictorial icons and highlighting labels. Supplemental animations were presented through links next to the main animations to highlight the importance of water molecules in the processes. 

Friendly Cartoon Tutor (Advocate for Learning). A cartoon character was created to introduce the ELT and this offered a more personable experience (Figure 4). When the tool was first constructed, a character named “Billy” was designed to represent a student who was confused and the information in the tool was meant to help him, but many students disliked this character. They felt that it implied that they were Billy and obviously lacking intelligence. Thus one of my animation team members, Virgil Serrano came up with a test tube character named Dr. NRG (pronounced “Energy”). He also decided that the character he constructed was British, which presented a challenge to find narration prospects. Dr. NRG became a friendly tutor to ease tension, through humorous mannerisms such as morphing from a test tube on the table into a cartoon tutor, and he sips tea while he waits for the student to select from the main menu. The character allowed us to instruct the students through the tool experience, making it easy for us to emphasize key features and teach how the atomic level connected to the symbolic representations.

Concept Development. The Concept Development section was designed initially to assist students with their atomic level understanding. However, once we completed our study of how students tended to connect the chemical equation to the atomic level events, we recognized that we needed to create tutorials to teach students how the three equations (molecular, total ionic and net ionic) specifically related to the atomic level.  We approached this in two stages. First an atomic level perspective was delivered to address how solutions that reacted were sometimes able to form a precipitate, while some solutions were unable to react. Next, tutorials featuring Dr. NRG were made to teach the chemical equations and how they connected to the atomic level.  Again care was taken to focus first on the atomic level before bridging to the symbolic level

1. Atomic Level View – In this section, the students were first asked to construct their understanding of aqueous sodium chloride and solid silver chloride using a click and drag tool Figure 5). This was done because students do not always recognize when they have changed their understanding.

Figure 5. Screen shot of the Click-and-Drag Metacognition tool.

Some students believe that their mental models do not differ noticeably from animation models, even though experts reviewing their work may find them drastically different (Kelly, 2014). As a result, metacognitive reflection activities helped some students notice differences between their understanding and what the animation showed. Upon completion of the click and drag exercise, students were allowed to view an introductory video in which they could see the most complicated view of the animation (Figure 6).

Figure 6a: Still image pictures showing complex view of the atomic level precipitation reaction. https://www.youtube.com/watch?v=ELVDnopm7r4

Figure 6b: Embedded Video showing complex view of the atomic level precipitation reaction.

This was done purposefully so that students could recognize the complicated nature of the reaction environment. Viewing a more complex animation prior to showing simplistic components may help students better focus and understand critical features of the complex visualization.

Following the complex view the students were taken back to the main menu where they could choose to view one of two situations: 1) when a reaction occurs and 2) when no reaction occurs. The reason both reaction and non-reaction events were included was due to findings from an initial study in which we learned that many students thought that ionic pairs that did not react, first switched partners, in essence reacting, but then broke apart (Kelly, Barrera & Mohamed, 2010).  In both the reaction and non-reaction sections the events were segmented in accordance with the segments uncovered from the interviews with instructors (Figure 7)

Figure 7a. Still image showing the segmentation of the precipitation reaction. https://www.youtube.com/watch?v=bp9vvuHJwDc

Figure 7b. Embedded video showing the segmentation of the precipitation reaction

In the case of the reaction between aqueous solutions of sodium chloride and silver nitrate the reaction was segmented into reactants, with animations of each reactant solution: aqueous sodium chloride and aqueous silver nitrate prior to mixing together, then the reaction between the two solutions and finally an animation that focused on the products of the reaction. Additional animations were provided as links to further account for the nature of the species involved. For example, a hydrated sodium ion and a hydrated chloride ion were represented to highlight the orientation of water molecules in the initial layer of hydration surrounding the ion. In addition, an animation that showed the presence of solvent water molecules was also included so that students would have a more realistic perspective of the interactions between the aqueous ions and water. In the case of the products, a 3-d representation of the silver chloride aggregate was shown, but students could also click on a picture that allowed them to see that water would be attracted to the aggregate, but unable to pull it apart. 

Upon examining both sets of animations for the reaction and non-reaction events, students were once again tasked with analyzing their conceptual understanding. They were shown an example of their initial drawing of aqueous sodium chloride and solid silver chloride and they were asked once again to construct their understanding after they had gained new insights from the animations. They were also required to type a description of the misconceptions they had before and how changes were made to correct them (Figure 8).

Figure 8. An example of a student’s pre and post conception pictures.

2.  Chemical Equations. In this section, Dr. NRG leads students through four tutorials on how to represent reactions with symbols and how to represent the three types of ionic equations molecular, total ionic and net ionic (Figure 9). Kelly et al. 2010 noted that many students incorrectly incorporated features of both the molecular equation and the total ionic equation in their drawn depictions, suggesting that they viewed the total ionic equation as an intermediate step in the reaction.  Thus, this section specifically addressed the function of the equations for conveying the nature of the reactions. The primary goal was to connect the symbolic level to the atomic level portrayal of reactions and assessment questions followed each of the sections to allow students to test their understanding.

Figure 9a. A screenshot from a tutorial with Dr. NRG. https://www.youtube.com/watch?v=kM-t1rA44lE

Figure 9b. Embedded video from a tutorial with Dr. NRG.

Concept Application. In this section, students were provided with a table of reactants and asked to predict whether a reaction would occur. If they decided that a reaction occurred, they were asked to balance the equation and construct a picture of the reactants and products. This was done to provide students with practice connecting symbolic and atomic levels and also provided the students a way to predict the number of reactions that they could expect to see should these solutions be mixed. After they completed the table, the students were provided with a table of actual reactions; however, the reactants did not have labels and the students were challenged to identify the reactant solutions responsible for the resulting precipitates (Figure 10). Upon completion of the third part of the ELT, students were able to see a chart of their progress on the main page. 

Figure 10. A screenshot of the reaction table and a chart for identifying the reactant solutions.

Feedback. In order to provide students with feedback on their progress, a star system was developed and students were awarded gold, silver and bronze stars when they attempted to complete a task. The gold star indicated that they had completed the tasks perfectly or nearly perfectly (missing only a few items). A silver star was assigned if the student missed more than three items, but less than 5 items. For example, when balancing equations, if a phase was entered incorrectly or subscripts and coefficients were entered incorrectly, the student might receive a silver star. A bronze star was awarded if more than five items were missed, but less than 10 items. If the student did not complete a section, the star would be dark gray. Typically, most students received either gold or silver stars if they attempted the tasks. The dark gray star was important because it allowed us to see when students did not complete a section of the tool. Many students liked the star system because it gave them immediate feedback, but they disliked it when they missed an equation and they were unable to tell which one it was. This caused some students to make numerous attempts to get all gold stars, which many vocally conveyed to be frustrating. On the final grade report, students’ work was mostly automatically scored through the computer program, but the pictures and comments were hand graded by their Teaching Assistants (TAs) who used a 5-point rubric to award points. In addition to the points the TAs could also include brief comments (bottom of Figure 8). The comments made by the TA’s varied: some were quite detailed and explicit, while others simply left the comment box blank. 

Naturalistic Analysis

During the Fall 2011 semester, nineteen Introductory Chemistry lab sections, consisting of approximately 500 total students, were assigned to complete the ELT on precipitation as a pre-lab exercise. Most of the students, 379 of 500, completed the pre and post conceptions pictures. In order to examine how effective the atomic level animations were toward changing students’ mental models, pre- and post- treatment pictures from all students who completed the ELT for their pre-lab, were coded for the presence of key features and misconceptions for reactant solution, aqueous sodium chloride, and the precipitate, solid silver chloride (Table 1). 

Table 1. Key features and misconceptions coded from students’ ELT progress report.

In general, students improved on the number of key features that they represented for both aqueous sodium chloride and solid silver nitrate. Most notably, more students recognized that aqueous sodium chloride was composed of separated ions that were surrounded by waters of hydration. Interestingly, fewer students chose to depict the presence of solvent water. This is likely due to the enhanced focus on the hydration spheres that were represented in the animations and perhaps recognizing that additional solvent waters would be unnecessary to depict, rendering them nonessential. In addition, this finding fits with the simplified animations, which did not depict solvent water molecules and only represented the water molecules next to the ions or one-layer of hydration surrounding the ions. It is also important to notice that the number of students expressing the misconception that aqueous sodium chloride existed as ion pairs decreased substantially. In the case of solid silver chloride, the biggest learning gain was depicting that the precipitate consisted of a lattice arrangement of ions and that water molecules could still be attracted to the precipitate, but they would not pull it apart. Once again, fewer students felt compelled to depict solvent water molecules even though the precipitate was formed in an aqueous environment. However, this was consistent with the simplified animations that the students viewed, which also did not depict solvent water molecules. The major misconception that students held initially, that of the precipitate consisting of ion pairs, also noticeably decreased. 

Conclusion

The ELT helps students better understand the atomic level of precipitation reactions based on their pictorial constructions and completion of the tool. It is difficult to know whether the experience of using the tool will help students improve their ability to make connections between the macroscopic and symbolic levels or if the changes that they made to their pictures are reflective of lasting changes to their mental models. Further studies in which we examine the longitudinal effect of using visualization tools should be considered. 

Acknowledgement

The author wishes to acknowledge that the National Science Foundation under Grant No. 0941203 supported this work. Any opinions, findings, and conclusions or recommendations expressed in this paper are those of the author and do not necessarily reflect the views of the National Science Foundation.

References

1. Kelly, R. M., Barrera, J. H., & Mohamed, S. C. (2010) An Analysis of Undergraduate General Chemistry Students’ Explanations of the Submicroscopic Level of Precipitation Reactions. Journal of Chemical Education 87(1), 113-118. Publication date(Web): December 18, 2009.
2. Ferguson, R. L. Constructivism and Social Constructivism. In Theoretical Frameworks for Research in Chemistry/Science Education; Pearson Education, Inc.: Upper Saddle River, NJ, 2007.
3. Merriam, S. B. Qualitative Research and Case Study Applications in Education; Jossey-Bass Publishers: San Francisco, CA, 2001.
4. Lincoln, Y. S.; Guba, E. G. Naturalistic Inquiry; SAGE Publications:London, 1985.
5. Kelly, R.M. (2014) "Using variation theory with metacognitive monitoring to develop insights into how students learn from molecular visualizations." Journal of Chemical Education DOI: 10.1021/ed500182g. Publication date (Web) June 13, 2014.

To see the ELT visit www.chemteam.net and email Resa Kelly (resa.kelly) to gain access.
To view a sample of the ELT visit YouTube (all videos were accessed on April 4, 2015).

1. Introduction to ELT- Precipitation - https://www.youtube.com/watch?v=8jlj9yEHOeM
2. View of Complex Atomic Level Animation - https://www.youtube.com/watch?v=ELVDnopm7r4
3. View of Segmented Precipitation Reaction NaCl(aq) -https://www.youtube.com/watch?v=bp9vvuHJwDc
4. Hydrated Sodium - https://www.youtube.com/watch?v=nEOa5D7u3fM;
5. Hydrated Chloride - https://www.youtube.com/watch?v=Klys-qocYLY \
6. Tutorial 1 on Chemical Equations – https://www.youtube.com/watch?v=A7sOlMi98fM
7. Tutorial 2 on Molecular Equations - https://www.youtube.com/watch?v=73BbiV5yDso
8. Tutorial 3 on Total Ionic Equations - https://www.youtube.com/watch?v=43MyKEnyDI4
9. Tutorial 4 on Net Ionic Equations - https://www.youtube.com/watch?v=kM-t1rA44lE