Editing ePub3 for Blended Learning in Mathematics ^†

Abstract

The main goal of this work is to present the method designed and put into practice by the Department of Mathematics at I.E.S Norba Caesarina for creating digital books (e-books) in EPUB 3 format, including videos and MathML. The natural way of generating the XHTML code for creating the EPUB 3 is to use LaTex for editing the final text, transforming it into XHTML. We also show how can reproduce in EPUB 3, external videos stored in YouTube; how generate SVG images from GeoGebra and implement questionnaires in EPUB 3 without JavaScript knowledge, preserving the accessibility associated with MathML equations.

1. Introduction

The potential of the EPUB 3 e-book format has been analyzed in [1]. This article analyzed the advantages of EPUB 3, although it pointed out the weakness of the extension of its use, associated with the shortcomings that content publishers have of knowledge of HTML5, CSS3, and JavaScript. The issue of the EPUB 3 edition, with mathematical content for 10th, 11th, and 12th secondary courses, has been addressed in [2] proposing a workflow for secondary school mathematics teachers so that they can become content producers; text, videos and equations, and permit them to edit the EPUB 3 with Sigil.

The proposal detailed in [2] does not address the problem of creating Scalable Vector Graphics (SVG) images, nor the playing of external videos in EPUB 3 and recognizes the difficulties experienced by teachers in the creation of the MathML code, from LibreOffice Math.

In this paper, we offer solutions to these problems. These solutions are the result of the reflection and work of the professors of the IES Norba Caesarina, who participate in the Interactive Mathematics project by implementing a Blended-Learning model with Augmented Reality and Game books (MILAGE) [3] and therefore are involved, with significant modifications, in the editing process [2] of e-books in EPUB 3 format.

Finally, a process is proposed for the creation of interactive questionnaires in EPUB 3, without the need for programming knowledge in JavaScript.

2. Motivation

The challenge of recording videos, showing how to solve mathematical problems, and making them available to students to support their learning, hosting them in virtual classrooms, on the MILAGE Learn + App or on a YouTube channel, motivated the vast majority of the members of the Mathematics Department of the IES Norba Caesarina to get involved in this task.

The teachers decided to collaboratively create the collection of the statement of the problems, of the 10th, 11th, 12th secondary courses, as well as their resolution and editing in video. In this process, they had the participation of the students. From the beginning of the MILAGE project, we used Google Education tools [4], associated with the iesnorba.com domain, to coordinate, distribute tasks, control workflow, share and store files.

Once the collection of problems and videos was generated, the task of transforming the text into HTML5 and the equations into MathML was addressed by the group of UEX professors who subsequently forwarded the EPUB to secondary teachers for review. This generated a reflection on the repetition of tasks already carried out, as well as the debugging and the control of the errors.

The UEX group rewrote the equations with LibreOffice Math, from images of equations, which had already been written by the IES Norba teachers, some with LibreOffice Math, others with the Word equation editor or with MathType, since they had to use LibreOffice Math to export them with MathML format, and paste the result as part of the HTML5 code of the EPUB [2].

On the other hand, the EPUB 3 with embedded videos occupy between 0.93GB-2.9GB and as the students stated that they did not want to store such large e-books on their mobile devices a new problem arose. How to play external videos in an EPUB 3?

The proposal to generate the HTML5 content, including the MathML equations, without the need to rewrite the equations with LibreOffice Math, was presented at the C4 meeting [5] of the MILAGE project, and this procedure became part of the working method of the Spanish group and will be detailed in the next section.

3. Publication of Content with LATEX

LATEX is a text composition system, oriented towards the creation of high quality typographic documents, it is not a WYSIWYG program and this is a disadvantage for the extension of its use. This is compensated with the high quality and versatility of the files it generates, with the existence of visual programs to help with the composition of texts, and with collaborative platforms, such as Overleaf, to write and edit in LATEX without installing the program.

In order to give unity to the diversity of ways of creating and editing the sheets with collections of exercises, it was decided in the Mathematics department of the IES Norba Caesarina to use Word together with the WYSIWYG MathType program, given the functionality of this equation editor for transforming the equations into LATEX, copying and pasting them. MathType is also capable of reproducing expressions in LATEX or MathML, taken from a document or web page.

All the contents were copied into a Google docs document, inserting the equations as images. This online document allows the editors to control the workflow and draft of the E-book.

Word texts and MathType equations, copied and pasted to a plain text editor, were inserted into a copy of the LaTeX ePub [6] template of the website overleaf.com. This template was modified to in order to adapt it to a scientific text, with a final EPUB format written in Spanish. Thus, the packages listed in

