IFIP16/ICEUT2000 Integrated Visualization-based Environment for Computer Science Education Kimio Sugita, Youzou Miyadera Kensei Tsuchida, Takeo Yaku I would like to present the integrated visualization-based environment for computer science education. This project is collaborated with Youzou Miyadera, Kensei Tsuchida, Takeo Yaku and myself. IFIP-16/ICEUT2000

Contents Concept of visualization IFIP16/ICEUT2000 Contents Concept of visualization Purpose, target subjects and related project Visualization of Education Components of Environment Experience Conclusion Contents of presentation are 1. Concept of visualization, 2. Purpose, target subjects and related project, 3. Visualization of education, 4. Components of environment 5. Experience of the system, and 6. Conclusion and future works. IFIP-16/ICEUT2000

Concept of visualization IFIP16/ICEUT2000 Concept of visualization Using graphical description systems such as diagrams, table forms and symbols. Using tools with graphical user interface. Formal definition of graphical object by graph grammar and CFG. Integration of resources based on an unified concept. Graphical expression is very popular with education. Visualization is an extension of this graphical expression, analogous to formal language theory. It provides graphical description systems such as diagrams, table forms and graphic symbols, and graphical user interface. However, these are naïve mean of visualization. To construct a visualization representation system, these graphical objects should be defined by formal concept and integrated by an unified formal concept. The formalism contains graph grammar, attribute graph grammar, regular string grammar and context free string grammar. These formalisms, grammars work to generate and check errors, and also to construct syntactical processing systems such as editor and management systems. IFIP-16/ICEUT2000

Programming language, programming and algorithm. Related Project IFIP16/ICEUT2000 Purpose To construct an integrated educational environment using visualization concept. Target subjects Programming language, programming and algorithm. Related Project Ipsen project by Prof. Nagle Purpose of this work is to construct an integrated educational environment using visualization concept. And target subjects of the system is mainly programming language, programming, algorithm and related areas. There are some projects based on visualization. Ipsen project produced by Professor Nagle is a typical one.. IFIP-16/ICEUT2000

Visualization of Education IFIP16/ICEUT2000 Visualization of Education Graphical description system (1) Hichart program diagram with an attribute GG and NCE GG. (2) Hiform program documentation system with context free string grammar, NCE GG and ELC GG. Now, we introduce how visualization principle is applied to our system. Firstly, I like to introduce graphical description system. Regarding with our project target, we need two description system. 1. Description method of program or algorithm is a first important factor. And we defined a program diagram to describe algorithm and data structure and named it Hichart. This program diagram is defined using an attribute graph grammar and a NCE graph grammar. 2. Program specification is another indispensable part for programming. We introduced nested tabular form for program documentation and program database and named it Hiform. This is defined using context free string grammar, ECL graph grammar and NCE graph grammar. IFIP-16/ICEUT2000

Visualization of Education(cont.) IFIP16/ICEUT2000 Visualization of Education(cont.) Tools with GUI Each processing system, Live, Net-news reader etc. Integrated environments (1) Keyaki CAI 20000 system (2) Spiral educational model. As tools with graphical user interface, we developed processing system for Hichart and Hiform with GUI. We also developed program analyzing tools and net-news reader with GUI. For integration of these components, we developed network oriented environment named Keyaki CAI 2000 system and an abstract educational model, spiral model. IFIP-16/ICEUT2000

Components of the environment IFIP16/ICEUT2000 Components of the environment Hichart program diagram and its processing system Hiform program document system and its processing system Program document-base Program analyzer Network-news reader mechanism Textbooks and courseware Components of the environment is as following. The first component is Hichart processing system. The second component is Hiform processing system. The third is program analyzer. This is an application of Hichart. The 4th is program document database. The 5th is network-news reader that uses a improved searching mechanism. The system has a software library of computer program and specification. IFIP-16/ICEUT2000

Overview of Keyaki CAI 2000 IFIP-16/ICEUT2000 IFIP16/ICEUT2000 This figure shows a conceptual diagram of the environment. Keyaki CAI 2000. These tools guide and help studies of programming and computer science education. IFIP-16/ICEUT2000

Program Diagram (Hichart) IFIP16/ICEUT2000 Program Diagram (Hichart) Next, I like to introduce some details of the visual object and their processing systems. This figure shows an example of Hichart program diagram for Hanoi Tower Problem. Diagrams of this kind are generally called tree structured diagram. Shape of each cells and hierarchical structure shows important character of a program. IFIP-16/ICEUT2000

