Using XML in a Tele-educational Tool

Liliana P. Santacruz Valencia, Mª Carmen Fernández Panadero, Liliana Torres Barberis
Carlos Delgado Kloos, Carlos Garcia Rubio, Jose Luis Carrasco Sanz.
Área de Ingeniería Telemática. Dpto. Tecnologías de las Comunicaciones, Universidad Carlos III de Madrid

http://www.it.uc3m.es/~sebas


Introduction

Web technologies were, as soon as they came out, immediately adopted for education purposes. Hypertext technologies had already been used before in learning systems, and the Internet facilitated the overcoming of distance. Both traditional and open Universities have then rushed to move their contents or develop new ones in HTML.

Everything was coded into a continuously changing HTML directly or in form of comments, when XML came as a fresh brise of air opening new possibilities and freeing authors from the rigid structure and limitations of HTML.

In this paper, we present how we have used XML and related technologies for the development of a Web-based teachning and learning system. The following section presents the possibilities enabled by XML in educational environments. Then, the overall architecture of our system SEBASTIAN is presented together with the metaphor we have used for the navigation of the student through the learning material. Following that, we briefly sketch the tool defined for the teacher and the one devoted to the student. Finally, we show how new technologies like this one can be succesively incorporated into the educational process in a gradual manner.

XML posibilities in educational enviroments

Since Internet has become an increasingly popular media,  educational intitutions are interested in using it as a delivery platform for teaching and learning materials. 

Advances in web technology are changing the learning paradigms. Higher education is undergoing structural changes in terms of composition of student  populations, learning paradigms and curricula.

As distance education is becoming an integral part of secundary institutions, student bodies are expanding to include more non-traditional students and the contents are becoming richer than before and incorporate more interactivity.  Instructional methods in academia are shifting from a teacher-centered paradigm to a student-centered paradigm. In this new paradigm students are more involved in class, thus collaboration becomes a more important component in the learning process.

With the advantages in computer networking and digital media technology,  there is an effective framework  to support active learning.  The student interacts with others using a desktop computer. The same computer supports the active learning paradigm through its modeling capabilities. All these changes have brought new ways of representing the information (for example: animations,
simulation, hypertextual navigation and so on). In particular, the introduction of multimedia contents in the web,  althought with some difficulties, derived from the wide spectrum of data formats  existing on the Web. 

XML Extensible Markup Language plays an important role in the exchange of wide variety of data on the Web.  It enables internationalized media-independent publishing, so companies can define platform-indepent protocols for data exchange and this information can be displayed in the way each individual prefers. XML underspins a number of Web mark-up languages and applications.

But, what is happening in the educational enviroment? XML offers many posibilities in this field, for example, using SMIL in multimedia contents synchronization process can enrich the educational material.  Some enterprises have developed languages oriented toward the creation of interactive speech application. 

Navigation through documents or in a single document requires a proper management in agreement with an addressing scheme, making it easy to move across the course lessons. It is posible to combine other languages, for example XLL, XSL,  inside educational applications because XML separate document content of the presentation itself, which generates new presentation possibilities for a single content and enable contents labeling based on logic structure, interactive level, learning difficulty, resources, etc.

The use of XML open a wide spectrum of posibilities for design and presentation of high quality materials for a particular educational or training purpose. 
 

Architecture

A key driver of the design is to provide flexibility in the following areas:
  • To provide access to the application from any type of workstation that allows Internet access. 
  • To provide not only a simple XML and SMIL editor but to allow the user to select another commercial editor depending on his preferences. 
  • To allow different skilled teachers delivering applications to different groups of students according to their knowledge level and pedagogical objectives. The result would be a single application that would provide multiple ways of viewing information. 
  • To support different formats, different levels of difficulty, reusability of contents, etc. 
  • To allow integration of the applications with existing utilities of printing, video-conference, etc. 
In order to maximize this flexibility, the proposed system has a modular design consisting of three main layers:
The Application Design, the Software Architecture and the System Architecture.

Within the Application Design we must separate the "content" from the "personality" of the application. The content will be formed for all multimedia files, HTML pages, etc used during the course (audio, video, animations, java applets for simulations, etc.) as well as the SMIL files that allows to assemble and synchronize these multimedia content. XML files storing information about all the data related to the course (content tagged with difficulty levels, etc). The personality of the application resides in the metaphors that define the type of interaction with the user, the mechanisms of navigation through the application and all the files that store information about configurable issues for different scene (selectable areas, associated events, type of interaction with the user, etc.), for exercise customization or for applet simulation. 

