Sunday, 26 October 2014

Source code and demonstration video

Source code

Demonstration video

Implementation and Evaluation - Octobor

Front-end Beautification

Did more front-end beautification.


Deleted the social networking.

Sign up

Deleted the social networking


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


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:
  1. I feel that I am involved to take part in the game.
  2. I feel that the relation between my teammate and I has been improved.
  3. I feel more comfortable to talk about a wide range of issues with my teammate.
  4. I think mental health problems are equivalent to other health issues.
  5. I think this game can help real parent and children to improve their relationships.
The summary of the collected data:
Number of users that selected this mark
Average Mark
1 (Disagree)

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


Android Browser (WebRTC is not supported):

New questions for the game

Found some good questions on
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


Android Chrome:

Sign in


Android Chrome:



Android Chrome:

Create a team


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

  1. 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.
  2. What if there are not enough elements in a page, and the page seems very simple and full of blanks?
    1. A simple design is a good design.
    2. 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
For uploading a file:
  1. call Parse.initialize("APP_ID", "Javascript key");
  2. create a file object, and pass into the file object got from input tag
    var parseFile = new Parse.File(file[0].name, file[0]);
  3. call save()
  4. when save() succeeds, reference the file object from to another object
    var fileInstance = new Parse.Object("AppFiles");
    fileInstance.set("file", parseFile);
  5. 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:\
  1. Fetch the object
  2. Fetch the file object reference by it
  3. get the file url by

Tuesday, 20 May 2014

Implementation in Parse - April

Already Implemented

The following functionality has already been implemented before April:

Web Hosting

  1. Login
  2. Register
  3. Answer Questions
  4. Simple badges
  5. View basic personal and team information


  1. Login

Newly Implemented

The following functionality has been implemented in April:

Web Hosting

  1. Create new teams

  2. Admin login

  3. Admin dashboard

  4. Admin view list of
    1. users

    2. teams

  5. Admin view the information of
    1. a user

    2. a team

  6. Admin create questions


  1. View basic personal and team information
  2. Answer questions