Animations and Web-Practicals for NMR and Mass spectrometry teaching

1. Introduction

Web-based animations and practical questions have been developed to help students learn about NMR and Mass spectrometry. These webpages can be viewed can from any computer within the University of Leeds, at the URL: http://fbs4pcw021.leeds.ac.uk which can be entered more concisely as: fbs4pcw021 The flash animations have also been embedded into Powerpoint files, so can easily be used for a lecture, provided the computer has the free Adobe flash player plugin installed (see section 3), which most computers have.

2. Screenshots

It is said that “a picture is worth a thousand words”, so below are some screen shot images:

2.1. NMR animations:

2.2. Mass spectrometry animations:

2.3. Questions and answers for NMR and Mass spectrometry:

2.4. JSpecView/Jmol webpage, and tutorial on using Spinworks software:

2.5. Links page for Mass spectrometry, and Student answers and feedback:

3. Configuring your web-browser

3.1. Java plugin: The "NMR Animation" page and the "JSpecView and JMol viewers" page both require the Java runtime plugin, which should be already installed on university computers. If the Java runtime is not installed, then it can be downloaded from: http://www.java.com/en/download/index.jsp

3.2. Flash plugin: The “NMR Flash Animation” and “Mass spectrometry animations” need the Adobe flash player, version 9 or later, to be installed. This is already installed on university computers, but if not installed can be downloaded from: http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash

3.3. Browsers tested: The animations and webpages have been tested in Internet Explorer 6.0, Mozilla’s FireFox 2.0 and 3.0, Opera 9.25, Apple’s Safari 3.0, K-Meleon, and Google’s Chrome (Beta) on Windows XP, and work okay, apart from the "JMol and JSpecView" page, which sometimes crashes the Safari 3.0 browser on Windows XP (eg. refresh the page four times), but hopefully will work okay on a Mac. (This crash is probably a problem with the ‘live-connect’ used to communicate between the Java applets in Safari, as the single Java NMR animations runs fine). The JSpecView applet produces a warning message in FireFox 3.0, which can be ignored. Also Google’s new Chrome web-browser needs the latest Java SE6 Update 10 (Beta) plugin installed to run any Java animations.

4. Setting up Spinworks for NMR Practical Two

4.1. Download SpinWorks: The SpinWorks program version 2.55 can be downloaded from: ftp://davinci.chem.umanitoba.ca/pub/marat/SpinWorks Select the file "SpinWorks_255.zip" (There is a version 3 in development but it is not fully stable and needs Windows .NET to be installed). Unzip these downloaded SpinWorks file using "WinZip" or "7-Zip" or similar program, to a suitable directory such as "C:\Spinworks" (Note: It is best not to have any spaces in the path to the program location or data files, so not in eg: "My Documents").

4.2. Download data files: From the "sample_data" subdirectory: ftp://davinci.chem.umanitoba.ca/pub/marat/SpinWorks/sample_data/ download the 2D spectrum file: "sample_Varian_2D.zip" and unzip it into the directory "C:\SpinWorks\UXNMR-XwinNMR data" (The 1D spectrum for this practical is already in the "C:\SpinWorks\UXNMR-XwinNMR\strychnine" as it is included in the SpinWorks_255.zip file that you have downloaded already.)

4.3. Starting SpinWorks: Create a Windows desktop shortcut to the file "C:\Spinworks\SpinWorks.exe". Start SpinWorks by clicking on the SpinWorks desktop icon that you have created.

4.4. Configuring SpinWorks: From the SpinWorks program menu select: "Edit" à "Set Preferences and Start-up Options...", then an "Edit Start-up Defaults" dialog box should appear. On this dialog, set:

· "Default Data Folder" to: "C:\SpinWorks\UXNMR-XwinNMR\" which is the sample data directory. (Alternatively it should be possible to copy the sample NMR data files to each student's network directory, but may load files a bit slower across the network.)

· "Processed data:" Uncheck the "Auto Save" check-box, (otherwise will try to write to the data file directory, which might be a problem if students all share the same data directory). Uncheck the "Auto Load" check-box.

· "Data format:" Select "UXNMR\XwinNMR"

· "Default Scratch Folder:" Should be a directory which the student has permissions to write to, as the peak list is written to this directory. (eg: "C:\Home\Temp")

· Then click the "OK" button to close this dialog.

5. Viewing Student Answers

The students’ answers are logged along with the computer’s IP address, so that demonstrators can see which students are having difficult and assist them. Answers can be displayed by computer IP address, or question number, and the display automatically refreshes each 20 seconds. Students can also ask questions and give feed back via the web-pages.

6. Technical stuff

6.1. Web-server: The NMR and Mass spectrometry animations are current installed on computer fbs4pcw021 in the directories: C:\UniServerX.X\www for the HTML webpages, images, java and flash animations, and C:\UniServerX.X\cgi-bin for the Perl script which logs the users input. Theses webpage are displayed by a compact version of the Apache webserver and Perl, called “Uniform Server” http://www.uniformserver.com/ The links in the HTML files are relative links so the files can easily be moved to another webserver. The cgi-bin and web-pages must be on the same server domain, as cross-site AJAX scripting is not permitted.

6.2. Source code: The source code for the animations is currently located in:

· Java NMR animation: C:\UniServerX.X\www\NMR_Animation

· Flash NMR animation: C:\Home2\Flash\NMR_Flash

· Flash Mass spec animation: C:\Home2\Flash\MassSpec\MassSpecCombined

· Perl script for logging answers: C:\UniServerX.X\cgi-bin

6.3. Software used: The following software tools were used to develop these animations and webpages:

· JCreator IDE Professional and Java SDK: Used to write the Java version of the NMR animation. Can be downloaded from: http://www.jcreator.com/ and http://java.sun.com/

· JSpecView (vs: 27-Aug-2008) and Jmol (vs: 11.4.6): Open-source Java applets downloaded from: http://wwwchem.uwimona.edu.jm/spectra/JSpecView/ and http://jmol.sourceforge.net/

· Adobe Flash CS Professional (for education): Used to develop the initial mass spectrometry animations. The animations were later written completely in Actionscript 3, so can easily be edited by anyone without requiring Adobe Flash CS Professional license.

· FlashDevelop IDE and Flex 3 SDK: Used to edit and compile the final Actionscript versions of the animations. These tools can downloaded free of charge from: http://www.flashdevelop.org/ and: http://opensource.adobe.com/wiki/display/flexsdk/

· NotePad++ text editor: Used to write the HTML webpages and perl script. Is available from: http://notepad-plus.sourceforge.net/uk/site.htm

· CSE HTML Validator: Used to check that the HTML used in the web-pages was fully correct. This is available from: http://www.htmlvalidator.com/

· Audacity and LAME MP3 encoder: Used to record, edit and save the mp3 voice files for the animations. This is available from: http://audacity.sourceforge.net/

7. Thoughts

· Add more Mass spectrometry questions.

· Maybe a student trial to get feedback on ways to improve the animations and webpages.

· Record audio in more English voice, rather than my ‘Norn Iron’ accent.

Stephen Bridgett, Sep 2008

Creative Commons Copyright

Email: sbridgett@leeds.ac.uk until Oct 2008, then: sbridgett@btinternet.com

This file: C:\Home2\NotesOnMyAnimationsAndWebPracticals.doc