a web-based educational tool of computer system and ...

IADIS International Conference Applied Computing 2007

A WEB-BASED EDUCATIONAL TOOL OF COMPUTER SYSTEM AND ITS APPLICATION TO REAL EDUCATION Yoshiro Imai *, Keiichi Kaneko** and Masaki Nakagawa** Kagawa University * , Tokyo University of Agriculture and Technology** 2217-20 Hayashi-cho Takamatsu city, Kagawa, 761-0396 JAPAN * 2-24-16 Nakacho, Koganei city, Tokyo, 184-8588 JAPAN**

ABSTRACT It is very important for people of IT-based engineering fields to understand practically how a computer works. A visual computer simulator has been developed, therefore, as a Web-based educational tool from a lecture on Computer System to an exercise for Assembly Programming. The simulator written in Java programming language can run not only as a Java applet on a Web browser but also as a stand-alone Java application on a user's PC. It can give users a graphical view of internal structure and behavior of computer. The simulator provides other facilities to realize collaborative learning by means of the following ways. It has two functions of communication support, namely, to send and receive messages between users of our simulators. One of these functions is an SMTP-based mail sender and other is a POP3-based mail receiver. With our simulator, a user can get register-transfer-level views of computer, execute assembly programs in the two kinds of simulation mode and communicate with each other directly to exchange some kind of information about Computer Literacy, Computer Architecture, Assembly Programming and so on. KEYWORDS Computer simulator, Web-based educational tool, GUI, Visualization, Built-in e-mail function, Communication support

1. INTRODUCTION Recently, an IT-based education becomes one of the most essential and valuable themes for almost all instructors and learners in many kinds of fields, especially engineering field. So it must be necessary for learners to understand computer literacy in the efficient way [1][2]. Of course, it takes relatively long time for beginners to study how a computer works. Several kinds of simulators have been designed and developed to educate computer literacy, information science and computer system as educational tools [3][4]. Using a web-based educational tool is one of the most efficient and effective approaches [5]-[8]. Many researches and projects have provided useful tools during a few years. So-called e-Learning seems to be one of the most fruitful results of education with these web-based tools. There is an important problem how to design and develop web-based educational tool suitably [3]. Visualization is an absolutely necessary keyword and idea to improve the learner’s understanding level. For example, when teachers educate their students about computer, they want to use efficient educational tools. These tools are expected to have some kind of facility concerning visualization. With such tools, many students will understand computer in a shorter period than the case without using visualization tool [6]. The second but not least significant keyword is communication-support. Learners sometimes want to communicate with instructors and instructors want transmit some kind of information to their learners. It is also important how to realize a facility of communication-support in an educational tool [7].

2. TOOL DESIGN FOR REAL COMPUTER EDUCATION First of all, we have decided to design Web-based educational tool in Java programming language. The reason of employ Java language is to design not only stand-alone application but also Java applet running on

213

ISBN: 978-972-8924-30-0 © 2007 IADIS

