CheMarkup Slides and Notes: A Presentation Container for the Virtual Molecular Model Kit

CheMarkup Slides and Notes: A Slide-Notebook Presentation Container for the Virtual Molecular Model Kit

Otis Rothenberger, Illinois State University; Thomas A. Newton, University of Southern Maine

Background

            The Jmol Virtual Molecular Model Kit (VMK) was introduced to this Newsletter in 2011 (1). Following the introduction of a JavaScript/HTML5 version of Jmol (JSmol) in 2013 (2), the VMK was rewritten as an HTML5 Web application. Although the VMK is a stand alone application, the transition to HTML5 has encourage the authors of this paper to seek ways of using HTML5 to improve VMK as a communication tool. This current paper introduces the CheMarkup application. CheMarkup is a Web browser application that merges slide based discussion, note taking, and the VMK into a single application.

CheMarkup Overview

            CheMarkup is a tool for discussing molecules. It is the communication container for the VMK. Although CheMarkup has a slideshow component, it does not represent an attempt to compete with PowerPoint and other slide presentation applications! In the context of discussions that focus on molecules, here is what CheMarkup can do on a Web browser platform:

1)       It provides a primitive but reasonable WYSIWYG editor for the preparation of slides related to the VMK.
2)       It provides a Web based mechanism for instructors to give these slides to students prior to a class meeting.
3)       It puts these slides into the local editable persistent memory (local storage) of students’ browsers.
4)       It gives students the opportunity to annotate slides rather than copy slides into their notes. The annotated slides are retained in local storage of the student’s browser.
5)       It provides easy access to the VMK at any point during this communication process.
6)       I allows VMK Jmol models, JME structures, and VMK data to be rapidly incorporated into slides, notes, and local storage.
7)       It provides a pathway for student VMK input to be shared with an entire class in real time.

            While CheMarkup is not as powerful as standard slide presentation applications, it is designed for discussions related to molecules. Standard slide applications cannot bring molecular intelligence to class room discussions. CheMarkup can.

            Since the VMK is part of CheMarkup, it should be noted that CheMarkup uses the following HTML5 applications:

1)        JSmol Molecular Viewer (2)
2)        JSME Molecular Editor (3, 4)
3)        The Virtual Molecular Model Kit (1)
4)        CheMarkup Annotated Slide Container (5)

CheMarkup and the VMK are feature rich applications. In an attempt to make the details of this paper a bit easier to follow, a video overview is being appended to this text overview. The authors hope that this video lays a foundation for the body of the paper

To watch the video on YouTube, go to: http://youtu.be/axNskb0-GIk?list=PLcYTjie2a8HHKOgEBoaWRzgwkPeAxzUP1

HTML5 Local Storage

            CheMarkup’s power is its ability to remember - slides, notes, annotations, models, drawings, and images. HTML5 local storage (6,7) is CheMarkup’s memory.

Author’s Note: Reference 6 is a good HTML5 local storage primer. Reference 7 is an extensively referenced discussion.

HTML5 browser local storage is similar to browser cookie storage. Web page data is stored in local browser memory as database key/value pairs. There are several important differences, however.

Local storage is more secure than cookie storage. In the case of local storage, no information can be sent from the page to the server. Local storage also provides much more memory space - at least 5MB per page origin with total of 500MB for multiple page origins. Finally, the use of the data on this page will not affect website performance.

It is important to note that local storage is browser/computer specific. On a given computer, each browser will store information for a given page as storage for that browser only. Likewise, information stored for a given page by Safari on MyMac1 will not be available in Safari on MyMac2. Transferring information from one computer to another will be discussed in a separate section of this paper.

There is an important caveat associated with the expression “per page origin” above. The authors are attempting to make most of the features of CheMarkup accessible by running the application locally via html file double-click (url file:///) as well as by running the application via the domain url (htp://chemagic.com). In the latter case, chemagic.com would be the page origin that gets up to 5MB of space. When pages are run locally by file double-click, all applications that a user might be running locally share the same page origin - i.e. the same 5 MB of maximum local storage space per page origin.

Browsers

            Local storage is now an HTML5 standard. It is supported by all major browsers. When using HTML5 applications in general, it is generally a good idea to use the latest browser version. CheMarkup makes use of multiple HTML5 applications and browsers can be fussy. At this point, the authors see the best CheMarkup performance with Safari, Firefox, and Chrome.

To Be Continued via in CheMarkup

            The authors feel that the best way to present the body of this paper is to use a slide presentation in CheMarkup itself. The process of viewing this slide presentation will follow the same path that a student would follow in downloading and viewing a slide presentation prepared by an instructor or another student. Two URLs are provided to cover the possibility of server down issues during this Newsletter presentation:

1)        chemagic.com/vmknotebook.htm
2)        chemistry.illinoisstate.edu/osrothen/vmknotebook.htm

            Consistent with the intent of running through the full student experience, the links above will load CheMarkup with a blank slide set, unless, of course, the user has played with the application previously. In that case, the link will load that last slide set used:

Figure 1

            Figure 1 shows the initial CheMarkup view if the page has not been loaded previously. Normally, a user would click the Load button to load a text file supplied by the slideshow author. For the purpose of this Newsletter presentation, the Help button will be used to load a special CCCE slideshow directly from the CheMagic server. During normal usage, a user's experience with the Load button would be similar with the exception that the Load button produces a dialog box that asks for a local slide set text file. So click the chemagic.com/vmknotebook.htm link, give the page time to finish its initial load, and click the Help button. After you do that, we’ll see you in the slide show.

Possible Problems

            If you have problems meeting us inside the slide show, here are some possible reasons:

1)        You must have cookies and local storage turned on.
2)        You may have problems with your browser and HTML5. Use the most recent version of a given browser.
3)        Consider using Chrome, Firefox, or Safari as your browser for this exercise.

References

1) The Jmol Virtual Molecular Model Kit: Otis Rothenberger, Illinois State University; Thomas A. Newton, University of Southern Maine; Robert M. Hanson, St. Olaf College; Markus Sitzmann, National Institutes of Health - http://chemagic.com/ccce_paper/
2) JavaScript-Based Molecular Viewer From Jmol: Robert M. Hanson, St. Olaf College, - http://sourceforge.net/projects/jsmol/
3) JME Molecule Editor - http://www.molinspiration.com/jme/index.html
4) P. Ertl, Molecular structure input on the web, J. Cheminformatics 2010, 2:1 - http://www.jcheminf.com/content/2/1/1
5) CheMarkup: Otis Rothenberger, Illinois State University - chemagic.com/vmknotebook.htm
6) HTML5 Local Storage, W3Schools.com, http://www.w3schools.com/html/html5_webstorage.asp
7) Web Storage, Wikipedia, http://en.wikipedia.org/wiki/Web_storage