Name: Gayathri Krishnamoorthy



Name: Gayathri Krishnamoorthy &

Bela Sharma

Class: IS 2740 Interactive System Design

Professor: Dr. Peter Brusilovsky

Subject: Final Project Report

Topic: Adaptive Educational System with Variable Scope

Visualization (VarScope)

Date: April 26, 2006

Table of Contents

1 Introduction……………………………………………………………………………………..3

1.1 Goal……………………………………………………….………………………….3

1.2 Background……………………………………………………….…………………3

1.2.1 Client………………………………….………………….………………..3

1.2.2 User……………………………………….………………......................4

1.2.3 Design Team……………………………………..………………………4

1.3 Responsibility……………………………………………….…….…..…………….4

1.4 Reason for choosing the project…………………………………..….….……….5

2 System Requirements…………..…………………………………………………...............5

3 User Model…………..…………………………………………………................................7

3.1 Concepts……………………………………………………….….........................7

3.2 Problems……………………………………………………….…..........................7

3.3 Indexing……………………………………………………….….......................... 8

4 Design and Analysis Process…………………………………………………...................10

4.1 Design Strategy………………………………………………...………...............10

4.2 Summary of Design Decisions……………..…………………………………....12

5 Program Development…..…………………….………………...………….......................21

6 Analysis and Evaluation…………………….………………...…………..........................22

6.1 Hierarchical Task Analysis……………………………………………………….23

6.2 User Studies……………………………….……………………………………....24

6.2.1 Questionnaire……………….………..…………...……………………25

6.2.2 Think Aloud Protocol…………………………………………………..29

7 Conclusion………………………………………………………..…..………………………31

Appendix

Problems

Raw Results

1. Introduction

1. Goal

Visualization is a means of representing and interactive with information. [2] “Adaptive visualization is a technology that can enhance the power of program visualization. The idea of adaptive visualization is to adapt the level of details in a visualization to the level of student knowledge about these constructs.” [1] Lots of research has proved that vision is one of the dominant senses that allow human being to perceive the environment in a more productive manner. The objective for this project was to enhance, redesign and develop Variable Scope Demo System into an Adaptive Educational System for Variable Scope using Visualization. We named this system as “VARScope” for Visual Adaptive Variable Scope. The aim was to develop an adaptive educational system that is web-based for students starting to learn programming and to assist instructors in teaching about variable scope in class.

1.2 Background

Variable scope in laymans’ term is described as a location where a piece of information is accessible. When a variable is created, the value it stores is only available for a certain part of the code execution. Memory is set aside to store that piece of information and then freed when it is no longer needed. When all variables are always available, memory is wasted because it is set aside well before or after it’s needed. This also causes a lot of confusion when a programmer needs to recall used variable names. In technology term, Variable Scope is defined as the area of a program in which a variable is visible in which a compiler can uniquely resolve its identifier and how long that variable is accessible for. Within a particular scope, an identifier is always unique. Variable Scope is one of the fundamental concepts of any programming language.

1.2.1 Client

The client for this system is Dr. Brusilovsky, who is a Professor at Information Science Department of University of Pittsburgh. He teaches courses like introductory course to Programming, Data Structure, Information Storage & Retrieval, Interactive System Design, etc. His research interests are Adaptive Web-based Systems, Adaptive Hypermedia, Adaptive Interfaces, Intelligent Tutoring Systems and Shells, Student and User Modeling, Teaching programming to novices, Psychology of Programming, Human-Computer Interaction, Artificial Intelligence, etc.

1.2.2 User

VarScope system will have mainly two types of users:

➢ Programming course Instructors: The instructor can benefit using the system in explaining variable scope in programming classes, especially C language classes.

➢ Students starting to learn programming: The students can play with the system to learn the fundamental concept of programming language.

1.2.3 Design Team

Gayathri Krishnamoorthy & Bela Sharma: Both are MSIS program students at University of Pittsburgh. They both are interested in interactive systems with adaptation and visualization. They are very creative and enjoy designing new systems as per users requirement. They also like programming in Java.

1.3 Responsibility

