Development, Implementation, Assessment of a Web-based Circuit Solver for Teaching Basic Electrical Circuits Theory

—In this paper, an interactive web-based circuit simulator tool (CirSim) is presented to enhance students learning skills and assist them to grasp the basic concepts of the preliminary electrical engineering courses by providing innovative methods for interactive teaching and testing. The project aims to achieve the following goals: 1) Develop enhanced problem solving skills using the internet as a portable platform for the education environment. 2) Develop design skills and sharpen critical thinking. 3) Develop global and comprehensive teaching circuit tools which can be adopted nationally for educational purposes. Students can use the online circuit simulator to carry out circuit simulation on the web and access it virtually from any place. The proposed simulator provides a user friendly graphical user interface (GUI) which has the capability to allow students to conduct DC and AC circuit simulation analysis and provide the option to plot the circuit responses graphically. Finally, a preliminary study has been done on a group of students to show the effectiveness of the e-learning using the proposed web-based circuit solver on the achievement of students. The results show a great feedback from students and improved performance in learning the basic electrical engineering concepts.


I. INTRODUCTION
BECAUSE of the recent advances in technology in terms of technical delivery capabilities and cost, the role of technology in education has never been greater. The internet has been utilized as the ideal medium to create platforms for students to use for its wide availability. Repeated studies have shown that often students in engineering core courses find difficulty in grasping the basic concepts because they simply "don't see it". Moreover, engineering students lack the skills necessary to carry out creative design based on the critical thinking process. In the engineering education process, a number of core classes prove to be critical in determining the success of students. These classes are typically the transition engineering courses, where successful understanding of the material affects the student performance during the remaining period of the academic program.
Teaching engineering design-based courses are a daunting challenge for engineering faculty. As a result, there is a pressing need for developing an original webbased multi-media learning environment supported by innovative and effective educational methodology to improve undergraduate and graduate engineering curriculum.
Over the last ten years, several national efforts have been initiated to develop multi-media and web-based educational material. Most of these efforts focused on developing graphical user interfaces (GUIs) for the purpose of "display", but with limited interactivity. Based on our research, none of today's web-based educational tools allow students to perform a generalized and real time simulation of engineering problems in the interactive webbased instructional environment. For example, some of the web-based simulation sites are predefined and only limited to specific engineering design examples. Moreover, most of the web-based engineering courses are used to display specific engineering problems, and students are asked to address these problems by following step by step instructions. Our proposed work aims to build an online interactive learning material which provides the student with a full capability graphical user interface that is easy to use and efficient to access remotely to conduct any DC and AC circuit simulation with capability to plot the results graphically. The upcoming section discusses the importance of E-Learning in education. Section III presents the need of E-learning for engineering education and industry. A novel circuit simulator is presented in section IV. Students' assessments and evaluations are discussed in section V, and finally, conclusions and future directions are given in section VI.
II. E-LEARNING: IMPORTANCE AND TOOLS E-Learning, currently considered as an important learning tool, has been adopted by many institutions all over the world. It has been developed by many internet programming technologies such as JAVA. By adopting E-Learning, many courses are taught remotely by providing innovative and interactive web-based learning packages where students can exercise skills and knowledge over time and space. Nowadays E-Learning tools are used in many study fields, such as engineering design-based courses, which are considered as a challenge field for E-Learning developers.
Many E-learning tools have been developed with interactive and innovative functionalities that facilitate both learning and teaching processes. These types of tools give the students keen interest in their courses by PAPER DEVELOPMENT, IMPLEMENTATION, ASSESSMENT OF A WEB-BASED CIRCUIT SOLVER FOR TEACHING BASIC ELECTR… providing new learning methodologies that give the students more perception and a better understanding of their classes. Video and audio conferencing, online chatting, and email services are examples of online interactive services provided by these tools. E-Learning has recently shown an explosive growth in the industry. Learning solutions that incorporate the full range of technologies with human instructor will be around for the foreseeable future. As assistant aids for developing E-Learning, people may access the internet via alternative technologies such as interactive TV, WAP phones, PDA's and Palms. e-Books also open up opportunities for what is called mobile or m-learning. In spite of the success that has been achieved by the E-Learning industry, it has an incredible shortage of E-Learning development skills. The sector has grown exponentially and is crying out for professionals who understand internet technology as well as education, training and developing.

