Facilitating the creation of K-12 interactive learning objects using a multi device web tool

Enrique Barra Arias, Daniel Gallego Vico, Sandra Aguirre Herrera and Juan Quemada Vives Escuela Técnica Superior de Ingenieros de Telecomunicación

Universidad Politécnica de Madrid Avenida Complutense 30, 28040, Madrid, Spain

Tel.: +34 915495700 Fax: +34 913367332

Email: {ebarra, dgallego, saguirre, jquemada}@dit.upm.es

Abstract— This paper presents the experience of designing and implementing an educational content creator adapted to mobile devices in a K-12 environment. Two main issues have been detected when designing this tool. The first one is the screen size, which will limit the contents´ size and the quantity of contents presented at the same time in the screen. The second issue is related to the touch screens these devices have, which changes the whole user experience. Four types of resources can be generated with this tool considering these issues. Firstly, a virtual microscope where the user can select a sample and study it in detail through the microscope. Secondly, a quiz where the user has to join words to their corresponding definitions or images. Thirdly, a virtual chemistry experiment where the user has to drag and drop pipettes to complete chemical formulas. And finally, a generic flashcard that presents a background image and several “hot zones” where the user can touch and see additional contents that the teacher has previously tagged. Details about the technologies and details related to its implementation are described in the paper.

Keywords; interactive learning objects; science in education; multi-device resources; virtual experiments

I. INTRODUCTION As technology evolves, new powerful devices with more

capabilities are available for the end user, smartphones, tablets, laptops or desktop computers. Even televisions and cars should be considered as they are starting to incorporate a browser, applications and Internet connection. All these devices entail new challenges for teachers to adapt their contents, teaching methods and tools.

With these devices, new opportunities appear to increase student’s motivation and engagement while they learn [1] [2]. Nevertheless, learning object repositories usually do not contain suitable resources for this kind of device. Sometimes because they depend on the operating system installed. In other cases because of the differences in the device hardware like screen sizes, touch screens, RAM or CPU capabilities. As a consequence, teachers have to use traditional less interactive resources.

On the other hand, although sometimes they can find suitable resources for these devices, the content does not fit, it can be for example oriented for other ages or in another language, being impossible to customize it. Therefore, in those

cases teachers need to generate their own resources from scratch.

This was the main issue that was pointed out by the teachers participating in the project called GLOBAL excursion (Extended Curriculum for Science Infrastructure Online) [3]. GLOBAL excursion is a supporting action funded by the European Commission under the Research and Innovation Infrastructures programme of FP7.

The project will develop a common understanding, teaching use cases, as well as pedagogical and technical artifacts. The main purpose of the GLOBAL excursion project is to enable students and teachers access to the experimental laboratories and resources of selected e-Infrastructures in order to improve science curricula by enriching school’s existing teaching and learning materials.

The scientific partners participating in the project are initially three, the Institute for Biocomputation and Physics of Complex Systems (BIFI) from Spain, the Nanoscience Centre from the Cambridge University (UCAM) from the United Kingdom and the Computer and Automation Research Institute (SZTAKI) form Hungary. Other scientific centers are expected to participate in the near future. The materials currently provided by all partners are based on the following topics:

• Biotechnology and biology from BIFI.

• Grid computing and volunteer computing from STZAKI.

• Nanoscience from UCAM.

These scientific materials are very diverse. However, as they are very technical and specialized they can be difficult to understand for young students. To make these materials attractive and enjoyable for students and to allow the creation of interactive learning multi-device objects, we have designed the Virtual Experiments creator. It is a web tool to integrate the contents that scientific centers provide, like images, videos or texts, or other contents and learning materials that the teachers upload into multi-device applications.

This paper explains with detail the Virtual Experiments creator tool and some examples of how these resulting Virtual Experiments are viewed in mobile and desktop devices. To do

978-1-4673-1352-0/12/$31.00 ©2012 IEEE

so, we first review related work of ubiquitous learning and other authoring tools. Section 3, 4 and 5 explain the Virtual Experiments, the viewer and the creator. Section 6 follows with the technology we chose and the issues that arose when designing and implementing for multiple devices. We finally end with some conclusions and a short summary of possible research lines related to this tool in the near future.

