Use of Critical Annotation and Interactive Fiction for the Creation of Digital Educational Content

Interactive fiction and critical annotation are two very important activities in the field of philology teaching. The first activity aims to turn the reader into an active element in reading electronic books. For this, different gadgets and techniques are used that force the reader to have to make decisions in the reading process. With respect of the annotation, it is an activity that aims to enrich literary texts with meta-information that allows explaining or extending the information that appears in the contents of a book. Both activities are fundamental in the training of philology students. In general, there are few specific electronic publishing tools for these activities, and those that exist have a professional orientation. In this article, two tools are described that have implemented the functionality necessary to carry out these activities but with an academic orientation. In this way, students can learn both activities in a friendly, intuitive environment designed for education. Keywords—Annotation, interactive fiction, ebooks, philology teaching


Introduction
This article describes two computer tools that implement two activities widely used in teaching philology studies [32]: critical annotation and interactive fiction.
The critical annotation [29] consists of aggregating meta-information in certain places of a literary text with the aim of clarifying the content or extending it with more information. It is a very common activity in philology studies [36]. When the activity is carried out with students, they then read a text given by the teacher in the classroom and, on it, write notes on certain parts of the text [21]. The annotations can be free text or they can also refer to concepts that appear in the text and that are defined in an ontology provided by the teacher [1]. The activity ends by giving the teacher a work where a discussion of the annotated text is developed using the annotations made. This annotation process forces the student to understand the content and thus favors learning.
The digitization of books [5] has resulted in the need to be able to make digital critical annotations in the same way as in physical books. For this, specialized text editors have been developed that facilitate this functionality [9]. These types of editors offer more powerful functionalities than the annotated since they also allow for example the classification of the annotations, the search on the set of annotations, sharing the annotations, using different ontologies to perform the annotations and others [10]. Likewise, from the academic perspective, digital annotation introduces novelties for both the student and the teacher [13]. First, there is the possibility of making annotations collaboratively [35] and delocalized between groups of students or automating the creation of the final work that they must present to the teacher. Likewise, teachers can better manage the activity since they can control in real time the activity of the students [26], they can edit the annotations made by the students, they can change the ontology used to write down or answer questions that arise when students are annotating. Note that digital content annotation can be applied to other educational fields [38] beyond philology studies with the general objective of enriching the contents of digital educational materials or being used as an evaluation tool. For example, in the field of computer studies [20], in subjects where programming languages are taught, it could be used to enrich the codes of the programs with annotations made by the teacher that serve to better understand the algorithms implemented. Or it could be used as an evaluation tool for students to add annotations to the programs and demonstrate that they understand the algorithms [24].
Generally, the role of a reader in a book is passive, since it is reduced to reading the book without any motivation. Interactive fiction [28] is an area of applied philology research that aims to add elements of interaction to digital books, such as the approach of a challenge or a test of questions after reading a content [30]. The goal is to motivate the reader so that it becomes an active element in the reading process [12]. In this sense, the inclusion of these elements enriches the reading of the contents of a digital book and makes it more dynamic [22] and alive [3] since the reader will have to intervene in the reading process. From an educational point of view, interactive fiction can also be applied to improve the learning possibilities offered by digital educational materials [31]. For example, a combination of interactive fiction techniques such as the inclusion of challenges and the definition of reading paths can be used to define learning paths within the contents of a digital educational material.
The main problem that students and teachers encounter when they want to carry out these activities in a digital environment is the lack of tools that have a didactic orientation [37]. Most of the tools are designed for professional environments [6] where technical knowledge is required that makes them complex to use by a student. In the same way, these tools are not intended to be used in a learning process by a teacher [27]. Thus a teacher can not raise activities or learning exercises.
The objective is to provide the teacher with a set of applications where he can design exercises and activities so that students can learn the techniques of critical annotation and interactive fiction. In this sense, another objective is to offer students an intuitive and friendly learning environment. The tools presented have been carried out in the context of a project funded by Google and another project funded by the Community of Madrid. The first of the tools called @note implements an annotation management system that allows both the creation of activities which students must add annotations on content provided and the teacher can manage the evaluation and learning process. The system allows managing the entire evaluation process: creation of evaluation tests, qualification, correction and generation of reports. And the second tool called IlsaEditor implements a digital text editor that incorporates the possibility of using some elements of interactive fiction such as stretchtext in the creation of digital content. The structure of the article will be as follows. The @note tool will be described in section 2. Next, in section 3 the IlsaEditor tool will be described. Finally, section 4 will establish a set of conclusions and future lines of work.

@note: A Critical Annotation Tool for Literary Texts
@note [18] is a critical annotation tool funded by the Google's 2010 Digital Humanities Awards program with the collaboration of the research groups of the Complutense University of Madrid ILSA belonging to the Faculty of Informatics and LETTHI and LOEP belonging to the Faculty of Philology and Education. The tool provides a repository of critical reading activities managed by teachers, experts in the activity [16]. Teachers can create complex taxonomies of concepts, which will label the students' grades in the activity. These taxonomies, in addition, can be created collaboratively [17] among several teachers, edited during the activity in response to the activities and needs of the students or even, for advanced groups of critical reading, be editable by the students themselves to expand the concepts and the existing structure.
The @note application consists of three main screen blocks: Management of critical reading activities, Creation and Management of annotations and Functionalities about Activity Annotations.