Table 1. Extra LaTex packages for a Spanish language scientific E-book.

\usepackage[spanish]{babel} \unaccentedoperators            % para evitar que se acentúe lim \usepackage{amsmath,amsthm,amssymb} \usepackage{cancel}             % para tachar expresiones \usepackage{enumitem}           % para etiquetas de listas con formato \usepackage{hyperref,graphicx}        % para imágenes con una url asociada \usepackage{yhmath}             %para números periódicos \usepackage[usenames, dvipsnames]{color}   % colores

were incorporated into the template:

The LaTeX ePub template provides the indications of the transformation process of the source file (* .tex) into EPUB, which we present below with the adaptations we have made:

• execute the htlatex instruction, from the text4ht package [7], to convert the source file to XHTML, specifically the htlatex instruction syntax that has been used has been: htlatex foo.tex “xhtml, mathml”
• convert the output HTML file to EPUB with Calibre
• edit the EPUB with Sigil, and save it as EPUB 3, using the ePub3-itizer plugin

The potential of this procedure has been recently recognized in the MILAGE group, its use being suggested by all partners, with slight modifications, such as incorporating the Pandoc converter in order to convert to LaTeX, texts and equations written with LibreOffice or Word.

4. Images with SVG Format

Scalable Vector Graphics (SVG) images are the standard [8] for EPUB 3, although these e-books also support JPEG, PNG, or GIF images. The advantage of the SVG format, compared to the bitmap image formats, is its scalability and the support of interactive animations.

GeoGebra is an interactive application, suitable for learning and teaching geometry, algebra, statistics and calculus from primary school to university. This program has the option to generate images in different formats. To activate the window that sets the area to be saved as an image, Figure 1a, click on: File > Export > Graphics View as PGF/TikZ. Once the area has been chosen, using the XY coordinates, you return to the tab: File > Export > Graphics View as Picture png, eps,) and select the Scalable Vector Graphics (svg) format, Figure 1b.

In Figure 2 there is an image, a copy in PNG format of the graph of the function area designed with GeoGebra and saved with SVG format.

The text processors do not support the SVG format; therefore, it is not possible to include an SVG file in this document. However, EPUB 3 readers and browsers do visualize them. The link to the graphic in SVG format appears in the title of Figure 2. All the major browsers have support for SVG and it can be verified that no matter how much the image is enlarged, it does not pixelate, despite occupying only 68 KB.

5. Publication and Reproduction of Videos in EPUB 3

In order to record the videos of the EPUB 3 of the MILAGE project, several techniques have been applied, grouped according to the S.O. and they will serve any publisher who wants to incorporate mathematical expressions into their videos.

In Linux, with the digital whiteboards available in the IES Norba Caesarina, we have used the Smart notebook 11.2 software and recorded the solution of the problems on the board, with a resolution of 1960 × 1080, with the program SimpleScreenRecorder. Later, the sound was edited and added with Camtasia. This procedure is the one that was used for the videos of the math program for the 10th year of high school and part of those for the 11th year.

Under Windows, the process of recording the board is similar, only the version of the Smart notebook 17 program varies and Camtasia is used to capture what is written on the whiteboards and to edit the videos.

Finally, videos have also been recorded recording slides in PowerPoint with the Office Mix program, thanks to the licenses that the Regional Ministry of Education of the Junta de Extremadura provides to its teachers. To write the mathematical equations in the slides, teachers have used MathType or LaTex, by way of the IguanaTex add-in for PowerPoint.

Due the fact that EPUB 3 size, was between 0.93 GB and 2.9 GB, with the embedded videos for the mathematics syllabus of secondary education’s 10th course, the option of lightening the size of the EPUB, and storing the videos in an external repository and linking them in the EUPB 3 was raised. In this way, we overcame the students’ resistance to store the E-book in their mobile devices.

The solution for playing external videos in an EPUB 3 was given in [8], but a static URL, pointing to a remote source, as is shown in

Table 2. Code for playing external videos in EPUB 3.

<video controls=“controls” poster=“../Images/poster.jpg” width=“384” height=“276”> <source src=“http://www.elizabethcastro.com/epub/examples/catbox.mp4”/> <source src=“http://www.elizabethcastro.com/epub/examples/catbox.wvm”/>

, is necessary for the videos.

Therefore, in order to implement this solution one would require a dedicated server and be willing to assume the costs of management, maintenance and traffic.

To avoid these costs, it is not enough to open a YouTube channel and link the videos of the channel in the EPUB, because then the videos would be played externally in the browser of the mobile device instead of appearing inside the EPUB.