III. THE NEED OF E-LEARNING IN ENGINEERING
Engineering is a methodology of problem solving, where focusing on mere knowledge is not sufficient. Design and critical thinking skills are more important in engineering.
Teaching engineering courses nowadays has the daunting challenge to grasp the basic concepts, get better understanding, and sharpen the critical thinking of the design and analysis issues. Statistics, Dynamics, Principles of Electrical Engineering, and Probability are such examples of transition engineering courses which are common to almost all the engineering programs within the United States, and they are considered to be high attrition courses due to the complexity of the materials. Because these critical courses affect the success of the academic engineering program, there are pressing needs for new innovative teaching/learning methodologies.
Electrical Engineering principle courses are considered specifically as preliminary courses for EE students. These courses contain the main basics and concepts for electrical engineering circuits. The nature of the course material needs innovative learning/teaching skills to grasp and understand the basic concepts. The most challenging aspect of presenting this material on the internet is that it is quite technical with many mathematical equations that are hard to visualize. Unfortunately, HTML does not yet support mathematical expression tags, therefore equations were presented by means of small graphics files (GIFS). Pictures of circuits or graphs of voltages to circuit relations etc. were usually JPEG (progressively encoded) images. The use of GIF and JPEG images slows the download time of the web pages, but the required overall time is still acceptable. As a result, there is a pressing need for developing an original web-based multi-media learning environment supported by innovative and effective educational methodology to improve undergraduate and graduate engineering curriculum and present the course material in an interesting and interactive way. Thus, E-Learning tools have more promise for engineering classes, which enhances, and sharpens the way of critical thinking and design skills of the engineering classes.

IV. THE PROPOSED ONLINE CIRCUIT SIMULATOR
The circuit simulator is a fully operational online package. The client applet in this application provides the user with an online graphical computer-aided interface to construct an electrical circuit schematic. Once a circuit schematic is defined, the circuit information will be submitted to a remote server over the internet for evaluation by a commercial software tool such as PSPICE that resides on the server. The evaluation results, which are in data file format, are returned back to the user and displayed on the local computer.

A. System Overview
The online software package is a web-based client/server system architecture as shown in Fig 1. The client side provides the user with an interactive and innovative graphical user interface (GUI) that runs inside the browser to build and design any circuit problem. The user can draw the circuit schematically with capability to drag/drop components, edit and rotate components, make connections, etc. The client application program, which is attached to the GUI to make it a more powerful and interactive interface, has two main run-time services: the simulation service and the file management service. The first service has another counterpart at the server side that is responsible for generating the Netlist file and parsing it to the proper ".cir" PSPICE format. The second service provides the user with all the file management tools needed to access either the local schematic files or the remote server files.
The client communicates to the server through the network. Meanwhile, the server is running the server application program that has two main services: the simulation service and the file management service. The first service, which cooperates side by side with the client simulation service, does the actual simulation by invoking a third party application (PSPICE) that provides the system with the actual circuit analysis and results. After finishing the simulation, the evaluation results will be fed back to the client for display. The second service is designated to manage the files on the server with cooperation from the client file management service. This service provides the user with several file management actions such as "open," "save," "delete," "mkDir" and "rmDir", etc.

B. System Architecture
The online software material has two main software packages, which are mutually interacted as a client/server application: the front-end client software package and the background server software package. An overview of the high-level architecture is shown in Fig 2. PAPER DEVELOPMENT, IMPLEMENTATION, ASSESSMENT OF A WEB-BASED CIRCUIT SOLVER FOR TEACHING BASIC ELECTR…

