A Framework of Multimedia E-Learning Design for Engineering Training

A Framework of Multimedia E-Learning Design for Engineering Training Daniela Borissova and Ivan Mustakerov Institute of Information Technologies – Bulgarian Academy of Sciences Acad. G. Bonchev St., Block 2, 1113 – Sofia, Bulgaria [email protected], [email protected]

Abstract. The paper presents a new framework approach for design and development of an interactive multimedia e-learning system for engineering training. The main goal of the paper is to encourage low cost developing of effective and customized e-learning systems for engineering training by using popular and inexpensive software tools. The proposed framework is a generalization of the authors’ experience gained in developing of a pneumoautomatics e-training system. It can be used for developing of Web-based on-line or off-line e-learning systems for students or specialists customized training. The proposed framework is illustrated by some screen snapshots and descriptions of operational algorithms. The software realization of the pneumoautomatics example is done by means of HTML and JavaScript languages and was tested and used for students training. Keywords: web-based e-learning, engineering training, multimedia, virtual simulation.

1 Introduction The advance of information and communication technologies makes e-learning the focus of the modern education society. Using of the multimedia and visualization for the learning content adds new dimensions to the traditional educational methodology [1], [2], [3], [4], [5], [6]. The multimedia technologies provide tools to realize the simulation-based learning in a computer environment, in which the learners gradually move through the features of the learned object. There exists also a need for learning platform accessible and available 24 hours a day and reduces the requirement for trainer supervision [7]. In the field of engineering training sometimes conducting the learning activities and experiments on the real objects could be destructive or even dangerous. Computer-based simulative learning can be used in such situations. There exist commercial e-learning systems for specific areas of engineering training. Most of them are quite expensive and complex and need essential efforts for learning how to exploit fully their features (see [8]) some of which are rarely needed. The current paper describes a new framework approach for low cost developing of customized Web-based multimedia e-learning system for engineering training. The proposed framework is a generalization based on the authors’ experience gained in M. Spaniol et al. (Eds.): ICWL 2009, LNCS 5686, pp. 88–97, 2009. © Springer-Verlag Berlin Heidelberg 2009

A Framework of Multimedia E-Learning Design for Engineering Training

89

developing of Web-based multimedia e-learning system for pneumoautomatics training [6]. The example of pneumoautomatics training is used to illustrate the design process by some screen snapshots, descriptions of algorithms and an excerpt of programming code. The proposed approach could be an affordable alternative for students’ education and engineering staff training. Along with relatively small costs it has the advantage to offer custom built Web-based e-learning systems that best satisfy the specific training necessities.

2 Multimedia Components and Web-Based Learning Systems Development Using of multimedia components enlivens presentation of factual information and offers many advantages compared to the traditional educational methodology when used for e-learning [9]. It enhances text only presentations by adding interesting sounds and compelling visuals, improves over traditional audio-video presentations done with slides or overhead transparencies, gains and holds attention – combination of aural and visual presentation offers greater understanding and retention of information and is great entertaining educational tool. When used for engineering training the multimedia components provide important advantages [10], [11] – faster learning time, instructional consistency, flexible delivery, implicit learning and motivation, individual learning styles, testing of learning proficiency, cost, safety and documentation of the learning process. There exist a collection of standards and specifications for Web-based e-learning (SCORM), which comes out of the Office of the United States Secretary of Defense [12], [13], [14]. The SCORM’s recommendations are used in the current paper including evaluating existing content, analyzing potential audiences, designing sharable content objects, designing aggregations and designing content structure.

3 A Framework of Multimedia e-Learning Systems Structure for Engineering Training Taking into consideration the SCORM recommendations and the specifics of the engineering learning domain, the development of an e-learning system should follow the structure of the learning process. For the engineering training some of the system development stages could be interpreted as following steps: 1) Evaluating existing content – analyzing and retrieving of the essential information about the engineering training from the existing sources – textbooks, company’s prospects, etc. 2) Analyzing of the potential audiences – engineers, students and specialists. 3) Design of the sharable contents objects (SCOs) and their aggregations – for example, defining of the basic learning elements. 4) Design content structure – using multimedia tools for basic elements descriptions, system building principles and virtual system simulation.

90

D. Borissova and I. Mustakerov

