Your SlideShare is downloading. ×
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Its design doc
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Its design doc

455

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
455
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Intelligent Tutoring System -User Interface Design Team Senior Design Project Spring 2011 CS 4111 – Group CM 20Mae Tidman - Proj. ManagerHarrison Leach - Lead ProgrammerRussell Brooks - DesignerBen McMurray - ProgrammerGreg Krudysz - CustomerDr. Jim McClellan - Faculty Advisor Capstone Design Document
  2. 1  Table of Contents Release notes 2 Installation instructions 3 Objective 6 ITS user manual 9 Student/teacher 10 user manual Design notes 11 Testing 26 Source Code 30
  3. 2   Release Notes:Intelligent Tutoring System front-end Version 1 Status: Near Completion Known Bugs: - Licensing Issues:
  4. 3  INSTALLATION GUIDEThis 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.htmlINSTALL 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
  5. 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 thewebMathematica directory located in the Tomcat webapps directory.This is usually found in the top-level directory of Tomcat. You have nowcreated a web application called webMathematica. Some of the contentsof the top directory of Tomcat, along with the location of the webappsdirectory and webMathematica web application, are shown here: o tomcat o conf o bin o logs o lib o webapps o webMathematicaSecond, configure the file MSPConfiguration.xml, located in the WEB-INF/conf directory. This file holds various site-specific parameters andmay need modification for your site.The most important setting is KernelExecutable, the location of theMathematica kernel. TheMSPConfiguration.xml file that ships withwebMathematica contains settings suitable for a default installation ofMathematica for Windows, Unix, Linux, and Mac OS X. However, if youinstallMathematica into a nondefault location, you will need to modifythis 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 yourwebMathematica license information in its own password file, forexample webMathematica/WEB-INF/conf/mathpass. It would then benecessary to modify KernelLaunchFlags in MSPConfiguration.xml toensure thatMathematica uses this location. The following shows how thiscould be done for a typical Windows installation: ‹KernelLaunchFlags› -pwfile c:/Program Files/tomcat/webapps/webMathematica/WEB- INF/conf/mathpass‹/KernelLaunchFlags›
  6. 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.
  7. 6   ObjectiveProduct Vision StatementMOTIVATION / OPPORTUNITY:We are building a web-embeddable template that allows for interactive problem-solving while attaching to a larger system - the existing Intelligent TutoringSystem - to mine data about the users learning habits and conceptualunderstanding of the problem. The purpose of the bigger system is to create anenvironment that may potentially adapt to the users learning style in order tofacilitate a stronger understanding and intuition regarding a problem. It is a newapproach to existing learning systems. Our opportunity is to make this feasiblefor the web and student interactions, and is procedurally generated, saving thedevelopers of the Intelligent Tutoring System from having to develop too manyproblems.PROBLEM STATEMENT:The problem of creating a web template that supports data mining (but does notinclude) and graphical interaction for electrical computing engineering (ECE)problem solving affects Georgia Techs Intelligent Tutoring System project theimpact of which is providing an abstract user interface intended to eventuallyplug into the larger system a successful solution would be developing a web-based interactive system built in a way that has the extendibility to easilycustomize it for many types of problems.PROBLEM POSITION STATEMENT:For Georgia Techs Intelligent Tutoring System (ITS) development team who willuse it to connect the ITS database with Mathematica plots and to a login pageand for Georgia Tech ECE who are attempting to solve a problem using ITS. OurSystem is an online interface including a small database, login page, and a pagetemplate loading a plot and displaying GUI that pulls a problem and its variablesfrom a database, procedurally creates inputs/sliders for the variables, updatesthe view with the problem data, sends equation with variable values toMathematica via WebMathematica, and displays the visual generated. Unlikeprevious attempts by the ITS development team to put the system online, ourproduct will be developed with flexibility and future growth in mind and isequipped with the cutting edge Wolfram software.
  8. 7  USERSThe primary users of our product are the ITS development team who will use itas a front-end to the existing database for eventual use at the user interface forthe ITS.The eventual end-users of our application will be Georgia Tech students. Theywill be interacting with our product to solve problems using a graphical interfaceand 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 pages functionality and usabilityCONSTRAINTS  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 Wolframs 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)
  9. 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  
  10. 9  ITS User Manual
  11. 10  Student/Teacher User Manual
  12. 11   Design Notes Architectures Rationale Data Design InteractionUser Interface Design Validation
  13. 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?  
  14. 13  Figure  1  –  Our  software  architecture  is  a  version  of  model-­view-­controller.  
  15. 14   Figure  2  -­  Dynamic  architecture  Landing Page Login Processor (HTML) (JSP) Find `user` of Posts form given username variables - Backend logic-Presentation logic - Set session-Username text eld variables for-Submit button username, id, and current_problem Problem Page Find ‘problem’ with id of (JSP) current_problem and Find all `problem_variables` Database - Generate sliders/ of `current_problem` id (MySQL) elds for all `problem_variables` found Displays the visual, outputs Mathematica HTML Requests (HTML) Graph plot Processor - jQuery GUI sends equation (JSP) via AJAX post Passes - Problem descr. equation Retrieves variables (HTML) - Plot(s) variables plot WebMathematica  
  16. 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 thats our primary goal: an abstract gui that can have different problems put into it with ease.  • Web Mathematica o Instead, weve been trying out Web Mathematica, but there have been problems with that in that its not easy to extract information and data to put in the database and its not easy to set up necessary event handlers.  To solve that problem, were 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 inprogress design rationale. I have cancelled this because our customer has askedus 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 ourdetailed source code should explain how to connect things for future use andflexibility. It is more our focus to make sure that a database can be connectedand values/data for the problem are accessible. Note: we technically still have to design queries - basic ones to grab theuser 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 toaccess database, but since it is wasting our resources to configure it, we usedthe alternative above (java within jsp for database access and sessions)
  17. 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 yetNaming 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)
  18. 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 HTMLAdditional Specifications for Multiple Equation/VisualProblems 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
  19. 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  plotsUse 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
  20. 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?
  21. 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?
  22. 21  After logging in, the user will reach the problem page:Some problems have multiple graphs like the one below:
  23. 22  Previous  Demos      
  24. 23      
  25. 24  
  26. 25    Iteration  1  mock-­up
  27. 26  Clicking the “Next” button will pull another problem and display it in that type ofproblem’s template:
  28. 27  The following mockup explains each part:
  29. 28  
  30. 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?
  31. 30   Validation- If we’re finding that implementing our design in code is more complicated, itcould hinder how abstract we need our product to be, and therefore anothersolution should be sought out.- Weekly feedback from our customer and faculty advisor should keep usheading 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 facultyadvisor. There are other viewpoints to consider, including those of the professorwho 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 inmind; 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.
  32. 31   TestingTest PlanIntroductionOur project is the Intelligent Tutoring System our product being the userinterface that will be going along with their database. The system will be a web-embedded template that allows for interactive problem-solving while maintainingthe ability to mine data about the users learning habits and conceptualunderstanding of the problem. The system will read problems and equationsfrom a database and generate a user interface capable of manipulating thevariables of these equations. The variables will be sent to a Mathematica kernelrunning on the server, which will output a visualization of the waves, points, andfigures of the problem. Users’ answers will be sent to the database for later datamining and analysis.StrategyThe roles for quality responsibilities have been assigned. Mae is in charge ofensuring testing proceeds on schedule as outlined in this plan. Harrison and Benwill be testing the product itself, and Russell will ensure document quality.Our most important categories for testing will be unit, ensuring that the systemcan reliably take in equation data and output GUIs and Visualizations, andintegration, ensuring the system can connect to and perform its function with theITS database. With focus of the system being on data input and GUI output, unittesting will be used to determine our processing accuracy. We will be usingblack-box testing to find the capabilities and boundaries of the system. As therewill be a large range of variant problems for the users to try, we are taking a setrange of different problems to represent the larger database that will end upholding the end problem set. Because the focused user group is the ITS teamcode 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 andanalysis. Bugs will be sorted into categories based on their effect: Data Retrieval(or Server), GUI, Visualization, or Other. Bugs will be labeled with levels ofseverity: low, medium, or high, according to how detrimental the errors are tofunctionality and accuracy. The statuses of bugs will range from; tested, inprogress, deferred, and fixed.
  33. 32  Adequacy CriteriaWe have three major divisions into which problems may fall: Standard, MultipleGraph, and Multiple Step. Standard problems are those with a single graph thatcan be completed in a single step Multiple Graph problems are those withmultiple graphs, but are still completed in a single step. Multiple Step problemare those that have multiple steps in their solution, requiring multiple pages forthese 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 successfullyrun, >=70% of Multiple Graph problems successfully run, and >=50% ofMultiple Step problems successfully run. The reduced adequacy goals arereflective of the complexity of the problems in question, as well as the relativelylate inclusion of these sets as goals for the project.Tes Requiremen Action/input Expectedt # t Purpose Result1 User Login Valid User (“Ben”), Valid Login Accepted Password(“monkey”) User Login Valid User (“Ben”), Invalid Login Rejected Password(“hippo”) User Login Invalid User(“Mike”) Login Rejected2 Mysql “SELECT * Unrecognized injection in FROM users value for field user login WHERE id = 23 OR 1=1;”3 Check <%= Print out “Ben” session session.getAttribute(“username”)$> variable from login processor.
  34. 33   Check <%= session.getAttribute(“id”)$> Print out “1” session variable from login processor. Check <%= Print out “1” session session.getAttribute(“current_problem”)$ variable > from login processor.4 Check Check interface template to premade All interface interface template demo. objects are in layout correct place.5 Check Check that interface objects represent All interface interface the correct variables and graphs against objects are Objects premade template demo. represented correctly.6 Slider User uses slider for the problem Slider moves and updates correctly7 Web User uses slider to change graph. The graph Mathematic updates a visual according to correct variable inputs.8 Show User selects Show Answer from GUI The correct answer answer is shown in the
  35. 34   graph.9 Previous User selects previous from the GUI Does not load a new problem there is no previous problem10 Next User selects next from the GUI Page loads next problem in users list. Check <%= Correct current session session.getAttribute(“current_problem”)$ problem variable >11 Previous User selects previous from the GUI Page loads previous problem in users list. Check <%= Correct current session session.getAttribute(“current_problem”)$ problem variable >12 Repeat 4-11 for large scope of problems13 Check over Have all team members and ITS team The code is code for check over the code. clear and readability understandable and logic. .
  36. 35  Source Code

×