1) The Front-End Client Software package
The front-end client software package has two main applications: the front-end GUI and the client application. a) The front-end GUI provides the user with all the capabilities and features to build a circuit such as drag/drop, edit, rotate components, make line connections, etc. b) The client application runs two main services: the circuit simulation and evaluation service, and the file management service. ! The circuit simulation and evaluation service can save, restore the binary data of the schematic at the local memory, and send it over the network to run the simulation. ! The file management service manipulates all the file management actions by accessing the schematic files either locally at the client or remotely at the server.

2) The Background Server Software package
The background server software package is running at the background of the whole online package. It consists of two main applications: the server application and the third party simulation package. a) The server application consists of two main services: the circuit simulation and evaluation service, and the file management service. ! The circuit simulation and evaluation service consists of two main parts: the Netlist parser and the third party interface. ! The Netlist parser collects its information from a well-structured object hierarchy residing in memory, translates it into CirML format and conversely converts it back into object hierarchy in memory, for which the GUI uses it to display the described circuit. ! The third party interface cooperates side by side with the client simulation service. It runs the actual simulation process by invoking the third party simulation program (PSPICE). When the simulation is finished, the results are returned back to the client for display. ! The file management service deals with all the file management actions on the schematic files for both client and server.

b) The third party simulation package
The third party package (PSPICE), which resides on the server, does the actual simulation and generates the simulation output files.

C. System Specifications a) Description of the Grid and Tools of the GUI
The complete GUI Applet is shown below in Fig. 3. The GUI is designed to be user friendly, easy to identify and select circuit components, and drag and drop them on the drawing area. The GUI interface has the following components: panels, toolbars, menubar, popup menus, dialogs and popup messages as described in the following section. ! GUI Panels ! Drawing Area Panel The drawing area panel is a grid plane located on the left side of the GUI window, on which the user can construct and edit electronic circuits. In this panel, all circuits' values, names, and connections can be displayed. The panel provides the ability to edit the components attributes by the user input window for each type of components.

! Drawing Tools Panel
The drawing tools panel has four action buttons, which are designated to display the following circuit components groups: the passive components group (Resistor, Capacitor, Inductor and Transformers), the independent sources group (DC Voltage Source, DC Current Source, AC Voltage Source and AC Current Source), the dependent sources group (Voltage Controlled Voltage Source (VCVS), Voltage Controlled Current Source (VCCS), Current Controlled Voltage Source (CCVS) and Current Controlled Current Source (CCCS)) and the connections group ( line, point, ground, voltage marker and current marker).

! File Management Tools Panel
The file management tools panel has five action buttons, which are designated to manage the schematic files either locally at the client or remotely at the server. The first button is "New Schematic Page," which creates new schematic pages, where five pages are the maximum number for each workplace. The second button is "Open Schematic Page," which loads the local schematic file and displays it on the drawing area panel. The third button is the "Save Schematic Page," which saves the current schematic page at the local client as ".sch" file.

PAPER DEVELOPMENT, IMPLEMENTATION, ASSESSMENT OF A WEB-BASED CIRCUIT SOLVER FOR TEACHING BASIC ELECTR…
The forth button is "Delete Schematic Page," which deletes the current schematic page from the workplace. The final button is "File Manager," which displays the file management window that has different action buttons to deal with the schematic files at the server.

! Simulation Tools Panel
The simulation tools panel has four action buttons: the first is "Edit Netlist," which displays a Netlist text editor to write the circuit Netlist as text entry. The second action is "Create Netlist," which generates the Netlist for the current schematic page. The third action is "Simulation Settings," which shows the simulation settings window to edit the simulation parameters. The final action is "Simulate," which invokes the simulation service to run the simulation at the server and return back the results to the client for display.

! Simulation Results Panel
The simulation results panel displays all the text outputs generated from the simulation service such as the Netlist output, CirML output and simulation result output.