The steps 1 – 2 are easy to implement following the traditional engineering learning process. Step 3 needs to define SCOs for particular engineering applications goals and also is based on the traditional engineering training. The most essential and time consuming is step 4. For the example of multimedia engineering training the most important activities of that step are a) introduction of the basic elements, b) combining of the basic elements into engineering system and c) virtual simulation of the engineering system operation. A brief description and developing of the structure of these three learning content components in a framework of multimedia e-learning system design for pneumoautomatics engineering training are illustrated bellow. 3.1 Introduction of the Basic Engineering Components The developing of an e-learning system for engineering training usually starts with the choice of a set of basic components for particular application area that should be learned as it is shown on Fig. 1 for the example of pneumoautomatics training.

Fig. 1. Example of pneumoautomatics basic components

One of the most popular multimedia tools is computer animation. The engineering training can greatly benefit from visualizing of the engineering components operation by means of animation technique. As it is known the effect of animation is a result of rapid display of sequential still images. That means drawing of a sequence of images with certain image key areas changed accordingly to the desired movement [15]. For the chosen example a set of 8 intermediate positions are used to animate a particular pneumoautomatics component operation as shown on Fig. 2.


91

Fig. 2. Examples of components operation visualization with more intermediate stages

Using proper coloring the specifics of component operation could be expressed – air pressure, inlet and outlet air flows, etc. For example on Fig. 2, the light and dark blue colors are used to express different switching air lines. The red color is used to denote the control air flow. The red color brightness could be as information for the control air pressure – for example, dark red means high air pressure and light red means low air pressure. The component operation will be better visualized if each of the images from Fig. 2 is substituted with sequence of images to realize additional animation of the air flow movement by introducing some air bubbles. The images on Fig. 3 illustrate the substitution of the first of the drawings from Fig. 2 with six consequent frames where air bubbles positions are changed from frame to frame to get the animation effect of air flow motion. It is clear that the needed animations effects depend on the specifics of the object.

Fig. 3. Visualizing the air direction by bubbles movement

92


Fig. 4. Adding of “clickable” buttons

To improve understanding of the components operation an interaction could be implemented by adding “clickable” areas or “buttons” as shown on Fig. 4. Finally, the developed component drawings could be schematic or more realistic (3D or pseudo-3D) taking into account that the use of graphic visualization in a simulation-based learning environment requires careful consideration with different abstract reasoning abilities of the learners [6], [7]. 3.2 Combining of the Basic Elements into Engineering System The learning skills for components using into an engineering system can be multiplied also by using of multimedia simulation tools. For the chosen example of pneumoautomatics system one of the possible approaches for that is shown on Fig. 5. The different system elements could be activated by mouse “clicks” on different components “clickable” areas to change the corresponding system stage. For example, clicking in E1, E2 and E3 areas on Fig. 5a will switch the system through some intermediate stages the last of which is shown on Fig. 5b. Some details of algorithms for system operation simulation are described in section 4 bellow.

Fig. 5. Schematic pneumoautomatics system example


93

The engineering system operation could be learned by using sets of predefined system examples or by using of more sophisticated software constructions to build different system configurations. 3.3 Virtual Simulation of Engineering System Operation The presentation of the system components in 3D or pseudo-3D will improve the visualizing of the system operation. For example, drawings on Fig. 5 could be transformed into more realistic pseudo-3D virtual presentation as shown on Fig. 6.

Fig. 6. Pseudo-3D presentation of virtual system example

The initial stage of the system is shown on Fig. 6a. The operational stage of the system represented on Fig. 6b is visualized by different colors of the air flow – light blue for atmospheric air pressure, different brightness of blue for different air pressure and red for control feedback. Sounds can be used to make the components actions more realistic. Some voice remarks and advices can also be triggered to explain some operational situations. Pop-up images and hypertext links can give additional information about the components. It is important to make the simulation as real in details as it is possible for achieving the learning goals. For example, if some components gauges are visualized they should represent the expected readings as it is shown on Fig. 6a – no pressure manometer reading and on Fig. 6b – eight bars pressure reading.

4 Software Realization of Virtual System Example for Engineering e-Training The generalized algorithm for software realization of the described framework for design of an engineering e-learning system could be described as follows: Step 1: Defining of ALL possible system states including fault states. Step 2: Developing of drawings for ALL system states defined on Step 1. Step 3: Defining the operational algorithm/s of the system. Step 4: Software realization of operational algorithm/s from Step 3.

94


