Current System and Problem

Student: Karen Fernandez, Florida International University Mentor: Dr. Ming Zhao, VISA research lab

Instructor: Masoud Sadjadi, Florida International University

Senior Project, Spring 2013 School of Computing & Information Sciences

Requirements

Interface Design

Implementation The front end is configured as a canvas page loaded into facebook; depending on whether the application is accessed through desktop or mobile the user will be directed to the corresponding page. vMoodle Social asks the user for permissions to access their basic Facebook profile information and logs the user in using the Facebook API. To implement the main elements of the views HTML was used, and CSS for styling. Javascript and Jquery (Jquery mobile for the mobile web application) were used to load dynamic content without having to refresh the whole page. Jquery UI was used to keep the theme, dialogs, icons, and buttons constant. The Jquery TE plugin was used as an html text editor so users can style their comments before posting. The Tiny Carousel plugin was used to present the trending tags in a slider. The Bitpixels.com API was used to create thumbnails of the website resources posted on the resource wall. Firebug and Chrome developer tools were used for debugging purposes.

Screenshots

Summary

Acknowledgements The material presented in this poster is based upon the work supported by the Laboratory for Virtualized Systems, and Applications (VISA). I am thankful for the help that I received from all the members of the lab, especially Dr. Ming Zhao and Gregory Jean-Baptiste.

•  Moodle forums lack many features found in social networks that would be useful for helping students learn better.

•  Moodle does not encourage social interaction between users, which keeps it from effectively building a community of learning.

•  Much information about students cannot be discerned from purely classroom interactions. While Moodle is not intended for that, it would be valuable information for educators.

Figure 1: Current Moodle forums from Senior Project class. Figure 2: vMoodle Social use case diagram.

Users must be able to post on vMoodle Social such that it would work as if they posted through vMoodle’s regular forum. Therefore, posts made in vMoodle Social should appear on vMoodle and vice-versa. Secondly, users should be able to rank replies to questions they feel are accurate and useful, in order to promote the user that posted the response. Users could search for relevant information before posting a new question, to avoid redundancy. Users could mark their questions with relevant tags to aid other users later on. Students should be given tools to connect with other students outside the classroom. Users should be alerted when new information is available in vMoodle Social. Finally, teachers and administrators should be able to gather relevant information from the forums for educational purposes.

Figure 4: Home page wireframe Figure 5: Comments page wireframe

Figure 6: vMoodle Social mobile home, thread, comment, and search page wireframes.

System Design

Figure 3: vMoodle Social System decomposition diagram.

After analyzing the requirements, the different views of the system were designed keeping in mind our performance, supportability, and usability design goals. Supportability •  vMoodle Social’s interface is compatible with Google Chrome versions 26+ and Mozilla Firefox

versions 20+. It also has a mobile view implemented as a mobile web app in order to support both Android and iOS users.

Performance •  The contents of the page are dynamically loaded with JQuery on an as-needed basis without having to

reload the whole page.

Figure 3 illustrates vMoodle Social’s client-server architecture. The user only needs a web browser with Javascript enabled to be able to use the application. The user interface is hosted on Heroku and remotely accesses the server’s API. The server is running Apache, PHP, a MySql database, and Moodle 2.4. The PHP vMoodle code functions are divided into the Moodle handler

which deals with the already existing Moodle database tables, and the Social handler which deals with the newly added social tables and functions.

Figure 7: vMoodle Social Home Page

Figure 8: vMoodle Social Home Page (mobile)

vMoodle is a virtual machine based online learning system which extends the Moodle course management system.

vMoodle Social is a solution for the need of more interactive online education tools which can enhance on-campus and virtual classroom learning communities. It has useful functions for both student and professor users. It is implemented as a client server system; the server runs Apache, PHP, mySQL, and Moodle 2.4. The user interface was designed in order to engage users while meeting their needs, it was implemented using technologies such as HTML, Javascript, Jquery, Jquery UI, Jquery mobile, and CSS.

Usability •  The elements which represent

the main functions of the system are located on the left-hand navigation menu and homepage for easy access.

•  Visual noise has been reduced to a minimum in order to make the interface easy to use instead of overwhelming.

•  Error messages indicate the problem and suggest a solution.

•  Related items are grouped together to help the user achieve his/her goal with minimal effort.