Visualization based
Intelligent Tutoring
System (ITS) for Greedy
Algorithms: GATutor
By
Guided By:
Prof. S.R. Iyer
Meenakshi Verma
Mukund Lahoti
INTRODUCTION

We have presented a framework for effective
teaching of greedy algorithms and implemented
that framework as an Intelligent Tutoring System
to prove its usage named as GATutor.
NEED

Earlier Algorithms have been taught in schools in a passive
way.

Researchers want teaching to become more interesting.

To do so it is require to visualize algorithms and make
students play with it[3].

It is necessary to guide them at each step so that they do
not divert from right path.

Greedy algorithms are the most common design
techniques. Though they are simple but their learning
objectives demand tough teaching.
MOTIVATION


Every student is always perturbed by the question[7]:

Yes the solution seems to work,

it appears to be correct;

but how is it possible to invent such a solution?

How could I invent or discover such things by myself?
According to us with some pre-requisite knowledge,
stimulating questions, providing hints can help a student
to bring an algorithm right from scratch.
Demo
RELATED WORK-Different
Algorithm Tutor Systems that
already exist
GREED-EX SYSTEM[4]

It is a algorithm tutor based on discovery learning approach

This system mainly focuses on greedy algorithms.

It teaches two greedy algorithms-Activity selection problem and Knapsack.

They uses a didactic method to teach greedy algorithms. The didactic
method asks the student to could characterize an optimal greedy algorithm
for a given optimization problem.

There has been no guided approach followed by them.

It might be possible that sometimes student might get mislead if he does
get right direction.

They have also not given any questions on which student can be assessed.
Main features of this system are students discover by himself, results table
and history is provided to compare different functions.
ALGO-TUTOR SYSTEM[9]

Algo-Tutor contains Visual Algorithm Tracer and Program Pad embedded in it.

It is a basic tutor which encourages learning programming through
algorithmic design.

It teaches students basic programs including while loop, for loop. It was
tested over a group of students.

The results were significant. It stated that teaching programming through
algorithmic approach is beneficial rather than just making them learn for and
while loops. It gives a option of drag and drop through which student can
construct a new algorithm using some pre code generated by the student.

It basically consist of three components as

1. building the algorithm

2. Executing it step wise

3. program pad
ANIMAL SYSTEM[8]

It uses animation to visualize algorithm with simultaneous code
view provided.

As the system is not interactive with the user, it make it somewhat
bore.

It supports Backtracking algorithms, Compression algorithms,
Cryptography algorithms, Data structures, Graph algorithms,
Graphics algorithms, Hashing algorithms, Mathematics which is a
good collection.

But providing only animations of algorithms cannot seek the
attention of a student for a longer and it is also difficult to
enhance their learning process and to check whether they have
learned it or not
JHAVE SYSTEM[6]

It aims to animate algorithms which concludes that
visualization of a algorithm increases its understanding
rather than just reading the code of it.

They are not interactive with student which makes it a
little boring as student can get diverted while working on
it.

It supports many algorithms including graphs, Sorting,
Hashing and miscellaneous.
ALGOVIZ SYSTEM[1]

It contains animation of Algorithm and a portal where a
collection of links to algorithm visualizations exists.

It Integrates many algorithm visualization systems.

Only animation is included.

They basically have not build their own system.
Teaching Strategies of Other Systems

Many algorithms tutor exist but some mainly focus on theoretical
material(JHAVE) while other mainly focuses on visualization of the
algorithm(ANIMAL).

There does not exist any system which checks learning of the student at
each phase.

The GreedEx system focuses on Discovery learning and uses the concept of
discovering optimal selection function by experimentation approach but
other learning goals have not been taught such as to give the proof of
wrong choice.

Mainly systems focuses on animation of the greedy algorithms(algoviz).

There exist no system which focuses on interactive learning of greedy
algorithms and help in giving the proof of wrong selection functions. System
also implement only understand and analyze level of Bloom’s Taxonomy.
Our Teaching Strategy-1

A rule based framework for teaching greedy algorithms.

Our system follow recall, understand, apply, analyze and
evaluate level of Bloom's taxonomy[4] .

1. Basic understanding of what are greedy
algorithms(Understanding level)