Step 5: Test of the software realization. If testing is successful goto Step 6, else goto Step 1 or Step 2 or Step 3 and Step 4 accordingly to the testing results. Step 6: End. The drawings for different system states (Step 2) correspond to the chosen type of visualization – schematic (Fig. 5), 3D or pseudo 3D – Fig. 6. All system components actions are interactive assessable by including “clickable” areas to simulate the components activating. The second important stage in software realization of the engineering e-learning system is developing of the operational algorithm/s of the system with basic steps as: Step 1: Visualize the initial system stage (Fig. 5a, 6a) Step 2: Wait for user action – “click” on system activating areas. Step 3: Change the system state by animation technique – rapid replacing of the system drawing correspondingly to the specific system operation. For example, if the system is in its initial stage (Fig. 5a, 6a) and user “clicks” consequently on components activating areas E1, E2 and E3 the system changes to the intermediate state shown on Fig. 5b or Fig. 6b which in its turn is unstable and system automatically goes to the stable state shown on Fig. 7a or Fig. 7b respectively and waits for user action, i.e. – goto step 2.

Fig. 7. Example of system operational stage

Web browser is accessible and free environment that can be used for realization of the engineering system virtual simulation. The popular programming languages for the browser environment as HTML and JavaScript could be used for software realization of the proposed framework. The practice shows that vast majority of students especially those from engineering profiles have enough Web programming skills and are capable of using HTML, JavaScript and presumably other programming languages and software tools as well. For the most of the engineering lecturers the computer and programming literacy is also an advisable requirement. Participation of the students and lecturers in the programming could keep programming costs sufficiently low. That approach will also give the possibility for easy modification and maintenance of the e-learning system.


95

If that is not possible, the programming costs will be commensurable with the costs for developing and maintenance of any similar types of software systems. The excerpt of the JavaScript code used to simulate the system operation by implementation of animation effects in the pneumoautomatics example is shown bellow: function Action0(simg,button) { var speed1; b=button; //“clickable” buttons (areas E1,E2,E3,etc.) action=false; clearTimeout(t1); switch(simg) { case 0: if(b==2) {changeImage0(8);} else if(b==3){changeImage0(9);t1=setTimeout("gotoImg0(0)",30 0);} else if(b==4) {changeImage0(10);} else if(b==5) {changeImage0(0); gotoStep0(0);} break; case 1: if(b==2) {changeImage0(2); gotoStep0(2);} elseif(b==3) {changeImage0(11);t1=setTimeout("gotoImg0(1)",300);} else if(b==4) {changeImage0(12);} break; case 3: if(b==2) {changeImage0(12);} break; case 4: if(b==2) {cycleRight0(4,7);speed1=speed+speed+speed+5; t1=setTimeout("gotoImg0(1)",speed1);} break; case 2: case 7: if(b==2) {changeImage0(1); gotoStep0(1);} else if(b==3) {cycleRight0(3,7);} else if(b==4) {cycleRight0(4,7);} break; case 6: if(b==2) {changeImage0(1); gotoStep0(1);} else if(b==3) {cycleRight0(3,7);} else if(b==4) {cycleRight0(4,7);} break; case 8: if(b==2) {changeImage0(0); gotoStep0(0);} else if(b==3) {changeImage0(14);t1=setTimeout("gotoImg0(8)",300);} if(b==4) {changeImage0(15); } break;

96


case 10: if(b==2) {changeImage0(15); } elseif(b==3) {changeImage0(16);t1=setTimeout("gotoImg0(10)",300);} else if(b==5) {changeImage0(0); gotoStep0(0);} break; case 12: if(b==2) {cycleRight0(4,7); } else if(b==3){changeImage0(13);t1=setTimeout("gotoImg0(12)", 300);} else if(b==5) {changeImage0(1); gotoStep0(1);} break; case 15: if(b==2) {changeImage0(10); } elseif(b==3) {changeImage0(17);t1=setTimeout("gotoImg0(15)",300);} else if(b==5) {changeImage0(8); } break; default: break; } } Taking into account the advantages of e-learning in network environments and especially in the Internet Web environment, any programming language that has appropriate tools for software applications in those environments can be used. The popular HTML, DHTML, XML in combination with scripting languages (JavaScript, PHP, Perl, etc.) could be as adequate for the goal as using of high-level languages – Java, C++, etc. The pneumoautomatics multimedia training courseware used as an example in the current paper was developed using HTML and JavaScript by team of three members – pneumoautomatics lecturer, a programmer and a drawing designer and was successfully tested for students training [16].