major browsers. And it is very easy to deliver such an educational tool from instructors’ side to learners’ side by means of HTTP-based connectivity and execute it on almost all environment of learners, i.e. any major browser, command interpreter of Windows or shell of UNIX/Linux. In order to learn computer system, it is very important to understand the internal behavior and structure of computer. In such a case, it is effective for a learner to utilize an educational tool with visualization facility. For example, a learner uses the educational tool to simulate a sample program graphically in the registertransfer level. If a learner wants to know a role of a specific register, PC (Program Counter), he or she can stop the simulation at any point, change the value of PC, and then restart the simulation in the registertransfer level. An effect of simulation increases more and more with such a visualization facility [6]. Online help function is necessary for learners to use the educational tool by themselves. Instructors can prepare the some information about tool for learners through message of online help. For the sake of providing a suitable online-help message, the educational tool itself can get such a message from instructors’ side; for example, a Web-based tool gets a text of message from its Web server by means of HTTP connection. In the same manner, the Web-based educational tool can get sample programs from its Web server according to request of its user [8]. Such a mechanism is very good for instructors to provide sample programs suitable for the understanding level of each learner and deliver them to the learner at any time. It is useful that such an educational tool will equip facility of communication-support at the same time. For example, an instructor receives request message or question from a learner by means of such communication-support, illustrates (i.e. educates visually) how to resolve the problem for the relevant learner and then distributes the according result into other learners as a real example also by means of communication-support. Such a facility of communication-support is very effective and applicable to utilize communication between learner and instructor as well as between learners. It will be one of the potential powers to promote collaborative learning. A Web-based educational tool is strongly expected to easily distribute to the users and work independently from the limitation of executing environment [7][8]. An educational tool for real computer education must be designed not only to understand the behavior and structure of computer but also to provide a facility for assembly programming. In addition, it is necessary to equip a smart communication facility in the programming environment in order to realize smooth information exchanging between pair of students without disturbance for others. Such an environment can provide GUI function with visualization to users.

3. FACILITIES OF VISUAL COMPUTER SIMULATOR In this section, the overview of our visual computer simulator is illustrated as a Web-based educational tool, which is designed and developed not only with a function of Visualization but also with a function of Communication support.

3.1 Educational Tool with a Function of Visualization Our visual computer simulator is called "VisuSim" and originally designed for an educational tool to demonstrate how a computer works graphically. Figure 1 shows an overview of "VisuSim" and its GUI as a Java applet downloaded from a dedicated Web server. The server includes a Java-applet code for "VisuSim" , several kinds of sample program for it and messages for its users. According to its users, the server transfers a code of "VisuSim" and files of sample program/ message to user’s browser. The GUI of "VisuSim" is organized with following parts and buttons. The GUI facilitates to illustrate how a computer works and gives user of "VisuSim" (i.e. Learner of "VisuSim") graphical explanation of internal behavior and structure of computer. (1) of Figure 1 shows Control Unit part of "VisuSim": This part includes Program counter (PC), Instruction register (IR), Opcode decoder and special fields for effective addressing. It illustrates the instruction fetching, its decoding, generating effective address and updating PC. It also explains how the instruction of memory whose address is specified by PC is transferred from memory into IR and then it is decoded to generate effective address. (2) of Figure 1 shows Processing Unit part of "VisuSim":

214

IADIS International Conference Applied Computing 2007

This part includes Arithmetic Logical Unit (ALU), Condition code register (CCR) and General registers (GRs). It calculates unary operation and binary operation and generates according result and the program state into GRs and CCR respectively. The data of memory whose address is specified by Memory address register (MAR) is transferred from memory into Memory data register for reading (MRDR). And it is calculate with the content of specified GR. When the content of GR is updated, its location has been illustrated by means of changing its color (i.e. turned to yellow). And the index of GR has been also changed into red character. So users of "VisuSim" can easily understand which GR has been updated and whether CCR has been changed or not during instruction processing. (3) of Figure 1 shows Memory Unit part of "VisuSim": This part includes 256/512 words of memory, MAR, MRDR and Memory data register for writing (MWDR). In order to understand assembly programming more easily, the contents of memory can be described with assembly codes and/or numerical values. Indications are equipped for learner's convenience as follows: The address of memory which is read has been changed into blue characters. And the location of memory whose content is updated has been detected by means of changing its color of content's frame. The memory area can slide up and down according to dragging its slide bar. GUI of "VisuSim" as Java Applet

(1)

(10) Web Server for "VisuSim"

(2) (3)

LAN

(4)

(5)

(6)

(7)

(8)

(9)

Figure 1. Overview of Visual Simulator: "VisuSim" and its GUI as a Java Applet

