Lecture Notes in Computer Science- P46 pot

214 S. Han et al. Fig. 11. If-else quiz made with flash Fig. 12. If-else quiz operation figure 11. If the student inputs a value into the text-box which is a multiple of three it draws a red box. If not, it draws a yellow box, as shown in figure 12. If the student wants to repeat from the beginning, he or she only needs to press the button for the first stage. Figure 13 shows a flash quiz in which the student practices how to use an array of a two dimensional sort variable of character type. If the student inputs a free character line in the text-box indicated by the finger, a character is stored in a picture of the memory , below an address value. Students can understand the fact that the charac- ters are stored in a[0], a[1], a[2], a[3], in sort element variables of character form. In this case it's expressed in pointer form, it can be shown as *a, *(a+1), *(a+2), *(a+3). Development of Contents Improving the Effectiveness of Self Learning 215 Fig. 13. Quiz about a sort variable of the character type Fig. 14. Quiz operation about a sort variable of the character type Figure 14 shows that this quiz is in progress, and the student has input C++, JAVA, XML, FORTRAN into the text-box and then presses the result checking button. The student can verify that each character in the lines were placed into each element a[0], a[1], a[2], a[3] in a sort variable of the character form. 2.2 Flash Animation Production to Understand Concepts Assume that an integer number's data occupies two bytes of memory , and consider positive numbers and negative numbers. The range of numbers which is possible is - 32768-32767. If there is a smaller value than -32768 among the values assigned to variable, an overflow occurs. An underflow is assigned to smaller numbers than can be assigned to a variable. An overflow is assigned to larger numbers than can be as- signed to a variable. In order to make overflow and underflow concepts easier for students to understand,, we produced a scenario and implemented flash as follows. A fish is compared to an integer number's data and a nursery is compared to the role of 216 S. Han et al. Fig. 15. An integer number’s range Fig. 16. Example of an underflow Fig. 17. Example of an overflow data contained in variables The proper fishes only live within a fish tank, but the smaller fishes will escape from a net, as shown in figure 6. This is an underflow. Very large fishes will escape by tearing a net, as shown in figure 7. Therefore, figure 7 shows that large fishes can’t be put in a net. Development of Contents Improving the Effectiveness of Self Learning 217 2.3 Production of a JAVA Applet for the Purpose of Understanding Algorithms There are educational contents which consist of a sort algorithm and hanoi-top transfer algorithms, which deal with the C language and are comparatively complex algorithms[10-11]. We use JAVA to utilize an algorithm learning applet on the web. Real-time technical animation with JAVA threads is used to aid in understanding an algorithm[12-15]. Firstly, figure 18 is the main screen of a sort algorithm learning applet. In this study, we deal with five sort algorithms, namely, bubble sort, selection sort, insertion sort, shell sort, and quick sort . The entire applet consists of the top toolbar, the source code implementing each sort algorithm as C language, at the left side, and the animation pad, at the right side. This pad is arranged randomly to sort values. Based on a student's inputted sort factor, we used it to see how to randomly arrange the numbers from one to the number of the sort factor . For example, when a student performs a ten sort, the applet shows on the first screen that numerals from 1 to 10 are randomly arranged. Fig. 18. Applet of sort learning algorithms Fig. 19. A numeral pad animation process 218 S. Han et al. A student selects sort algorithms at the applet tool bar, and inputs the units using a numeral pad. Then, the student clicks a sort start button, then the sort process ends.Between sorts, a code section shows that a sort source is now selected, as shown in figure 18, and creates a numeral pad animation. A source code section shows a red square, indicating the current line of source code. The light side of a numeral pad animation shows an image, as shown in figure 19. The sort animation process shown in the figure first changes the numeral pad into a heavy yellow(a), continuously moves vertically in space(b), exchanges a pad in (c), finally moves vertically, then the color of a pad changes into the original color(d). The animation process, such as that of figure 20, shows how numerals are sorted. By contrast, the characteristics of sort algorithms can be analyzed through graph an- imations, such as figure 20. When the student presses the ‘graphic analysis’ button to see this sort process as a graph, a new frame window is created and the sort process is shown as an animated graph. Figures 20 shows examples., These are screens which display a bubble sort process. Fig. 20. Sort process graphs The axis X is j and the axis Y is the value a[j]. (a) is the first stage, prior to sorting, (b) the halfway stage and (c) the final stage. We can see from the graph that the upper portion sorts quickly and the lower portion is sorting gradually. Thus, the time re- quired for a bubble sort is very long because of the need to search for the maximum value and sort it imprecisely. When the sorting is finished, two components of information appear in the bottom of the applet, as shown in figure 21. Students check how often values are compared in order to sort information, and how often values are exchanged. Then, this can be saved based on their sorts. Data saved will be used later, with a measure comparing advantages and disadvan- tage of the sorts. For example, profitable algorithms are selected based on the number Fig. 21. Comparison of sorts and information window of the exchange times . shown in figure 19. The sort animation process shown in the figure first changes the numeral pad into a heavy yellow(a), continuously moves vertically in space(b), exchanges a pad in (c), finally. When the sorting is finished, two components of information appear in the bottom of the applet, as shown in figure 21. Students check how often values are compared in order to sort information,. quiz in which the student practices how to use an array of a two dimensional sort variable of character type. If the student inputs a free character line in the text-box indicated by the finger,