5 Conclusions The motivation of the paper was to encourage low cost developing of multimedia elearning systems for engineering training by using popular and inexpensive software tools. The paper presents a new framework approach for developing of customized courseware for engineering training. The described framework is a generalization of authors’ experience gained in developing of Web-based multimedia e-learning system for pneumoautomatics training used to illustrate the design process. It was realized by means of HTML and JavaScript languages and was tested and used for students’ education. The test results show that the developed Web-based multimedia e-learning system has been well received by students and lecturers. The simulative computer training increases the students’ attention and learning content retention. Sometimes the interactive communication with the simulated pneumoautomatics system was accepted as a computer game provoking exploring (and learning) of all possible and


97

impossible system states. By summarizing the test results it can be concluded that type of multimedia e-learning is effective and well tuned to the learning needs. The described framework can be used for developing of Web-based on-line or off-line engineering e-learning or e-training systems and could be an affordable alternative to the existing complex and expensive e-learning systems for engineering training. Acknowledgments. The work is supported by the European Social Fund and Bulgarian Ministry of Education and Science under the Operation Programme “Human Resources Development”, Grant BG051PO001/07/3.3-02/7.

References 1. Kong, W., Ge, L., Luo, J.: Process Control Model in Web-Based e-Learning. In: Liu, W., Li, Q., Lau, R. (eds.) ICWL 2006. LNCS, vol. 4181, pp. 276–289. Springer, Heidelberg (2006) 2. Esparragoza, I.E.: Multimedia tutorials to improve visualization skills in engineering. In: Proc. 2nd Latin American and Caribbean Conf. for Eng. and Techn., Miami, FL, June 2-4 (2004) 3. Juarez-Espinosa, O., Hendrickson, C., Garrett, J.: Using visualization for teaching. In: Proc. of SPIE, The International Society for Optical Engineering, vol. 3960, pp. 86–95 (2000) 4. Lowrie, T.: The influence of visual and spatial reasoning in interpreting simulated 3D worlds. Int. Journal of Computers for Mathematical Learning 7(3), 301–318 (2002) 5. Chang, K.-E., Chen, Y.-L., Lin, H.-Y., Sung, Y.-T.: Effects of learning support in simulation-based physics learning. Computers & Education 51, 1486–1498 (2008) 6. Stoyanov, B., Mustakerov, I., Borissova, D.: A multimedia computer methodology in pneumoautomatics education. Cybernetics and Information Technologies 6(2), 63–69 (2006) 7. Norton, C., Cameron, I., Crosthwaite, C., Balliu, N., Tade, M., Shallcross, D., Hoadley, A., Barton, G., Kavanagh, J.: Development and deployment of an immersive learning environment for enhancing process systems engineering concepts. Education for Chemical Engineers (2008), doi:10.1016/j.ece.2008.04.001 8. Art Systems Software GmbH, http://www.fluiddraw.de/index_e.htm 9. Educational Multimedia: A Handbook for Teacher-Developers. In: Reddi, U.V., Mishra, S. (eds.) Commonwealth Educational Media Centre for Asia (2003), ISBN: 81-88770-00-0 10. Benefits_of_Multimedia, http://www.psychiatry.unimelb.edu.au/open/ downloads/Benefits_of_Multimedia.pdf 11. Anderson, S.: Multimedia on the Internet - A course designed to study and apply the tools of multimedia on the World Wide Web, http://www.usu.edu/sanderso/multinet/multiadv.html 12. Advanced Distributed Learning Initiative, Sharable Content Object Reference Model (SCORM), http://www.adlnet.org 13. Making Sense of Learning Specifications & Standards: A Decision Maker’s Guide to their Adoption, 2nd edn. The MASIE Center (November 2003) 14. SCORM Best Practices Guide for Content Developers, Learning Systems Architecture Lab, Carnegie Mellon University, http://www.jointadlcolab.org/ downloads/scormcdg_1ed_sec7update_20050420.pdf 15. Hodgins, J.K., O’Brien, J.F.: Computer Animation, http://www.eecs.berkeley.edu/~job/Papers/hodgins-2000-CA.pdf 16. PneumoDemo, http://www.iit.bas.bg/PneumoDemo/start.html