/ Textbooks in Browsers: An Editor for Creating, Adapting, and Sharing


OERPUB is creating an open-source editor for textbook authoring that lets authors create, adapt, and remix textbooks that display well in the browser, on mobile devices, and in print. The editor supports mathematics, accessible images and tables, and structured features like definitions and exercises, using a constrained subset of HTML5. We just got back from South Africa where teachers sprinted to create two new high school textbooks in Chemistry and Physics using original content and content from Siyavula and OpenStax College textbooks. We will demonstrate the editor and report on the textbook sprint in South Africa.

Download Slides (PDF)


Hi. In the back can you hear me? Raise your hand. Alright, thanks.

Ok, so I'm going to talk about textbooks in the browser. If you want to follow along or refer to any of the links that I give toward the end, my talk is up on Slideshare at that Bit.ly link: bit.ly/fletcher-bib13.

A little bit about who I am. I started out at an organization called Connexions that is an open repository for textbooks. Anybody can upload textbooks, parts of textbooks, and remix and adapt those textbooks. There is a guy here, Phil Schatz, (would you raise your hand) who is still with Connexions and also works with me on this project and will be here at the Hackday, so I'll tell you a little more about him at the end of the talk. I did that for about four years. In that process, one of the things that I learned about were the difficulties that authors have in creating content that is easy to remix and adapt. I got a fellowship with the Shuttleworth Foundation to build tools for remixing Open Education Resources, and I have a project called OERPub.

I wanted to give just a little bit about the vision and why this could be really, really interesting. If you think about learning and you think about the digital age, all of your classes, your past knowledge, the things that you're actively working on now and want to remember; all of that stuff could be connected, and it could be available to you everywhere. It could be available in print. It could be available on your laptop. It could be available on your phone and your tablet. And that would be really, really interesting, and it would change the way we learn.

So, if you can imagine if you have a course load—let's say you are an active student now—and you have a course load. You're taking History and Statistics and Physics, and you also have your background knowledge from high school, your chemistry and physics from high school, and all of those things that are available. If we can imagine that we could take all that content and we could have a magic Transmogrifier, borrowing a term from Calvin and Hobbes for any of you who know that, it would be really interesting if we could take that content and have it available ubiquitously, everywhere, online, in-print, and in different forms. I'll talk a little bit about that. So, you know, that's something that the affordance of the digital age really gives us the ability to do. We want to have access to that content, potentially in different forms. If I could take all my classes and have auto-generated a set of flash cards that I use when I have some spare time, that would be pretty interesting, and it would change the way I learn and the way I remember things. Also, if I could take all that material and have practice problems that are tailored just for where I am in my learning and what I'm just about to forget, that would be pretty nifty.

So how would we do that? Well, you know something like I could take all that content, and I could find the definitions that are in that content, and the glossary terms, and I could make flashcards out of that. It would be even more interesting if I could take my own notes that I'm taking on this and have that auto-generate flashcards for me, practice problems on the material that's around the areas that I took notes or that has similarities to the areas I took notes on, so some of the really cool stuff that Hypothes.is and Annotator are working on. It would be nifty to tie that all in. I could take practice problems that are already freely available and those materials.

So what do we need to achieve that vision? We can't really do that with a paper textbook, not in that format at least. We need to be able to recognize those structures within all of that content. We need to be able to find definitions. We need to be able to find exercises. We need to be able to find the notes that people have taken, and we need those books, that content, to be publicly available somewhere, for there to be a way for use to have access to it and get content out of it and get it onto all of our devices.

One of the barriers to that, and this comes from my background at Connexions, is that Connexions had this really really nifty idea that you would create content in this modular way, and you would create it using structure and in particular, XML. For those of you who are "techie", XML is like the language of the web, HTML, and has a lot of angle brackets. One of the learnings from Connexions is that it is very hard for authors work with. It was a huge barrier to really achieving this definition, and it was not having good enough tools for authors to use to create content that has this nice structure that would allow us to do these interesting things with it. Because this is a pretty big challenge to create good tools that make it easy for authors, one of the other pieces is that it would really be nice if the tools that we create are really easy to extend, so that we can, as people want to create and include more interesting content in textbooks, want to include visualizations, simulations, videos, etc., we want to make sure that it is easy to create easy to use tools for including that content also.

