Virtual Labs And Tutorials


by Eddie Brown
founder Chem21Labs (2005)
Organic Chemistry Professor (27 yrs)

I began creating animations in Flash (2005) and transitioned to HTML5-JavaScript in 2017. I have created animated labs, interactive tutorials and Organic chemistry mechanism quizzes. In June 2021, John Hearn (Physical Chemistry / Organic Chemistry Professor) joined the Creative Content Team and quickly learned HTML5-JS. His first project was a Stereochemistry Tutorial for his Organic Chemistry course that he completed in a few weeks.

Students earn points for completing Chem21Labs Tutorials -
they work through the animation as many times as needed
to learn the information and reach the end of the "lesson".


This animation is an interactive tutorial on identifying R/S configuration, enantiomers, diastereomers and meso compounds. Click the image above to launch animation.

. . . this animation is an interactive tutorial on identifying R/S configuration, enantiomers, diastereomers and meso compounds. Click the image above to launch animation.

John's second project was an Organic Chemistry drawing and grading program. I created the user interface and John created the grading and student feedback code with the following features:

  1. Student answers can show E/Z and R/S configurations.
  2. Multiple answers are drawn and graded (with partial credit).
  3. Mechanism arrows are drawn and graded (with partial credit).
  4. Multi-step syntheses are displayed with reaction arrows and reagents above / below the arrows.
  5. Specific feedback on incorrect structures (or mechanism arrows) is shown after each submission.

The images to the right show the various features of Chem21Draw . . . click an image to open the animation and begin drawing (the grading part works only when working an actual homework problem).


Draw the four isomers of C<sub>3</sub>H<sub>5</sub>Cl.<BR />Correct answers are displayed with a green background, incorrect answers have a red background.  When students mouseover incorrect answers, feedback is displayed to help them correct their mistake. Click the image above to launch animation.

. . . draw the four isomers of C3H5Cl.
Correct answers are displayed with a green background, incorrect answers have a red background. When students mouseover incorrect answers, feedback is displayed to help them correct their mistake. Click the image above to launch animation.


The Chem21Draw canvas can display reaction arrows with reagents as shown.  In addition, students can draw mechanism arrows which are graded with the structures. Feedback is displayed when students mouseover a graded mechanism arrow. Click the image above to launch animation.

The Chem21Draw canvas can display reaction arrows with reagents as shown. In addition, students can draw mechanism arrows which are graded with the structures. Feedback is displayed when students mouseover a graded mechanism arrow. Click the image above to launch animation.

This drawing project is, by far, our most complex animation and is a great example of what a motivated person can accomplish in a short period of time with a small amount of HTML5-JavaScript training (of course I helped 😏). John and I want to partner with chemistry professors to produce a library of high-quality, low-cost animated labs. Students will follow a procedure to drag/drop chemicals, lab equipment and instruments. The collected lab data consists of randomized numbers giving each student a unique set of data. Students will then submit calculation answers and receive immediate feedback. Chem21Labs will "host" your work and collect royalties for the labss selected. Click here for information about our free, online HTML5-JS workshops where you can gain the skills to create a virtual lab.

We have compiled a significant collection of assets (any image you see in the animations below) and code (code animates the assets) that makes learning object-oriented programming possible in a very short time. The collection of virtual labs will be hosted on Chem21Labs.com and integrated with our online lab submission program - this way we can concentrate on the animation and leave the grading to Chem21Labs. Your virtual labs will be available to the world where you will receive a royalty (⅓ of the student cost) on each adoption.



Lab Tutorials


Students prepare a buret for a titration. Click the image above to launch animation.

. . . students prepare a buret for a titration. Click the image above to launch animation.

students practice reading buret volumes. Click the image above to launch animation.

. . . students practice reading buret volumes. Click the image above to launch animation.

Students read the starting volume, ending volume and calculate the delivered volume from a buret. Click the image above to launch animation.

. . . students read the starting volume, ending volume and calculate the delivered volume from a buret. Click the image above to launch animation.