! Graphical Result Panel
The graphical result panel displays the graphical simulation results, which are invoked by the probe commands.

! GUI Toolbars
The GUI has the following toolbars: Standard Toolbar, Simulation Toolbar, Schematic Pages Toolbar, Drawing Toolbar and Visited Elements Toolbar, etc. as shown in Fig.3. Each toolbar has certain groups of actions to manipulate the schematic workspace.

! GUI Menubar
The GUI Menubar is located at the top of the GUI which has several menus such as "File," "Edit," "View" and "Help". Each menu has several GUI actions which are similar to the GUI toolbars's actions.

! GUI Popup Menus
Popup menus can be displayed by selecting either a component or a group of components and right-clicking on the grid area. Popup menus contain several actions, where some of these actions are designated for either a single component or a group of components. The last type of actions can be applied to both single and group of components. The main GUI interface has four types of popup menus: the single element popup menu, the multiple elements popup menu, the connection line popup menu and the grid area popup menu.

! GUI Dialogs and Popup Messages
GUI dialogs can be classified into the following three types: components input windows for components editing, general GUI dialogs and messages, and drawing area popup messages such as error and warning messages.
A connection line can be drawn by simply clicking on the connection line image button from the connections elements panel. The starting point of the line is determined when the mouse is pressed on the grid. Then the mouse is dragged to where the desired end point is located. The connection line can be resized by selecting the line first and then dragging the line from the end points. The connection line can be moved by selecting the line and dragging it at any point located on the line except the end points. Connection lines can be split at the intersection point to make it electrically connected.
The drawing area can be zoomed in or zoomed out in two ways. The first is to right-click on the drawing area and then choose either the "Zoom In" or "Zoom Out" actions from the grid popup menu. The second is to use "Zoom In," "Fit Zoom" and "Zoom Out" actions from the canvas toolbar. The drawing area can be scrolled horizontally and vertically by either choosing the horizontal and vertical scrolling bars of the grid or selecting the "Scroll Hand" action from the canvas toolbar to do the same function. The "Go To" action which can be chosen from the canvas toolbar or from the displayed grid popup menu will move the current page position to the desired location by changing the x and y positions of the drawing area starting point. The drawing area can also be resized and the fill and line color of the grid area can be changed by choosing the "Canvas Colors" and "Canvas Size" actions from the canvas toolbar. The "Canvas PAPER DEVELOPMENT, IMPLEMENTATION, ASSESSMENT OF A WEB-BASED CIRCUIT SOLVER FOR TEACHING BASIC ELECTR… Properties" dialog will be displayed to edit the canvas settings.
The GUI gives the user several powerful tools to manipulate the simulation process of the schematic. Netlist can be edited manually using either the "Edit Netlist" action from the simulation toolbar or the "Edit Netlist" action button from the simulation tools panel. Netlist can be generated from the current drawing schematic by using either the "Create Netlist" action from the simulation toolbar or the "Create Netlist" action button from the simulation tools panel. The simulation can be run by using either the "Run" action from the simulation toolbar or the "Simulate" action from the simulation tools panel. Simulation settings can be edited using either the "Simulation Settings" action from the simulation toolbar or the "Simulation Settings" action button from the simulation tools panel. Nodes Net Names, Nodes Voltages and Nodes Currents can be shown by using the "Display Netlist Nodes," "Display Voltages," or "Display Currents" actions from the simulation toolbar respectively. Voltage Marker, Voltage Differential Marker and Current Marker can be chosen from either the connections elements panel or the markers actions from the simulation toolbar. The simulation output result and CirML result can be displayed respectively using the "Display Output Result," and the "Display CirML Result" actions from the simulation toolbar.
Several actions can be applied on the schematic pages. A new page can be created by choosing either the "New Schematic Page" action from the standard toolbar or the "New Schematic" action button from the file manager tools panel. The current schematic page can be saved as a ".sch" file from the local client by choosing either the "Save Schematic Page" action from the standard toolbar or the "Save Schematic" option from the file manager tools panel. A schematic file can be loaded to the current schematic page by either choosing the "Load Schematic Page" action from the standard toolbar or the "Open Schematic" action button from the file manager tools panel. A current schematic can be deleted from the workspace by choosing either the "Delete Current Page" action from the standard toolbar or the "Delete Schematic" action button from the file manager tools panel. The Server File Manager can be accessed by choosing the "Server File Manager" action button from the file manager tools panel which provides the user with all the file management tools to manipulate the remote schematic files at the server. Schematic pages can also be explored by choosing either the "Last Forward," "Forward," "Backward," or "Last "Backward" actions from the standard toolbar or the page number action from the schematic pages toolbar.

