An interactive Java-based educational module in electromagnetics

International Journal of Electrical Engineering Education, Jan 2003 by Chetty, M, Hu, S, Bennett, J

The electromagnetics module

As shown in Fig. 1, the main page of the EM module is split into two frames. The smaller frame on the left contains the 'contents' of the module and is used for navigation. For example, under the Chapter 2 heading is a hyperlink to 'Coulomb's Law & Electric Field' which takes the student to the tutorial and simulation sections of this topic. Due to the 'mouse over effect' done using JavaScript, a small red arrow appears next to each hyperlink that the mouse passes over. It essentially involves loading two images, namely an 'on' image when the mouse passes over the hyperlink and an Off image otherwise. The larger frame on the right provides the 'introduction' to the module, a brief background on the purpose of the module and general advice. We next look briefly at the tutorial section before we discuss the interactive simulation and animation effect.

Tutorial section

Fig. 2 is the screen capture of one of the slides in the slideshow. The user is presented with three buttons: Forward, Back, and Reload. Each button also has an associated small audio file that starts playing whenever the button is clicked. Paint Shop Pro 6.0 has been used to design each slide.

Before taking up interactive simulation studies and implementing animation to visualize the results and/or analysis, the tutorial section can be completed to strengthen the concepts and understanding of a topic. The various topics such as Coulomb's Law and electric field, Gauss's Law, electric dipole, parallel plate capacitance, TEM transmission, etc are all supported by tutorials. As mentioned earlier, these tutorials are mainly static without any interactivity or animation. When the user clicks, for example Coulomb 's Law and Electric Field, in the left frame of the main page shown in Fig. 1, an HTML page with an embedded Java applet's class file ESlide.class is loaded. The section of the code that causes this loading is the [left angle bracket]APPLET[right angle bracket] tag shown in Fig. 3 below. As can be seen from this figure, the code attribute of the tag indicates the Java class file to load, whilst the height and width attributes specify the size of the applet on the browser screen in pixels.

The tutorial sections on other topics are similarly implemented. Next we consider the interactive simulation studies designed for two topics, namely electric dipole and field mapping. The approach is generic and hence can be easily extended to other topics without difficulty.

Interactive simulation studies for electric dipole

To have an effective educational value, an interactive simulation module in EM should contain the following features:

* present the problem in some diagrammatic form;

* prompt for initial conditions value;

* perform the computational process;

* display the results in suitable format on the browser.

By clicking a particular topic, say 'Electric dipole' in the left frame of the index page of the module (see Fig. 1), the user is provided with three options: Tutorial, Simulation and Animation in the following page (not shown). Clicking on 'Simulation' brings the user to a screenshot as shown in Fig. 4. The user is asked to enter two values, the magnitude of the dipole charge q and the distance between the charges, d. The suggested values on the side of the text boxes show the type of values that should be entered. In particular, d should be kept small for the simulated results to make sense, and to keep the problem realistic. Clicking the Reset Values button simply resets any value entered into the form's text boxes while clicking 'Simulate' starts the simulation.