So, my claim in this talk is that we actually are there. We can achieve this vision. We have all of the pieces in place right now to do this. We have a common format that we can use. HTML5 raises the bar for structure in web content, and O'Reilly Media, for instance, has created a version of their XML language called HTMLBook that's in HTML. That is very easy to adapt for textbooks and have textbook HTML, so we can get that structure. EPUB3 is defining really a language for the mobile web. With projects like epub.js and Readium, where you can view that ePub in the web, anywhere you want, or on your phone, this becomes a common format that we can really leverage for learning. Browser-based technology has made it possible for us to not only read in the web, but write in the web, and annotate in the web and really have living documents in the web. [video cuts out]

[Video resumes] lives on the web in easy to discover places. That is also going to facilitate this vision. There are a couple of places that do that. Connexions already does that. It hosts open textbooks, and they have a publisher of their own called OpenStax. For those of you who are developers, there is a service called GitHub, built on Git, which is versioning software, that has made coding, building software, a social process. People host their projects, their software projects, on GitHub. It's very easy to find stuff, and it's easy to make your own copy of it and start adapting it and creating from that. I have to admit that I was pretty slow to think that we needed GitHub for books. I was really worried about that methodology, but Phil, who is here, actually created a prototype using GitHub as the back-end for Books, really this social storage place for books.

I'm going to give you links so you can play with this editor at the end, but I'm just going to do screenshots because I'm a huge chicken, and there is no way I'm demo'ing live. Anyway, this is GitHub Bookeditor. Also, after you play with it, if you want to send me name ideas because I'm very very bad at naming things. Don't meet my children No, no there names are very nice.

Anyway, GitHub Bookeditor, this is an editor that runs in the browser. The books are hosted on GitHub. It's using GitHub's API to keep your book up-to-date as you edit on the web. We spent close to a year really working on usability for authors, and I want to talk just a little bit about principles that went into the design of this editor. So, one of the things is that authors are used to Word and Google Docs and things that are very much like writing on a canvas. I have this canvas. I'm writing on a canvas. So, we really wanted to respect that model. As much as possible, the editor allows you to free-form, flow paragraphs, images, etc. Where we need to have specialized functionality, we built that in, and I'll talk a little bit more about that.

My Shuttleworth Foundation fellowship is about remixing, and one of the things with remixing is that attribution is really important. When you drop an image into the editor, it asks for the source information from you. There are lots of people working on automating some of this, so with those sorts of resources, it tells you, "Okay, this is the original author. This is the license it was used under." We can fill in a lot of that for the author.

Something that Gerardo talked about is that if we've got this ability to have this born-digital content, let's also make it born-accessible, and let's figure out ways to really encourage authors to create accessible content. So, I'm making no claims that this editor is fully accessible at this point, but this is something that we've really done user interface research on and striven to create as much as possible. One of the kind of small things is that images that are in your textbook as you're creating it, if they don't have descriptions that would be helpful for people with visual impairments, you get a slight stick, a little nag that the image is missing a description. If you click that, then you get a little carrot. You get a thank you. So, if you guys play with the editor, please try that out.

Mathematics is a big thing in textbooks. Mathematics is really key. It is important. We did not want to build a math editor because that would be a bigger project than the editor we are building. Instead, we worked with this group named Siyavula, which works with teachers in South Africa and also creates textbooks, and they have done lots of content-building sprints with teachers. What they have discovered is that if a teacher writes mathematics, they're comfortable writing code. In fact, it is faster. It's faster to write x carrot 2 than to use a big pallet of mathematical functions and try and drag them into place. Anyway, we were just lazy, but what we did was build a very simple mathematics editor that allows you to use either ASCII math or Latex math, and it gives you a live preview. That's the key here for teachers, that live preview. The other thing that we have in one of the versions of the editor that we’ve got out there is a cheat-sheet, so you can learn that code as you go along. You can cut and paste from this cheat sheet, find the pattern, and cut and paste that in. We also did a sprint with teachers, and teachers also cut and paste their math back and forth to learn "how do I get all the equal signs to line up niftily?" And then you get this added bonus that it's now more accessible because the math is stored inside the webpage in an accessible way with MathML that Gerardo talked about.