(4), (5), (6) and (7) of Figure 1 show control buttons for initializing "VisuSim", loading program from the Web server / a text area for writing program source described later, executing program in the step-by-step mode, and running program in the continuous mode respectively. In order to understand a detail of processing program, users can adjust the execution speed of "VisuSim" by means of speed control slide bar at the left side of button (4). The button (6) is available to check the behavior of computer step by step. And the button (7) is suitable to trace user’s algorithm. (8) and (9) of Figure 1 show other kinds of control buttons for switching input direction to transfer program(i.e. getting program from the Web server or copying program from a text area for writing program source) and invoking on-line help message. In the Java-applet mode of "VisuSim", it can obtain some kinds of files for sample programs and on-line help message from the Web server. (10) of Figure 1 shows the text area for writing program source. Users write directly their programs in this area. And they switch control button (8) to copy the content of this area into memory. Finally learners can choose to execute their program in the step-by-step mode or run them in the continuous one. When "VisuSim" is invoked, it automatically recognizes its executing environment and decides whether it should be carried out as an applet or as a stand-alone application. "VisuSim" has the GUI described above, illustrates an internal behavior and structure of computer and facilitates that its learners can understand how a

215

ISBN: 978-972-8924-30-0 © 2007 IADIS

computer work in the register-transfer level. It reads sample assembly programs from the Web server which is the same server for "VisuSim" itself. Downloaded program is located in the scratch pad text area for writing program source. Learners can write their program directly in the same area. Any program can be transferred from the area into memory by means of simple operation. And it is processed by a graphical CPU simulator (i.e. register-transfer-level simulation) of "VisuSim" and investigated whether it is correct or not.

3.2 Functions of Simulation Structure of program is sometimes discussed in a lecture of Computer System including an assembly programming exercise. Of course, assembly programming is not so easy for beginners to understand, but it is efficient to comprehend not only the internal structure of computer but also the detail of programming techniques, because learners cannot understand detail behavior of computer only from high-level language programming. Programs including iteration with index registers belong to difficult subjects so that beginners hardly understand how to use a computer and write a suitable program. In general, iteration is implemented with combination of conditional jump, indirect addressing, unconditional jump and so on. Frequently beginners suffer from lack of a suitable educational tool which can demonstrate visually, for example, how a computer processes a complicated iteration. It is very useful to illustrate a concept of effective addressing with such an educational tool. Not only learners but also instructors sometimes want to utilize such a tool to show a schematic distinction between direct addressing, indirect one and immediate value one by means of suitable example. Explanation of mechanism for subroutine call and return is one of the most essential themes in computer literacy. It must involve calling sequence with parameter passing and allocation of stack and/or heap. Recursive subroutine call may be frequently included in the above themes. As a stack frame is easily handled by a few suitable instructions, recursive programs can be introduced at the assembly programming level. It is very important for learners of information engineering field to have a graphical explanation of internal behavior and structure of computer. So it will be very effective for such learners if a suitable education tool is easy to illustrate how a stack area grows and reduces while program is executed in computer. With such an educational tool, the learners can understand precise mechanism of subroutine call through an assembly programming exercise. Table 1 shows a brief explanation of Instruction set for "VisuSim". Such an instruction set is separated into the following 4 groups: control instructions, jump instructions, unary operation instructions, and binary operation instructions. Typical addressing of "VisuSim" includes direct addressing, indirect addressing or immediate value addressing. Table 1. Instruction Set of "VisuSim"

Opcode Control Instruction

Jump Instruction

Unary Operation Instruction

halt noop jump jpgt jpge jplt jple jpeq jpne call ret neg push pop

1st Operand

Opcode

1st Operand

2nd Operand

DirectAdd RegId InAdd(RegId) ImmVal*4

RegId

DirectAdd*1

add sub and or xor mul div

Binary

RegId*2 InAdd(RegId) *3

Operation Instruction

DirectAdd RegId InAdd(RegId)

RegId ImmVal DirectAdd InAdd(RegId) ImmVal

move RegId

RegId RegId DirectAdd RegId InAdd(RegId)