Since we both like doing designing and programming, we divided all the parts almost equally so we both get to learn and do the project. Moreover, it helps to analyze each other’s taught and ideas so we can design and develop a good product that would be used by students. We divided the programming part equally. When we were done researching and understood how to do a particular part of programming, we then gave a quick tutoring to each other so we transferred the knowledge within our group. Similarly we both send our ideas of design to each other and met and discussed and finally chose the best design that we both agreed on. We definitely had inputs from our client and users, but we would come up on an agreement before meeting our client. In the same manner one member started the questionnaire, hierarchical task analysis, user study and the report and the other member screened it to make it better. In short, our project was equally divided as per our talents and expertise.

4. Reason for choosing this project

We found Dr. Brusilovsky research in Adaptive Visualization Web-based Education System very interesting and hence we approached him for a project that would need these concepts. Since he teaches introductory programming in C language he needed an adaptive system to teach students about Variable Scope so students could learn the concept as per their grasping skills. We understand that it is vital that a programmer understand the scope of variables thoroughly before writing a program. However for a new programmer, it is difficult to understand the variable scope concept and he or she can easily get confused as there can too many variables in one program and the programming languages allow variables to locate in different functions but sharing same names. Moreover, when we took the introductory class of programming we had difficulty learning Variable Scope and it would be a privilege to do something for fresh young mind trying to learn programming.

System Requirements

For requirement gathering, we met our client on a regular basis and collected as much information as possible for the system. The following were the basic requirements of the system:

1) The system should allow a student to walk through one or more code samples.

2) The system should have 1 or more categories of variables and have more examples.

3) The system should have separate problems for local parameters to a function and local variable inside a function.

4) The system should show all concepts of variable scope in C programming.

5) Each line of code should provide explanations and value of variables at that particular line.

6) The variable scope should be provided with animation change effects.

7) The system should integrate with a User Model the client has implemented

8) For every relevant line in the code, a problem number, line number and variable scope should be maintain so the User Model can use the information.

9) The system should allow login capability.

10) The system should have useful and meaningful interactive interface for user.

11) The system should have several functional buttons.

To help users explain variable scope clearly or understand it easily and grasp the concept as per the user knowledge level, the Adaptive Visualization Educational System on Variable Scope (VarScope) should include the following requirements as per our client:

1. The system should provide progress reporting.

2. The system should be adaptive to the level of student’s knowledge on Variable Scope.

3. The system should comply with ADAPT2 protocols for transparent login, event generation, and student model querying.

4. The system should have a way of suggesting problem to a user as the next best concept to learn.

5. The system should have visual color in showing the concept grid of all the problems.

6. The system should have special visualization technique use to help users learn the concepts fast

In short, the system should follow the adaptive visualization technique that would help student learn the concept faster and effectively and the instructor would be able to teach using different visual colors in class. Our client and some of the other professors in the school teach the introductory programming class in C language and hence it was a requirement to have the programs written in C language for the project.

1. User Model

VARScope system was to be integrated to the User Model, which uses ADAPT2 Protocols. The System Administrator of this protocol created our application name, group name and users. We were required to use the parameters as per the naming conventions of this protocol. We were also required to give the concept names and index our programs as per the concept, program number.

3.1 Concepts

After discussing with our client, we considered 6 concepts of Variable Scopes and they are as follows:

➢ Global: Global variable has a scope of the entire program. It exists and can be accessed from all parts of a program.

➢ Local: Local variable are declared local to a function.

➢ Static: Static variable remains in memory until the end of the program the variable has been initialized.

➢ Nested Block: Nested blocks are blocks nested inside another block

➢ Parameter: The variables and expressions passed to the function or procedure from its caller are parameters.

➢ Static: Static variable have a broader scope than other variables. Their values may be set at run-time or may change subtly during program execution.

➢ Extern: The scope of an external variable lasts from the point at which it is declared to the end of the file being compiled.

3.2 Problems

We selected the problems which would best describe and teach all the 6 concepts and got approval from the client. The problems are attached in the appendix.

3.3 Index

The following table shows the distribution of concepts in the problems chosen.