This animated tutorial provides safe practice for using and reading a Refractometer. Click the image above to launch animation.

. . . this animated tutorial provides safe practice for using and reading a Refractometer. Click the image above to launch animation.

Prior to lab, students order the lab procedure steps by reading the lab guide. Typically, each student gets a subset of the procedure steps (i.e. 15 out of 20) to prevent direct copying of answers. Click the image above to launch animation.

. . . prior to lab, students order the lab procedure steps by reading the lab guide. Typically, each student gets a subset of the procedure steps (i.e. 15 out of 20) to prevent direct copying of answers. Click the image above to launch animation.



Virtual Labs


This virtual lab introduces the scientific method, data collection, graphing data and drawing conclusions. Click the image above to launch animation.

. . . this virtual lab introduces the scientific method, data collection, graphing data and drawing conclusions. Click the image above to launch animation.

Students determine the composition of a penny without damaging it.  They use water displacement to determine the penny's density.  Then, the connection between the two Penny forms and isotopes is made.  The isotope equation is validated with the tangible Penny isotopes. Click the image above to launch animation.

. . . students determine the composition of a penny without damaging it. They use water displacement to determine the penny's density. Then, the connection between the two Penny forms and isotopes is made. The isotope equation is validated with the tangible Penny isotopes. Click the image above to launch animation.

Students add hot water to the calorimeter containing cold water. The heat entering the calorimeter is used to determine its heat capacity. Click the image above to launch animation.

. . . students add hot water to the calorimeter containing cold water. The heat entering the calorimeter is used to determine its heat capacity. Click the image above to launch animation.

Students vary the solute, temperature and solute mass while observing the changes in the freezing point, boiling point, vapor pressure and osmotic pressure. Click the image above to launch animation.

. . . students vary the solute, temperature and solute mass while observing the changes in the freezing point, boiling point, vapor pressure and osmotic pressure. Click the image above to launch animation.

This chromatography animation guides students through the steps to a developed chromatogram and then has the student enter R<sub>f</sub> values and determine the identity of an unknown. Click the image above to launch animation.

. . . this chromatography animation guides students through the steps to a developed chromatogram and then has the student enter Rf values and determine the identity of an unknown. Click the image above to launch animation.



Lecture Tutorials


Students create a phase diagram and identify the processes that interconvert solids, liquids and gases. Then, a heating curve overlays the phase diagram and students transition a random quantity of matter from one phase to another phase and calculate the energy change. Click the image above to launch animation.

. . . students create a phase diagram and identify the processes that interconvert solids, liquids and gases. Then, a heating curve overlays the phase diagram and students transition a random quantity of matter from one phase to another phase and calculate the energy change. Click the image above to launch animation.

students view an animated dissolution of NaCl, build a solute / solvent / solution unit map, and calculate the concentration of a solution in the displayed unit (Molarity, molality, Mole fraction, parts per million, or mass percent). Click the image above to launch animation.

. . . students view an animated dissolution of NaCl, build a solute / solvent / solution unit map, and calculate the concentration of a solution in the displayed unit (M, m, Xsolute, Xsolvent, ppm, or mass%). Click the image above to launch animation.

Students learn a standard activity series and then use that knowledge to determine if a RedOx reaction will occur. Click the image above to launch animation.

. . . students learn a standard activity series and then use that knowledge to determine if a RedOx reaction will occur. Click the image above to launch animation.

The conformational energy changes of various hydrocarbons is observed as substituents are rotated 360° around a single bond. Click the white Hydrogen spheres to convert them to methyl, isopropyl, tert-butyl groups.  Then, drag the slider from 0° to 360°. Click the image above to launch animation.

. . . the conformational energy changes of various hydrocarbons is observed as substituents are rotated 360° around a single bond. Click the white Hydrogen spheres to convert them to methyl, isopropyl, tert-butyl groups. Then, drag the slider from 0° to 360°. Click the image above to launch animation.

Students drag/drop molecules and radicals to show the initiation, propagation and termination steps of a free radical chlorination of methane. Click the image above to launch animation.