*1) DirectAdd: direct addressing, *2) RegId: register Identification, *3) InAdd(RegId): indirect addressing with register modification, *4) ImmVal: immediate value addressing

216

IADIS International Conference Applied Computing 2007

Our visual simulator, "VisuSim" can provide several kinds of illustration about the internal behavior and structure of computer, which includes the following themes: effective addressing, iteration handling, parameter passing, stack growing/reducing, and so on. Generally speaking, numbers of statement are not so many in the case of assembly program. But the case of recursive programs needs capacity of memory space so that "VisuSim" can provide either 256 or 512 words for its memory space according to its executing environment, before it is invoked.

3.3 Facilities for Communication Support In order to improve the capability of "VisuSim", the revised program of "VisuSim" has two following built-in modules for e-mail handling: „ One is an e-mail sending module which works as an SMTP-client. „ Another is an e-mail receiving module working as a POP3-client. When learners use "VisuSim" and want to correspond with others, they can invoke e-mail sending or receiving module of "VisuSim". These client modules are available whenever "VisuSim" is invoked as a Java stand-alone application as well as a Java applet. An SMTP-client is a Simple Mail Transfer Protocol-based sending module, which transfers message from "VisuSim" to the server. "VisuSim" provides simple information-transmission service which can send a message including the current state of "VisuSim", namely, all the contents of registers and memory of itself, to a mail server. With the above service using SMTP-client, "VisuSim" can make the copy of itself onto another instance of it. There is a particular condition or limitation about capability of SMTP-client. A message from "VisuSim" must be transferred to the mail server. Namely, "VisuSim" have to access the external server which is out side of the machine where "VisuSim" executes. When it works as a Java applet, its SMTP-client should be invoked as a child process of such an applet so that it can only communicate with the mail server which is the same machine of Web server of "VisuSim" itself. This is a special limitation based on the secure characteristics of Java Applet. In the case that "VisuSim" works as a Java stand-alone application, its SMTPclient can communicate with any mail server without such limitation. Figure 2 shows a schematic relation between SMTP-client and "VisuSim". This figure illustrates a typical story that a learner downloads "VisuSim", invokes SMTP-client, adds the current state of "VisuSim" into an e-mail, and easily send such an e-mail to the mail/Web server. Invoked pure Java-based SMTP-client Getting the internal status of "VisuSim" into content of e-mail (Snap shot facility)

Sending e-mail to the Server

Learner using "VisuSim" Downloading "VisuSim" into browser Invocation of SMTP-client Figure 2. Invocation of STMP-client of "VisuSim"

On the other hand, a POP3-client is a Post Office Protocol-based receiving module, which obtains information message from the server to "VisuSim". Of course, as described above, there is the same condition for POP3-client to access the server just like STMP-client does. Two users of "VisuSim" can

217

ISBN: 978-972-8924-30-0 © 2007 IADIS

communicate with each other, throw a message from one to another through the intermediary of the mail server, and finally share the same information related to "VisuSim" between each other. Figure 3 also shows a schematic relation between POP3-client and "VisuSim". This figure also illustrates another typical story that an instructor asynchronously downloads "VisuSim", invokes POP3-client, receives an e-mail with other internal status of "VisuSim", restore such a status onto own "VisuSim", and readily shares the same status of other "VisuSim" of learners. Receiving e-mail from the Server

Invocation of POP3-client

Invoked pure Java-based POP3-client Instructor using "VisuSim"

Downloading "VisuSim" into browser

Figure 3. Invocation of POP3-client of "VisuSim"

Such facilities are useful to send and receive several kinds of message so that "VisuSim" can facilitate to share the internal state of "VisuSim", namely contents of registers in the specific "VisuSim", between some learners of group education in the collaborative learning environment. With these SMTP/POP3-clients, "VisuSim" can realize communication support, play an effective role of Web-based educational tool for learner and instructor in the distance and provide a suitable environment for collaborative learning.

