Information • Textbooks • Media • Resources
WebSpectra: Online NMR and IR Spectra for Students
Craig A. Merlic,* Barry C. Fam, and Michael M. Miller
Department of Chemistry and Biochemistry, University of California at Los Angeles, Los Angeles, CA 90095-1569;
*merlic@chem.ucla.edu
Structure is absolutely critical when teaching organic
chemistry. It forms the basis of predicting and rationalizing
reactivity on the molecular scale and physical properties at
the macroscopic level. The standard approach for teaching
organic structure begins with orbitals and progresses through
conformations, stereochemistry, and functional groups. Then
spectroscopy, in particular nuclear magnetic resonance
(NMR) and infrared (IR) spectroscopies, is introduced as a
means of determining organic structures (1). This is essential
See https://pubs.acs.org/sharingguidelines for options on how to legitimately share published articles.
material, as NMR is the single most important structural tool
for the modern organic chemist. Students find the discussion
on spectroscopy intriguing, yet daunting (2). However, the
Downloaded via UNIV OF SOUTH AFRICA on April 30, 2024 at 09:03:25 (UTC).
real challenge for students learning to determine organic
structures with spectroscopic data is not the concepts, but the
limited number of spectra available with which to practice
analyzing. Solving spectral problems is just not something that
can be learned from reading; only practice interpreting real
spectra suffices. Most organic textbooks have a very limited
number of spectral problems, and while compilations of spec-
tral problems exist, the cost per problem is often prohibitive for
students. For schools with the resources of in-house spectrom-
eters, one solution has been local acquisition of spectra followed
by massive paper copying. The ultimate solution, of course,
is free online spectral archives and this is now a reality.
Computers and the World Wide Web (WWW) in particu-
lar have become important and powerful tools for teaching
chemistry (3, 4). WebSpectra is a WWW site implemented
at UCLA (http://www.chem.ucla.edu/webspectra).1 Through
this site, students have convenient and free access to a library of
problems in NMR and IR spectroscopy, ranging in difficulty
from introductory to advanced. An important feature is that
expansions of the high-resolution spectra can be controlled
by the user. The site also includes instructional materials
and tools to assist students in learning about NMR and IR
spectroscopy. The design and capabilities of this Web-based
interface are described in this paper.
Capabilities
The WebSpectra site was designed to be a convenient
resource for students to practice and develop their spectral
problem solving skills. Therefore, the main component of the
home page is a list of links to individual spectral problems. In
addition to these links, though, WebSpectra provides online
instructional documents where students can learn or review
basic NMR concepts including chemical shifts, splitting
patterns (5), integration, and solvent effects; and IR concepts
such as functional group absorptions, hydrogen bonding, and
mass effects. There is a search engine that enables students
to locate specific types of compounds on the basis of name,
formula, or functional group. This can be an important
feature, since most textbooks on organic chemistry present
the field using a functional-group approach. Related to this
is another instructional tool on the home page called
WebSpectra IR Comparison. This feature provides the over-
118 Journal of Chemical Education • Vol. 78 No. 1 January 2001 • JChemEd.chem.wisc.edu
lay of two IR spectra to allow direct comparison of spectral
signals based on functional group (Fig. 1). Finally, there are
links to other WWW sites that provide information on NMR
or IR spectroscopy (6 ).
An individual problem page displays the molecular formula
for the unknown, the solvent used for the NMR spectra, a
list of links to the spectra available for that problem, and a
link to the answer. Regarding the last item, the site was con-
structed with the aim of its being a database of problems for
students to learn about spectroscopy and not a testing site.
To avoid nomenclature problems for the student, the answer
page displays both the IUPAC chemical name and a struc-
tural drawing.
Following a link to a spectrum, students are presented
with a high-resolution spectrum of the unknown compound.
Dynamic one-dimensional 1H and 13C NMR spectra (Fig.
2) are available for all problems and IR, DEPT NMR (7),
and/or COSY NMR (8) spectra (Fig. 3) are available for some
problems.2 The dynamic feature refers to the capability of
online delivery of spectra with user-defined spectral windows
for the NMR spectra. That is, users can request expansions
of the spectra based on regions as defined in ppm, or zoom
in to a 0.7-ppm window centered about a particular signal.
The spectrum display includes a listing of the signal frequencies
in both ppm and hertz to allow for the zoom feature and
also coupling-constant analysis. When an expansion is presented,
the complete spectrum is also presented in the upper right
corner of the display to aid analysis. Since more complex
problems can involve interpretation of complex coupling
patterns, the expansion feature is a critical component.
Some of what was just described, such as document dis-
play and lists of problem links, is routine for someone versed in
HTML3 (9). However, spectral display is another matter and
some of the issues are described in this paper. Full technical
details employed in the creation of WebSpectra are posted on
the WebSpectra site (10). We point this out because others may
wish to create their own WWW sites for presentation of a
variety of spectral and other data for educational or research uses.
The Display Problem
Given the digital nature of modern spectroscopic data,
it would seem obvious to use the WWW to present this in-
formation. However, while posting of documents and most
graphics on the WWW is now routine, presentation of high-
quality spectral data presents special problems. Principally,
the use of the WWW as a distribution medium for spectral
data has been hindered by the mutual exclusion of high reso-
lution and format compatibility. Existing spectral Web sites
chose to deliver spectra either at lower resolutions (6a), with
static magnifications (11, 12), or by providing users with free
induction decay (FID) data (13) or proprietary spectral formats
(14). While the complex formats deliver high-resolution
spectra, they require processing knowledge and programs and
this makes them unsuitable for practice spectral problems aimed
 Information • Textbooks • Media • Resources
Figure 1. Sample WebSpectra IR comparison spectra.
Figure 2. Sample WebSpectra 1H NMR spectrum.
Figure 3. Sample WebSpectra COSY spectrum.
JChemEd.chem.wisc.edu • Vol. 78 No. 1 January 2001 • Journal of Chemical Education
at undergraduate students. In the WebSpectra site, spec-
tra are presented in the graphic interchange format
(GIF), a common format that is directly supported by
WWW browsers, while maintaining spectral precision
through a dynamic spectrum magnification feature.
One important issue is that spectral magnification is
principally a one-dimensional function, yet no WWW
browser or plug-in supports this type of image ma-
nipulation.
Dynamic presentation of spectra in the GIF
format is made practical through the integration of a
common gateway interface (CGI) program and
JavaScript into the WWW site. This software addresses
two related issues associated with the usage of the GIF
image format: size and resolution. The delivery of a
complete, high-resolution spectrum in GIF format is
generally impractical because the size of the resulting
image is unmanageable. On the other hand, presenting
a smaller image results in loss of resolution, which may
make spectral analysis very difficult.
The WebSpectra CGI and JavaScript programs
solve the problems of size and resolution by presenting
“only what is needed” at any one time. Spectra are
displayed at first in a low-resolution image. Students
are then given the option to magnify any regions of
interest to deliver the high-resolution data. For one-
dimensional spectra, there are two zoom modes:
magnification to a selected region and maximum zoom
about a signal of interest. Similarly, in two-dimensional
spectra, students are able to choose regions of interest
to be magnified. In this way, students may get a general
overview of the spectrum before scrutinizing details
such as splitting patterns.
Implementation Issues
The capabilities of the WebSpectra system
described above were implemented through initial
acquisition and processing of spectral data, and
subsequent development of the WebSpectra interface
software. The processing of NMR and IR spectra both
include graphics format and layout conversions
necessary to store the spectra in a format usable by
the CGI and for presentation to the user. The
WebSpectra CGI is capable of reading, processing, and
displaying appropriate information based on the
requests of the user as described earlier. JavaScript code
is used in combination with CGI to display user-
requested regions for subplots.
In processing and storing spectra, the need to
preserve the high-resolution data brings up immediate
problems in the first step of processing: data
acquisition. Whereas all IR data were acquired on a
Nicolet 510P FT-IR4 and saved as raw XY-plot data,
all the proton and carbon NMR spectra on the site
were obtained using a Bruker ARX400 spectrometer.5
The acquisition and processing of these spectra,
including Fourier transformation (15), phasing,
baseline correction, and integration, were performed
using Bruker’s proprietary xwinnmr software.6 Details
of the subsequent data conversion to a WWW
compatible format are available (10).
119
 Information • Textbooks • Media • Resources
The final image format, in which both types of spectra
are stored on the WWW server, is a nonstandard, compressed
image format designed specifically for WebSpectra. This
“WebSpectra format”, designated as the SPC format, was
implemented so that access by the CGI program is as fast as
possible—about 5 times faster than GIF or uncompressed
formats. This is an important point for student use, as slow
access times leads to frustration and one problem may require
examination and expansions of multiple spectra.
Although the processed spectral images are the most
important component of the WebSpectra database, there are
several auxiliary files that were also generated during data
processing to aid student use. These files are in plain text and
contain necessary information relating to the corresponding
spectra such as compound name and formula, solvent(s) used,
and, for 1-D spectra, signal frequencies. These are displayed
beside the spectrum and allow calculation of coupling constants
as well as location of signals and magnification.
The end result of a long series of processing steps is
the pages that make up the WebSpectra site (e.g., Figs. 1–3).
Although the steps of processing and presentation are complex
(10), these go a long way toward making the student user’s
life less complex. It is now possible to give students high-
quality but simple and manageable spectral images that allow
them to focus on the most important issue—solving the
problems at hand.
Results
The Web site has been in place since 1996 and has received
glowing support from both students and faculty at various
levels in the organic chemistry curriculum. Access has been
an important feature for users. Being accessible through the
Web, it is available without time or location restrictions; and
since spectra are displayed in GIF format, they can be viewed
by simple browsers without special plug-ins or applets. Clearly,
students prefer the free access to the spectral problems to
purchasing books, but they also comment on the range of
problems and the detail of the spectra. In terms of the all-
important pedagogical impact, it has definitely helped the
students who have used the system, but since use has been
voluntary to date, an accurate determination of measured
improvement is not yet feasible. Finally, not only have students
found extra practice material to hone their spectral problem
solving abilities, but faculty have integrated this technology
into stimulating visual presentations in the classroom.
Conclusion
WebSpectra has been developed as a powerful resource
for delivering NMR and IR spectra online for students to
practice their spectral problem solving abilities. Making use
of the global Internet, WebSpectra provides students with an
accessible learning tool for the study of spectroscopy.
WebSpectra opens up new pathways of learning for chemistry
students and of teaching for faculty.7
Acknowledgments
We thank Jane Strouse, Max Kopelevich, Orville Chapman,
and Arlene Russell for helpful discussions. Support from
Cambridge Isotope Laboratories is gratefully acknowledged.
C.A.M. was a National Science Foundation Young Investigator,
1992–1997 and Camille Dreyfus Teacher-Scholar, 1994–
120 Journal of Chemical Education • Vol. 78 No. 1 January 2001 • JChemEd.chem.wisc.edu
1999. B.C.F. was partially supported by NSF DUE95-55605.
Notes
1. WebSpectra can be viewed at http://www.chem.ucla.edu/
webspectra and does not have access restrictions at this time.
2. DEPT stands for Distortionless Enhanced Polarization
Transfer. COSY stands for COrrelation SpectroscopY.
3. HTML stands for HyperText Markup Language, which is
the file format for a Web page.
4. Nicolet Instruments Corporation. http://www.nicolet.com/.
5. Bruker Instruments. http://www.bruker.com/.
6. xwinnmr, version 1.1; Bruker Instruments Inc., 1997.
7. WebSpectra was awarded a Top 5% Chemistry Site Award
in September 1999 (http://www.claessen.net/chemistry/award_en.
html) and a StudyWeb Excellence Award in November 1999 (http://
www.studyweb.com/).
Literature Cited
1. This order of topics is not necessarily ideal. See: Chapman,
O. L.; Russell, A. A. J. Chem. Educ. 1992, 69, 779. Reeves, P.
C.; Chaney, C. P. J. Chem. Educ. 1998, 75, 1006.
2. For a compilation of educational NMR software, see:
Lundberg, P. J. Chem. Educ. 1997, 74, 1489.
3. Smith, S. G. J. Chem. Educ. 1998, 75, 1080. Kantardjieff, K.
A.; Hardinger, S. A.; Willis, W. V. J. Chem. Educ. 1999, 76,
694.
4. Merlic, C. A.; Walker, M. J. Int. J. Educ. Telecommun. 1997,
3, 261. Glaser; R. E.; Poole, M. J. J. Chem. Educ. 1999, 76,
699. Paulisse, K. W.; Polik, W. F. J. Chem. Educ. 1999, 76,
704.
5. Hoye, T. R.; Hanson, P. R.; Vyvyan, J. R. J. Org. Chem. 1994,
59, 4096. Mann, B. E. J. Chem. Educ. 1995, 72, 614. Thoben,
D. A.; Lowry, T. H. J. Chem. Educ. 1997, 74, 68.
6. Two interesting WWW sites retrieve spectra based upon user-
defined input data. (a) Hayamizu, K.; Yanagisawa, M.;
Yamamoto, O.; Wasada, N.; Horiuchi, Y. Integrated Spectral
Data Base System for Organic Compounds; National Institute
of Materials and Chemical Research, Japan; http://www.aist.go.
jp/RIODB/SDBS/menu-e.html (accessed Sep 2000). (b) Spec-
troscopic Tools; http://www.chem.uni-potsdam.de/tools/index.html
(accessed Sep 2000).
7. Furst, J. E. J. Chem. Educ. 1994, 71, 234.
8. For laboratory experiments using COSY, see: Mills, N. S. J.
Chem. Educ. 1996, 73, 1190. Branz, S. E.; Miele, R. G.;
Okuda, R. K.; Straus, D. A. J. Chem. Educ. 1995, 72, 659.
9. Hofstetter, F. T. Internet Literacy; McGraw-Hill: New York,
1998.
10. For technical details on the actual processing of data, see: http://
www.chem.ucla.edu/~webspectra/WebSpectra_TD.html (accessed
Nov 2000).
11. Van Bramer, S. NMR at Widener University; http://science.
widener.edu/svb/nmr/nmr.html (accessed Sep 2000).
12. Smith, B. D.; Boggess, B.; Zajicek, J. Organic Structure Eluci-
dation Workbook; http://www.nd.edu/~smithgrp/structure/
workbook.html (accessed Sep 2000).
13. The FTNMR Free Induction Decay Archive; Department of
Chemistry, Pacific Lutheran University: Tacoma, WA; http://
rainier.chem.plu.edu/fid_archive.html (accessed Sep 2000).
14. Dransfeld, A.; Ihlenfeld, W. NMR–SHARC Homepage; http://
www.ccc.uni-erlangen.de/sharc/index.html (accessed Sep 2000).
15. Iannone, M. J. Chem. Educ. 1999, 76, 286.