Last summer we undertook two open textbook creation projects.  One project was to take a Biochemical Methods Lab manual that was originally created as an iBook and recreate it as an open, more accessible, publication.  The other project was to create a an open Thermodynamics book which would be based on the open textbook, Engineering Thermodynamics  -A Graphical Approach, by Dr. Israel Urieli from the University of Ohio.  For each project we spent quite a bit of time considering the best way to publish the textbooks we were going to create.  We knew in the beginning, that each book would become a downloadable document such as a PDF or EPUB, or a webpage that could simply be viewed in a web browser.  We compared the features of each, the downfalls of each, how each would be created and how accessible each would be.  In the end, we decided to create a website for each book.

Stacy and I had several meetings with Dr. Bairaktarova and two students who would be helping her write and publish the Thermodynamics book.  During these meetings we discussed the general format the book would take and planned the schedule on which the book would be created.  We decided that the best format for this particular book was a website.  Because the Thermodynamics book would be an adaptation of another textbook a website makes most sense to use as it would be easy to edit and its most current form would be the forms accessed by all using it.  The first step in creating a website to house the content of the Thermodynamics book was to create a layout that was not distracting to the reader and that also displayed well across device platforms.  Once the layout was created, it was not long until Gene Illichev began inserting edited content from the Ohio Thermodynamics textbook into the layout.  It took about half the summer to create the content and build webpages for the book.

At the beginning of this project, several days were spent building the layout for what would become the website; however, the same layout could potentially be used to house other content reducing the development time for subsequent projects.  The Thermo. book content was easy to incorporate in that it does not contain a large variety of media types. The entire book is text and images.  There was, however, one problem to be solved for this book and that was the mathematical equations in it.  We wanted a, fast, easy, and accessible way of displaying math in a textbook.  Math is commonly displayed on webpages in the form of images.  Images are not ideal in that they are often created using some form of LaTeX markup then rendered as images that need to be inserted and then uploaded to the website’s server along with the updated webpage.  For a textbook that contains a considerable amount of equations this workflow becomes problematic.  Imagine creating each equation separately, organizing and naming each equation such that they can be easily accessed and edited -because they will inevitably contain mistakes, and then inserting each into its proper place on the page and uploaded to the server.  This could be terribly difficult in the case of a text full of equations.

Screen Shot 2014-10-29 at 12.05.49 PM

When I encountered this problem I knew that there must be a better way to display equations and there is!  MathJax is an opensource Javascript script that parses the HTML of your webpage and then renders and LaTeX within it as webfonts or as SVG images  -your choice!  The result is beautiful and could not be more easy to produce.  In the <head> of each page which is to contain equations a link to a script needs to be added.  What this means is simply copying and pasting the following bit into your page.

<!--This script converts LaTeX markup to HTML and CSS for clear viewing on web.-->
    <script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

When each page containing this is loaded, the script will execute and render the page.  There is; however, only one downside to this method and that is the instant after a page is loaded when the raw LaTeX markup is displayed while the script is executing.  This only lasts for the blink of an eye and is then replaced by attractive webfonts.  Because the MathJax script is written in Javascript it works well on all devices alike.  The following image is what the user might see if they are quick enough to catch a glimpse of the page while the MathJax script is executing.

mathJax-in-progress

 

The final rendered version of the above markup is shown in the image below.

mathJax-displayThe functionality provided by MathJax allows equations to be published with ease and because the equations are re-rendered each time the page is loaded, all that needs to happen to fix one of those inevitable error mentioned earlier is to edit the LaTeX markup in the HTML of the page and upload the edited page to your server.  The next time the page is loaded the user will see the changes reflected on their screen.  If you happen to be using WordPress as a content management system for which to publish your content, there is a MathJax plugin that works the same way but on your WordPress site.

The second project that we took on over the summer was the Biochemical Methods Lab manual.  The manual had already been created using iBooks Author, it is a beautiful book and is probably preferred by those who have the devices to view it.  That is; however, the problem.  The iBooks version of the Lab Manual is only accessible by students who have iOS devices.  This means that those without these devices must use university computers to access their lab manual.  Fortunately, the university library does have iPad and Macbooks for students to check out as well as computers labs full of iMacs, but doing so regularly for class might be a hassle for some students.  Dr. Simms requested that we assist he and is graduate student assistant in converting the iBook into a more accessible format.  We searched for a while looking for authoring platforms that best suited the needs of Dr. Simms.  We found several nice platforms, but each was lacking in some way and we therefore chose to develop another website using the same template that was developed for the Thermodynamics textbook.