4. APPLICATIONS TO REAL COMPUTER EDUCATION During a few years, "VisuSim" has been applied into real education from Computer Architecture to Assembly programming. The former is one of typical cases of lecture-style education in the classroom with "VisuSim". The latter is one of the cases for group education in the collaborative learning environment.

4.1 Lecture of Computer Architecture with "VisuSim" Students of our class can understand the behavior and structure of computer not only through watching demonstration with "VisuSim" from a teacher but also through manipulation of "VisuSim" by themselves. It is one of the most popular cases that a teacher of the class of Computer Architecture uses "VisuSim" as an educational tool in order to explain graphically how a computer works. With a projector and a large screen, the teacher directly gives his students the output of his PC where "VisuSim" is executing. At the same time, some students may download "VisuSim" from a dedicated Web server, execute "VisuSim" on their PCs and compute (i.e. simulate) some sample programs. In such a case, "VisuSim" is distributed to students as a form of Java applet. Some sample assembly programs and online-help messages are prepared and downloadable from the same Web server. For example, one of students may investigate whether his/her program works correctly or not by means of stepwise and/or continuous executing modes of "VisuSim". When the student meets the problem and hardly resolves it, he/she requests the teacher to teach how to resolve such a problem. The teacher asks the student

218

IADIS International Conference Applied Computing 2007

to send message with the current state of "VisuSim" of the student to the mail/Web server. After the teacher receives a message of e-mail from the student, he gains a resurgence of duplicated state of "VisuSim" of the student from such a message. So the teacher can realize duplicated image of the remote "VisuSim" on his local "VisuSim" and find the reason why he/she cannot resolve such a problem. With use of communicationsupport by "VisuSim", results of the problem and resolving process will be shared between the teacher and his students in the class.

4.2 Exercise of Assembly Programming Assembly programming exercise is suitable for learners to understand the behavior and structure of computer through their programming process. For example, a pair of learners is obliged to work together to accomplish a common goal under below conditions. Learners have to rely on each other to achieve the goal. If any one learner fails to do his or her job part, both of them take the consequences. Figure 4 shows our real assembly programming exercise with "VisuSim". It will be a good example of useful interdependence. In such a case, each learner is held accountable for doing his or her share of given problems and for mastery of all of the jobs to be learned. In order to exchange frequently several information and idea between each other, facility of "VisuSim", such as function of communication support, is very efficient and effective for a pair of learners to study and exercise assembly programming by themselves in the above collaborative learning environment. Web / e-Mail Server of "VisuSim"

Receiving HINT from other learners

Teaching each other

Problem solving with "VisuSim"

Figure 4. Scheme of Collaborative Learning of Assembly Programming with "VisuSim"

Through the process of teaching each other, both skill and knowledge of learners are getting wider and more applicable. And moreover such a collaborative learning will lead to useful teamwork spirits and fruitful cooperative thinking, which is very important for engineers.

4.3 Brief Evaluation of our Assembly Execution with Visual Simulator A brief evaluation of "VisuSim" has been done as mentioned below. Students' achievements are evaluated in the 10 steps through assembly programming exercise with "VisuSim". Such achievements are done through designing and computing assembly programs for the following 5 items: 1) a simple assembly program which contains conditional jump, iteration and so on. 2) a more complicated program with double loops, for example, array manipulation, bubble sorting and so on. 3) a program with subroutine calling, for example, factorial with recursion. 4) a normal recursive program, for example, sequence of Fibonacci. 5) an advanced recursive program, like as quicksort. The relevant learners are members of the senior class of our engineering faculty. They consist of 20 men and 2 women. After listening two times of lecture, all of them should try to solve the above problems from 1)

219

ISBN: 978-972-8924-30-0 © 2007 IADIS