|Problem# |global |local |nested block |parameter |static |extern |

|  |  |  |  |  |  |  |

|p1 |  |x |  |  |  |  |

|p2 |  |x |x |  |  |  |

|p3 |  |x |  |x |  |  |

|p4 |  |x |x |x |  |  |

|p5 |x |x |  |  |  |  |

|p6 |  |x |  |x |x |  |

|p7 |x |  |  |  |  |x |

|p8 |x |x |  |  |x |  |

|p9 |x |x |  |x |  |  |

|p10 |x |x |x |x |x |  |

The code lines of each problem which had the concepts identified were indexed and is listed below.

|Problem# |Line# |Concepts |

|p1 |4 |local |

|p1 |5 |local |

|p1 |6 |local |

|p1 |7 |local |

|p1 |8 |local |

|  |  |  |

|p2 |4 |local |

|p2 |7 |nested block |

|p2 |8 |local |

|p2 |9 |nested block |

|p2 |11 |local |

|p2 |12 |local |

|  |  |  |

|p3 |5 |local |

|p3 |6 |local |

|p3 |7 |local |

|p3 |10 |parameter |

|p3 |12 |parameter |

|p3 |13 |parameter |

|  |  |  |

|p4 |5 |local |

|p4 |8 |nested block |

|p4 |9 |nested block |

|p4 |10 |nested block |

|p4 |10 |local |

|p4 |11 |local |

|p4 |14 |parameter |

|p4 |16 |local |

|p4 |17 |parameter |

|p4 |17 |local |

|p4 |18 |local |

|  |  |  |

|p5 |2 |global |

|p5 |5 |local |

|p5 |7 |local |

|p5 |9 |local |

|p5 |13 |local |

|p5 |14 |global |

|p5 |14 |local |

|  |  |  |

|p6 |5 |local |

|p6 |6 |local |

|p6 |9 |parameter |

|p6 |11 |static |

|p6 |12 |parameter |

|p6 |12 |static |

|p6 |13 |static |

|  |  |  |

|p7 |2 |global |

|p7 |5 |extern |

|p7 |6 |extern |

|p7 |7 |extern |

|  |  |  |

|p8 |2 |global |

|p8 |7 |local |

|p8 |14 |global |

|p8 |18 |static |

|p8 |19 |global |

|p8 |19 |static |

|p8 |20 |global |

|p8 |20 |static |

|  |  |  |

|p9 |3 |global |

|p9 |6 |global |

|p9 |7 |global |

|p9 |8 |global |

|p9 |11 |parameter |

|p9 |13 |local |

|p9 |14 |local |

|p9 |15 |parameter |

|p9 |16 |parameter |

|  |  |  |

|p10 |2 |global |

|p10 |6 |local |

|p10 |7 |local |

|p10 |8 |local |

|p10 |11 |parameter |

|p10 |12 |local |

|p10 |13 |static |

|p10 |14 |global |

|p10 |15 |parameter |

|p10 |16 |static |

|p10 |18 |parameter |

|p10 |19 |local |

|p10 |20 |static |

|p10 |21 |local |

|p10 |22 |parameter |

|p10 |23 |static |

|  |  |  |

4. Design and Analysis process

4.1 Design Strategy

There are two main system design methods, waterfall design and iterative design. Waterfall model is a software development model in which development is seen as flowing steadily downwards (like a waterfall) through the phases of requirements, analysis, design, implementation, testing, integration and maintenance. [3] It has been seen that when waterfall design is used, there remains some issues that are mentioned below:

➢ Problems are not discovered until system testing.

➢ Requirements must be fixed before the system is designed - requirements evolution makes the development method unstable.

➢ Design and code work often turn up requirements inconsistencies, missing system components, and unexpected development needs.

➢ System performance cannot be tested until the system is almost coded; under capacity may be difficult to correct.

On the other hand, iterative design and incremental development is a software development process where system is developed incrementally allowing the developer to take advantage of what was being learned during the development of earlier, incremental, deliverable versions of the system. In this method learning comes from both the development and the use of the system as much as possible. [4] Thus this method suited our system the best and we would avoid the issues of waterfall method and hence we chose iterative design and incremental development method. We started with a simple implementation of a subset of the system requirements and iteratively enhanced the evolving sequence of versions until the fully system was implemented. We were thus able to do user testing and could show our design to the client for approval.