2. Understanding of specific greedy algorithms(Understanding
level)3. Analyzing which selection function is optimal(Analyze
level)

4. Proving its optimality by showing counter examples for nonoptimal functions(evaluate level)

5. Solving different such problems(Apply level)
Our Teaching Strategy-2

We are using guided discovery learning approach.

There have been many variations of definition of discovery learning[2].
Discovery learning occurs whenever the learner is not provided with the
target information or conceptual understanding and must understand it
independently and with only the provided materials.

Within discovery-learning methods, there is an opportunity to provide the
learners with intensive or, conversely, minimal guidance, and both types
can take many forms (e.g., manuals, simulations, feedback, ex-ample
problems).Sweller reported that a better alternative to Discovery
Learning was Guided Instruction.(Kirschner, Sweller, Clark, 2006).
Our Teaching Strategy-3

Guided Instruction produced more immediate recall of facts than unguided
approaches along with longer term transfer and problem-solving skills as per
Sweller.

Support for the regulation the learning process in discovery learning includes
various measures:

1. Model progression, such as step-by-step model expansion (e. g.
expanding the complexity of the model).

2. Planning support (e. g. using guiding questions, quests or even
assignments).

3. Monitoring support (e. g. show what has already be done in the
simulation)

4. Structuring the discovery process (e. g. providing students with a
sequenced structure such as "set-up, do, reflect").
FRAMEWORK
Play with real life
example
Visualize satisfying
condition
Visualize optimal
Selection Criteria
Solve real life
example
Drill and
practice
System Modules
Evolving a theoretical framework on
which the system will be designed
-meenakshi
Implementation of Kruskal’s Algorithm,
Knapsack Problem-mukund
Implementation of Prim’s, Activity
Selection Algorithm and Dijkstra’smeenakshi
Login module and Statistical Analysis
Module-mukund
DETAIL DESIGN
LOGIN AND STATISTICAL ANALYSIS


New users are supposed to sign up before using the system.

A Sign up jsp page is created to take user input.

A servlet takes this input and stores in a mysql database through jdbc.

No part of the user input is directly used as an Sql command
Registered users login into the system.



A CheckUser servlet verifies user credentials in the database and redirects accordingly.
Checking into the database is with limited privileges for further security.
Instructor or admin can also log in to view activities of the users..

This is further explained in detail.
Statistics

Instructor can check the overall progress of class and also detailed progress of
each student.

Overall progress of the class shows statistics like how many students have
registered for this system, how many have attempted it, how many have
completed doing the work.

Instructor can also view email-ids of all the users.

Instructor can choose for the detailed progress of any student.
Screenshot stat1
Statistics

Here instructor can see the no. of parts of the tutor completed by the user.

Instructor also sees the flow of student through the system.

This tells him the misconceptions in the mind of student.
Screenshot Stat2
Screenshot Stat3
Technologies used

1.JSP

2.CSS3

3.SVG

4.JavaScript

5.jQuery

6.Mysql database
Technologies Used

1.JSP

All the web pages are java servlet pages.

All pages contain an inline header to send the details to mysql database.

The details that get entered include the user who is browsing the page and the
date at which it is browsed.

For logging in and registering new user a form field is used which gives the user
input to CheckUser and SaveUser servlet.

