Henry Rzepa's blog

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 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. 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/
   
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.  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.[1] 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.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 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[2] 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 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.

References

1. H.S. Rzepa, "Chemical datuments as scientific enablers", Journal of Cheminformatics, vol. 5, 2013. https://doi.org/10.1186/1758-2946-5-6
2. "Organic Pericyclic Reactions", 2014. http://doi.org/10042/a3uxp