There were a couple solutions to be sought out for the Biochem project.  Like the Thermo. book, it contained a lot of equations and special symbols that required the use of LaTeX markup and MathJax.  Having already had experience in this area, this was no problem at all; however, the iBook version of the manual has some interactive content that needed to be duplicated in the manual’s web-based form.  The first interactive content to be recreated was the reading quizzes at the end of each chapter.  These are quizzes, a few multiple choice questions each that are intended to let the reader know how well they understand the material.  Stacy and I looked into a few embedable quizzing applications, but were most satisfied by the flexibility of Google Forms.

biochem_quiz_flowchart Google Forms turned out to be a nice solution for our purpose.  It provides a fair amount of structure while remaining flexible enough to serve as a platform for creating and hosting surveys, general purpose feedback form, and as a quizzing platform.  Using Google Forms presented its own challenge at first, but with a bit of work we were able to make the tool do exactly as we originally intended.  The problem with using Google Forms as a multiple choice quiz is not that it is incapable of the task or even intended for the task, because I think it is; however, how to use it as such was not obvious to me the first time I tried to build a quiz.  From a creation perspective, Google Forms seems to be designed with those creating surveys in mind.  Each form is made up of multiple pages that can be linked to from other pages. Utilizing this functionality, each radio button that corresponds to a choice can point to its own corresponding page within the form.  For this, there needs to be a dedicated page that informs the user of a correct response and another for an incorrect response.  The incorrect responses will point to the same page, the incorrect page, and the one correct response will point to its own page informing the user that their choice was indeed correct.

The most difficult part of the Biochem lab manual to recreate was its 3D interactivity.  This interactivity allows the user to rotate a few relevant 3D protein models such that the user is able to examine their structure.  Jmol is a Java-based platform that is designed specifically to implement this functionality in a webpage.  I am; however, not a professional web developer and struggled while trying to implement Jmol on the Biochem site.  I even tried to implement JSmol, Jmol’s Javascript counterpart, and could not make it work on the site.  I am positive that it can be done, and am quite frustrated still that I was not able to fully implement this feature into the Biochem book.  Persistent, I spent far too much time trying to make these implementations work before pursuing other, perhaps equivalent, methods of displaying these models.  In the end, the solution that we delivered to Dr. Sims and Alyssa turned out to be an animated GIF of the rotating proteins.  Which from what I understand about the purpose of these animations is acceptable way to view these models.

IMG_0001

To produce these, I used a piece of software called PyMOL which is a molecular visualization tool for rendering images of molecular structures.  PyMOL allows its users to import the data file that makes up what will be rendered as a 3D model directly from the Protein Data Bank.  Once the structure was loaded into PyMOL, I sought out a script that I could use to rotate and render each frame of what would become the animation.  Although PyMOL supports rotating models in a number of complicated ways, I chose to only spin the protein about its vertical axis.  I found that 100 frames was the smallest number of frames that could be used while still preserving the fluid motion.  It took several tens of minutes to render all of the 100 frames.  Once they had all been rendered, I loaded them into Photoshop and stitched together what turned out to be a fair substitution for what was initially so difficult.

4GKV_Animation

 

Another feature of the iBook lab manual that needed to be recreated was its integrated slideshows.  The lecture slides applicable to each exercise within the manual are included for the convenience of those using the book.  In order to include these in the website realization of the manual we decided to use SlideShare.  SlideShare is an online collection of user-submitted slideshows that allows users to search among its contents for slides pertaining to specific subjects or search for keywords within the slides themselves.  Users are able to comment on slides, download them, and most importantly embed them.  My favorite feature that Slide Share offers is that which allows users to label each item that is uploaded with a license.  Of course it gives you the option to reserve all rights to your content, and likewise it gives you the option to choose from all of the Creative Commons licenses.  So not only does Slide Share provide us the capability to embed slides directly into the webpages of the Biochemical Methods lab manual, it also allows us to contribute those slides to the Slide Share community under a CC BY-NC-SA license.

Leave a Reply

Your email address will not be published. Required fields are marked *