They connect the database through jdbc drivers.
JSP
<%@ page import="java.util.*" %>
<%@ page import="java.sql.*" %>
<%
String url = "jdbc:mysql://localhost:3306/";
String dbName = "gatutor";
String driver = "com.mysql.jdbc.Driver";
String userName = "sec_user";
String password = "wiki";
try {
Class.forName(driver);
Connection con = DriverManager.getConnection(url +
dbName, userName, password);
String pageID = request.getRequestURL().toString();
pageID = pageID.substring(pageID.lastIndexOf('/')+1);
String userID = (String)
session.getAttribute("userName");
java.sql.Timestamp date = new java.sql.Timestamp( new
java.util.Date().getTime());
String query = "insert into log (userid, page,
access) " +
"VALUES( \'"+ userID +"\', \'"+ pageID
+"\', ?);";
PreparedStatement ps = con.prepareStatement(query);
ps.setTimestamp(1, date);
out.println(query);
ps.executeUpdate();
} catch (Exception ex) {
//ex.printStackTrace();
out.println( ex.getMessage());
}
%>
CheckUser
protected void processRequest(HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {
PrintWriter out = response.getWriter();
String s1 = request.getParameter("t1");
String s2 = request.getParameter("t2");
String s3=request.getParameter("c1");
String url = "jdbc:mysql://localhost:3306/";
String dbName = "gatutor";
String driver = "com.mysql.jdbc.Driver";
String userName = "sec_user";
String password = "wiki";
try {
Class.forName(driver);
Connection con = DriverManager.getConnection(url +
dbName, userName, password);
PreparedStatement ps = con.prepareStatement("select *
from members where username=? and password=?");
ps.setString(1, s1);
ps.setString(2, s2);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
HttpSession session = request.getSession();
session.setAttribute("userName", s1);
if(s3!=null)
{
Cookie c1=new Cookie("uid",userName);
Cookie c2=new Cookie("pwd",password);
c1.setMaxAge(60*60*24*7);
c2.setMaxAge(60*60*24*7);
response.addCookie(c1);
response.addCookie(c2);
}
response.sendRedirect("INDEX.jsp");
} else {
response.sendRedirect("index.xhtml");
}
Technologies used

2.CSS3

For styling of the webpage css is used.

A base template was taken from free sources then it was tweaked for our purpose.
SVG

Scalable Vector Graphics are used for making puzzle drawings.

They are lightweight and do not require any settings on the part of browser
for them to run.

They are based of pathElements which can be accessed by JavaScript objects.

Their attributes can easily be changed for our need on the client side itself.
JavaScript

JavaScript is used for client side programming.

For this JavaScript must be enabled in browsers.

JavaScript according to user input like mousehover or mouseclick changes the
attributes of svg elements.

It is also used for making timer or time limit within which the puzzle is to be
solved.

Overall client side interactivity is managed by JavaScript.
var modify = function (e){
var t = e.target;
if(t=="[object SVGPathElement]")
if(t.getAttribute("stroke")!="green")
{
sum = sum + dict[t.id];
t.setAttribute("stroke","green");document.getElementById(t.
id[0]).setAttribute("fill","green");document.getElementById(t.id[
1]).setAttribute("fill","green");
document.getElementById("val").innerHTML="Current Sum
"+sum;
}
else
{
sum = sum - dict[t.id];
t.setAttribute("stroke","lightgrey");
document.getElementById(t.id[0]).setAttribute("fill","light
grey");
document.getElementById(t.id[1]).setAttribute("fill","light
grey");
document.getElementById("val").textContent="Current Sum
="+sum;
}
}
document.documentElement.addEventListener('click',modify,false);
jQuery

jQuery is used for making the quiz module.

Styled progress bars were tweaked for our purpose available from the open
sources.

jQuery was used as it serves many purposes like

Student cannot jump to any random question by just observing the url pattern and
then by manually typing that pattern.

The calculation of the marks on the server side without user control and without
the use of database.
init: function(){
$('.btnNext').click(function(){
if ($('input[type=radio]:checked:visible').length
== 0) {
return false;
}
$(this).parents('.questionContainer').fadeOut(500, function(){
$(this).next().fadeIn(500);
});
var el = $('#progress');
el.width(el.width() + 60 + 'px');
});
$('.btnPrev').click(function(){
$(this).parents('.questionContainer').fadeOut(500, function(){
$(this).prev().fadeIn(500)
});
var el = $('#progress');
el.width(el.width() - 60 + 'px');
})
$('.btnShowResult').click(function(){
var arr = $('input[type=radio]:checked');
var ans = jQuiz.userAnswers = [];
for (var i = 0, ii = arr.length; i < ii; i++) {
ans.push(arr[i].getAttribute('id'))
}
})
$('.btnShowResult').click(function(){
$('#progress').width(300);
$('#progressKeeper').hide();
var results = jQuiz.checkAnswers();
var resultSet = '';
var trueCount = 0;
for (var i = 0, ii = results.length; i < ii; i++)
{
if (results[i] == true) trueCount++;
resultSet += '<div> Question ' + (i + 1) + '
is ' + results[i] + '</div>'
}
resultSet += '<div class="totalScore">Your total
score is ' + trueCount * 20 + ' / 200</div>'
$('#resultKeeper').html(resultSet).show();
})
}
};
jQuiz.init();
})
MySql

MySql is used to serve as a database on the server side.

The connection to it is through a secured user with limited privileges. So it
cannot be manipulated through the client side.

Two tables are maintained one for the registered members and other for
keeping the log.

No part of the user input is made a direct sql command to prevent any sql
injections.
String
String
String
String
String
url = "jdbc:mysql://localhost:3306/";
dbName = "gatutor";
driver = "com.mysql.jdbc.Driver";
userName = "sec_user";
password = "wiki";
String s1 = request.getParameter("stu");
out.println("<html>Showing the records of <b>"+s1+"</b>
</html>"+"<br><br>");
try {
Class.forName(driver);
Connection con = DriverManager.getConnection(url +
dbName, userName, password);
String query = "select count(*) from (select distinct
case when page like 'k%' then 'k' when page like 'g%' then 'g'
when page like 's%' then 's' when page like 'd%' then 'd' end
from log where userid=?) x;";
PreparedStatement ps = con.prepareStatement(query);
ps.setString(1, s1);
ResultSet rs = ps.executeQuery();
rs.next();
int total_did = Integer.parseInt(rs.getString(1));
out.println("No. of areas student did (out of 4):
"+total_did);
} catch (Exception ex) {
//ex.printStackTrace();
out.println( ex.getMessage());
}
%>
Click-ability feature

All the svg images are made clickable wherever possible, to come to an
answer user has to click on appropriate parts of the image.

Thus user is not just sitting and watching some "movie" but is actually doing
the things.
Finding Satisfying Condition

Explanation of Satisfying Condition along with choices provided which are
close to what a user can think.

User has to select one of them, and is visualized according to his/her
respective choice.
Finding Optimal Selection Criteria

We want student to find the optimal selection criteria by himself.

This will not make learning boring as student himself will have to discover the
optimal function apart from the fact that he will be guided if he goes to the
wrong path.

To make the design process explicit, we list some selection functions initially
and ask learner to discover the optimal one.
Visualization of Contradicting Examples

1. A controller has been provided which will visulaize the wrong functions
based on the user input.

2. It helps in finding the proof of wrong functions and will help in removing
common misconceptions from user's mind.
REAL LIFE EXAMPLE
QUIZ
LEARNING AND ATTRACTIVENESS
EVALUATION


Implementation
We took 20 students, from B.tech 2nd year from IIT Bombay who were not
knowing about this algorithm before.We asked them to fill a survey form to
evaluate our system on different parameters.
Sample

Our sample is B.tech 2nd year students as design and analysis of algorithms is
taught in 2nd year of B.tech.
Data Collection

The instruments of our data collection were

1. Survey

• Test Score

• Attempts

• Open ended Feedback

• 4 point likert scale

2. we interacted with student to know their general view about the system.
Data Analysis

The instruments of our data collection were

1. Survey

Test Score - is used to identify whether student has learned the algorithm or not.

Attempts - helpful to infer that in how many attempts was student able to learn


and perform.
Open ended Feedback - we qualitativly analysed the text in consultation with

education technology researchers to verify the quotes that we obtained from the

qualitative analyses.


4 point likert scale - We have used it to deduce inferences.
2. we interacted with student to know their general view about the system.
Results

Following are the inferences we drawn from the qualitative analysis:

Intelligent Tutoring System has been effective in learning as students were
able to understand the algorithm as they answered and can be deduce from
the test results.

ITS was interesting as students and it to be fun working with it.

It build up confidence in students to apply same algorithm in other example
also.

Student would like to study other topics also in these kind of ITS as it helps in
fast learning, teaches more in less time, easy to learn and interesting.

It increases the understanding of how to approach a problem.

It was beneficial as it is good to learn new things from basics, better than
class passive ways.

Re-attempts embedded in the test has been proved useful as almost all have
improved their score using that.




Interface
Interface is user friendly.
Content
Content was crisp and attracting user's attention as well.

Using it, understanding was developed in gradual manner giving answers to
all the questions in mind.

The improvements suggested to us are:

The arrows were taking time to click as they were thin.

More theory should be embedded.

In Quiz, option to jump to other questions should be provided.
Usability Evaluation


Implementation
We have used System Usability Scale(SUS) to measure the usability of the
system.We took 20 Btech 2nd year students for testing our system.
SAMPLE

We took 20 students, from B.tech 2nd year from IIT Bombay who were not
knowing about this algorithm before.We asked them to fill a survey form to
evaluate our system on different parameters.
DATA COLLECTION

We asked the students to fill System Usability Scale(SUS) question are based on 4
point likert scale that is Strongly agree, Agree, Disagree and Strongly Disagree.
Following were the questions[11]:

1. I think that I would like to use this system frequently.

2. I found the system unnecessarily complex.

3. I thought the system was easy to use.

4. I think that I would need the support of a technical person to be able to use this
system.

5. I found the various functions in this system were well integrated.

6. I thought there was too much inconsistency in this system.

7. I would imagine that most people would learn to use this system very quickly.

8. I found the system very cumbersome to use.

9. I felt very confident using the system.

10. I needed to learn a lot of things before I could get going with this system.
Results:

SUS score was 86.8

From the graphs we can figure out students would like to use the system for
other topics also and would prefer to use this system for studying algorithms.
System was overall easy to use and user friendly which can be depicted from
questions 2 and 3.The system can be used independently and it was
homogeneous too. It increased students understanding of a the topic
Future work and Conclusion

Our system to teach Greedy Algorithms to students through visualization is ready. It
contains most of the popular greedy algorithms.

We have used the approach of guided discovery learning along with a interactive
interface which makes this system unique in the area of Computer Science.

Through Pilot experiments conducted in first phase of this project, we were able to
detect the minor faults which existed in the system and it helped us to make the system
more effective.

We tested the system on a bunch of students to know its effectiveness and we were
proved right. The system is effective overall in teaching greedy algorithms in an active
way. In near future, we would like this system to contain almost all popular algorithms of
computer science with this general framework.

It would be really helpful for students to study from this system as they will gain
confidence while working on this system as it will make them feel that they themselves
have explored the algorithm.
Bibliography
1)
AlgoViz.org. ”the algorithm visualization portal,” http:// algoviz.org/, 2012.
2)
Louis Alfieri Patricia J. Brooks and Naomi J. Aldrich Harriet R. Tenenbaum
Kingston University City University of New York. ”does discovery-based
instruction enhance learning?”.
3)
M. Ashraf Iqbal and Sara Tahir. ”does discovery-based instructions should we
teach algorithms?,iranian journal of electrical and computer engineering, vol
. 2, no. 2, summer- fall 2003”.
4)
IEEE Computer Society J. Angel Velazquez-Iturbide, Member. ”greedex: A
visualization tool for experimentation and discovery learning of greedy
algorithms”.
5)
I Escuela Tcnica Superior de Ingeniera Informtica Universidad Rey Juan Carlos
C/ Tulipn s/n 28933 Mstoles Madrid Spain J. ngel Velzquez-Iturbide
Departamento de Lenguajes y Sistemas Informticos. ”the design and coding of
greedy algorithms revisited”.
Bibliography
6)
T.L. Naps. ”jhave: Supporting algorithm visualization,” ieee computer graphics and
applications, vol. 25, no. 5, pp. 49-55, sept. 2005.
7)
Polya. ”how to solve it; a new aspect of mathematical method ,princeton
university press, 1988.”.
8)
G. Roling and B. Freisleben. ”animal: A system for supporting multiple roles in algorithm animation.” j. visual languages and computing, vol. 13, no. 2, pp. 341542, 2002.
9)
[Jungsoon Yoo Chrisila Pettey Suk Seo and Sung Yoo Middle Tennessee State
University USA. ”teaching programming concepts using algorithm tutor”.
10)
[J.A. Velazquez-Iturbide, A. Perez-Carrasco Proc. 14th Ann. Conf. Innovation, and
2009. Technology in Computer Science Education (ITiCSE 09), pp. 119-123. ”active
learning of greedy algorithms by means of interactive experimentation”,.
11)
en.wikipedia.org/wiki/System_usability_scale