Management of critical reading activities
The main process within @note is the creation of critical reading activities by teachers, this is done through the execution of different steps that make up the creation of the activity and are carried out through the tool management panel in the administration section (Fig. 1). In this part of the application, the teacher must complete each of the mandatory steps that make up the elements of the creation of a critical reading activity before it is available to students.
The first step is to select a book in the catalog. The current catalog allows: to upload a book in PDF format or by separate pages in images, or the other option, is to load it remotely from one of the online libraries for which the system has importers of works. Currently the system supports automatic loading from the collection of free books from Google Books and from the National Library of Spain from its catalog of free books.
Having the book selected, the next step to be taken by the expert is to create a catalog of concepts based on a tree-shaped hierarchy or reuse one of those already created by another teacher being able to adapt its structure. The selection of at least one concept from this catalog will be mandatory when creating an annotation.

Fig. 1. Site administration zone @note
Through a menu of buttons that can be seen in Figure 2, the expert can perform different editing actions on the catalog: Create new concepts, join concepts, rename concepts and change the affiliation of concepts. In addition to the teacher's concept catalog, it will be necessary to create, or reuse, another concept catalog that will act as an auxiliary catalog, it will not be mandatory to select any concept, for students, in this category students will be able to create new concepts and categories. If the teacher requires it, for highly experienced students of advanced courses, only one hierarchy can be used allowing students to incorporate new concepts and categories on the teacher's own catalog.

Fig. 2. Concept structures editing menu
The third step necessary to create an activity is the creation of the user group that will carry out the activity, in the user administration menu, the teacher can create an activity group and by means of self aggregation by identifier plus validation, students can take high in this group Optionally, it is possible to create different extra elements for the collection that are an export template for the works and a translation of the texts of the alternative application into English by default.
The last part necessary is to combine the elements created in the previous steps and compose the activity, at this point, if no template has been selected, the empty template will be automatically selected and if one of the translations is not chosen an empty template will be automatically selected and the English language.

Annotation management
This part of the application will allow the annotators, students and teacher, make new annotations on the digitized pages of the book, edit the annotations already created previously, make comments on the annotations of the other users and in case of the teacher edit student annotations (Fig. 3). The main part of this section is the book sheet where the preexisting annotations are projected when passing over them in the side panel where they reside and that allows the creation of new annotations when making selections with the mouse on the image.
The process of creating an annotation is divided into three parts: Selection of areas, selection of categories and writing of the content of the annotation. An example of the process can be seen in Figure 4.
The selection of areas is made by multiple selections with the mouse on the image of the page. At the end of making the selections, the scorer performs a search on the teacher's catalog to select at least one element that categorizes the annotation, additionally it is possible to make selections or create concepts and select them on the student's catalog that allows the aggregation of elements, categories and concepts. Having both selections finished, the annotator can start writing the content of the note in the text editor offered by the tool itself, this content can be added directly in HTML allowing flexibility in styles, adding images, animations or videos.

Functionalities about annotations
The last point of the application is the possibility of creating documents for the presentation of a final work that the teacher evaluates. For this, the first thing is to select which annotations will belong to the discussion of the work. This process requires navigation mechanisms and annotation filtering to search for those annotations that must be add to the document. In the @note application, navigation is done by selecting categories within the activity catalogs as can be seen in Figure 5 where the category criticism ("criticismo") is selected.

Fig. 5. Navigation by category.
This implies that the annotations that are categorized with the concepts will be obtained: bibliographic ("bibliografía"), psychological ("psicológico") or cultural ("cultural"). Note that the filters, however, allow the creation of boolean rules about the categories and users (teachers and students) of the activity as seen in the example in Figure 6 where two rules have been created: the first one performs a filtering of annotations that are labeled with Narration ("Narraciones") but not with Use of Sections ("Uso de secciones") , the second rule will filter those annotations that were cataloged with Cultural ("Cultural") and not with Bibliographic ("Bibliografía"). The result will be the union of the annotations of the groups resulting from applying the rules.

Fig. 6. Rule filtering example
Once the annotations that will compose the work to be exported [33] have been selected, the tool will allow them to be inserted in an orderly manner in a template in the form of a section tree (created by the teacher in the activity creation phase) or in an ordered list without sections if it have been not created any specific template for the activity. When the annotator considers the selection and sorting of the annotations for exporting finished, a document will be created for download in HTML or RTF. These two formats are compatible with most word processors, where the student can use the notes and information they contain to complete the work to be delivered to the teacher.

