Creation and Evaluation of Educational Tools for E-Learning Based on Videomodels

—We describe the design of a web platform supporting virtual experiments in electronics or electrics. The underlying methodology for the experiments are the video-models. These models represent a 3D visualization of electronic and electrical circuits. From an earlier initiative, it was known that interactivity and documentation are very important issues. We show how the latest features from HTML5 are used to increase the interactivity and include several balloons, instruction videos, and guided exercises on the platform. In a second phase, we tested the platform with two groups of students, being students with and without earlier experience in videomodels. The overall results in both groups were very positive and presented an enormous improvement on efficiency and clearness, compared to a previous attempt.


INTRODUCTION
Electric and electronic circuits contain many abstract concepts like voltage and current in inductors and capacitors. Understanding the behavior and interactions of these fundamental variables requires thorough insight. In practice, these variables should be measured with meters and oscilloscopes. An extra difficulty comes from the high dimensionality and dynamics of the circuits. Therefore, simulations offer a perfect way to demonstrate the behavior of power electronic circuits. By providing these simulations on the web, students can practice at any time, any place, and at their own pace. Moreover, modern multimedia with lots of interactivity is much more motivating for students [1]. On the other hand, the teachers are able to guide and to follow-up the student's activity in a more automatic way.
In this paper, we describe the web platform we have developed in order to offer an e-learning approach based on the methodology of videomodels [2]. This unique 3D model for visualizing an electronic or electric circuit is very powerful and allows a much higher quality of information compared to other existing 2D models in literature [3]- [8]. Our implementation improves a previous attempt from [9], by taking into account the provided feedback. We want to stress that the platform is only an additional tool for an existing standard course on electronics. In these courses, the students are confronted with a lot of different, sometimes complicated, circuits. Being able to design and explain these circuits is one of the main learning objectives in existing theoretical electronics courses. The platform tries to improve the understanding of these circuits, with the methodology of videomodels. The goal of the environment was to find the most elegant way for the representation of these videomodels with a new technology, being HTML5. In a second phase, we thoroughly evaluated the model by 2 groups of students, one with background in the use of videomodels and the other group not. This resulted in the first place in an evaluation of the impact of the proposed improvements since the tested group in [9] also did have no background in videomodels. Secondly, we also learned about the difference in acceptance between a familiar and non-familiar audience. This allows us to estimate the possibility of using videomodels as a stand-alone e-learning system.
The paper is organized as follows. In Section II, background and related work is described. Sections III and IV deal with more technical details on how the videomodels are implemented on the platform and on the expansion possibilities respectively. The evaluation of the platform is explained in Section V. We end the paper with some conclusions and suggestions for future work in Section VI.

II. BACKGROUND AND RELATED WORK
In the past, several systems offering simulations and animations in the area of electronics have been successfully proposed [3]- [8]. General remarks for most of the existing systems are that the multimedia is often ad-hoc generated, stand-alone as closed applications, only applicable for power electronics, and interactivity is implemented by means of Flash or Java. The main disadvantage with these older technologies is that an extra plug-in is required in PAPER Creation and Evaluation of Educational Tools for E-Learning Based on Videomodels order to be able to display the multimedia (often video). Moreover, since this plug-in is not HTML-based, the video cannot be manipulated by means of Javascript. Consequently, another programming language is required, which is not necessarily supported by any browser. In our platform, we utilize several functionalities of HTML5 in order to overcome these problems.
The 3D visualization methodology was developed in 2002 by Gueuning [2]. The aim was to visualize electric and electronic circuits faster and more efficient by 3D images (or videos) showing the evolution of voltage and streams in a quantitative way. The models contain lots of information, making them suitable for beginners and experts. It is the only system that allows to understand all the basic parameters of a circuit by a quick observation. In [9], a first attempt was made to develop a web interface for the technology of videomodels. After evaluation of the interface by students, two important shortcomings were notified. In the first place, extensive and user-friendly available documentation should be provided. Since the model utilizes unique representations and conventions for all the parameters in the system, it requires some time to get used to. Instead of referring to a separate pdf file with all the background information hidden behind a link as in [9], several balloons containing shorter and to-the-point explanation of a particular part of the circuit are displayed. Also instruction videos of gradual difficulty, accompanied by voice, explaining how the model is used for understanding the parameters can be consulted at any time. The second important remark was on interactivity. In [9], the video was displayed with a viewer like JWplayer, allowing only to play and pause the video. We will propose two approaches in the next section that allows the user to choose which frame of the video to display.