to 5) and confirm whether their programs work correctly or not with "VisuSim" during given two weeks. And it is expected to show problem-wise achievement. Of course, it seems that every learner tries to do one's bests for every problem. But easier problems are well achieved, while the more difficult problems are not. For example, the problem related to the 1) is achieved at the level of almost 75%, although the problem related to the 5) achieved at the level of almost 5%. About 50% learners report that they can utilize "VisuSim" effectively as their self-appraisal (i.e. whether "VisuSim" is utilized effectively or not). It has a high tendency that learners who have good score of achievement have reported effective utilization of "VisuSim". In addition, a few comments from the learners are introduced as follows: „ With "VisuSim", behaviors of computer have been visualized and easy to understand. „ Manipulation of array has been illustrated and concretely explained. Relation between stack operation and recursive subroutine call has been demonstrated and comprehensible graphically. By the way, learners who do not achieve at good level have two opinions that assembly programming is very difficult and they cannot clearly understand to utilize "VisuSim" practically. It is another future problem to be resolved that how to educate improvement of assembly programming exercise and effective utilization of "VisuSim".

5. CONCLUDING REMARKS Our visual simulator "VisuSim" is introduced in this paper. It is designed as a Web-based educational tool for illustrating how a computer works. With its facility of GUI and communication support, such a tool is very useful to realize a practical education based on Visualization in the collaborative learning environment. The system configuration and some applications of "VisuSim" are also described and explained concretely in the paper. We can conclude our study as follows: „ With "VisuSim", a graphical demonstration is available in classroom lecture on Computer Architecture and Assembly Programming, so that it is easy and transparent for even beginners to understand the internal behavior and structure of computer more precisely; „ Embedded e-mail handler can be provided for communication support between the learners. It is useful for a learner and an instructor to share the status of their "VisuSim" and exchange question and suggestion between them; „ "VisuSim" can provide an environment for distance learning for assembly programming. And it may be possibly applied to an actual example of collaborative learning. Acknowledgement: This study was partly supported by grand-in-aid for scientific research from the Ministry of Education, Culture, Sports, Science and Technology under the contract No 12040107.

REFERENCES Chung, G.K.W.K., Harrmon, T.C., Baker, E.L. ,2001. The impact of a simulation-based learning design project on student learning, IEEE Transactions on Education, Vol.44,No.4, pp. 390-398. Yehezkel, C., Yurcik, W., Pearson, M. and Armstrong, D., 2001. Three Simulator Tools for Teaching Computer Architecture: Little Man Computer, and RTLSim, ACM Journal of Educational Resources in Computing, Vol.1, No.4, pp. 60-80 (Dec. 2001). Llamas, M., Anido, L. and Fernandez, M.J.: Simulators over the Network, 2001. IEEE Transactions on Education, Vol.44, No.2, p.212, CD-ROM folder 09 (May 2001). Null, L. and Lobur, J.: MarieSim: The MARIE Computer Simulator, 2003. ACM Journal of Educational Resources in Computing, Vol.3, No.2, Article #1, 29 pages (June 2003). Kit K. R. Yip, K.-Chun Li, 2002. A Web-Based CAL System on Computer Architecture and Assembly Language Programming, Proc. of International Conference on Computer in Education, Auckland, New Zealand, pp. 202-205. Humar, I., Sinigoj, A.R., Bester, J. and Hagler,M.O, 2005. Integrated Component Web-based Interactive Learning Systems for Engineering, IEEE Transactions on Education, Vol. 48, No.4, pp. 664-675 (Nov. 2005). Charles Snow, J.Mark Pullen, and Priscilla McAndrews, 2005. Network Education Ware: An Open-Source Web-based System for Synchronous Distance Education, IEEE Transactions on Education Vol. 48, No. 4, pp. 705 - 712, Nov. 2005. Grigoriadou, M., Kanidis, E. and Gogoulou, A. 2006. A Web-based Educational Environment for Teaching the Computer Cache Memory, IEEE Transactions on Education, Vol.49, No.1, pp. 147-156 (Feb. 2006).

220