Kevin's 2014 Thesis

Sunday, 26 October 2014

Source code and demonstration video

Source code

https://bitbucket.org/xsun9092/familyconnect.git

Demonstration video

http://youtu.be/NU6zF2cCqMo

Implementation and Evaluation - Octobor

Front-end Beautification

Did more front-end beautification.

Login

Deleted the social networking.

Sign up

Deleted the social networking

Dashboard

Beautified the "team info" section; added images and tags for the challenges.

Admin login

Admin dashboard

View user list

View team list

Add new challenge

Need marking list

Mark a challenge

Evaluation

10 of my housemates were invited to participate the evaluation of this project. They are all students of University of Sydney or University of Technology, Sydney. 4 of them are female.

After 2 weeks of evaluation, they were asked to give the degree to which they agreed with the following statements:

I feel that I am involved to take part in the game.
I feel that the relation between my teammate and I has been improved.
I feel more comfortable to talk about a wide range of issues with my teammate.
I think mental health problems are equivalent to other health issues.
I think this game can help real parent and children to improve their relationships.

The summary of the collected data:

No.	Number of users that selected this mark					Average Mark
No.	1 (Disagree)	2	3	4	5 (Agree)	Average Mark
1	1	3	5	1	0	2.6
2	0	1	2	2	5	4
3	1	1	7	1	0	2.8
4	3	5	2	0	0	1.9
5	0	0	2	2	6	4.4

Implementation - September

QR code scanning

Implemented a QR code scanner that runs on HTML5 browser. It applies a javascript QR code scanning library: jsqrcode. It has been tested that the scanner can run on Desktop Chrome, Android Chrome, Android UC Browser.

The scanner is using a WebRTC API: getUserMedia(http://caniuse.com/#search=getusermedia) to access the camera. If the browser can support this API, the scanner can get a video stream and get QR code from this stream. The user doesn't need to tap any button to take pictures. However a large part of the browsers can not support WebRTC. If the user is using a browser that cannot support WebRTC, the front-end will use an <input type="file"> tag to get a image and parse the QR code in it. In such case, the user need to tap a button to take photos and submit it to the system.

Using WebRTC.getUserMedia()

The API is in javascript. A javascript programme can call this method to get access to user's webcam and / or microphone. Some browsers can not support this API, and calling this API will return undefined. Different browsers have different forms of the API name: mozGetUserMedia, webkitGetUserMedia, etc.

Calling this API will require a parameter about the requesting permission: video, or audio, or both. If calling this API is successed, a video stream captured by the webcam / microphone will be got.

Using jsqrcode

Jsqrcode is a porting of ZXing.

The decoding is based on <canvas>. So if canvas is not supported, the library can not work. In the project, if a user is using a browser that can not support canvas, the scanner will show a page to suggest the users some modern HTML5 browsers.

The library will decode the canvas named "qr-canvas" when qrcode.decode is called.The result will be returned by a callback function.

Screenshots

Desktop:

Android Browser (WebRTC is not supported):

New questions for the game

Found some good questions on http://www.sheknows.com/parenting/.

These questions / challenges are all designed to be completed by a family. I think it is good for family relationships. 10 questions from this website has been added to the project.

Implementation - August

Front-end Development

The Bootstrap library is applied in the front end.

Sign up

Desktop:

Android Chrome:

Sign in

Desktop:

Android Chrome:

Dashboard

Desktop:

Android Chrome:

Create a team

Desktop:

Android Chrome:

Bug fixes

The system was using different table columns to store question information. There was a bug that when the admin created a new question, sometimes the stored question types and some data fields were wrong. Transferring a database question object to a question object in back-end code is hard wordy.

Now the system is using json to store different question classes. It is easier to transfer objects using json. And the extensibility is also improved. Any new question object can be transferred to json string and stored as a string in Parse data. Adding new question types doesn't require modification to current code.

Implementation - June

Meeting with Dorian

Met with Dorian 05/06/2014, and talked about the front-end design of the game.

Information and suggestions got from Dorian

Where to start?
Start from applying Bootstrap library in front-end.
Bootstrap can help to do responsive design.
Basic beautification can also be done by Bootstrap.
What if there are not enough elements in a page, and the page seems very simple and full of blanks?

A simple design is a good design.
As for the blanks, make the elements bigger.

Implementation - May

Different question types

Now 3 different question types are supported for admin to create.

Multi choice

Same to the previous question type.

Filling in blank

The user need to fill in the blank to answer the question.

Uploading a file

Upload a file to Parse by the javascript API of Parse.

How to upload a file to Parse hosting

Parse hosting is using a modified version of Express.js framework. Some of the functionalities are disabled, e.g. file uploading in a form.

For the normal Express.js, an <input type="file"> will put the file into req.body. But as Parsed modified the Express.js framework, the file is not uploaded to req.body, and the developer can not access the file from Express.

Parse javascript API is the only solution.

How to use Parse javascript API

Follow the guide at https://parse.com/docs/js_guide.

For uploading a file:

call Parse.initialize("APP_ID", "Javascript key");
create a file object, and pass into the file object got from input tag
var parseFile = new Parse.File(file[0].name, file[0]);
call save()
parseFile.save().then(...)
when save() succeeds, reference the file object from to another object
var fileInstance = new Parse.Object("AppFiles");
fileInstance.set("file", parseFile);
submit the form when fileInstance is saved to cloud

A file object doesn't have an objectID. So linking with another object is the only way of reuse the file object.

When the server get the object linked with the file object:\