II. RELATED WORK Ubiquitous learning or u-learning enables students to learn

at any time, anywhere and on any devices. From a real perspective, building a ubiquitous learning environment requires a “ubiquitous” learning device accessible by every learner all times [4]. Ubiquitous learning systems should consider various factors like support for heterogeneous devices with different screen sizes and resolution, storage, processing power, format handling capabilities and network connectivity [5].

Most learning objects have been designed for viewing within learning management systems (LMS) and web browsers. In order to include these learning objects into ubiquitous learning systems, content adaptation is needed. Content adaptation concerns the act of transforming learning content to adapt it to any mobile device capabilities [6]. This adaptation will ensure learning objects can be properly visualized in different access methods and devices, such as mobile phones, laptops, tablets, etc. Numerous initiatives have proposed different content adaptation approaches [7], [8], [9]. [10] even propose a content adaptation tool that provides different templates to reproduce high-quality learning content for specific handhelds.

Although content adaptation is very useful for web pages, it cannot be automatically done with non-web based applications, as they have to be installed, nor with some contents that were specifically created for desktop computers and they are not resizable.

However, a good approach to avoid content adaptation issues is to create the learning objects with ubiquitous or multi device tools. In this case, the contents will have to be properly designed and developed for devices with higher restrictions [11] and then tested with the rest of the devices.

In [12] we can find a comparison among different authoring tools. Only half of them generate adaptable learning resources, and in most cases these resources consist of web pages with text and multimedia resources (videos, audios) integrated.

Other open source, free or commercial tools to create e-learning resources can be found, like Xical [13], eXe [14], and Wink [15] among many others. Most of them allow the user to create web educational resources or flash based objects that won´t work on modern handheld devices.

III. THE VIRTUAL EXPERIMENTS The Virtual Experiments can be considered learning

activities or learning design according to the characterization that Allison Littlejohn does of e-learning resources in [16]. They use the digital assets and information objects to compose the structured sequences of information and tasks.

This tool has been designed following the principles explained by Clark and Mayer in [17] related to multimedia learning resources. Together with the principles of interfaces design and mobile interfaces design of [18] and [19]. This way we have created an attractive and useful interface for the generated Virtual Experiments to be used by K-12 students in a pedagogical way. There are no toolbars full of options that can distract the student´s attention. The educational content is very visual. It is based on images and videos. The student can interact directly with the learning objects themselves and not only consume the information in a passive way.

Another big concern was about students’ motivation. Jere Blophy in his book “Motivating Students to learn” [20] states that students are motivated when they believe they are able to succeed at a given task and when they understand and value the outcome of the task. Here, the simple and usable interfaces will help with fostering students’ motivation. Students with a quick look will know how to interact with the Virtual Experiment and will value the outcome of the task. These Virtual Experiments will suppose also a challenge for them. Instant feedback after any action is also provided to engage them.

IV. THE VIRTUAL EXPERIMENTS VIEWER Four types of learning objects can be created with the

Virtual Experiments tool. The only difference among them is the interface design. Images, videos and texts can be integrated in all of them. In the following subsections, we will explain the four interfaces related to the different Virtual Experiments that can be created.

A. Virtual Microscope This first possibility allows the teacher to create a

visualization of a microscope and some petri dishes (Fig. 1). The learner will be able to interact with this microscope either with a mouse (if he/she is on a desktop computer) or with his/her fingers (if using a touch screen on any other device such as smartphone, tablet, etc.).

When the learner clicks/touches a petri dish, the microscope view appears full screen (with or without explanation depending on the teacher’s decision) as we can see in Fig. 2. In this view, the student can move around the zoomed in sample in order to see it with more detail.

Figure 1. Virtual microscope main screen

Figure 2. Virtual microscope sample

B. Chemistry Experiment Fig. 3 illustrates this Virtual Experiment in which the

teacher defines some chemistry formulas with some unknown compounds in them. The learner will get the drawings representing these formulas and a test tube holder with the compounds that lack in the formulas (represented in them by a question mark).

The learner has to drag and drop the test tubes to the questions marks in order to get instant feedback if the answer is correct or not (Fig. 4).