c) Circuit Construction
The user can construct a circuit schematic by choosing from the components on the right side of the GUI and clicking them on the grid. The user can also connect between the components using lines and connections. The GUI interface has facilities and options to build and modify a circuit at the workspace in an easy and efficient way. Fig. 4 shows an example of a three-loop circuit which has been constructed. The small resistor window shows how values are entered.

d) Netlist Generation
Generating the Netlist has two main steps: the first step is checking the circuit connections and notifying the user for any error in the constructed schematic, such as empty schematic, short circuit loops, floating nodes, ground does not exist, dependent controllers doesn't exist, etc. The second step is to create the Netlist which includes two phases: the network optimization, and nodes assignment. In the network optimization phase, all the connection lines which are electrically connected must be reduced to an identified net name, In the nodes assignment phase, all components are traversed to assign a net name for each component's node, if there are two nodes connected by a connection line, they should have the same net name. The generated network of nodes and components is described as a preliminary step to parse the output netlist to the CirML format which is accepted by PSPICE as an input simulation file. The Netlist generation steps are shown in Fig. 5.

e) PSPICE Simulation
After the user creates the circuit schematic at the drawing grid area, he can examine the Netlist generated from the circuit, and run the simulation which submits the circuit information that resides in the local memory as a binary format to the server by parsing and transferring the circuit information over the network in a Circuit Mark-up language (CirML) format. After that, the third party commercial software which resides on the server runs the simulation and the simulation results are sent back over the network by the server program to be shown in the client window. The parser does all the conversions needed between the binary format and CirML format.  To show the effectiveness of the online circuit solver tool (CirSim), we brought two groups as control study groups. Each group consists of 15 students; these students are from different score levels. Five students are A level, another five students are B level, and the last five students are D level. The first group has been appointed and met with their professor to introduce them to CirSim and explain how to use it, but the other group was appointed without their knowledge about CirSim. That means they were dependent on the book only.
Sometime later, three tests were performed. The first test was about DC circuit analysis (Nodal analysis method), the second one was about the switching circuit, and the third test was about the AC circuit analysis. The groups are named and the tests are defined as shown in Table I. Results in Table II show the student achievements and demonstrate the improved performance and learning for students who studied via the CirSim tool.

VI. CONCLUSIONS AND FUTURE WORK
This paper presents a web-based electrical circuit simulator (CirSim), which provides the user with an interactive and innovative graphical user interface (GUI) to create a circuit schematic and generate a Netlist. The Netlist is parsed to generate a CirML format which is sent over the internet to the server side application. The server application will run the simulation using PSPICE and send back the simulation results to the client. Student's assessment results showed improved performance when student used the proposed circuit simulator. As future work, additional features and functionalities can be implemented to improve the current GUI, such as adding more circuit components and creating custom components libraries. The current simulation service has only DC and AC analysis options, more circuit analyses can be added to improve the GUI simulation service. We are also looking as future work to improve the simulation and evaluation service and make it a self-evaluation tool by implementing a circuit solver engine that conducts the actual simulation without the need of a third party commercial application.