This layer provides multimediasupport for the presentation of the application (files responsible on multimedia delivery as well as navigation management (JavaScript files which control the transition between scenes), objects responsible of the integrity of the system (security issues, error-handling, users services to support video-conference or specific telephony or IP protocols, etc. 

This layer refers to all the aspect related to the hardware, network support,, user terminal, peripheral (screen, printer, camera, microphone, etc.) 

The content will be expressed using XML to store information about different courses and administrative information. The personality of the application will be expressed using XML to describe different scenes and using Java and JavaScript to control transitions between them. While XML will describe the logical structure of data in the course (content, administrative, etc.), we will use XSL to display information in XML browsers or to convert XML to other languages in order to use different display devices or to provide different information depending on the information spaces (printed material, on-line presentation over LAN connection, on-line presentation over Internet, off-line courses, etc.)  (See Fig.1).

XSL (Extensible Stylesheet Language) is a language for expressing stylesheets and it consists of two parts: 

A language for transforming XML documents and a XML vocabulary for specifying formating semantics. 

Our application will use the formating vocabulary only to displayXML documents in an XML browser, but the application take advantage of the transformation step in two ways: 

Transforming XML document modifying its structure in order to provide  different versions of the document depending on their future use (printed version, on-line presentation,etc.) 

Transforming XML document in other languages to make them available in different devices for example transforming to well-formed HTML to see it in a simple browser or converting in MHEG format to view it in a TV-set via a Set-Top box. 

In this document we explain only the aspects related to Application Design which will be the only accessible layer for the teacher in the first prototype. 

The metaphors throw which the student will navigate around the application are one of the key-aspects in our system. In the first prototype we'll provide a real life metaphor like a trip, but we are studying to use another metaphors like a space-travel, sea depth, etc. 

In the trip metaphor we provide a global vision in which each course will be represented by a country, and each subject by a city. The subjects will be grouped in different ways: regions (or departments), independent communities (or specialities), etc. Within each city (course)we will find different buildings (subjects) or urbanisations (groups of buildings) to represent intimately related items (thematic areas).  Inside a building (specific subject) we will be able to find different  rooms that would be equivalent to the section within a (subject) in a book. From each tool it will be possible to change among different floors that will correspond with different difficulty levels of the subject. 

Within the specified levels of granularity we will only make three-dimensional representation for city, building and room, that will
be the different scenes that we are going make accessible in the first prototype. Each one of these scenes will have help-mechanism that allow the system to guide the student thorough the application. For instance a help mechanism in the application will be an animation character who will appear always accessible for the corner of the screen and that will provide information depending on the context where we are. 

In the first prototype all the scenes consist of some common elements (tittle, background image, background sound, sensible zones, help-character, multimedia files and bookmarks). 

The city scene consists of several buildings representing different subjects. The teacher could add such many buildings as he needs for a specific course . All the towns will content some special buildings : 

  • Tourism Information: In this building the system recommend different tours according to the knowledge level of the student.  The student provides this information filling forms. 
  • Cafe: In this building students meet to talk using chat applications.  Library provides some books, tutorials online, bibliographical references, etc. 
In the first version only a thematic building and the tourism-information will be accessible. 

As all the buildings of the city are not accessible in a general view.  The system will provide another navigation mechanism such as a map with a mark specifying where the student is situated. Clicking in a zone of the map will provide a more detailed view of this area, and when the user click on a building the system provides direct access to it.

The room-scene is the most complex. The scene is similar to an office and contains the following elements: 
 

  • A screen for the visualisation of the multimedia presentations SMIL-files) or HTML documentation provided for the teacher for this item.
  • A bookcase for library. Clicking with the mouse on the different books in the bookcase we have links to bibliographic information (Amazon references, author's personal web-page, sites where the student could buy the book, etc.), on-line tutorials, links to related rooms , access to catalogues in different universities, and access for the virtual library of the system. 
  • A bookcase for videotape library with videos related to the items mentioned in the room. When the student select a video in the bookcase could see it full screen. 
  • A teacher behind a table. The teacher is the person who explains content in this room. Student could click on it and view his personal page or in the future to establish a video-conference with him.
On the table we have several objects the user could click a mail box (to send a mail to the teacher), a telephone (to see the telephone number or establish an audio-conference in the future), an address-book with the e-mail or URLs of other students who follow the course, professors, and related work groups. A dictionary of terms on the distributed matter, a notebook to allow the student taking notes during the lecture and a shared blackboard. 

In every room will be possible to access other levels in the same room and to go to the laboratories and exercises. In the next versions of the prototype will be possible to include new help-mechanism like guided tour with promotional videos of the different countries (courses) that show most interest places (lectures), emblematic buildings (concept, etc.) 

Course Curriculum 

Every course could have only one coordinator and several instructors. The coordinator could specify the course structure in two ways: 

Using an XML editor and tags to specify diferent aspects in a course  (objetives,author,course sequencing, evaluation method, bibliography, etc.) 

Using the teacher tool that allows  change configuration parameters with a mouse click over different scenes in our methaphor (for example, a click on the help-character allow to change the character image, his voice, the way he move over the screen, etc). 
 

  • In the same way the instructors could design his lesson or lectures: Editing SMIL or MHEG files: Using the teacher tool that provides several templates for exercises, presentations, etc. 
  • Every template is written in XML teacher could: Create new templates. 
  • Select a template (for example a slide-show) and click over each region to configure different parameters (size and position of different regions, different images for the slides, duration for each image, synchronization points, etc.)
This is an example of a SMIL file used to sinchronize a video of the teacher speaking with some slides showing concept-diagrams, and the transcription of the lecture in a HTML file.  The application include some JavaScript sentences in the HTML file to automatically scroll the page to synchronize the text displayed in the window with the instructor talk.

<smil>
    <head>
        <meta name="title" content="First Prototipe"/>
              <layout>
                    <root-layout id "Presenter" title="First Prototipe" height="400" width="600"/>
                    <region id="Video" left="5%" top="5%" height="36%" width="21%"/>
                    <region id="Slides" left="40%" top="5%" height="90%" width="62%"/>
                    <region id="HTML" left="5%" top="50%" height="45%" width="21%"/>
              </layout>
     </head>
     <body>
          <par>
               <video id="avi1" region="Video" src="clip001.avi"/>
               <text id="text1" region="HTML" src="scroll.html"/>
               <seq>
                    <img id="img001" region="Slides" src="img001.gif" dur="9s" />
                    <img id="img002" region="Slides" src="img002.gif" dur="9s" />
                    <img id="img003" region="Slides" src="img003.gif" dur="17s"/>
                    <img id="img004" region="Slides" src="img004.gif" dur="58s"/>
                    <img id="img005" region="Slides" src="img005.gif" dur="23s"/>
                    <img id="img006" region="Slides" src="img006.gif" dur="41s"/>
                    <img id="img007" region="Slides" src="img007.gif" dur="7s" />
               </seq>
         </par>
     </body>
<smil>

In next section we specify in more detail the configurable parameters in the teacher tool. 
 

Teacher's Tool

It is necessary to distinguish the tool for the creation of courses from tools for the creation of content. The teacher's tool makes reference only to the creation of courses although it will allow to call to external content editing tools. The first prototype version only provided access mechanisms to the first layer of architecture (Application Design). It only allows:
 
  • To modify the different background city images, inside buildings and inside rooms (this allows a great flexibility in the interface design).
  • To vary physical selectionable area location to fit it to the background image. 
  • To modify environmental sound (piped sound) and the animations that approach us to the buildings.
  • To create SMIL files for the central presentation or modification of one  of the predetermined template.
  • To personalize the simulation templates provided for simulations and  exercises.
  • To locate the different resources in a virtual city: bibliography,  related groups addresses, tutor's URL, etc. 
We have divided the process of creation in several phases:
  • Selection of contents. The teacher has new communication forms to present the different concepts from his students. The first phase consists of compiling didactic materials (multimedia files, information on the matter to impart, processing or compilation of simulations and exercises related to the subject, bibliographical material, etc.) 
  • Identification of the target group. The teacher has multipe students with different knowledge levels and different educative necessities. He must define different levels of difficulty about the content and the accessibility of  each user type to the material.  All this is reduced to a  labeled process of the different contents, by means of the own EML labels being transparent to the teacher. 
  • Each one of the didactic resources is comteplated in one of the scenes of the general metaphor (bibliographical resources in the bookcase of the  scene room, simulations in the laboratory, etc.) But the main resource for teaching is the central screen of the scene room where there are assemblies  multimedia processed by the teacher. That is to say, the presentation.
  • The presentation process requires the creation of a SMIL file. Therefore, it is necessary the preparation of a script in which is specified  the region where each element appears, its duration and position in the  time line. More frequently basic templates used will be provided (synchronized  audio and slide sheets, synchronized video and text items, etc). In this  phase also is necessary to establish the hyperlinks that allow to jump in run  time to different points of the presentation. 
  • The simulation elements (generally java applets) can be included  directly and basic templates for the exercises will be provided (multiple  selection test with or without images, exercises that allow to drag a graphical element to an adapted site, etc.). Each one of these examples will come  accompanied from the information necessary to personalize the actions to  make in case of right or correct wrong. 

Student's tool

The student's tool is the application used by the students to attend a course. Its navigation system is flexible enough to support attending the course in different ways: right from the beginning, resuming the course at the point he/she left it last time, or as a reference book (just to consult a topic).

The student's tool can show the information of a course with different layouts (see figure 2):
 

  • Sequential layout, with the contents of the course displayed one after another, following a time or a logical order, as in a guided tour.
  • Squared layout, suitable for highly structured information, with all the subjects divided the same way (with the same sections and subsections). For example, a course on a certain kind of diseases, all with the same structure: description, symptoms, diagnosis, treatment, etc. With an squared layout, students can choose to follow the course vertically (studying each disease independently) or horizontally (comparing the symptoms of several diseases).
  • Hierarchical layout, suitable for courses with concepts of different levels of complexity. In this layout, a table of contents helps to navigate through the course, and to have a clear view of the organization of the whole course.
  • Relational layout, with lots of links connecting related concepts, as is the Web. With this layout, you find the information you search very quickly, following different paths, and jumping to other related information.

Transition Scenary

In order to take advantage in an efficient way of the didactic resources that offers this new technology, a new conception about teaching is required. The teacher's role changes and that needs a continuous training both in technical and pedagogical aspects. An evolution, in this sense, requires a long time and a cross disciplinary cooperation for the production of the new materials. This change must be gradual and so we offer several transition scenaries in which to take advantage of the structure of our tool to re-utilize the existing resources.

Scenary I : Usual class with slides

One capacity of our tool could be the possibility to attend asynchronously a session with slides.

Present situation 

There are many presentation tools which synchronize video, audio, text and slides.
Future situation 
This functionality could be extended with our metaphor in the following way. Each one of the classes will be in one of the rooms. In the central screen we could see the slides and we could synchronize them with audio and video.
The advantage will lie in the integration of this class with others about the same theme (in the same building), of the same subject (in the same town) and the same career (in the same country).The class could be seen as something isolated as a part of a more general whole.

Also, we could attend classes at different levels (differents plants in the same building) given by the same or different specialists.

In the more advanced version of the tool, when we develop the personalization, the pupil could choose between several teachers who
teach the class with the same set of slides.

One of the main advantages would be the use of SMIL as the synchronizing language of the multimedia contents which would allow us
to have this new paradigm available in the web.

In the basic scheme of a room we could include a shelve of access related resources, a videotape library and the opportunity to
communicate with the teacher by audio, videoconference or e-mail.

Scenary II: workshops, summer courses 

Another education scenary in which the new technologies can be employed is in workshops, conferences and so on. In this scenary, the process is synchronous, although the conferences could be recorded and seen asynchronously.

Present situation 

Nowadays, this method is used to link two or more lecture halls. In each of them, there are several speakers and one screen to see the other. The speaker can be in any of the rooms and all the participants have access to the same information (in the same room or through the video screen).
Future situation 
One of the advantages of our application is the integration into a context to give the user a general view.
Each one of these virtual classrooms which develop a same theme could become one of the rooms. But in the forums case, which develops simultaneous conferences about several themes, we could think in an integration environment where the application shows the different rooms of the building and what's going on in each one.

Conclusion

With the incredibly fast changing technologies evolving around the web,no system solution can be said to be definitive. New and no doubt better language and infrastructure technologies will appear even before the previous ones are tested. But this is no excuse for remaining passive. We nevertheless think that XML offers -in its present or any future form- defines a paradigm with an incredible amount of freedom and power for the design of web-based systems.


The work reported  in  this  paper  has  been  partially funded by the project  07T/0015/1997 of  the  Spanish CAM.   We   wish   to   acknowledge   fruitful discussions with our colleagues Vicente Luque Centeno, Peter T.Breuer, Natividad  Martínez, Luis  Sánchez and Salvador López M. of the  Universidad Carlos III de Madrid. 


Bibliography


Tim Bray, Jean Paoli, and C. M. Sperberg-McQueen (eds): XML: Extensible Markup Language (XML) 1.0,
W3C Recommendation, 10-Feb-1998, http://www.w3.org/TR/REC-xml

James Clark, Stephen Deach, Extensible Stylesheet Language (XSL), W3C Working Draft, 16-Dic-1998,
http://www.w3.org/TR/WD-xsl

MHEG Centre. http://www.mhegcentre.com

I. Ali and J.L. Ganuza, Internet en la Educación, Anaya Multimedia (1997)

C.Bastos, El Collage Multimedia, Actas IV Jornadas Informáticas(1998)

A. García-Valcarcel, F.J. Tejedor, J.L. Rodríguez (Coord.), Perspectivas de las nuevas tecnologías en la educación (1996)

R. Peña, La educación en Internet: guía para su aplicación práctica en la enseñanza (1997)

R. Steinmetz, k. Nahrstedt, Multimedia: Computing, Communications and Applications (1995)

The Style Manual Yale University http://info.med.yale.edu/caim/manual/contents.html
 

Ir a la página anterior