Figure 3. Chemistry experiment main screen

Figure 4. Chemistry experiment result

C. Quiz In this case a visual graphical quiz can be created. The

student will have to click or touch the different options

represented by text (Fig. 5) and images or videos (Fig. 6) to join them. Again, he/she will receive instant feedback about the matching.

Figure 5. Quiz with texts

Figure 6. Quiz with images

D. Flashcard This final Virtual Experiment is the most generic of all, as

it does not force a specific interface or scenario. The teacher is the one in charge of uploading or selecting a background image and indicating hot zones on it, linking them with another educational content (text, images, or videos).

The learner will see something similar to Fig. 7 in which there is a background image with several hot zones with moving arrows. If those zones are clicked/touched, the system shows the explanations that the teacher has assigned to each zone.

By using the flashcard learning object, teachers can generate any kind or educational content related to their subject. This way they can re-use their materials.

Figure 7. Generic flashcard

V. THE VIRTUAL EXPERIMENTS C

The Virtual Experiments creator tool (Fcreation of the multi device learning objects dis also developed in HTML5 and so it However, as in this case the teacher has explanations, it is more comfortable usingcomputer with a real keyboard instead of a va handheld device.

Figure 8. Virtual Experiments crea

The creation process is quite similar in experiments previously described. We can dinto three steps:

1. Select the type of experiment tpossible experiments are shown, aone of them, the interface for that ex

2. Click or touch the zone to add contouch a petri dish to add a new sammicroscope or to add a new hot zonexperiment. The content added canthe pool offered by the platform (prby the scientific e-Infrastructures obut it can also be uploaded if the teaanything that fits his purpose a

CREATOR Fig. 8) allows the described above. It

is multi device. to enter text and

g it on a desktop virtual keyboard in

ator

the four types of divide that process

to create: all the and after selecting xperiment appears.

ntent: for example, mple in the virtual ne in the flashcard n be selected from reviously uploaded or other teachers), acher does not find and even can be

referenced as an exterURL.

3. Fill in the title and dethe content when the (optionally).

VI. TECHNOLOGY

The Virtual Experiments ruas they have been developedstandard for the web. For this can be integrated with any management system (LMS)possibilities such as geolomultimedia communications, ga

The Virtual Experiments ar9). Consist of a web servergenerated Virtual Experimentsclient and server is done via HJavaScript And XML) calls andefined in JSON (JavaScript contains all the text and the abobjects.

Figure 9. Virtual Ex

One of the most interestingto address was the multi-devidedicated to cover it and how w

A. Multi-device issues Unlike native applications

HTML5 our application will ruis one of its main features. It onHTML5 support.

However, there are multipmake our application to be less user experience plays a criticdetermining which products stahave to take care of usabilityapplication and never come blearning process).

rnal resource by introducing its

escription to show together with pupil clicks or touch that zone

AND IMPLEMENTATION un on any modern web browser d with HTML5 [21], the new same reason, once created, they learning platform or learning . HTML5 offers a lot of

ocation, videoconference and ames, animations, etc.

rchitecture is quite simple (Fig. r and a database to store the s. The communication between

HTTP and AJAX (Asynchronous nd the Virtual Experiments are

Object Notation). The JSON bsolute URLs to the information

xperiments architecture

g and difficult issues that we had ice issues. The next section is

we addressed those difficulties.

s, we can be sure that with un in any modern device as this nly needs to have a browser with

ple device constraints that will usable. As Miller stated in [22],

cal, and even primary, role in and out. Bearing this in mind, we y to avoid students closing the back (aborting in this way the

The main constraints to consider are:

1) Screen size: Screen size is the biggest problem to deal with when

designing for mobile devices. It is different from screen resolution since modern mobile devices have big screen resolution (reaching even HD screens). Smartphones for example usually have 3 to 4.5 inches of screen size, and we want to introduce the same information both, in mobile screens and in desktop screens.

Following the principles of [18] and [19] we kept the design of the viewer simple enough to be used in either a big or a small screen. We promote the use of images and videos over texts to avoid as much as possible zoom in/out actions (although they are allowed by touch gestures to see details). As a compromise, we do not let the user to enter lengthy texts as they will not be easy to read in small screens.

2) Touch screens: User interaction is different between devices with keyboard