III. VIDEOMODELS IN THE WEBPLATFORM
The images relate to three data types: dynamic videomodels (vm), static vm's and image. A dynamic vm is a typical videomodel showing the time evolution of a circuit. A static vm is a set of images showing a circuit (usually DC) for different electrical parameter values. Finally an image type is an ordinary image like for instance the scheme of a circuit.
An image type can be put on a <canvas> or <image> element in HTML5. The canvas element is completely new in HTML5 and allows a user to edit a figure. Moreover, it is also possible to upload several images when loading a page, such that after a certain event the current image in the <canvas> element can be changed without uploading the new image. This highly increases the interactivity. It is particularly used for displaying extra information on a clear and interactive way, like in this case: help bubbles and clickable zones (setting next value of electrical parameter). On the other hand, if an image just needs to be shown, without any manipulation, the <can-vas> element is too extensive. For that purpose, the more simple <img> element of HTML5 offers already enough functionality. This element is not new in HTML5. The most important goal of the <img> element is to show the figure in such a way that it is equal in each browser. Note that we can also manipulate the figure by adapting the source for instance, allowing to display another figure.
We now explain 2 methods to visualize the dynamic vm's and the static vm's in the next paragraphs. In the first approach, the videomodels are implemented by means of (a stream of) images. In the second approach, the videomodels are implemented as a video.

A. Implementation by means of Images
A static vm is split in several layers. Each layer corresponds with an element of the model that can be adapted by the user (eg. a resistor whose value can be changed). The total number of images is the product of the number of possibilities of each layer. The current value of all these layers determines the status of the videomodel, and thus the exact image identified by its unique name.
For changing the value of a resistor, the user needs to click on the interactive area around the resistor. Then, the name of the new image will be calculated and the new image will replace the older one. This method results in a very high responsiveness without needing to recalculate sophisticated 3d data. However, the main disadvantage is the size of the videomodels, all the images must be loaded before the user can study the model. Taking into account that some videomodels contain 5 (or more) layers with each 25 images, this results in a download of more than 10 Mbytes. For users that want to experiment with the platform on mobile devices, this approach is not satisfactory and therefore we also considered an implementation of the videomodel by means of a video.

B. Implementation by means of Video
A video with 100 frames will only have a size of several megabytes. By placing all the images in series and by coding the result with one of the well-known codecs (mp4, webm,…), we are able to reduce the size of the images (and thus the upload time of the webpage) with a factor of 50.
In a first implementation, when the user was activating a button, we have put a break in the video and calculated the time where the next image could be found. Since the different images of the video first need to be decoded, this method resulted in a decrease in responsiveness. Another important conclusion drawn was that it took much longer to decode the images at the end of the video compared to the beginning. This follows from the fact that the different frames of the video are saved by means of the difference of the previous frame. Consequently, in order to decode a frame, first all previous frames should be decoded.
For the static vm, this approach is not a major problem since the user waits, in general, after one click some time before clicking again. As a consequence, the browser has enough time to decode the image. However, for videomodels that are constantly moving, this approach leads to serious problems. Assume a dynamic vm with 25 images (according time) combined with a layer of 5 different frequencies. It results in a video of 125 images. To display the circuit behavior at one of the 5 frequencies, the video loops on 25 images. Due to the time required for decoding the models, the videomodels were not fluently displayed anymore. Even, when reaching the end, several images were missed (and not displayed), because it took too long to decode.
Consequently, for the dynamic vm type, a second approach is developed making use of the standard play() method of HTML5 and based on two superimposed video players. When a player reaches the last image of the loop, it is hidden and the other runs from the first image of that iJEP -Volume 4, Issue 4, 2014 PAPER Creation and Evaluation of Educational Tools for E-Learning Based on Videomodels loop. Consequently, the latency time to rewind is masked by the other player ready to run.

IV. SCALABILITY OF THE WEBPLATFORM
Scalability is a very important issue, since we want to reach a large audience with the webplatform, Therefore, it is important that data concerning explanations, new circuits, … can be easily stored, created, adapted and used. Instead of using databases, we have chosen to work with XML due to its user friendliness and readability.
To add a new page 3 kinds of information are needed: • First a new videomodel simulating the new circuit should be created. This is realized in 3 main steps: o SPICE simulation to know electrical quantities o 2d schematic specifying objects disposal (components, curves, text, ...) o From data of the 2 previous points a MATLAB program, developed at ECAM, computes the videomodel. It also generates an XML file containing all the information associated to this videomodel, like layers data (position of clickable zones, values of components and corresponding image position inside video). • Secondly, the text presenting the circuit must be written in an xhtml file and organized in different standard parts. • Finally, this text must be translated in the 2 other languages.
Each page is associated to one level of students. The students of the first year have only access to the pages dedicated to the first year, the students of the second year have access to pages of the first and second year, etc. The hierarchical structure of levels is defined in an xml file and it is easy to add new levels.
In addition, a developer can easily add functionalities to the platform by generating the required JavaScript programs and placing them on the server.
The platform also offers the possibility to make exercises. By doing so, the user can check his understanding of the corresponding theory. These exercises can be, like the other pages, very easily extended.
Finally, the web platform is build following a modular and logical structure. In the root map, the most important files can be found, for instance the circuit.php file describing the entrance for the users. Next to the root map, there is a map containing all information related to display the videomodel for a given circuit. Another map contains all the information describing exactly one electronic component instead of a whole circuit. There is also a map that contains all videos used to describe the videomodels. Finally there is a map with all javascript files, a map with css files, and a map with the icons used on the site. Moreover, the platform supports currently three languages, being French, Dutch and English.