Processing system of Hichart IFIP16/ICEUT2000 Processing system of Hichart Syntactical editor. Bilateral translation from string code to program diagrams. Drawing algorithm of diagram in an attractive style. Main features of Hichart processing system are editing of program diagrams, bilateral translation from string code to Hichart diagram and drawing of program diagrams in an attractive form. IFIP-16/ICEUT2000

Program Document (Hiform) IFIP16/ICEUT2000 Program Document (Hiform) This figure shows an example of Hiform program document form. This diagram is an example of General Document. Set of items included in all Hiform documents are compliant with ISO 6592 :Guideline for the document of computer based application system, Annex A through C. We defined 18 types of nested forms to express all contents described in ISO guideline. These nested tabular forms are used not only for description of program specification but also to manage a program developing process. IFIP-16/ICEUT2000

Processing system of Hiform IFIP16/ICEUT2000 Processing system of Hiform Syntactical editor of Hiform tabular forms. Structure editor of Hiform documents with GUI. Hiform document-base management system. Hiform management system including Hiform syntax editor, and program document-base management system are main function for Hiform processing system. IFIP-16/ICEUT2000

Portion of HiDG IFIP-16/ICEUT2000 IFIP16/ICEUT2000 This figure shows a part of Hiform Document Grammar described in BNF. HiDG rules how 18 Hiform document forms should be arranged and processed. IFIP-16/ICEUT2000

Display of Live IFIP-16/ICEUT2000 IFIP16/ICEUT2000 This figure is a display of Live, an application of graph grammar. This display shows how algorithm change value of parameters. IFIP-16/ICEUT2000

Display of Network-news reader IFIP16/ICEUT2000 Display of Network-news reader This figure shows a display of net-news retrieving system. This system is implemented by an improved retrieving algorithm. IFIP-16/ICEUT2000

Resource Map of Usage http://www.hichart.org/ IFIP-16/ICEUT2000 Combining these mechanisms, we constructed a distributed mechanism for computer science education. This figure shows the resources and environment used in this mechanism. To menu is at “http://www.hichart.org/”. The courseware and library are managed by Yaku Laboratory at Nihon University. The Hiform and program document database is developed at Sugita Laboratory at Tokai University. The multimedia mechanism is at Miyadera Laboratory at Tokyo Gakugei University. Network-news reader mechanism is developed by Tsuchida Laboratory at Toyo University. IFIP-16/ICEUT2000

Experience Classes using this environment : IFIP16/ICEUT2000 Experience Classes using this environment : literacy, programming language, programming, algorithm. Lecture notes and courseware of 70 types of algorithms for 6 semesters. Experience in the last 10 years and 7000 students. These classes have included “Introduction to programming languages”, “application of computer science”, “exercise in programming”, and “graduation exercises”. Appending to components mentioned above, courseware consists of 70 type of algorithms, 3000 frames of courseware and 300 pages of lecture notes for 6 semesters. More than 7000 students have used the system over the last 10 years, in several classes IFIP-16/ICEUT2000

Integrated Educational Model (Spiral model) IFIP16/ICEUT2000 Integrated Educational Model (Spiral model) Here is another abstract educational model that is an application of our visualization methods. This model is named spiral model. This figure shows phases of the spiral educational model and facilitating system. First phase of education is ordinary lecture of a selected subject. Lecture note, courseware and multimedia CAI support students in this phase. Second phase is a study of requirement, and Hiform document-base supports users in this phase. Third phase is an analysis and coding of the subject, and Hichart diagram supports this phase. Last phase is a test and documentation of the subject, and Hiform form is useful tool in this phase. Lecture proceeds to the next subject. IFIP-16/ICEUT2000

IFIP16/ICEUT2000 Conclusion Summary Establishment of educational environment using visualization concepts. Future works Refinement and implementation of tools, documents-base and grammars. Now, I like to end this present with conclusion and future works. I introduced a concept of visualization and we established an educational environment based on this concept. Hichart diagram and Hiform form are key object of the environment. We are working to refine and implement tools and program document-base especially from the theoretical points of view. Thank you very mauch. IFIP-16/ICEUT2000

Application areas of the system IFIP16/ICEUT2000 Application areas of the system Literacy Programming language (lecture) Programming exercise Algorithm:lecture and exercise Advanced programming We are using this environment in classes of literacy, lecture and exercise of programming and algorithm, advanced programming and so on. More than 7000 students have used the system in the last 10 years at the authors universities. IFIP-16/ICEUT2000