Imperial College London

Henry Rzepa

When I first started giving lectures to students, it was the students
themselves that acted as human photocopiers, faithfully trying to
duplicate what I was embossing on the lecture theatre blackboard with
chalk. How times have changed! Here I thought I might summarise my
latest efforts to refactor the material I deliver in one lecture course
on pericyclic reactions (and because my notes have always been **open**,
you can [view them
yourself](http://www.ch.imperial.ac.uk/local/organic/pericyclic/){target="_blank"}
if you wish).

When I first started this course, I created notes using a typewriter,^‡^
and used stencils to draw the chemical diagram (with a french curve for
smooth lines). Now of course, for most (organic chemistry) lecturers,
it's a combination of a chemical drawing software tool (which we first
saw around 1985) and a visual presentation package such as Powerpoint
(although we do still have one lecture theatre with a real chalk board
which many lecturers still use, albeit probably to slow their
presentation down and avoid "death by Powerpoint" for the students). I
never endorsed this combination, having avoided PPT for many years.
Instead, I do it this way, and here I will list some of the aspects of
my newly refactored notes.

1.  I am at ease writing HTML(5). Because it is native markup, it has
    stood me in good stead for many years, since it adapts to new
    technologies very well and is not dependent on proprietary software.
    One example might be when I first refactored such notes into an
    e-book format (EPUB) using
    [Calibre](http://calibre-ebook.com){target="_blank"}. It converts
    HTML delightfully easily. I should say that one does have to use
    HTML "properly". By this I mean ensuring that style is implemented
    using CSS, that meta-data is appropriately entered into the document
    header, and that the resulting document is checked using the HTML
    syntax checker Tidy. This latter is actually built into the software
    editor I have used for many years (BBedit), but the same validation
    can be achieved *via* sites such
    as [http://www.dirtymarkup.com/](http://www.dirtymarkup.com/){target="_blank"}[  
    ](www.dirtymarkup.com/)
2.  The diagrams can be created using the usual tools (ChemDraw,
    ChemDoodle), but I convert the end product to the SVG format.
    Chemdoodle saves as this natively; Chemdraw can save as EPS, and
    then I convert this without issue to SVG using
    [Scribus.](http://www.scribus.net/canvas/Scribus){target="_blank"} 
    I adopted this approach quite a few years ago (in 2000 in fact),
    since I felt that scalable graphics (which is what SVG is) had a
    sounder future than raster graphics. So it has proved, since SVG is
    now natively supported in most new Web browsers (IE being the
    prominent exception^†^). 
3.  I decided about six years ago to augment my pericyclic lectures with
    properly computed transition states. After all, the essence of this
    topic is the properties of the reaction transition state (my
    approach is to consider its aromaticity), and so a quantitative
    model for this seems desirable. Mine have all been computed using
    the ωB97XD/6-311G(d,p) method (also extensively employed on this
    blog).
4.  About three years ago, starting from these transition states, I
    computed intrinsic reaction coordinates for all the reactions. These
    are now deployed as animations in my notes. I use animated GIFs for
    this, since it is widely supported. A bonus was to discover that
    conversion of such diagrams into EPUB format preserves the
    animation, and many e-book readers that support this format honour
    the animation (but not all). 
5.  When my transition state library (now including around 100 in
    number) was expanding, I put some thought into how to express these
    models in my notes. Initially, I used Jmol to do so, and wrote some
    Javascript for the notes that would "pop-up" a separate window to
    display the Jmol model. Not surprisingly, this feature does not
    condense down into an EPUB book at all. Nor does it work if the
    notes are displayed on a tablet browser (most such devices do not
    support the Java that Jmol requires). There is some prospect on the
    horizon that the EPUB3 format might be capable of supporting such
    interactivity, but not quite yet. In refactoring my notes for the
    next lecture delivery, I pondered how to handle this aspect. A
    natural was JSmol, a recent evolution of Jmol which does not depend
    on Java, instead using the very different technology Javascript
    (implemented natively in the Web browser, just like SVG). If you are
    interested, some of the early evolution of this new approach can be
    seen in an article I wrote about 18 months ago, and which contains
    very early working examples.\[cite\]10.1186/1758-2946-5-6\[/cite\]
    The pop-up window approach does not work very well on tablets, and
    so a hideable insert into the main window was adopted. The reader
    can **show/hide** this display readily, and its position stays fixed
    whilst the notes scroll around
    it.![toolbar](http://www.ch.imperial.ac.uk/rzepa/blog/wp-content/uploads/2013/12/toolbar.jpg){.aligncenter
    .wp-image-11814 decoding="async" width="400"}Making this window come
    and go itself requires a control toolbar and my current design
    (which may change!) is shown above. It clearly indicates to the
    reader that the notes they are reading have interactive components.
    I cannot resist also directing you
    to [chemagic.com/ochem/ochem.htm](http://chemagic.com/ochem/ochem.htm){target="_blank"}
    which is a particularly good example of how to create interactive
    teaching notes. Into this inset window, all my transition states,
    molecular orbitals and other relevant surfaces can appear on demand.
6.  Notice that the notes are indexed (by Google) and so are
    text-searchable (I cannot help but note that my institution uses a
    commercial content-management system for most lectures except mine,
    and where text-search of materials is not possible for obscure
    reasons). The transition state models can be indexed using InChI key
    generated when the molecule is deposited into a repository (see
    below), but sub-structure searching is a trickier issue!
7.  If any student wants to follow-up on any one entry in my transition
    state library, I have helped them do so by linking each one to a
    digital repository. This is addressed by a persistent digital object
    identifier (DOI), and from there anyone interested can branch off
    and start doing their own modelling. 
8.  On the subject of the DOI, I decided to allocate the notes
    themselves with such a handle. It
    is **http://doi.org/10042/a3uxp**\[cite\]http://doi.org/10042/a3uxp\[/cite\]
    You might imagine that allocating such persistent identifiers is
    something only publishers can do (and that it costs money). In fact,
    a so-called **handle server** comes with our digital repository, and
    a clever programmer (thanks Matt!) was able to extract the relevant
    code and make it a stand-alone resource. I will not list the URL
    here, since we really only want handles allocated using it to be
    associated with my department!
9.  The transition states are also allocated handles, and it is
    perfectly possible to combine JSmol with handles to create
    interactive windows that retrieve the relevant files using the data
    DOI and render them. We are writing an article on how to do this, so
    look out for it.
10. I pondered printing long and hard! Having sweated to get interactive
    components and animations into the notes, I felt that destroying
    this feature by what I will call 2D printing was an oxymoron. But
    students like printing (about 20 million print copies are made at my
    institution each year). In fact, some more Javascript resulted in a
    small link in my toolbar above, which first hides all the
    interactive boxes (including the toolbar itself!) before printing
    the page, and then returning the screen back to normal. I feel bad
    in a sense about doing this, but printed notes do have one nice
    feature, one can write notes in the margin!
11. So can one replicate note taking electronically, using say a tablet?
    This it has to be said remains a somewhat unsolved problem,
    especially in chemistry. One has vexed issues to confront such as
    whether to use a stylus for the purpose (either passive, or
    palm-rejecting active) and whether the stylus is compatible with
    whatever note taking software one wants to use. And how should any
    notes take be stored? One chemical solution
    is [www.cambridgesoft.com/land/flick-to-share.aspx](http://www.cambridgesoft.com/land/flick-to-share.aspx){target="_blank"}
    where a ChemDraw diagram can be "flicked" to another student, or
    indeed an instructor, and also stored in the cloud. But I think I am
    going to have to work hard to convince most students that e-notes
    are better than just printing the notes onto paper and using a
    ball-point pen. I do however, expect interesting things to happen in
    this regard in the next year or two, so a space to watch most
    certainly.
12. I have added 3D printing to my list. It is not yet on demand from
    the models built into the notes, but our small library of
    3D-printable molecular orbitals and transition states is growing,
    and perhaps in the near future, a student can simply press another
    link entitled "3D print" to produce a model for themselves. If you
    have never held a 3D-printed molecular orbital in your hands, try
    it! You might discover something new.
13. Templates? I have tried to package the distracting
    "behind-the-scenes" stuff into scripts and stylesheets, so that an
    author need only write the fairly simple HTML. Perhaps there are
    excellent commercial packages out there that might make the task
    easier. But just like convincing students to abandon using paper to
    carry notes is a tough nut to crack, so too I suspect will be
    convincing my colleagues to adopt this format. Most are very wedded
    indeed to the traditional word processor and the traditional
    presentation package.

Well, the refactored lecture materials described above will be exposed
to real students (and real tutors) in a few weeks time, and feedback
will no doubt be received. But if anyone reading this blog wishes to
comment on any aspect, I most certainly welcome it. 

------------------------------------------------------------------------

^‡^In what I initially regarded as an unusual 15th birthday present, my
father gave me a mechanical typewriter, along with a small booklet on
how to learn to touch-type. In retrospect, this gift was very
far-sighted. Rather than just playing football with my friends, I also
learned to touch-type. This blog has just been written employing this
skill.

^†^Internet Explorer for Microsoft Windows 8.0 and 8.1 displays these
components well.

::: {.wp_orcid_field}
[https://orcid.org/0000-0002-8635-8390](https://orcid.org/0000-0002-8635-8390){target="_blank"
rel="author"}
:::


When I first started giving lectures to students, it was the students themselves that acted as human photocopiers, faithfully trying to duplicate what I was embossing on the lecture theatre blackboard with chalk. How times have changed!

Rogue Scholar Beiträge

Refactoring my lecture notes on pericyclic reactions.