Intelligent Tutoring System Mobile Communication Team • Drew Boatwright • Nakul Dureja • Richard Liou
Dec 24, 2015
ITS Mobile Communication - Goals
• Developing a prototype Mobile/Tablet Application for the Intelligent Tutoring System.
• The Intelligent Tutoring System interface to be available on mobile/tablet devices:– Increased Accessibility– Multi Platform Possibility
• Android – Current Focus• iOS• Windows Mobile
ITS Mobile Implementation
• Major Tasks performed:– Creating a User Interface for the students to:
• View Questions• Answer Questions• Review Answered Questions • View Scores
– Implementing the communication protocols• Server Side Implementation
– JSON
• Client Side Implementation– PhoneGap
Client Application - PhoneGap
• PhoneGap is being used as the mobile development framework.– Free– Open Source
• Uses HTML5, CSS and JavaScript • No need for coding in native language.• Easier portability to other domains and platforms.• Current ITS uses those same technologies
*
Development Environment
• Android on Linux– Java 7 JDK– ANT
• Build tool to create build a base PhoneGap project
– PhoneGap 2.8.1• Latest version is not installable
– Android SDK• Eclipse
*
Application Design
• jQuery Mobile• Four modes of the application
– Scores• User can view their scores
– Modules• Module selection
– Questions• Complete Questions• MathJax
– Review• Review previous questions completed
Communication Protocol
CLIENT APPLICATION SERVER
PHP Scripts
DATABASEJSON string with requested
data
AJAX Call for dataUser
Interface
Data Placeholders
Data Placeholders
Communication Protocol
• Establishing a channel of communication between the server and the client application.
Server Side Scripting
• The server side of the communication protocol.• Handles the ajax calls from the client:• Currently handling:
– Scores– Questions
• Multiple Choice• Calculation• Matching
– Submit and Answer Feedback
ITS Mobile API Overview
● Scripts○ index.php*
● Classes○ ITS_screen_mobile.php○ ITS_question_mobile.php
● jQuery○ ITS_jquery_mobile.php*
● AJAX○ ITS_ajax_mobile.php
● CSS○ ITS_mobile.css*
* = for testing purposes only
ITS_screen_mobile Class
● Purpose○ Renders the ITS mobile page
● Main Functions○ getScreen($mode, $format)
■ Renders the screen content of the mobile page○ recordQuestion($qid, $qtype, $answered)
■ Calculates score and records it into the database
ITS_question_mobile Class
● Purpose○ Fetches/renders ITS question
● Main Functions○ load_DATA_from_DB($q_num)
■ Loads question title, text, images, etc into the public class variables
○ get_ANSWERS_data_from_DB()■ Formats the question answer data into the proper
HTML based on the question type■ For matching questions randomizes right side
question choices
ITS_ajax_mobile.php
● Purpose○ Controls how the screen is updated. Calls the
ITS_screen_mobile class with the desired arguments.
● Main Arguments○ Mode: score, module, question, review, submit○ Format: HTML or JSON○ Mobile: flag to be set for mobile applications to
ensure proper formatting of the data
Scores Page
• Displays the score of the current user.• AJAX Call:
{"Module":[1,2,3,4,5,6,7,8,9,10,11,12,13],"Scores":[1123.3333,273.3333,0,725,1025,200,470,483.3333,0,140,0,0,0],"Percentage":[27,20,0,16,32,33,34,19,0,47,0,0,0],"Attem":[41,14,7,46,32,6,14,26,0,3,0,0,0],"Avail":["46","42","48","46","46","45","49","273","4","24","24","39","57"]}
url: "http://itsdev3.vip.gatech.edu/~rliou7/Mobile/ajax
/ITS_ajax_mobile.php",type: "GET",dataType: "json",data: {mode: ‘s', format: 'JSON', mobile: '1'},
Questions Page
• Displays Question Interface for the user.• AJAX Call:
url: "http://itsdev3.vip.gatech.edu/~rliou7/Mobile/ajax
/ITS_ajax_mobile.php",type: "GET",dataType: "json",data: {mode: ‘q', format: 'JSON', mobile: '1'},
Question Rendering
Client Calls Server for
Random Question
ServerReturns JSON
String for a Random Question
Multiple Choice Question
Rendering
Calculation Question
Rendering
Matching Question
Rendering
Submit AJAX Call
url: "http://itsdev3.vip.gatech.edu/~rliou7/Mobile/ajax /ITS_ajax_mobile.php",
type: "GET",dataType: "json",data: {mode: ‘submit', format: 'HTML', module: qNum + ‘~’ + qType + ‘~’ + chapter, mobile: 1}
Submit Calls
User Submits Response
Multiple Choice Question Calculation Question Matching Question
Server Call for Submit
Feedback : Score + Statistics
Future Works
• Implementation of Login authentication.• Provide statistics and improved feedback.• Handling images and graphics in questions.• Improve CSS.• Questions Cache for offline work.• PhoneGap Build
– Automatic build service to package app for all phones.• Intelligent Review Mode:
– Reinforcement of Concepts• Most important questions for a particular concept.