learning, online tutorials or games based learning. .... The essential components of this application are a MYSQL database, the sound ... simulate the interface of a software and advance the slides when the user makes the correct action.
IADIS International Conference e-Learning 2010
AN EDUCATIONAL INTERFACE BASED ON INTERACTIVE SLIDESHOWS Santiago Domínguez-Noriega, Juan Manuel Vaca, Paula Ferreira and Mercedes Rico Gexcall, University of Extremadura (http://gexcall.unex.es/)
ABSTRACT Nowadays e-learning developments use web portals as the primary source to manage knowledge support. However the creation of independent applications to enhance student skills is still necessary in current research, serving both as isolated tools and as constituting global platform modules. We believe that slideshows are a useful means when exposing educational information, but we also think it lacks a certain level of interaction to make it also able to design more interesting tasks. Therefore we have analyzed the multimedia, interface and communication requirements of slideshows and we have proposed the study, design and implementation of a web application in education. This combines the appropriate conditions for hosting interactive educational navigable content slides, and it is applicable to such areas as language learning, online tutorials or games based learning. KEYWORDS E-learning, web application, slideshow, interactive
1. INTRODUCTION The widespread presence of computers in schools, institutions and almost every home provides new opportunities to stimulate the learning process. This situation, altogether with multimedia and Internet technologies, leads to an online learning model called e-learning, approach which can be defined as "the use of Internet technologies to deliver a wide range of solutions that enhance knowledge and performance" (Rosenberg 2002). In this new learning model there emerges the need of creating online tools that teachers and students can use anytime and anywhere. On the other hand, one of the most used means, as an educational tool, are basic slideshows, although their use has always been associated with applications with unidirectional information flow, and exceptions are usually found in desktop software with local access. The aim of this paper is to introduce the operation, construction and potential applications of an online tool for educational use, relying on a system based on slides with interactive resources merging the different components into a new enriched and useful model.
2. TUTORIALS AND E-LEARNING TOOLS One of the areas where multimedia technologies are reaching their highest potential is the teaching sector, allowing, among others: - To optimize the time each student spends on his/her training in a custom way; - To generate an individualized training, and; - To acquire knowledge in a more participatory and even fun way (Cobo 1997). Also, using these Internet technologies leads us to the e-learning model, having many advantages over traditional learning (Cabero 2006). For an effective use of e-learning we need powerful online tools that meet the needs of teaching and learning of both teachers and students, which is why they are continually developing tools to meet differing needs as they emerge. Thus, the increasing provision of training courses being distributed through the World Wide Web, and the number of teachers, educators and experts who use
3
ISBN: 978-972-8939-17-5 © 2010 IADIS
Internet services to develop their professional activity, has enhanced the research and development of tools becoming easier and more intuitive as time goes by. These tools include both those aimed at the creation of media materials such as the designed specifically for the distribution of courses over the Internet (de Benito 2000). In our case, we are working on a tool for creating and using slide presentations or tutorials. Tutorials are a suitable model for the acquisition of knowledge, particularly regarding the retention and recall of information (Bartolomé 1994). There are many such tools, both desktop applications (PowerPoint, OpenOffice, MovieMaker, etc.) and online applications (preZentit, Google Presentations, Slideshare, Acrobat.com Presentations, Plyks, etc.). In this context, our goal aims to build an online tool for creating and using tutorials to provide an additional advantage, interactivity. We try to design and implement an interactive tool which motivates student use in order to provide a more complete learning.
3. DESIGNING INTERACTIVE PRESENTATIONS As mentioned before, we will create a tool enabling educational guided tutorials, which will be able to combine the simplicity of a slideshow, and the multimedia capabilities available today (Samarin & Tuominen 2004), all within an intuitive interaction environment. This platform must also be accessible online by users and course administrators.
3.1 Thoughts and Planning The main basis of the tool we are proposing is a traditional slides presentation where the user can navigate in both directions to study the submitted content, and will be endowed with different media sources. We seek to create narrated presentations, so each slide will be accompanied by a recorded voice (and subtitles as a text reinforcement) starting automatically when the user sees the content. The interaction will be also enriched allowing an "active spots" system within the slide itself in which you can click on certain zones in order to jump towards new content. This proposal is twofold, we move from a classic lineal presentation system (Findler & Flatt 2006) to a ramified approach, in which there is more than one path to follow; secondly, we define a dynamic interaction in which we are not limited by the defined buttons, being even possible to use a different interface on each slide (in fact, where the GUI is the slide itself). These zones could remain hidden or displayed to the user, depending on the specific needs of the application. In fact, a useful addition to the interface would be a help system for content navigation, enhancing the custom clickable areas when asked to, allowing new tasks to be created or serving as a vision issues accessibility tool. Developing that kind of interface, we will obtain a double navigation network, keeping the possibility of moving forward or backward through the slides, and enabling the requirements of user interaction when necessary to perform an action on a particular area of the slide and continue with the next transparency, or jump to a new collection.
4. TOOL DESIGN AND APPLICATION Now we will describe the process of creating and implementing the application and an associated authoring tool (Murray 2003) for the creation of the final contents. We will also see a list of examples of possible applications for the tool.
4.1 Implementation and Resources used The essential components of this application are a MYSQL database, the sound player named “Dewplayer”, some PHP files, the Javascript files of the project “ImgMap” for dynamic image editing, and the vector graphics library “Raphael”.
4
IADIS International Conference e-Learning 2010
In the database we have several tables in which we store data describing each presentation and each particular associated slide (the base image, the slide it belongs to, the id and order, sound narration, the complementary text, and finally the interactive areas, indicating the actual shape and coordinates. To edit the slides we have to insert them one after another so these are stored in the database when you create them. When we edit a slide we must upload a background image and optionally we can add the rest of the components (text, sound and/or interactive areas). After sending these data, the associated parameters of the current slide are stored in the database. To view the slides while we are surfing the presentation, or when we are editing its content, the application detects the image id where the user is, and processes a data query data for that record in the database retrieving the complete content, presenting everything in the screen in a graphic form. If we want to create an interactive area on an image in a presentation, we can use the Javascript files from the “ImgMap” project, which provide an editor that allows us to choose the clickable areas for the image (with both rectangular and circular shapes). The shape and coordinates of this area are stored at that time. We also implemented a way to highlight a particular area when the user needs to see the interaction map, which is achieved using the "Raphael.js" library that will draw a figure on the image based on a defined shape and the specific coordinates. In order to do that, in every slide of a presentation, the application detects if the user presses a certain key, action that will activate an operation on the database to query the interactive areas and their properties for the current image, finally presenting the external shape of each active “zone button” with red line. This application must be hosted on an external server. It consists on a portal from which you can access the use/display mode of the presentations or the editing mode with the authoring tool. Both modes are connected to the database, the first mode query information from the database and the second one query, modifies and stores data regarding the slides and application. From this portal we will also have access to the creation and management of new courses hosting the presentations that can be accessed directly, or also embedded in another web portal or educational CMS. In Figure 1 we can see the final appearance of the display of a tutorial on basic operating system tasks that the student could accomplish on the left, and on the right we show the edit screen of the same tutorial where you could define the interactive areas.
Figure 1. Visualization and edition interface screenshots over an online interactive tutorial.
4.2 Application The set of applications that this tool could have is wide and diverse, since they are related to their information and navigation capabilities inside an on-line environment, constituting an enriched multimedia presentation which is applicable to a specific learning objective. Our proposal could be a very interesting tool in language teaching, specifically in the creation of graphic tests, where one of the most direct applications is placed on learning and image-based reinforcement of vocabulary, grammar or phonetics at early ages. Another direct application is focussed on the creation of tutorials for both desktop and on-line software applications. Due to the capabilities of area zones linking an image to a certain target (of a slide) you can simulate the interface of a software and advance the slides when the user makes the correct action.
5
ISBN: 978-972-8939-17-5 © 2010 IADIS
Different applications of game-based learning also find functionality in this application, as searches for differences or elements on images and educational adventure, in which you have to choose your path.
5. FINAL REMARKS Current approaches in terms of online learning tools are directed at improving the online platforms that support education, and in this sense we have implemented a web application that can run independently or be embedded in a web portal running. The application provides a polyvalent interface to existing applications in education, combining information in graphical, textual and audio format, and its navigation elements which can be configured as active areas on each slide. An authoring tool enables the process of creating an education unit easy and intuitive. We have described a number of direct applications for the developed tool in educational environments, which are extendable to any scenario that feeds an interface with the characteristics presented. Based on the before mentioned premises, we consider that this final tool is an interesting application on which research must be based, improving aspects such as storage and processing of statistics generated by students’ use, or studying possibilities to include an adaptive algorithm.
REFERENCES “Alsacréations. Dewplayer lecteur mp3 en Flash.” Retrieved on January 23, 2010, from http://www.alsacreations.fr/dewplayer “imgmap - Project Hosting on Google Code.” Retrieved on January 23, 2010, from http://code.google.com/p/imgmap/ “Raphaël—JavaScript Library.” Retrieved on January 15, 2010, from http://raphaeljs.com/ AR Bartolomé 1994, “Multimedia interactivo y sus posibilidades en educación superior.” REVISTA PIXEL BIT, vol. January, no. 1. Barbara de Benito Crosetti 2000, “Herramientas para la creación, distribución y gestión de cursos a través de Internet.” Edutec. Revista Electrónica de Tecnología Educativa, vol. January, no. 12. Cabero 2006, “Bases pedagógicas del e-learning.” Revista de Universidad y Sociedad del Conocimiento (RUSC), vol. 3, no. 1. Cobo 1997, “Experiencias educativas con la red Internet: elaboración de tutoriales interactivos multimedia.” Rect@, vol. Actas_5, no. 1, pp. 12. Findler, RB & Flatt, M 2006, “Slideshow: functional presentations.” Journal of Functional Programming, vol. 16, no. 4&5, pp. 583. Murray, T 2003, “An overview of intelligent tutoring system authoring tools: Updated Analysis of the State of the Art,” en Authoring tools for advanced technology learning environments : toward cost-effective adaptive, interactive, and intelligent educational software, Kluwer Academic Publishers, Dordrecht ;Boston, pp. 493-546. Rosenberg, M 2002, E-learning : estrategias para trasmitir conocimiento en la era digital, McGraw-Hill Interamericana, Bogotá. Samarin, M & Tuominen, J 2004, “Delivering web lessons with media rich content,” en IEEE International Conference on Advanced Learning Technologies, 2004. Proceedings., Joensuu, Finland, pp. 860-861.
6