That is, it is not enough to replace the link to an embedded video in EPUB 3 for a line of code that inserts the URL provided by YouTube, such as the one shown as an example in

Table 3. Code for linking videos from Youtube.

<a href=“https://youtu.be/MrsSFWgdh6k”><span class=“underline”></span>video solución </a>

:

In order to get the video played in EPUB 3, as if it were an embedded video, use the <iframe> tag along with the alphanumeric string that serves as the video identifier: “MrsSFWgdh6k” and adapt the controls of the YouTube IFrame API, as shown in

Table 4. Code for playing Youtube videos in EPUB 3.

<iframe width=“100%” height=“300” src=“https://www.youtube.com/embed/MrsSFWgdh6k?autoplay=0”></iframe>

6. Interactive Questionnaires

One of the advantages of using EPUB 3 is the possibility of integrating interactive questionnaires into it. The initial difficulty [1] is that you have to design them using JavaScript. To solve it we propose to create them with the open source program eXeLearning, it is a WYSIWYG application, oriented to the creation of interactive didactic contents with web support, USB, CD.

If we use eXeLearning to create an interactive questionnaire, of the true-false type, like the one in Figure 3, the HTML5 + JavaScript code will be generated, and the program has among its different options the exportation in EPUB 3 format.

Later, it would be enough to open the epub with Sigil and copy the code of the questionnaire as one more page of the e-book so that it is integrated and operative.

Analyzing the code generated by eXeLearning, we find that the equations are not written in MathML, but will be rendered by EPUB 3 readers, such as Gitden Reader, through the JavaScript MathJax library.

As an example, we reproduce in

Table 5. JavaScript code of the first question’s statement.

<div class=“exe-math code-only exe-math-engine position-center”> <p class=“exe-math-code”>\text{If } f:[a,b]\longrightarrow \mathbb{R} \text{ is a continuous function and } F(x) \text{ is the anti-derivative of } f(x), \text { then}\\ \displaystyle\int_a^bf(x)dx=F(b)-F(a)+C</p> </div>

the first item of the questionnaire. If we read the code that appears between the tags <p class = “exe-math-code”> ..... </p> We observe that it is a phrase in LATEX.

Rendering LATEX equations with MathJax within EPUB 3 is an option that preserves the scalability and elegance of the original format.

However, only the use of MathML guarantees access to the information of potential readers who use assisted technologies [9]. Users without vision problems will be able to read the equations in EPUB 3, whether they are written with MathML or generated from the LATEX code, via MathJax.

So, to guarantee the full accessibility of EPUB 3 we propose to replace the code in Table 5, for its equivalent in MathML. The eXeLearning application itself shows the MathML equation, when the cursor is placed on each equation, as seen in the menu of Figure 4, and that we succinctly depict in

Table 6. MathML code of the first question’s statement.

<math xmlns=“http://www.w3.org/1998/Math/MathML” >  <mtext>Let&#xA0;</mtext>  <mi>f</mi>  <mo>,</mo>  <mspace width=“thinmathspace”/> <mi>g</mi>  <mo>:</mo> …………………………………………….. </math>

.

Opening the questionnaire file with Sigil, and substituting the code paragraphs: <div class = “exe-math code-only exe-math-engine position-center”> ... </div> for its equivalents in MathML: <math xmlns = “http://www.w3.org/1998/Math/MathML” display = “block”> ... </math> the questionnaire will be presented the same fashion as that shown in Figure 3. In this way, a potential EPUB user with print disabilities, and who uses assisted technologies will be able to access the verbal description of the mathematical equations of the questionnaire [10].

7. Conclusions

The workflow and the tools presented bring the edition of digital books, in EPUB 3 format, to the professors of the academic disciplines of science, technology, engineering and mathematics (STEM), without them having to know HTML5, CSS3, and JavaScript.

Collaborative work is made possible, without having to give up editing tools oriented towards print on paper or pdf, which is usually used by each teacher. All the curricular contents that each editor generates can be reused, as we have shown in this paper; they can be unified via LaTex under the simple copy and paste procedure and then automatically converted to HTML5, including the MathML code of the equations.

In addition, the method for playing videos, stored on YouTube, within the EPUB 3 that we have presented opens up the possibility of using its own video production, or those that are available with a Creative Commons license, enriching and guiding learning outside the classroom.

The use of programs such as GeoGebra or eXelearning expands the capacity of teachers for the publishing of interactive contents of digital books, putting at their disposal the generation of resources such as images in svg format or questionnaires.

The possibility is opened for using and generalizing this method of work and resources to all teachers, without the need for them to have had previous training in programming