The idea of iterative design is alternating artifact creation and evaluation stages.

To create Adaptive Visualization Educational System on Variable Scope (VarScope), the process of design followed following steps (see Figure1).

[pic]

Figure 1: Design and Analysis Process

4.2 Summary of Design Decisions

We had lots of design changes as per our user study and client meetings.

The design of old interface was as shown below. This interface had lots of limitation, which the client wanted to overcome. It had only 1 problem for users to use. It was not adaptive nor suggested any problems to the user. It also didn’t show any progress report of users knowledge. However this part of the system was very well designed and developed and heuristic evaluation done by group who developed it indicated that this is a very good system. We too like this part of the interface as it had most of the features required for a good interactive system.

[pic]

We started our re-design in non-working prototype style using power point. We went through series of changes and they are arranged chronologically below.

Design Draft 1 – moved the variable value window below the variable and the buttons

[pic]

Design Draft 2 – reduced the variable value window

[pic]

Design Draft 3 – Added the Colored Slider to show progress with Variable Scope diagram

[pic]

Design Draft 4 – Added an extra panel on left and moved the progress slider there and added the problem numbers

[pic]

Design Draft 5 – Added the colored concept grid and vertical colored progress bar with suggesting radio buttons for problem suggestion

[pic]

After this we started the coding part so we could see the working prototype and show it to the client. In the mean time, we can still designing.

Design Version 1 –

This is a working prototype. Here we were added buttons for problems and added arrow icons for suggesting problems and progress bars.

Design Version 2

We added another icon for 2nd option for problem suggestions. Moreover, we added arrow icons, which would show positive feedback to the user that he or she has understood the concept of that problem. When the user goes over that problem second time, the arrow icon color becomes darker indicating knowledge has been gained.

Final Design of VARScope System

All the requirements have been implemented in the final version of the VARScope system. We designed and developed an Adaptive Visualization Educational System on Variable Scope (VARScope), in such a way that it is easy for the instructor to demo in the class and even for users to learn it and grasp the concept as quickly as they can.

VarScope system has been divided into 7 parts for clarity and to make it easy on the user to differentiate all the message it is conveying. Here we tried to apply the knowledge that we gained about cognitive science and human computer interaction along with adaptive visualization. The following are the 7 panels used in the system:

➢ Code Window: This following panel displays the C code of all the problems, one problem at a time. Beside every line of code, there is line number displayed in order to correlate with the visibility of the variables, the explanation and the output.

➢ Demo: This panel shows the variables that are visible for a particular highlighted line for every function in the C program.

➢ Variable Value View: This panel shows the output of the variables for the specified highlighted line. It shows the values of the variables based on the functions.

➢ Explanation: This panel shows the explanation for every highlighted line in the C code. It explains what the highlighted line means. In cases where needed, it explains how visibility of the variables determines the values of the variables.

➢ Problem Suggestion: This panel shows the best problem user should go over next and the problems which user should not go as per the user knowledge in the User Model. Here we used special simple icons, which visually conveys the meaning. This is very easy to understand and using visualization so users can use their visual sense and doesn’t waste any time learning about the system.

➢ Progress: This panel gives the report of how much percentage of knowledge user has gained per particular concept.

➢ Control Panel: This has all the required functional buttons

We also include the login page that has simple steps to use the system. So first when the user comes on this website, they would login and then the VARScope system will start and they can then teach or learn about Variable Scope in C programming language.

[pic]

Thus we designed, tested and developed VARScope system which has following main features:

➢ Have adaptive feature that will help users to achieve their information seeking goals.

➢ Provide better feedback and avoid errors.

➢ Have help available all the time.

➢ Used standard naming of buttons and which are clear and intuitive.

➢ Have Concept Grid that will help to improve quality of knowledge.

➢ Visualization tools like using same colors for the same concept so user can connect to all the concepts the system is trying to show.