Then, here's the place where we care about structure, something that we did a lot of research on. There are parts of the document that we want to make sure to protect. We want to have these definitions and exercises and things like that findable within the textbook. So, there are, within the editor, drag and drop widgets, similar to iBooks Author, and you drag those in and then you edit as if it is in the canvas. You just add your definition or your exercise or your quotation or your numbered equation or whatever, but you actually get some benefits from doing that. You can drag and drop that to a different spot in the document if you want. There's a special copy feature. You can copy the whole thing. Let's say it's an activity, and you want to copy it from one textbook to another, you have a special copy feature. You can delete the whole thing at once [video cuts out]

[Video resumes] to make sure that the document structure doesn't get messed up as you're editing and changing things. We have a little bit of collaboration support, and that's something that, if you're interested in, we have more ideas about how to make this editor even more collaborative. Right now, authors should work on separate chapters, but you can see what your fellow authors are doing. If they edit another chapter in the book, it will update in your copy of it as you're editing. The table of contents updates automatically, too, and that's all talking back with GitHub to store the book.

Ok. A couple of things that, at your leisure, you can look at. It is an open-source project, so we're very eager to get other people to work with this, use it, embed it in other places, adapt it. It is based on editor called Aloha Editor, which is an HTML5 editor. Some other nifty things, aside from just editing it right in your browser, is that there's also a view of your textbook online, hosted by GitHub, that happens fairly automatically, and this is a service to create PDFs. PDF generation is a little bit bigger project. You're not going to create PDFs in your browser, but this service is watching as the book is changed and re-building the PDF so that it is available for download. Again, that's all open-source code that can be adapted and improved upon. And there's the result, the PDF downloaded with nice mathematics.

And then, the adoptibility of this editor. We have another version of the editor on remix.oerpub.org that is really geared toward taking documents that start out in Word, start out in Google Docs, start out on somebody's blog, Latex, a few other formats, and convert it, so it's in this nice HTML5, Textbook HTML format. This is the same editor, so you land on the editor, but embedded a little bit differently than you saw in the GitHub version of it.

Connexions is also using this editor. This is kind of an old screen shot. I apologize, but this is the same underlying technology used for Connexions new editing system. This is another embedding of the editor, a group, Digital Humanities. This is a version of the editor that’s used to submit papers to Digital Humanities conference. These guys submitted some code back to us, correcting some bugs, and upon investigation, they're re-using the editor in this environment. They're interested in adding more reference functionality so that your bibliography is really nifty.

Ok, so, some links for you to try it out. You have to have fairly decent internet. You might be able to do it here right now, or you may need to do this a little bit later. You can do it one of two ways: Either you can go to editor.oerpub.org, or you can go to this slightly longer URL, but making it super clear that is just hosted on GitHub. There's no server, no nothing. You're just using it right from GitHub. If you're a developer, I've put some links to all of the code, the GitHub Bookeditor, and our fork of the Aloha Editor that's got those semantic features in it. This is a slightly obscured URL and the French guy who had that nifty art, you know where your book was blackened out, this is a little exercise in art here. You can figure that URL out. That's the continuous integration PDF generation code.

Finally, if you're an author, please check this out. Try the code out. I just want to say it is alpha code. There are bugs in it, but I really really want feedback on if the model is working, does it make sense? If you're a developer, and you're staying tomorrow, please come to the Hackday. We're going to do a couple of things. We really want to get epub.js and hypothes.is integrated into this, so that you really have the read/write web. Also, we have very simple vagrant script to create a development environment for you. If you want to experiment with adding plugins to the editor or your own ideas for extending it, please come join us. Phil Schatz will be there tomorrow. I've got his picture there, so you can find him.

Anyway, that's it.