Intelligent Tutoring System -
User Interface Design Team Senior Design Project
Spring 2011 CS 4111 – Group CM 20
Mae Tidman - Proj. Manager
Harrison Leach - Lead Programmer
Russell Brooks - Designer
Ben McMurray - Programmer Greg Krudysz - Customer Dr. Jim McClellan - Faculty Advisor
Capstone Design Document
1
Table of Contents
Release notes
Installation instructions
Objective
ITS user manual
Student/teacher user manual
Design notes
Testing
Source Code
2 3 6 9 10 11 26 30
2
Release Notes:
Intelligent Tutoring System front-end Version 1
Status: Near Completion
Known Bugs: -
Licensing Issues:
3
INSTALLATION GUIDE This installation goes through installing on a windows OS. INSTALL XAMPP:
o Go to http://www.apachefriends.org/en/xampp.htmlto download the correct version for you system.
o After picking a destination for the XAMMP directory in the next window make sure that Apache and MySQL are selected for installation.
INSTALL JAVA
o If Java is not installed already installed on this computer go to this site to download the simple installer. http://www.java.com/en/download/index.jsp
o Run the executable and install. INSTALL TOMCAT
o Go to http://tomcat.apache.org/ to download Tomcat 7.0. Easiest install is the 32-bit/64-bit Windows Service Installer.
o Run the executable and install. o For instructions on how to install Tomcat other OS go to
http://tomcat.apache.org/tomcat-5.5-doc/setup.html
INSTALL MATHEMATICA
o Gain a license for Mathematica you can buy it here http://www.wolfram.com/mathematica/how-to-buy/?b=1
o Once you have the executable, run and install. o Open Mathematica and put in your user code that comes with the
license. INSTALL WEBMATHEMATICA
o To get webMathematica you must contact them by phone which you can find on their contact page http://www.wolfram.com/mathematica/contact-us/.
o webMathematica is more complex to install. To give a good description an excerpt from
4
http://www.wolfram.com/products/webmathematica/install/. This guide also goes over for different OS how to do these installs.
Unpack one of the webMathematica web application archives into the webMathematica directory located in the Tomcat webapps directory. This is usually found in the top-level directory of Tomcat. You have now created a web application called webMathematica. Some of the contents of the top directory of Tomcat, along with the location of the webapps directory and webMathematica web application, are shown here:
o tomcat o conf o bin o logs o lib o webapps
o webMathematica Second, configure the file MSPConfiguration.xml, located in the WEB-INF/conf directory. This file holds various site-specific parameters and may need modification for your site. The most important setting is KernelExecutable, the location of the Mathematica kernel. TheMSPConfiguration.xml file that ships with webMathematica contains settings suitable for a default installation of Mathematica for Windows, Unix, Linux, and Mac OS X. However, if you installMathematica into a nondefault location, you will need to modify this file. For example, if you installed Mathematica into E:Mathematica, make the following setting of KernelExecutable inMSPConfiguration.xml:
‹KernelExecutable› E:MathematicaMathKernel.exe ‹/KernelExecutable›
Another reason to modify MSPConfiguration.xml is to store your webMathematica license information in its own password file, for example webMathematica/WEB-INF/conf/mathpass. It would then be necessary to modify KernelLaunchFlags in MSPConfiguration.xml to ensure thatMathematica uses this location. The following shows how this could be done for a typical Windows installation:
‹KernelLaunchFlags› -pwfile c:/Program Files/tomcat/webapps/webMathematica/WEB-INF/conf/mathpass‹/KernelLaunchFlags›
5
INSTALL JCONNECTOR o You can find the jconnector at the mySQL site
http://dev.mysql.com/downloads/connector/j/ o In Tomcat 7.0/webapps/ROOT/WEB-INF create a file called lib, if
it does not already exist. Inside that folder put the mysql-java connector file.
INSTALL ITS-TEMPLATE
o Take the ITS-Template file that is provided by us and move it into tomcat/webapps/webMathematica
o Open process-login.jsp and slider.jsp with a text editor. Look for a line of code like this.
o con = DriverManager.getConnection("jdbc:mysql:///its", "root", "rpox3886");
o Replace "root" and "rpox3886" with the login and password connection to the phpserver that you chose when you installed XAMPP.
6
Objective
Product Vision Statement MOTIVATION / OPPORTUNITY: We are building a web-embeddable template that allows for interactive problem-solving while attaching to a larger system - the existing Intelligent Tutoring System - to mine data about the user's learning habits and conceptual understanding of the problem. The purpose of the bigger system is to create an environment that may potentially adapt to the user's learning style in order to facilitate a stronger understanding and intuition regarding a problem. It is a new approach to existing learning systems. Our opportunity is to make this feasible for the web and student interactions, and is procedurally generated, saving the developers of the Intelligent Tutoring System from having to develop too many problems. PROBLEM STATEMENT: The problem of creating a web template that supports data mining (but does not include) and graphical interaction for electrical computing engineering (ECE) problem solving affects Georgia Tech's Intelligent Tutoring System project the impact of which is providing an abstract user interface intended to eventually plug into the larger system a successful solution would be developing a web-based interactive system built in a way that has the extendibility to easily customize it for many types of problems. PROBLEM POSITION STATEMENT: For Georgia Tech's Intelligent Tutoring System (ITS) development team who will use it to connect the ITS database with Mathematica plots and to a login page and for Georgia Tech ECE who are attempting to solve a problem using ITS. Our System is an online interface including a small database, login page, and a page template loading a plot and displaying GUI that pulls a problem and its variables from a database, procedurally creates inputs/sliders for the variables, updates the view with the problem data, sends equation with variable values to Mathematica via WebMathematica, and displays the visual generated. Unlike previous attempts by the ITS development team to put the system online, our product will be developed with flexibility and future growth in mind and is equipped with the cutting edge Wolfram software.
7
USERS The primary users of our product are the ITS development team who will use it as a front-end to the existing database for eventual use at the user interface for the ITS. The eventual end-users of our application will be Georgia Tech students. They will be interacting with our product to solve problems using a graphical interface and plot to assist them in understanding the solution and type of problem. FEATURE LIST Ability to generate an interactive and graphical problem given an equation
and its variables' specifications Flexibility to hold many types of problems, meaning an extendable sidebar
for GUI and label placeholders for problem details to be printed from the database
Easily readable code that can be quickly understood by another developer Includes a small database and login page for testing the main problem
container page's functionality and usability
CONSTRAINTS To avoid licensing issues and cost, product will primarily depend on free
and open-source software and libraries MySQL will be used to store data due to its availability, modifiability,
flexibility, and extensibility (free) WebMathematica will be used to connect to Mathematica for creating
plots from equations. Wolfram Mathematica was chosen for its availability through Georgia Tech and because of Wolfram's reliability and portability
Environment must also be able to connect to a database or send information to the server
o Mathematica could lead to licensing limitations - however, it is free for students via software.oit.gatech.edu
Apache HTTP Server must be installed on developers' computers, in order to test interaction of the program with a server (open-source)
o Apache Tomcat or another servlet container must also be installed in order to support webMathematica and Java Server Pages (open-source)
jQuery UI will be used for its flexibility and extensibility with form elements and actions (open-source)
8
Requirements Database to maintain problem data and associated problem variable data Web-embeddable platform capable of connecting to database Must pull data from a formatted model and generate a visual illustrating
equation and changes caused by interacting with an interface that changes variables
9
ITS User Manual
10
Student/Teacher User Manual
11
Design Notes
Architectures
Rationale
Data Design
Interaction
User Interface Design
Validation
12
Architecture
• (c) Have all necessary diagrams of the problem space been provided
(class, sequence, state, activity, deployment, component)? • Has the class hierarchy been examined for reuse possibilities? • Have potential frameworks been identified and documented? • Does the documentation include a description of the collaboration pattern
(intra-framework protocol) for the framework? • Does the documentation include rationale discussing archtectural
decisions and trade-offs? • Are all required architectural views provided? (conceptual, process,
module, physical)? • Is there a dynamic description of the architecture that describes how the
components will interoperate at runtime? • Have the system boundaries been specified? • Have appropriate architecural styles been used or considered? • Have appropriate design patterns been applied where appropriate?
13
Figure 1 – Our software architecture is a version of model-view-controller.
14
Figure 2 - Dynamic architecture
Landing Page (HTML)
Login Processor(JSP)
Problem Page(JSP)
(HTML) Graph Processor
(JSP)
(HTML)
-Presentation logic-Username text!eld-Submit button
Posts form variables - Backend logic
- Set session variables for username, id, and current_problem
Database(MySQL)
WebMathematica
Find `user` of given username
Mathematica
Find ‘problem’ with id of current_problem and Find
all `problem_variables`of `current_problem` id- Generate sliders/
!elds for all `problem_variables` found
- jQuery GUI- Problem descr.- Plot(s)
Passes equation variables
Retrieves plot
Displays the visual, outputs
HTML Requestsplot
sends equationvia AJAX post
variables
15
Rationale
• Mathematica o
• Processing o We have concluded that Processing does not achieve the desired
functionality our customer requires. We can not easily pull a math formula into it and show the visual without programming each case separately, and that would include too many different cases so that the "abstract" part of our requirement would be completely lost, and that's our primary goal: an abstract gui that can have different problems put into it with ease.
• Web Mathematica
o Instead, we've been trying out Web Mathematica, but there have been problems with that in that it's not easy to extract information and data to put in the database and it's not easy to set up necessary event handlers.
To solve that problem, we're going to look into using jQuery to handle events and update a Web Mathematica visual whenever the sliders are moved.
We also have to figure out how the TomCat connector works (before we can start into jQuery) in order to combine the PHP page with the servlet.
• Note: this has been dropped • We will be using HTML, jQuery, webMathematica, and
JSP only Query Design has also been dropped and will be addressed in our in progress design rationale. I have cancelled this because our customer has asked us to focus more on creating an abstract template that can be placed within PHP; we will be keeping in mind what values need to be grabbed from the UI and our detailed source code should explain how to connect things for future use and flexibility. It is more our focus to make sure that a database can be connected and values/data for the problem are accessible. Note: we technically still have to design queries - basic ones to grab the user and question and variables select user, select current problem, select associated TomCat connector a dead end - taking forever to configure and figure out. just doing HTML, jQuery, JSP, Mathematica to bypass need for PHP PHP only used for keeping it server side rather than pure servlet and to access database, but since it is wasting our resources to configure it, we used the alternative above (java within jsp for database access and sessions)
16
Data Design
• Is an entity-relation diagram prepared for the data model? o users -> problem -> problem variables
• Are there primary keys for each entity? o yes, id
• Is the data normalized? • Are foreign keys identified as required?
o need to figure out what these are • Are security and access (Create, Read, Update, Delete [CRUD]) rights
documented? o not yet
Naming conventions: Words are rarely abbreviated and separated by underscore.
• Database o `users`
id (int, primary key) 1 username (varchar) cm20user current_problem (int) 0
o `problems` id (int, primary key) 0 title (varchar) SinDrill problem_text (text) Create the correct sinusoid
total_variables (int) 3 equation A*Sin[B*x+C]
o `problem_variables` id (int, primary key) 3 problem_id (int) 0 label (varchar) Amplitude min (double) 0.0 max (double) 1.0 step (double) .1 default_value (double) .5 solution_value (double) .9 type (varchar) slider
• Pages
o Landing Page (HTML)
17
Presentation logic Username textfield and submit button Posts form variables to Login Processor
o Login Processor (JSP) Backend logic Connect to mysql Find `user` of given username Set session variables for username, id, and current_problem
o Problem Page (JSP) Connect to mysql Find `problem` with id of current_problem Find all `problem_variables`of `current_problem` id Generate sliders/fields for all `problem_variables` found For each slider, have event for slider stop that loads Graph
Processor within a #graph div element Each time Graph Processor is loaded, the equation is passed
to it with jQuery post variables 1. using jQuery UI for sliders - http://jqueryui.com
o Graph Processor (JSP) Passes equation variables into webMathematica webMathematica displays the visual and outputs HTML
Additional Specifications for Multiple Equation/Visual Problems and Use of Functions
o Multipart Question Database updates
1. Problem o id o name o question
2. Equation o id o problem_id o formula
use {a-z} for use only with this equation use {A-Z} for use with multiple equations
o var_min o var_max
System Flow 3. on buildPage:
1. find current problem 2. find equations associated
i. check individually for lowercase and capital letters
18
ii. if capital, the system should not build 2 sliders if the same variable is found in another associated equation
3. build sliders i. if slider is associated with lowercase variable, it
should load only the graph div created for it ii. if slider is associated with capital variable, it
should load all graph divs created for the equations associated with the variable
Figure 3 - Diagram explaining the variables that connect the sliders to the plots
Use of Functions
Possibly have two methods for allowing equation input in the database 1. {A}*cos({b}*x+{c})
o this would commence as current system works and build sliders and display graph with the graph page
2. myCos({A}, {b}, {c}) or perhaps simply myCos and have variables supplied as their own fields in database table o this would tell the system to find a file called myCos.jsp that has
its own personalized java and webmathematica code involving the supplied variables
o this page may output text, image, or Flash Greg says sometimes they may desire to see evaluated
equation o essentially, these will be macros/modules created by the ITS
team The setup for all this should be as modular as possible
19
Interaction (Collaboration / Sequence) Diagrams
• Is there an interaction diagram for each non-trivial use case scenario? • Do messages in the diagram correspond to actual messages in the class
diagram? • Do all classes in the diagram map to actual classes in the class diagram? • Are classes providing services the logical providers? • Does the sequence of messages in the diagram accomplish the goal of the
use case? • Are object activations correctly shown? • Are alternatives, options and iteration correctly depicted? • Are static methods shown with the metaclass stereotype?
20
User Interface Design
• Do all important UI screens have prototypes? • Do the prototypes follow good UI design principles? Are they appropriate
for the target user demographic? • Is a navagibility graph or other documentation provided to show how
screens are related? • Are there prototypes for each use case with a user-system boundary?
21
After logging in, the user will reach the problem page:
Some problems have multiple graphs like the one below:
22
Previous Demos
23
24
25
Iteration 1 mock-up
26
Clicking the “Next” button will pull another problem and display it in that type of problem’s template:
27
The following mockup explains each part:
28
29
Traceability
• Have the use cases/requirements document been examined to determine if all system constraints have been indicated as associations or been assigned to methods to satisfy?
• Have the use cases/requirements document been surveyed for objects, attributes, and methods (nouns, adjectives, and verbs)?
• (c) Are model features annotated with relevant use case/requirement numbers?
• Have all requirements been addressed by one of the models? • Does the design exhibit conceptual integrity throughout?
30
Validation - If we’re finding that implementing our design in code is more complicated, it could hinder how abstract we need our product to be, and therefore another solution should be sought out. - Weekly feedback from our customer and faculty advisor should keep us heading in the right direction.
- Each team member presents our progress and explains our process so that the customer and faculty advisor can give us direct feedback on our work, allowing us to change direction if need be. The feedback we receive pertains to the implementations we present and their decision on whether to keep going in that direction or to change focus.
- Meetings in sprint 3 will mostly consist of getting any additional functionality in the system so that our product has everything they need, while allowing us to drop other aspects of the project that they decide unnecessary. Although this means a malleable scope, it will result in us delivering exactly what our customer wants, since they specifically were not interested in much design but rather more functionality and versatility. -
Considering Other Viewpoints The extent of our project is strictly limited by our customer and faculty advisor. There are other viewpoints to consider, including those of the professor who administers the tutoring system and wants access to the students’ progress. There is an extensive system that exists beyond ours that we are to keep in mind; however, our team has only a brief understanding of the larger system.
• Suggest five plausible modifications to the requirements/feature list. Evaluate which classes are affected by each change. Judge the value of the design by the localization of the changes.
• Select a few likely scenarios for changes to the design. Create the corresponding interaction diagrams. Look at message traffic patterns. Detect situations where responsibility for a relatively small task is shared among several objects, resulting in heavy bilateral traffic.
• Have a variety of viewpoints been examined (e. g. services, administration, debugging)?
• For each quality attribute (testability, maintainability, portabilty, reliability, etc.), do a quick walk-through of the design emphasizing how the design fufills that attribute.
31
Testing
Test Plan Introduction Our project is the Intelligent Tutoring System our product being the user interface that will be going along with their database. The system will be a web-embedded template that allows for interactive problem-solving while maintaining the ability to mine data about the user's learning habits and conceptual understanding of the problem. The system will read problems and equations from a database and generate a user interface capable of manipulating the variables of these equations. The variables will be sent to a Mathematica kernel running on the server, which will output a visualization of the waves, points, and figures of the problem. Users’ answers will be sent to the database for later data mining and analysis. Strategy The roles for quality responsibilities have been assigned. Mae is in charge of ensuring testing proceeds on schedule as outlined in this plan. Harrison and Ben will be testing the product itself, and Russell will ensure document quality. Our most important categories for testing will be unit, ensuring that the system can reliably take in equation data and output GUIs and Visualizations, and integration, ensuring the system can connect to and perform its function with the ITS database. With focus of the system being on data input and GUI output, unit testing will be used to determine our processing accuracy. We will be using black-box testing to find the capabilities and boundaries of the system. As there will be a large range of variant problems for the users to try, we are taking a set range of different problems to represent the larger database that will end up holding the end problem set. Because the focused user group is the ITS team code review will be critical we will have all of our team check over the code. Data on bugs will be ordered in a spreadsheet for easy understanding and analysis. Bugs will be sorted into categories based on their effect: Data Retrieval (or Server), GUI, Visualization, or Other. Bugs will be labeled with levels of severity: low, medium, or high, according to how detrimental the errors are to functionality and accuracy. The statuses of bugs will range from; tested, in progress, deferred, and fixed.
32
Adequacy Criteria We have three major divisions into which problems may fall: Standard, Multiple Graph, and Multiple Step. Standard problems are those with a single graph that can be completed in a single step Multiple Graph problems are those with multiple graphs, but are still completed in a single step. Multiple Step problem are those that have multiple steps in their solution, requiring multiple pages for these steps. Success will be rated separately for each of these problem types, and they will be tested separately. Adequacy will be rated in performance measured for each of these problem sets. The benchmarks will be as follows: >=90% of Standard problems successfully run, >=70% of Multiple Graph problems successfully run, and >=50% of Multiple Step problems successfully run. The reduced adequacy goals are reflective of the complexity of the problems in question, as well as the relatively late inclusion of these sets as goals for the project.
Test #
Requirement Purpose
Action/input Expected Result
1 User Login Valid User (“Ben”), Valid Password(“monkey”)
Login Accepted
User Login Valid User (“Ben”), Invalid Password(“hippo”)
Login Rejected
User Login Invalid User(“Mike”) Login Rejected
2 Mysql injection in user login
“SELECT * FROM users WHERE id = 23 OR 1=1;”
Unrecognized value for field
3 Check session variable from login processor.
<%= session.getAttribute(“username”)$>
Print out “Ben”
33
Check session variable from login processor.
<%= session.getAttribute(“id”)$>
Print out “1”
Check session variable from login processor.
<%= session.getAttribute(“current_problem”)$>
Print out “1”
4 Check interface layout
Check interface template to premade template demo.
All interface objects are in correct place.
5 Check interface Objects
Check that interface objects represent the correct variables and graphs against premade template demo.
All interface objects are represented correctly.
6 Slider
User uses slider for the problem
Slider moves and updates correctly
7 Web Mathematica visual
User uses slider to change graph.
The graph updates according to correct variable inputs.
8 Show answer
User selects Show Answer from GUI
The correct answer is shown in the
34
graph.
9 Previous
User selects previous from the GUI
Does not load a new problem there is no previous problem
10 Next
User selects next from the GUI
Page loads next problem in users list.
Check session variable
<%= session.getAttribute(“current_problem”)$>
Correct current problem
11 Previous User selects previous from the GUI
Page loads previous problem in users list.
Check session variable
<%= session.getAttribute(“current_problem”)$>
Correct current problem
12 Repeat 4-11 for large scope of problems
13 Check over code for readability and logic.
Have all team members and ITS team check over the code.
The code is clear and understandable.
35
Source Code
Recommended