➢ Visual images like the hand icon and stop icon for problem suggestion makes the visual perception easy for the user. Tick icon encourages student and give positive feedback.

➢ Progress Reporting motivates user to learn more and more as it visual conveys message which human mind likes.

5 Program Development:

Our program consisted of two Servlets to communicate with the user model and retrieve the user’s progress and problems seen to make decisions about problem suggestion. It also consisted of an applet to actually load our interface design.

When a html link is activated in a browser containing the user and group information, it is passed on to the Initiator servlet (servlet1) which communicates with the user model using the ADAPT2 http protocol to retrieve the user’s current knowledge about the concepts identified. This user progress data is then passed on to the Applet along with the user and group information. The applet then calls the servlet 2 enquiring about the problems seen by the user. The servlet2 communicates with the user model to retrieve this information and passes it on to the applet. The applet then load the interface with the progress bars for various concepts updated based on the users knowledge obtained. Also the applet calculates the problems best suited for the user at that time based on the problems already seen. These problems are then marked accordingly with the icons and presented to the user.

[pic]

6. Analysis and Evaluation

User Studies and Task Analysis of the New Interface were performed.

6.1a Hierarchical Task Analysis (HTA) of VarScope

0. Understand or Explain Variable

1. Open the Application

1.1 Click Help Button

1.2 Read Instructions

1.3 Close Help Instruction

2. Click the Problem

2.1 Select suggested problem or other given problem

2.2 Click Forward button to start the demo and move into the code lines

2.3 Click Back button to move backward into the code lines

3. Examine the Code

3.1 Select a line in Code panel

3.2 Check the Variable Scope in Demo panel

3.3 Examine the Variable value in Variable View panel

3.4 Review the explanation in Explanation panel

3.5 Click Done button or other button as required

3.6 Continue steps 3.1 – 3.5 until all problems are done

3.7 Follows steps 2 – 4 until all problems are done or want to stop

Exit the Application

6.1 b Hierarchical Task Analysis (HTA) – Graphical Version

[pic]

6.2 User Study:

One of the important steps of any successful interactive system design is to analyze how the intended users will be using the system that is developed. After the final project design, we had performed the following user studies with our system.

• Questionnaire

• Think-aloud analysis

User Profiles:

An effective interactive system could be designed only by studying the users of the system. We followed a user-centered approach to our design and identified the potential users of the system.

• Professors teaching computer programming languages especially C language:

The system would be very helpful for the instructors teaching programming languages to explain variable scope to students. Since visual effects are known to have a good cognitive effect and aroused attention, it is imperative that instructors would seek to use our system for their courses.

• Students who are beginners to programming language:

Beginners in programming languages find it difficult to understand variable scope. Since variable scope is a fundamental concept in any programming language, it is essential that students grasp the concept behind it. Our system would guide students in teaching themselves the concepts behind variable scope.

In order to analyze how the intended users would actually feel about the system, we tested our system against users having a wide range of knowledge in computer languages from beginners to experts.

|User |Sex |Age |Education |Job Role |Computer Skill|Program. |

| | | | | | |Skill |

|2 |M |20-29 |B.E. Electrical & Electronics |Database Admin |Expert |Average |

|3 |M |30-39 |M.S. Computer Aided Engineering |Software Developer |Expert |Expert |

|4 |F |20-29 |M.S. Structural Mechanics |Software |Expert |Expert |

|5 |F |20-29 |Bachelor’s in CMIS |Info Systems Intern |Expert |Novice |

|6 |F |20-29 |M.S. Environmental Engineering |Intern |Expert |Novice |

|7 |M |20-29 |B.E. Information Technology |Software Developer |Expert |Expert |

|8 |M |15-19 |High School Current Student |None |Average |Novice |

As the table shows, we tested with a relatively wide range of subjects, most of whom could be expected to have at least reasonable competence using interactive interfaces.

Among the listed users first 6 users evaluated our system by filling out our questionnaire and the last 3 users performed a think-aloud.

6.2.1 Questionnaire:

In order to produce reliable data, we framed our questionnaire very carefully. The questions were chosen in such a way that they targeted the goals we set to determine.

Goals:

Using questionnaire our system was tested for

1. Easy Navigability

2. Learning Goal Achievement

3. Interface Design

4. Ability to show progress

5. Problem Suggestion

6. Overall Helpfulness

We used the following two-page questionnaire to obtain user profile data, user impressions of various aspects of the interface mentioned above, and open-ended comments from our test subjects.

User Questionnaire: VarScope

(Adaptive Visualization Educational System for Variable Scope)

|Participant number: __________ |

[I] Please provide some basic background information about yourself.

|Sex (circle/highlight one): |Male |Female | | |

|Age (circle/highlight one): |15-19 |20-29 |30-39 |40-49 |

|Highest level of education: | |

| |(Degree and Major) |

|Current student (circle/highlight one): |Yes |No | | |

|If yes: | |

| |(Degree and Major) |

|Current job role: | |

|Computer knowledge (circle/highlight one): |Novice |Average |Expert |

|Programming knowledge (circle/highlight one): |Novice |Average |Expert |

|Familiarity using Java Applets (circle/highlight one): |Novice |Average |Expert |

|How many times you used Adaptive Visualization |Never |1 to 3 times |More than 4 |

|Educational System (circle/highlight one): | | |times |

[II] Please use the Varscope system to learn about Variable Scope in C programming language and for each statement below about the VarScope interface, please check the box that best indicates your level of agreement.

| |Strongly |Agree |Neutral |Disagree |Strongly |

| |Agree | | | |Disagree |