and mouse compared to touch-based screens. In devices with touch screens the keyboard will be virtually drawn and so the resulting screen size to write is even smaller.

Furthermore, HTML5 touch events have to be used together with click events. Otherwise, some special behaviors like zoom in/out gesture (commonly known as pinch action) also had to be implemented as it is very useful and it is becoming a “de facto standard” in touch screens user interaction.

3) Different browsers: There is a high variety of browsers (e.g. Explorer, Chrome,

Firefox, Safari, Android, etc.). All of them follow the standards and support HTML5, but there are always small differences that have to be considered. Those differences can be appreciated when entering with a browser in http://html5test.com/. Taking this into account, it is necessary to set a minimal set of features generally supported by the majority of the mobile browsers in order to use them in the Virtual Experiments viewer and creator.

4) Format handling capabilities: Although in HTML5 any image or text is recognized by

any browser, the same does not happen with video codecs. Three video codecs are supported in HTML5, Ogg Theora, H264 and VP8 (WebM). But not all browsers support all codecs, and this can be a problem nowadays. Fortunately the HTML5 video tag is prepared for this. We can indicate it inside two sources with different codecs and the browser will use the one that can play [23].

The main drawback of this solution is that any video that is uploaded to the platform will have to be encoded in two different formats.

5) RAM and processing power: RAM and processing power does not suppose a problem in

modern smartphones that can even have 1GB RAM and 1.2GHz Dual Core. But when the smartphone market started they had 128 MB RAM and 400 to 600Mhz. Right now, the current specifications of the majority of mobile devices is enough to manage images, texts and videos.

6) Network connectivity: Mobile devices usually have 3G/4G and Wi-Fi network

connections. In both cases it can be a slow network connection and not enough bandwidth to see a video in streaming or to load several images at a time. This can cause problems in the user experience. We have solved this issue pre-loading all the content before the Virtual Experiment starts, making it transparent to the user.

VII. CONCLUSION AND FUTURE WORK The work exposed in this paper allows teachers to create

customized learning objects that work in any device. Four types of experiments can be created with this tool: a virtual microscope, a chemistry experiment, a quiz and a generic flashcard. Their interfaces are easy to use and reusable as foundations to create more Virtual Experiments that can be implemented with the same technology only changing those interfaces.

Although the technology chosen is multi-device, many issues have appeared. We have described them and have given details about how we dealt with them, so these solutions can be reused by the community.

There is some functionality that we have considered to add to the Virtual Experiments in the future. The first one is based on providing an evaluation and assessment method in the quiz and chemistry experiment, so the teacher can get the pupil´s results to be aware about the learning process. This could be done following a standard like IMS QTI.

In the current version, the Virtual Experiments are saved in JSON format. Another important functionality that we want to add is to export the generated resources to standard e-learning formats such as IMS-CP, SCORM or LOM.

On the other hand, to reduce download time and data consumption (in case of 3G/4G connections) we are considering encoding the videos with lower resolution for small screen devices, allowing the system to select the suitable format depending on the context.

Moreover, as we have pointed out before, new types of Virtual Experiments could be developed with little effort by changing the interface design (e.g. a virtual telescope instead of virtual microscope).

Finally, due to the current all-mobile lifestyle and taking into account that everyday mobile devices are getting popular and starting to be used by the general public, we will have to consider them to test the Virtual Experiments on as many devices we can, making small changes in the interface and interactions if needed.

ACKNOWLEDGEMENTS We wish to acknowledge our gratitude and appreciation to

all the GLOBAL excursion project partners, and each one of the project team members, for their contribution during the development of various ideas and concepts presented in this paper. This work is financially supported by the European Union under FP7, Infrastructures.

REFERENCES [1] Pei-Luen Patrick Rau, Qin Gao, Li-Mei Wu, January 2008 “Using

mobile communication technology in high school education: Motivation, pressure, and learning performance”, Computers & Education, Vol. 50(1), pp. 1-22.

