Intelligent Tutoring SystemMobile Communication Team

• Drew Boatwright• Nakul Dureja• Richard Liou

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

*

The Interface

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'},

Scores Table

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'},

Questions Interface

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

Submission

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

Review Mode

● Functions similar to Questions Mode.

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.

Demo

Questions?