1. Intelligent Tutoring System Mobile Communication Team Drew Boatwright Nakul Dureja Richard Liou

2. 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

3. 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

4. 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

5. * 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

6. * 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

7. * The Interface

8. Communication Protocol CLIENT APPLICATION SERVER PHP Scripts DATABASE JSON string with requested data AJAX Call for data User Interface Data Placeholders

9. Communication Protocol Establishing a channel of communication between the server and the client application.

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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.33 33,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'},

16. Scores Table

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

18. Questions Interface

19. Question Rendering Client Calls Server for Random Question Server Returns JSON String for a Random Question Multiple Choice Question Rendering Calculation Question Rendering Matching Question Rendering

20. Submission

21. 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}

22. Submit Calls User Submits Response Multiple Choice Question Calculation QuestionMatching Question Server Call for Submit Feedback : Score + Statistics

23. Review Mode ● Functions similar to Questions Mode.

24. 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.

25. Demo

26. Questions?