[2] Mistler-Jackson, M. and Butler Songer, N. May 2000, “Student Motivation and Internet Technology: Are Students Empowered to Learn Science?”. Journal of Research in Science Teaching, Vol. 37, pp. 459–479.

[3] T. Holocher-Ertl, B. Kieslinger, and C. Fabian, “Linking schools with science: How innovative tools can increase the effectiveness of science teaching in the classroom,” in Proceedings of the 2012 EDEN Annual Conference, 2012.

[4] Chen, G., Chang, C., & Wang, C. January 2008. “Ubiquitous learning website: Scaffold learners by mobile devices with information-aware techniques”. Computers & Education, Vol. 50(1), pp. 77-90.

[5] Parupalli, R., Nelaturu, S.C.B., & Jain, D.K. “The Role of Content Adaptation in Ubiquitous Learning”. In Technology for Education 2011. Proceedings of the IEEE International Conference on Technology for Education. pp.177-182,

[6] Su, J., Tseng, S. Lin, H, and Chen, C. 2011. “A personalized learning content adaptation mechanism to meet diverse user needs in mobile learning environments”. User Modeling and User-Adapted Interaction Vol. 21, pp.5-49.

[7] Ming-Wen Tong; Zong-Kai Yang; Qing-Tang Liu; Xiao-Ning Liu; , "A Novel Content Adaptation Model under E-learning Environment" In Frontiers in Education Conference 27-31 Oct. 2006. Proceedings of 36th ASEE/IEEE Frontiers in Education Conference. San Diego, CA. pp.1-5.

[8] Fudzee, M.F.M.,Abawajy, J. “A classification for content adaptation system”. In Conference on Information Integration and Web-based Applications & Services 2008. Proceedings of the 10th International Conference on Information Integration and Web-based Applications & Services, pp. 426–429.

[9] Kim, W.S., Jang, D.H., Kim, T.Y. “Improved Web content adaptation for visual aspect of mobile services”. In Conference on Signal-Image

Technologies and Internet-Based System 2008. Proceeding of the Third International IEEE Conference on Signal-Image Technologies and Internet-Based System, pp. 402–408.

[10] Chang, H.P., Hung, J.C., Wang, C.C., Weng, M.T., Shih, T.K.: “A learning content adaptation tool with templates for different handhelds”. In Conference on Advanced Information Networking and Applications, 2008. Proceedings of the 22nd International Conference on Advanced Information Networking and Applications, pp. 457–463.

[11] Grasso, A.; Roselli, T.; , "Guidelines for designing and developing contents for mobile learning," In IEEE International Workshop on Wireless and Mobile Technologies in Education, 2005. In Proceedings of the IEEE International Workshop on Wireless and Mobile Technologies in Education, vol., no., pp. 123- 127, 28-30.

[12] Kuo, Y.-H., & Huang, Y.-M. September 2009. “MEAT: An Authoring Tool for Generating Adaptable Learning Resources”. Educational Technology & Society, Vol. 12(2), pp. 51–68.

[13] “Xical tool” http://xical.org/ Accessed: 12 April 2012. [14] “eXe tool” http://exelearning.org/ Accessed: 12 April 2012. [15] “Wink tool” http://www.debugmode.com/wink/ Accessed: 12 April

2012. [16] Allison Littlejohn, Isobel Falconer, and Lou Mcgill. 2008.

“Characterising effective eLearning resources”. Computers & Education. Vol. 50(3), pp. 757-771.

[17] Clark, R.C. and Mayer, R.E. 2011. E-Learning and the Science of Instruction: Proven Guidelines for Consumers and Designers of Multimedia Learning. John Wiley & Sons.

[18] Tidwell J. 2011. Designing Interfaces. O'Reilly Media. [19] Hoober S. 2011. Designing Mobile Interfaces. O'Reilly Media. [20] Brophy, J.E. 2004. Motivating Students to Learn. Routledge. [21] “HTML5” 2012. W3.org http://dev.w3.org/html5/spec/Overview.html.

Accessed: 12 April 2012. [22] J. Miller. October 2005. “The user experience [internet]”. Internet

Computing, IEEE, Vol. 9(5), pp.90 – 92. [23] Pfeifer S. 2010. The definitive guide to HTML5 Video. Apress