V. EVALUATION
In order to evaluate the platform we organized a survey among 2 groups of students. The first group consisted of 47 students of ECAM, merely second year engineering students. These students have already experienced the videomodels during the courses Electronics in the first and second year. The second group consisted of 31 students from EHB, also from the second year of engineering but without earlier contact with the models. The questions of the survey were very similar to the ones from [9], in order to get an idea on the impact of the changes executed on the platform. The answers are on a scale from 1 to 5, corresponding to the degree of acceptance going from totally not to totally well. Before we describe the results of the survey, we first summarize the most important changes on the platform, compared to [9].

A. Improvements Compared to Previous Attempt
The first group of improvements was related to the observation that the documentation was not sufficient. Therefore, the following additions were made • The space on the interface reserved for displaying the videomodel is much larger. to the lack of interactivity that was reported in [9]. • A specific frame in the videomodels can be selected at any time. • A calculator, usable on every page in the platform, was included such that calculations can be easily performed within the same interface. • In some cases, choice between several values for a few components.

B. Results of the Survey
The first question checks the efficiency of the platform by asking if the multimedia results in a better understanding of the electric and electronic concepts. Only 2% of ECAM students and 9% of EHB students do not agree with this statement. In [9], this group was much larger, being 21%. Consequently, we notice an enormous improvement while the multimedia is not changed, only the way of representation.
Most of the students (88% ECAM, 75% EHB) support a further implementation of the platform and consider it as a valuable addition to the course material. However, we notice a different level of acceptance between the 2 groups. While the majority of ECAM students answer very positive, the majority of EHB students give a more neutral (although positive) feedback.
Another question is related to the clearness of the videomodels. Here 81% of ECAM and 78% of EHB students agree on the statement that the visualization is correct and clear. This is an enormous improvement, compared with the 28% of the previous survey from [9]. We believe that the interactivity options in the videomodels have played an important role in achieving this.
The next question is concerning the documentation of background information on the videomodels. From the PAPER Creation and Evaluation of Educational Tools for E-Learning Based on Videomodels survey, we conclude that 71% of ECAM students and 68% of EHB students find that the extra information is sufficient for understanding the full functionality. Again, compared with 18% from [9], this is a fabulous improvement. Consequently, the additions related to documentation (balloons, instruction videos) have had a very positive impact.
With the following question, we try to find out if the concept of videomodels is easy to understand. This is an important question since it allows us to evaluate the possibility of using videomodels as a stand-alone e-learning tool. It is remarkable that this is the first question where the percentage of acceptance is higher with the nonfamiliar group EHB than the familiar group ECAM, being 78% compared to 77%. Moreover, also the group that does not support the statement is smaller 6% at EHB, compared to 9% at ECAM. Again, the same rate of improvement with [9], being 25%, can be recorded.
Finally, we also try to figure out the satisfaction related to reaction speed of the simulations. Here 87% of ECAM and 71% of EHB students report to be satisfied with the degree of responsiveness. The most negative results were obtained when older versions of the Internet Explorer browser were used. Also Internet Explorer scores worse than older versions of Firefox, Safari, Chrome, and Opera. The best results were obtained with the newest versions of Safari, Chrome, and Opera. Since only 24% of the students in [9] were positive on this point, it is clear that the new solutions we offered for displaying a movie have resulted in a strong increase of satisfaction.

C. Conclusions from Survey
From the survey, we can conclude that the majority of the participants were very satisfied with the platform. The students, that completed the survey in [9], were originally not very convinced of the web interface of the videomodels. The model turned out to be only useful in classroom, with a guided explanation of a teacher. From the current survey, we observe much more positive reactions and conclude that the proposed adaptations have had a positive impact.
It is important to mention that the students from EHB are clearly less positive over the platform than students from ECAM. This is very likely due to the difference in experience level between the two groups. The fact that students of EHB had to put more time and energy in understanding the videomodels, can also explain why they answered more neutral in many questions, compared to the ECAM students.

VI. CONCLUSIONS AND FUTURE WORK
We have developed a system that students can use to better understand the principles and circuits they learned in electronics or electricity classes. The online learning environment is not seen as a stand-alone course, but must be considered as an additional tool in helping the students to understand the concepts. It contains of several circuits, seen as most relevant, related to each topic. Thanks to the dynamic visualization of the theoretical concepts, students are able to better understand the theory, taught in existing electronics classes.
In this paper we have shown how changes to interactivity and documentation can completely change the perception and effectiveness of a web interface supporting videomodels. Moreover, from our survey, it turns out that the videomodels methodology for explaining electrical and electronic circuits can be used in an e-learning system without supporting classroom courses.
From the content side, it is still very important to add extra circuits. Currently, only the easiest, but most fundamental principles are described. The plan is to let students develop a first version of a circuit with corresponding guidance and exercises as part of the course Electronics. After thorough revision, this can be included on the website.
From the technical side, an extension, which enables its use in combination with other e-learning platforms that keep track of progress (like Dokeos, Blackboard…), would be very useful. This would require to adapt the exercises for instance such that the other platform is aware of the status and results of the exercises. This communication should satisfy the SCORM standards.