. . . students drag/drop molecules and radicals to show the initiation, propagation and termination steps of a free radical chlorination of methane. Click the image above to launch animation.



Calculation Guides


Students set up their problem by creating a path from the starting unit to the ending unit on the Dimensional Analysis map. Map 1 contains the isolated quantites of mass, volume, length and area. Click the image above to launch animation.

. . . students set up their problem by creating a path from the starting unit to the ending unit on the Dimensional Analysis map. Map 1 contains the isolated quantites of mass, volume, length and area. Click the image above to launch animation.

. . . students set up their problem by creating a path from the starting unit to the ending unit on the Dimensional Analysis map. Map 2 adds cubic length, atoms and moles and connects volume to mass (density) and mass to moles (molar mass). Click the image above to launch animation.

Tehre are over 30 pH problem types and while the math is not difficult, setting up the calculation can be challenging.  The pH Calculator provides a logical path through this complex process and checks the student's math along the way. Click the image above to launch animation.

. . . there are over 30 pH problem types and while the math is not difficult, setting up the calculation can be challenging. The pH Calculator provides a logical path through this complex process and checks the student's math along the way. Click the image above to launch animation.

This interactive tutorial provides safe practice for determining limiting reagents and calculating theoretical yield. Click the image above to launch animation.

. . . this interactive tutorial provides safe practice for determining limiting reagents and calculating theoretical yield. Click the image above to launch animation.



Interactive Spectra


. . . students use an interactive IR spectrum in a virtual lab to identify eugenol - the main organic compound in Clove oil. Click the image above to launch animation.

. . . students use an interactive 1H NMR spectrum in a virtual lab to identify eugenol - the main organic compound in Clove oil. Students can use the ruler to determine the number of Hydrogens from the integration trace. Click the image above to launch animation.

. . . students use an interactive 13C NMR spectrum in a virtual lab to identify eugenol - the main organic compound in Clove oil. Click the image above to launch animation.

. . . students use an interactive mass spectrum in a virtual lab to identify eugenol - the main organic compound in Clove oil. Click the image above to launch animation.

. . . students use an interactive 2D NMR (HETCOR) spectrum in a virtual lab to identify eugenol - the main organic compound in Clove oil. Click the image above to launch animation.

. . . students click Steps 1 - 4 as a guide to solving 1H NMR problems. Click the image above to launch animation.

Students mouseover this interactive <sup>1</sup>H NMR animation to view the various chemical shifts of Hydrogen atoms in the various functional groups. Click the image above to launch animation.

. . . students use this interactive 1H NMR animation to view the chemical shifts of Hydrogen atoms in the various functional groups. Click the image above to launch animation.

Students mouseover this interactive <sup>13</sup>C NMR animation to view the various chemical shifts of carbon atoms in the various functional groups. Click the image above to launch animation.

. . . students use this interactive 13C NMR animation to view the chemical shifts of carbon atoms in the various functional groups. Click the image above to launch animation.



Organic Reaction Mechanisms


Draw the mechanism for the reaction between water and HCl. Click the image above to launch animation.

. . . draw the mechanism for
H2O + HCl → H3O+ + Cl-
Click the image above to launch animation.

Draw the mechanism for the reaction between chloroform and KOH. Click the image above to launch animation.

. . . draw the mechanism for
CHCl3 + KOH → :CCl2 + H2O + K+ + Cl-
Click the image above to launch animation.

Draw the mechanism for the reaction between acetaldehyde and methyl magnesium bromide. Click the image above to launch animation.

. . . draw the mechanism for
CH3CHO + CH3MgBr then H2O → (CH3)2CHOH + Mg(Br)OH
Click the image above to launch animation.

Draw the curved mechanism arrows for the reaction between water and HCl. Click the image above to launch animation.

. . . draw the mechanism for
Cyclohexene + Br2 → Dibromocyclohexene
Click the image above to launch animation.

Over 50
Organic
Reaction
Mechanisms
have been
created.


Informational Animations


A Periodic Table that also functions as a molar mass calculator. Click the image above to launch animation.

