Flash™ Applications for Learning C Programming Language Cristobal Tapia García, Luis Dávila Gómez, Luis Castedo Cepeda, Cecilia García Cena,Basil Al Hadithi Dep. of Electronics, Automatics and Industrial Computing UPM (Polytechnics University of Madrid) Madrid, Spain
[email protected]
Authors Name/s per Abstract —This article presents a set of resources for helping to learn and teach the C programming language. This language is used on the subject “Informatica” (computing), in the Degree in Electronics and Automatics Engineering at the Polytechnic University of Madrid. The resources presented are interactive animations, that students can use to analyze, on a dynamic way, the behaviour of common programming structures on the C language. These resources are easily embedded on web pages , so students can access and use these animations through Internet. Keywords – C programming language, internet teaching resources .
I.
INTRODUCTION
In the School of Industrial Engineering of the Polytechnic University of Madrid is given the degrees on Industrial Electronic, Electric Engineering, Mechanical Engineering, Chemical Engineering and Industrial Design and Product Development Engineering [1]. All these degrees include a subject on computing (“Informatica”), where the main subject is the C programming language. It is a compulsory subject, planned for the first year, with 6 ECTS credits assigned. In addition to explanations about the C language and other computing science basics, the students do some assignments and practices, both written on paper and using the computers and they develop some computer programs using the C programming language. The labs and the program development are performed with the help of a software development tool, or development environment, that is, an IDE (Integrated Development Environment). This software tools ([2][3][4]) are extremely useful for software development, with lots of advantages, some of which are: •
They include a project manager, which helps to control the different files on a project or application.
•
They include a code editor, streamlined for code writing, with added features like code colouring, or auto completion of variable or function names.
•
The process for compiling a program is fast and integrated on the development environment.
•
They have also integrated features for debugging the source code, step by step execution, variable inspection, etc.
Figure 1 shows the typical user interface of one of these IDE tools. When a user starts using one of these IDEs, some problems may arise initially: •
These environments are complex; they have lots of options and buttons on their interfaces. So, they can be overwhelming for the beginner programmer that starts using them.
•
Depending on the environment and operating system, the user needs to create a software project correctly, (this is a process with some steps and options, some of them not so obvious) even if the user just want to write a small program on a single source code file.
Finally, IDEs are a big improvement and a good help for programmers and software development, and the students should learn to use them, but IDEs are targeted to software developers, not to students.
Figure 1. Part of a typical IDE’s user interface
This work has been supported by the Innovative Education Program of the Polytechnics University of Madrid.
It is clear that today, IDEs are fundamental on software development, anyway, on a initial learning stage, it is useful for the students to have a way that let them experiment with the programming language without any need of a complex development tool. It is also interesting for the student to test the behaviour of the control structures of the programming language, not needing to know the exact syntax of the programming language. These control structures (sequential, alternative, repetitive), are defined with different keywords on each programming language (for, while, do/while, if/else, switch) although they usually are the same of very similar. In order to let the students see in action some control structures, we have developed some applications that show step by step what happens when executing some sections of source code. These applications or interactive animations, were developed as Flash animation files, which can be visualized using an Internet browser and Adobe Flash Player [5], a widespread free plug-in for internet browsers. This way, these applications can be embedded on the course’s web site. The following sections will present the objectives, and a explain of the resources created and how they have been developed. II.
OBJECTIVES
The main objectives that we wanted to achieve are the following: •
The student can experiment, using one or several interactive applications, with the common control structures of the C programming language.
•
The student can access through Internet to these applications, which are located on a web server containing other course’s resources and materials. The user shouldn’t need to install nor configure any development environment, either to create a project or do other auxiliary task to start writing source code.
•
The student doesn’t need to write, edit and debug source code n C language. So there is no need to know the C syntax perfectly, in order to test a control structure working.
•
The applications should have a simple user interface, easy to use and intuitive.
•
These applications should use a common widespread technology (Adobe Flash), so the student doesn’t need to install and configure additional software components or programs.
after testing the suitability of these applications to our purposes with some students, we could adjust them in order to be more effective and didactical. III.
APPLICATION DESCRIPTION
We have developed several applications; all of them have a common element set. On the users interface (see figure 2) the following elements are shown: •
Title, it is a label identifying the kind of control programming structure (or the subjacent concept) to study.
•
A section of source code, using language C. Its the part of the code that implements the structure that the student is exploring, and that we pretend to explain.
•
A zone containing variables, where the application shows the name and current value of the variables used on the code.
•
Result zone (black rectangle), represents a console window or screen, where will be shown the standard output of the program.
•
Step button, the student can click on this button to advance the execution of the code, one step at a time.
•
Reset button, clears the output window and reset the application, so the student can start again the simulation.
There is an arrow (yellow triangle) that points to the current code line on with the program is stopped on every step. Application’s behaviour is easy to understand. The yellow arrow (code pointer) is initially placed at the start of the code section. The variables have null values and the results zone is black and empty. The student can click on the Step button to advance one step.
So, we wanted to provide some didactic materials, additional to the resources already provided to the students, some interactive applications, easy to use, that show a dynamic view of the programs functioning. These applications should be able to be developed on a short time, and be easily modifiable or enhanced if needed, so
Figure 2. User interface of one of the applications
Every time the student presses the Step button, the yellow arrow will show the current program position. As some lines can imply more than one step, it’s also needed to show on what part of the line is stopped the program. This is signalled using red colour and underlined. Figure 3 shows a sequence of some steps as an example.
The results (or output) box shows the same as would show the standard output window or console output of a console program on the modern operating systems. When a screen output is emitted by the program (printf or similar functions) the result box is actualized, emulating the standard output on a console system.
As a variable’s value changes, this value is actualized on its appropriate box, so at all times the student can see the values of every variable. This is the same as the variable inspectors available on the IDEs, while debugging a program.
Some of the applications have fixed values (as has the for loop on figure 2), but other applications let the user choose some of the values included on the code section; this enables further experimentation with the C code, without need of writing code on a programming environment. As pointed before, these applications have been designed so they can be embedded on web pages (see figure 4), or on learning oriented web site, using systems as Moodle, adding these applications as another type of didactical resource or teaching material. It has been deployed a web server, including Moodle, on the Department of Electronics, Automatics and Industrial Computing on EUITI –UPM, so the students can identify and then can access online some teaching materials, professors notes, news, comments, calendar etc. Using Moodle, the students of the subject “Informatica”, can click on some links that launch these applications (each application is located near the chapter on with the corresponding concept or structure is introduced). This way, the student doesn’t need to go to other web sites; neither download any program when he/she wants to use these applications. Adobe Flash Player is available on almost all web browsers, and is usually already installed on the user’s computer. It doesn’t matter also the operating system the user has, so it is not needed to change anything on the user’s system to get the application working.
Figure 4. Example application, inside a web browser Figure 3. Sequence of steps on one of the applications
IV.
DEVELOPMENT OF THE APPLICATIONS
The applications have been developed using Adobe® Flex™ [6], which is a framework released by Adobe to create applications packed as Shockwave Flash® (swf) file format. The Flash® swf files can be viewed using the Adobe Flash Player, widespread and free, and it’s used on many web sites to enhance their visual aspect. Flash® lets creators show vector graphics, bitmap graphics, animations, effects, and add interactivity, on a standardized, platform independent and rather lightweight. Flash® is oriented to graphics designers mainly; Flex™ is oriented to programmers and software engineers. Flex™ is distributed as a free SDK, but doesn’t include a specific development environment for free. Adobe offers Flex Builder™, an Eclipse based full-featured IDE with Action Script code editor, in addition to a user interface designer. The development has been realized using Flex Builder 3.0 Pro, as it was available a free of charge license for education and for non-profit developers. Figure 5 shows the Flex Builder 3 user interface, on the main window appears one of the applications presented on this paper.
•
do/while loop , using 1 as increment, outputs a sequence of numbers 1 to 10.
•
for loop, 1 as increment and an internal switch structure, outputs different character strings on each loop cycle.
•
for loop, 1 as increment, configurable: the student can change the initial and final values of the loop.
•
Nested ifs, 2 levels.
It’s intended to add more applications, so the students will have more examples to explore, more instructions covered by this applications and more concepts explained. The election of developing many simple applications (besides the option of create only one application that comprises all the code simulations) has some advantages: •
The applications are very lightweight and when used through internet the loading time is small.
•
It’s possible to add more applications (code examples), modify or remove them independently, without any changes on the other applications.
•
Every application can be placed on the corresponding chapter or section on the web page, so each application can go near the professor notes that explain the concept or subject.
•
The user interface is simpler for the student.
V.
CONCLUSIONS
Learning a programming language, in addition to a theory part, is based greatly on experimenting with the language, write code and test its correction and the results that a section of code generates. The beginner programming student can be frustrated and discouraged when using a complex IDE and the rigidity of he programming language’s syntax details, and also to learn to think logically to plan and design the desired solution for the problem that the program solves. Figure 5. Flex Builder IDE
The applications developed have a user interface and a set of functions coded on Action Script to manage the step by step program execution simulation. Each application has a different section of code, depending on the programming structure that is being explained, and is based on the following topics: •
for loop, using 1 as increment, outputs a sequence of numbers 0 to 9.
•
for loop, using 1 as decrement, outputs a sequence of numbers 10 to1.
•
while loop, using 2 as increment outputs a sequence of numbers 1 to 9
Using these applications, the student can test how a particular code structure works without the “hassle” of launching a development environment, create a software project, and write code. This way, there is a detachment of the programming language’s syntax and the subjacent logic of the control structures, and the way to solve a easy process using a computer program. Although there are not enough data to validate the effect these applications produce on the students’ learning and performance, it seems clear that these didactical resources add another view to the already existent, so they are useful learning tools. It has been realized a questionnaire for a group of 30 students about their impressions using these applications. Their comments are almost all encouraging, they told us these applications are useful, enlightening, and propose more examples and enhancements. These are subjective sentiment but they have pointed out some ideas as adapt the timing when
these applications are presented to them, or show them in class as dynamic examples. For a better effectiveness of these applications some options are planned: •
Increase the number of applications, covering more structures and source code sections.
•
Enhance the flexibility of the applications, that is, introduce parameter values that the user can tweak (i. e: limits on loops, or increment values).
•
Add more data types (float, double, enums…).
•
In addition to control structures, show other programming aspects, like character strings, struct types, arrays.
•
Add some applications that show functions and parameter usage between functions.
•
Given the Flash animation capabilities, to use effects or highlights to show to the user the changes on variables, program state or program pointer.
AGRADECIMIENTOS This work have been developed inside the framework of the Project ”Objetos educativos interactivos aplicados a la docencia de la Ingeniería Industrial” (“Interactive learning objects applied to the teaching of Industrial Engineering”), supported by the Innovative Education Program of the Academic Vicedirectorate of the UPM. Our thanks to all the people involved in this Project. The authors would like acknowledge the help of the UPM for the publication and attendance to the conference. REFERENCES [1] [2] [3] [4] [5] [6]
Esc. Universitaria de Ingeniería Técnica Industrial – UPM web site: http://www.euiti.upm.es. Microsoft Visual Estudio Express web site: http://www.microsoft.com/express Eclipse IDE web site: http://www.eclipse.org/ Embarcadero C++Builder web site: http://www.embarcadero.com/products/cbuilder Adobe Flash Player web site: http://www.adobe.com/es/products/flashplayer.html. Adobe Flex web site: http://www.adobe.com/es/products/flex.html