|Initial startup and usage are simple and intuitive |( |( |( |( |( |

|Navigation and flow are simple and intuitive |( |( |( |( |( |

|The Explanation of the code are clear and explanatory |( |( |( |( |( |

|Provision of Variable values on each line was helpful |( |( |( |( |( |

|Buttons in the Control Panel are clearly labeled and intuitive |( |( |( |( |( |

|Buttons in Problem Panel are easy to use and intuitive |( |( |( |( |( |

|Visualization of variables in the Demo panel helped understanding of |( |( |( |( |( |

|variable scope | | | | | |

|Provision of forward and back buttons was useful |( |( |( |( |( |

|The Progress bars are clear and intuitive on concept learned |( |( |( |( |( |

|Suggestion icons are helpful in selecting problems |( |( |( |( |( |

|System calculated correctly and suggested good flow of problem to learn |( |( |( |( |( |

|all the concepts | | | | | |

|Number of suggested problems to work on was just right |( |( |( |( |( |

|Problem Concept Grid is intuitive and helpful |( |( |( |( |( |

|An appropriate amount of Help text is easily available |( |( |( |( |( |

|The Help text is clearly presented and well composed |( |( |( |( |( |

|Usage of different color per concept was clear and helpful |( |( |( |( |( |

|The overall panel arrangement is satisfactory |( |( |( |( |( |

|You will use Adaptive Visualization Education System on other topics in |( |( |( |( |( |

|future | | | | | |

|My overall experience with the interface was positive |( |( |( |( |( |

[III] Please answer the following general questions about the VarScope interface in your own words.

What are your overall impressions of the interface?

What did you like most about the interface?

What did you like least about the interface?

What suggestions, if any, do you have for improving the interface?

Thank you for participating in our user study!

Results and Analysis:

The data obtained from the questionnaire were plotted using the column chart for the purpose of analysis.

[pic]

The analysis of the chart shows that

• Almost 80% of subjects considered that the system was easy to navigate.

• Over 90% of the subjects agreed that the learning goal was achieved which shows that the System has actually accomplished its task.

• 90% of subjects were also satisfied with the overall design of our interface and hence the system can be considered very user friendly.

• Almost 90% achievement for the ability to see progress shows that subjects clearly liked the idea of visual feedback about the amount of knowledge gained.

• 85% achievement for the problem suggestion predicts that subjects like the idea of the system suggesting useful problems to the user adaptively based on his/her knowledge. (To note: users were informed of the current technical problem with program suggestion (not working currently because of the interaction problem with user model) and were asked to evaluate about the idea of problem suggestion)

• Almost 80% of the subjects were satisfied with the amount of help text provided.

Overall questionnaire analysis shows that the system has achieved what it was intended to do and that users are satisfied with the system.

6.2.2 Think Aloud Protocol

We conducted think-aloud analysis sessions with the last two users with whom we tested. For both sessions, we assembled notes and observations from watching the users and analyzing their comments; the following sections list the summary notes.

Notes and Observations for User1

The user's comments are presented in the order in which they were made. They are summarized by comments regarding positive and negative aspects of the interface. The comments follow:

1. User skims over the instructions provided in the html page to use the system. He then logs into the system. (positive)

2. User’s first comment after seeing the interface was that the use of hand and stop sign for problem suggestion was a cool feature. User liked the icons used. (positive)

3. User then clicks on the Help button and goes over the explanation about various panels in the system. He seems to be contended with the explanation provided. (positive)

4. User clicks on problem button 1 and goes over the code using forward button. He liked the idea of stepping through the code line by line. (positive)

5. User is very much pleased to see the visual effect of variables in the demo panel. His exact words, “that’s cool!” (positive)

6. User also liked the use of explanation and variable value view panels to better understand the concepts. (positive)

7. He clicks on done, expecting to see some changes, but nothing happens. He waits, drags his mouse across the interface to see if something might happen. User then asks the interviewer, “What is wrong? Am I supposed to do something else?” Then we had to tell him to refresh the page and also that it is a temporary problem which should be resolved soon. User actually did not like the idea of refreshing the page. (negative)

8. But then after refreshing the page, user liked the visual depiction of change in his knowledge about the concepts. (positive)

9. User then clicks on problem2. His comments are that though best problems will be suggested by the system at any particular time, users would generally want to go in order of the problems.

Overall, the experience of the user with our interface was reported to be positive.

Notes and Observations for User2

1. User reads the instructions about using the system on the starting page and then logs into the system. (positive)

2. User is attracted by the colorful look of the interface. (positive)

3. He then mouse-over the whole interface to check all the panels and accidentally clicks on Forward button. Explanation window shows “explanations for #include statement”. He seems surprised and confused about it. We then have to tell him that it was a mistake and asked him to proceed further. (negative)

4. User then clicks on Problem 1 and clicks on a line 4 inside the code. He is excited to see the visual representation of variable scope appearing in the demo panel. (positive)

5. User then tries the Forward button and Back button and seemed to like it. (positive)

6. He goes over the explanation for each line of the code and is very much satisfied with the explanation provided. Since the user does not have much experience with C language, he told that it was very useful to go over the full explanation shown. (positive)

7. User then clicks on done button and then we had to tell him to refresh the page again. User does not complain about this. (positive)

8. He is then really thrilled to see the change in progress bar. (positive)

9. User then clicks on problem 5 in random and starts going over the code. He really liked the idea of jump to the function on encountering a function call. Also liked the idea of using different colors to show different concepts. (positive)

Overall, the experience of the user2 with our interface was reported to be positive.

Analyzing advantages and disadvantages of the system, the students pointed out that the main reasons they liked the system were

• Demo panel displaying various variable scope in different colors

• Explanation provided for various lines of code

• Actual process of loop through provided

• Progress bar updating knowledge level

• Use of tick mark to show that the problem is already seen

• Very much liked the use of hand icon and stop icon

Recommendations for changes or improvements

• Some feed back after the problem is completely seen

• The ability to pick different problems without having to refresh the page.

• Stack Trace Display of function call and the ability to go up and down could be an improvement feature.

• Use of another panel to guide user on a step by step process of what to do next might be added.

• Making the interface slightly smaller.

7 Conclusion:

Based on the user responses we can conclude that the system does what it was intended to do rather well. Future work to improve the system could be to

• Provide an adaptive explanation based on user’s knowledge about a concept

• Extending the educational version to also provide an evaluation version thereby testing the users for the visibility of a variable at any particular line of code.

References

[1]

[2]

[3]

[4]

-----------------------

Test

Build

Design

Analyze

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download