. . . a Periodic Table that also functions as a molar mass calculator. Click the image above to launch animation.

Students transfer 1 mole of water from one vial to another. The visual and kinesthetic interaction helps the student see 6.022 × 10<sup>23</sup> molecules. Click the image above to launch animation.

. . . students transfer 1 mole of water from one vial to another. The visual and kinesthetic interaction helps the student see 6.022 × 1023 molecules. Click the image above to launch animation.

The density of water at various temperatures is calculated.  This animation typically appears embedded in a Chem21Labs' online lab report. Click the image above to launch animation.

. . . the density of water at various temperatures is calculated. This animation typically appears embedded in a Chem21Labs' online lab report. Click the image above to launch animation.

The vapor pressure of water at various temperatures is calculated.  This animation typically appears embedded in a Chem21Labs' online lab report. Click the image above to launch animation.

. . . the vapor pressure of water at various temperatures is calculated. This animation typically appears embedded in a Chem21Labs' online lab report. Click the image above to launch animation.

The relationship between pH, pOH, [H<sub>3</sub>O<sup>+</sup>], [OH<sup>-</sup>], pK<sub>a</sub> and pK<sub>b</sub> is displayed in an interactive animation where the user drags a slider to dynamically change values. Click the image above to launch animation.

. . . the relationship between pH, pOH, [H3O+], [OH-], pKa and pKb is displayed in an interactive animation where the user drags a slider to dynamically change values. Click the image above to launch animation.

A Periodic Table that also functions as a molar mass calculator. Click the image above to launch animation.

. . . the movement of atoms and bonds during a cyclohexane ring flip is shown. Click the image above to launch animation.

This animation shows the solvent effect on the energies of the reactant, intermediate and nearby transition states in the S<sub>N</sub>1 and S<sub>N</sub>2 reactions, Click the image above to launch animation.

. . . this animation shows the solvent effect on the energies of the reactant, intermediate and nearby transition states in the SN1 and SN2 reactions, Click the image above to launch animation.

The animation shown is one of a series that depicts the reaction between spheres and squares to form a product.  Students visually see the limiting reagent, theoretical yield and excess reagent. Click the image above to launch animation.

. . . the animation shown is one of a series that depicts the reaction between spheres and squares to form a product. Students visually see the limiting reagent, theoretical yield and excess reagent. Click the image above to launch animation.

The relationship between pH, pOH, [H<sub>3</sub>O<sup>+</sup>], [OH<sup>-</sup>], pK<sub>a</sub> and pK<sub>b</sub> is displayed in an interactive animation where the user drags a slider to dynamically change values. Click the image above to launch animation.

. . . the electron capture nuclear reaction is depicted when an O-19 proton captures an electron and forms N-19. Click the image above to launch animation.

Students use this Aufbau filling animation to create electronic configurations for elements and ions. Click the image above to launch animation.

. . . students use this Aufbau filling animation to create electronic configurations for elements and ions. Click the image above to launch animation.



Animated Videos


A HTML5-JS animation that introduces the features of Chem21Labs. Click the image above to launch animation.

. . . a HTML5-JS animation that introduces the features of Chem21Labs. Click the image above to launch animation.

Watch a virtual student submit their Beer's Law lab online with real-time feedback. Click the image above to launch animation.

. . . watch a virtual student submit their Beer's Law lab online with real-time feedback. Click the image above to launch animation.

Watch a virtual instructor grade a student's Beer's Law report - actually, they only grade the essay answers. Click the image above to launch animation.

. . . watch a virtual instructor grade a student's Beer's Law report - actually, they only grade the essay answers. Click the image above to launch animation.

this animation was converted into a fund-raising video. Click the image above to launch animation.

. . . this animation was converted into a fund-raising video. Click the image above to launch animation.



Memorization Program


Students enter the first letter of the next memorized word and the animation fills in the rest of the word and grades the entry. Click the image above to launch animation.

. . . students enter the first letter of the next memorized word and the animation fills in the rest of the word and grades the entry. Click the image above to launch animation.