ILSAditor. A Digital Editing Tool for Literary Texts using Stretchtext
ILSAditor is a digital editing tool whose objective is to allow the creation and editing of texts with the inclusion of interactive fiction [34] and the possibility of generating the result of the edition in a web-oriented format (HTML5, JavaScript and CSS) [14] or an electronic device oriented format (EPUB) [15]. In particular, the tool allows the use of stretchtext. The stretchtext [4] is a special type of hypertext that allows to hide or show text within the same web page. Its use allows to show the content in different layers of understanding that can be managed through the actions of hiding or revealing the text [2].
The tool has been implemented as an extension of the open source editor TinyMCE (https://www.tinymce.com/), used in educational content managers [19] such as Moodle (https://moodle.org) or management systems content [23] such as Joomla (https://www.joomla.org/) or WordPress (https://es.wordpress.com). It is a WYSIWYG type editor that offers text editing options [. The tool has been extended to manage stretchtext, manage annotations and publish the contents in web format and EPUB.
Next, the functionalities that have been implemented will be explained.

Stretchtext insert
The insertion of stretchtext allows to create navigation levels in the content that is being edited. To do this, it must be selectes the text to show or hide and then click on the button called "StretchText". As it is shown in Figure 7, the selected text of the work "Don Quijote de la Mancha" is highlighted with a different background color, and the text of the level of deepening is presented in bold and followed by a green icon to facilitate identification. If the content is previewed, it is shown that the text associated with the stretchtext is initially hidden. To make it visible, it is only necessary to click on the icon or the text "Stretch level".

Fig. 7. Stretchtext of a level
The stretchtext allows structuring the content in physical layers organized on the same level or in nested layers. In Figure 8, an example is shown with two paragraphs with the same level of depth (Level 1 ("Nivel 1")) containing the first one an additional level of depth (Level 1.1 ("Nivel 1.1)). If it is previewed, the stretchtext levels are hidden. And if it is clicked on the text "Level 1-History 1" ("Nivel 1-Historia 1") then it expands leaving visible the text contained in it and one more level of depth (Level 1.1 ("Nivel 1.1)). To see this last level of depth just click on it.

Fig. 8. Multi-level Stretchtext
Note that the levels can also be hidden by clicking on the text again. Likewise, stretchtext can be applied to text, images and audio.
In the context of a strechtext level it is also possible to insert other elements. Thus it is possible to insert an image of the local file system. To do this, it is necessary to position the cursor in the location where it is wanted to insert the image file and then click on the "Insert Image." Another option that allows the insertion of images is the possibility of linking the image with a URL With this option it is possible to get the reader to visit a web page when it is clicked on it.
It is also possible to play an audio file by expanding a stretchtext level. To do this, it is necessary to previously select the depth level and click on the "Add audio" option to select the audio file to be played in the local file system.
Finally, the tool allows to create a link from a URL or from the selection of an HTML file located in the local file system. In addition, it also allows to automatically create an empty HTML file to be able to link it.

Insertion of annotation
This functionality allows to insert annotations in the form of a pop-up window with multimedia content on a previously selected text. The purpose of the annotations is to incorporate more information into the content [7]. An annotation is created by selecting the text to annotate and then clicking on the menu option called "Create Annotation"("Crear anotación"). Once this option is pressed, a text box with a gray background will be displayed in the editor indicating where the title text and the body of the annotation should be written. Once the work is published, the annotated text will be distinguished by a gray dotted underline that will indicate to the reader that if it is clicked on it, a pop-up window similar to the one presented in Figure 9 will be displayed.

Publication
The tool created allows the publication of content in both HTML [11] and EPUB [8] format. In the first case, a compressed file is created in ZIP format that contains: • An HTML page with book content • A folder called "images" in which all the images in the book will be stored • A folder called "audio" that will collect the audio files from the book • A folder called stretchDocGen that contains the files with JavaScript code [25] that are those that control the behavior of the book and the files with CSS code that are in charge of the appearance of the work.
With the EPUB option the content is structured based on chapters or sections defined by the user. For this, the system shows for each chapter / section a form where the text of the chapter and its body should be written. As a result, an EPUB file with structured content is created.

Conclusion
In this article two educational tools have been presented that allow interactive fiction activities and critical annotation. The main feature is that they have a didactic orientation. They are designed to be used in the learning process of these techniques in philology studies. In this sense they facilitate a friendly and intuitive environment, and offer the teacher a teaching tool in which to prepare activities and evaluation exercises.
The main lines of future work with respect to the @note tool are: 1) the extension in the formats of export of the information offering mechanisms of creation from criteria defined by the students, and 2) the automatic evaluation of the quality of the annotations and mechanisms of automatic improvement of the cataloging structure that would facilitate the work of teachers in the process of creation, maintenance and development of the reading activity.
With respect to the ILSAditor tool, it is proposed to develop a functionality that allows the creation of collaborative annotations on the edited text. This new feature would facilitate several literary analyzes or exchange observations on some text that is the subject of a study. All information generated with this new functionality would be stored in a database for later exploitation. Another line of work would be to incorporate an intelligence layer in the tool that allows to take advantage of the stored information. Thus, data analysis techniques could be applied to make recommendations or filters based on content, such as recommending books or authors based on the annotated text or similar texts that may also be of interest to the annotator. And a third line of work is the development of a technique that allows to associate a Google Maps location with a text or an image. In this way the reader will be able to visit the locations in which the narrated story takes place virtually.