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:

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:

No.	Number of users that selected this mark					Average Mark
	1 (Disagree)	2	3	4	5 (Agree)
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

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 https://parse.com/docs/js_guide.

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()
   parseFile.save().then(...)
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
   file.url()

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

Android

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
   
   
   

Android

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

Implementation in Parse: Connect to Parse in Android

1. Get the App ID and client key in the app's setting --> application key page
2. Download the Parse SDK for Android
   https://www.parse.com/downloads/android/Parse-Starter-Project/latest
   and add it to the Android project
3. In the project code (init part), use the App ID and client key to init the Parse SDK
4. Call Parse SDK to manipulate the cloud data
1. ParseObject
1. getString
2. getBoolean
3. ...
4. put("FIELD_NAME", value)
5. saveInBackground
2. ParseQuery<ParseObject>
1. whereEqualTo("FIELD_NAME", value)
2. findInBackground(new FindCallback<ParseObject>(){...})

Implementation in Parse - Creating a new Parse project

1. Create a new app in Parse dashboard
2. Set its domain name in app setting
3. Check out the cloud files
1. install the client if it has not been installed yet
   for Mac/Linux:
   curl -s https://www.parse.com/downloads/cloud_code/installer.sh | sudo /bin/bash
2. check out the files
   parse new FolderName
   Enter email and password, and choose the target project
4. Add node.js - express code
   parse generate express
5. Add any initial code and/or files
6. Upload
   parse deploy

Now the project can be changed locally and uploaded by the same command.

Project URL: http://familyconnect.parseapp.com/

About Implementation and Hosting

The project is preferred to be implemented in Java-Spring. And as AWS EC2 provides a 1-year free trial, the project can be hosted in AWS.

But I have not learnt Spring before, and I will have a unit about Spring (ELEC5619: Object Oriented Application Frameworks) in the next semester. So I will start changing the implementation method to Spring next semester.

In this semester, I will implement the project in node.js - express and host it in Parse. I choose Parse because I am familiar with it, and Parse provides an easy way to cooperate between mobile and web platforms. It supports only node.js - express hosting. As a cloud service provider, Parse sets some limitation on the hosted node.js code (e.g. on file operations, Regex, resources). It is better not to host the final code in Parse.

Mock Up - 1

The following 2 images are the 1st version mock up.

Mock up for webpages

Mock up for Android

Literature Review - 1

About Stigma in Mental Health

Literature by Helen Christensen

1. Stigma about depression and its impact on help-seeking intentions
   Conclusion: Stigma exists prevalently; from both oneself and others, also caused by expectation of negative response (from doctors/psychologists). Young people are more unwilling to seek for help when meeting mental-health problems.
   Note: Data and analysis is provided, but no practical solutions are presented.
2. Stigma in response to mental disorders: a comparison of Australia and Japan
   Conclusion: Stigma exists in both countries; stigma is more serious in Japan.
   Notes: Possible solutions:
1. Reduce social conformity and individualism.
   (impossible for a game)
2. Improve service delivery system, so that people with mental problems can contact with the society more frequently.
   (impossible for a game)
3. Provide education about public mental health (stigma reduction programs included).
   For the game: provide such kind of education and stigma reduction programs in the gameplay, e.g. embedded in the game stories, a mission on this topic, etc.
4. Conduct public awareness programs to show the real rate of stigma in the community.
   (impossible for a game)
5.  Increase people's willingness to talk with a person with mental disorder
   For the game: provide education to increase people's willingness. It is possible to integrate this education with the stories/mission in 3.
3. Exploring the nature of stigmatising beliefs about depression and help-seeking: Implications for reducing stigma
   Conclusion: Points in reducing stigma (of depression):
   target attributions of blame; decrease depressed people's avoidance; make people feel that depression is a "health condition" rather than "mental illness"; increase help-sources' response.
   Notes: Possible solutions (for stigma around depression):
1. Provide education about the raise of depression
   For the game: Introduce some mental problems and their causes and solutions. But it may make the game boring.
2. Reduce the concerns about others' negative attitude
   (impossible for a game)
3. Reduce psychology professionals negative responses towards people with mental problems
   (impossible for a game)
4. Change the general public attitude towards people with mental problems
   (impossible for a game)
4. Effects of a Cognitive-Behavioural Internet Program on Depression, Vulnerability to Depression and Stigma in Adolescent Males: A School-Based Controlled Trial
   Conclusion: Internet cognitive behaviour therapy programs like MoodGYM can decrease the risk of depression.
   Notes:
   Possible solutions:
1. The programs should be attractive to the users (adolescent males) and should not be too difficult.
   For the game: If mental education stories or missions are applied in the game, they should be easy and interesting
2. The program materials should be in a format that are not difficult to the users.
   For the game: Similar to the above one.
3. Pay attention to the short lasting effect.
   For the game: Do the education repeatedly in different stories and missions. May make the game boring.

About Counselling Psychology

1. Handbook of Counselling Psychology
   (695 pages)
   The book talks about the development of counselling psychology and many aspects and issues about counselling psychology.

Gantt Chart

The project file is hosted in Google Drive (Gantter is needed to view the project).

Link: https://drive.google.com/file/d/0B7VQnpN8MOL4aE5XRWE3ck9qRjQ/edit?usp=sharing

Gantt chart in png:

Draft Proposal

Title:

Web game for well-being

Proposer:

Xiaodong Sun

Supervisor:

A/PROF Rafael Calvo

Background

The effect of electronic games on teenagers has long been contentious. Research shows that playing games cooperatively can improve the relationship between players. And cooperative gameplay in family can also help to build stronger family relationships, thus improving family members' mental health and providing better support when mental issues arise. Currently the development of pervasive computing and wireless network boosts not only business, but also electronic entertainment. A web game on multiple platforms can help family members play games together without the impeding of time or space.

The project's purpose is to develop a web game which can help users to build stronger family relationships, so that the users have better opportunities of getting and providing mental support to their families.

Problem Statement

A lot of issues need to be solved before the success of this web game.

Game Design

1. How to involve both the children and parents?
   Cooperative gameplay is the core activity in this game. Therefore the game shall be designed that it can only be finished under the cooperation of both the children and the parents. The game shall be interesting for the children so that they are willing to participate in the cooperation with their parents. It will be better (but not necessary) if the game is also interesting for the parents.
2. How to encourage children's discussion of sensitive issues with their parents?
   The project aims to encourage the children to seek for help from their parents when encountering sensitive issues. Cole and Griffiths found that online game players are more willing to discuss sensitive issues with their play mates (than real life friend) because the anonymity and the similar age range, which neither exists in child-parent relationships. Without a good solution to this problem, even if the game improves the child-parent relationships, it may not improve the mental well-being of children.
3. How to reduce the stigma surrounding mental health issues?
   The game is also designed to make players feel that mental health issues are as equivalent to any other health issues, so that the players will be confident to seek help when encountering mental problems.

A deep literature review in psychology and game design fields is needed to find solutions to the above problems.

Game Development

1. Applying the Spring framework.
   Spring framework is expected to be applied in this project. This framework is complicated and totally new to me. This issue can be addressed by learning of the framework before the development phase.
2. Server interface design
   The server shall provide interfaces which are called by both a responsive web app/ website and a mobile app. It is complicated and requires consideration of protocol, data transfer and security.

Methodologies

The qualitative research methodology will be applied in this project due to the limitation of time and resource for an MPE project. The design and development will be based on past research and deduction of current theories. The product of the project will be tested by special selected users. User's views will be collected by 1:1 interviews, and several deep questions will be asked to get more valuable feedback.

Schedule

1. Background research and requirement analysis
   Jan 3rd ~ Mar 27th (Topic Proposal due)
1. Background related literature review
   Jan 3rd ~ Jan 6th
2. Requirement analysis
   Jan 6th ~ Mar 7th
1. mock up
2. simple prototype
3. meeting with UI designer and psychology expert
3. Scope negotiation and feature selection
   Mar 7th ~ Mar 14th (Topic Registration due)
4. Formal requirement document and project plan
   Mar 14th ~ Mar 21st
5. Literature review (psychology and game design)
   Mar 7th ~ Mar 27th
2. Design
   Mar 31st ~ Apr 25th
1. System structure
2. Back end
1. Detailed software structure design
2. Data model
3. Front end?
4. Development iteration plan
5. Learn Spring
3. Development
   Apr 28th ~ Jul 20th, except the exam weeks; 1 week per iteration
1. Development
2. Progress report
   May 19th ~ Jun 5th (Progress Report due)
1. draft
   May 19th ~ May 29th
2. final
   May 30th ~ Jun 5th
4. Test and draft thesis
   Jul 21st ~ Oct 10th (Draft Thesis may due on Oct 24th)
1. Alpha test
   Jul 21st ~ Jul 27th
2. Inner beta test
   Jul 28th ~ Aug 8th
3. release and field test
   Aug 11th ~ Oct 10th
4. draft thesis and wait for test result
   Aug 11th ~ Oct 10th
5. Data analysis
   Oct 11th ~ Oct 17th
6. Final thesis
   Oct 17th ~ Nov 6th (Final Thesis may due on Nov 7th)
7. Presentation
   Nov 7th ~ Nov 13th (Presentation may be on Nov 14th)

Questions for UI Designer and Psychology Expert

The following questions are prepared for the meeting with our UI Designer on 24/02/2014. These questions are mainly based on my questions about the project background.

Game Design

Have designed?

• Yes: description
• No: how to design

Important features of the game

1. How to involve both the children and the parents?
• interest the children to play games with parents (not friends)
• in prototype
• team: a child with a parent
• team mark, group mark
2. How to support/encourage children's discussion of sensitive issues (with parents)?
• literature
• SAFE
• online game friends
• anonymous
• age range
• family - how to make children feel safe?
3. Key points in the designer's point of view

Meet the victory conditions

1. How to reduce stigma surrounding mental health issues?
   “If anxiety was really getting in my way, I would see my doctor to find out what I could do about it.”

UI Design

1. Confirm the same understanding of the game design
2. Design for mobile? web page? other devices?
3. Basic draft and mock up

Draft Project Plan - 1

The following outline is a draft plan for the project. After detailed discussion with my supervisor, the final one will be made before 27/03/2014 (Topic proposal due date).

1. Background research and requirement analysis
   Jan 3rd ~ Mar 27th (Topic Proposal due)
1. Background related literature review
   Jan 3rd ~ Jan 6th
2. Requirement analysis
   Jan 6th ~ Mar 7th
1. mock up
2. simple prototype
3. meeting with UI designer and psychology expert
3. Scope negotiation and feature selection
   Mar 7th ~ Mar 14th (Topic Registration due)
4. Formal requirement document and project plan
   Mar 14th ~ Mar 21st
2. Design
   Mar 31st ~ Apr 25th
1. System structure
2. Back end
1. Detailed software structure design
2. Data model
3. Front end?
4. Development iteration plan
5. Learn Spring
3. Development
   Apr 28th ~ Jul 20th, except the exam weeks; 1 week per iteration
1. Development
2. Progress report
   May 19th ~ Jun 5th (Progress Report due)
1. draft
   May 19th ~ May 29th
2. final
   May 30th ~ Jun 5th
4. Test and draft thesis
   Jul 21st ~ Oct 10th (Draft Thesis may due on Oct 24th)
1. Alpha test
   Jul 21st ~ Jul 27th
2. Inner beta test
   Jul 28th ~ Aug 8th
3. release and field test
   Aug 11th ~ Oct 10th
4. draft thesis and wait for test result
   Aug 11th ~ Oct 10th
5. Data analysis
   Oct 11th ~ Oct 17th
6. Final thesis
   Oct 17th ~ Nov 6th (Final Thesis may due on Nov 7th)
7. Presentation
   Nov 7th ~ Nov 13th (Presentation may be on Nov 14th)

System Analysis - 1

This system is based on the meeting with Rafa, and it is only for the prototype.

System Structure

Class Diagram

Background Analysis - 1

This is a very first and basic analysis of the project background, based on the project extract which Rafa sent me. I think more project information and deeper analyses are needed to get a better understanding of the project, and make reasonable plans for both the project and the final thesis.

Project extract from Rafa:

Background and project rationale:

Stronger family relationships are predictive of better mental health, and better support when problems arise[ref]  All families would benefit from new opportunities to connect that work within the realities of modern life.  Cooperative gameplay provides opportunities for bonding and strengthening relationships in an accessible and adaptable way.  More specifically, a meaningful relationship with fathers, or other Significant Male Adults (SMA), are important to adolescent development, while meaningful relationships with offspring are important to fathers.  there are many reasons why parents and adolescents may not get opportunities to connect and open up to each other - especially about emotional or sensitive issues.  Gameplay via pervasive digital devices has the power to provide opportunities by circumventing obstacles like time, place, or the intimidating nature of direct discussion.  Moreover, play is fun practice and players can practice responding to difficult situations in the safe context of a game.

A reluctance to communicate about emotional experience is common among males, and therefore between fathers/SMAs and their children and this reluctance is an obstacle to either group seeking help when they need it [ref]. Opening new lines of communication is one way to tackle this problem, and this is possible through cooperative gameplay and the opportunities for safe and playful sharing and negotiation it provides. A game can tackle the problem intrinsically (see research below) as well as through the careful employment of content and theme.   The gaming environment can also build soco-emotional skills through simulation, modelling and the provision of educational content. Moreover, a game environment can incorporate themes and messages aimed at eroding the stigmas blocking males from seeking help.

The unique affordances of games for connectedness and wellbeing

According to Brand’s (2013) research 96% of 11 to 15 year olds and 85% of 16 to 24 year olds play videogames. Additionally, Australians in their 40s and 50s make up the largest group of new adult gamers with 62% of those aged 36 to 50 (and 39% of over 50) now playing. There is a very clear opportunity to capitalise on young people's passion for videogame play and to build on the growing interest in videogames among older Australians. But it’s not just that games are particularly accessible or popular, it is also that they hold unique potential for promoting wellbeing.

How games can promote psychological wellbeing

Contrary to many popular conceptions, much of the recent research shows a variety of positive impacts of videogame play on both psychological and social wellbeing (see Johnson, Jones, Scholes and Carras, 2013) for a review). Psychological wellbeing can be considered to relate to mood, emotions, thoughts and cognitions, while social wellbeing relates to a person’s ability to make and maintain healthy interactions, relationships and connections with others (Durkin and Barber, 2002; Russoniello et al., 2009).

Przybylski and colleagues (2009) have established, based on self-determination theory, that videogames offer players satisfaction of their need for feelings of competence, autonomy and relatedness. Our own research has confirmed this with an Australian sample (Johnson & Gardner, 2010). Moreover, satisfaction of these needs while playing videogames leads to long lasting improvements in positive affect/mood, post-play energy, life-satisfaction and self-realisation (Przybylski et al., 2009). In a randomised controlled trial with a clinically depressed sample, the positive influences of videogames on mood have been shown to include reduction in tension, anger, depression and fatigue and increase in vigour (Russoniello et al., 2009).

Among school aged boys research is coalescing to show a range of psychological benefits of moderate play. The evidence suggests that those who play showed better outcomes than those who never played on positive school engagement, mental health and self concept. More research is still needed, particularly in the area of games designed specifically to support mental health and wellbeing.

How games can promote social wellbeing

As Granic and colleagues (2013) note, perhaps the biggest change in videogame characteristics over time is the degree to which they encourage social interaction with modern games being pervasively social. Yee (2006) collected data from 30,000 players of massively multi-player online role-playing games and found that some of the strongest motivations for play were related to social wellbeing, specifically: socialising (chatting with and helping others), the desire to form meaningful relationships with others, and deriving satisfaction from teamwork. Durkin and Barber (2002) found that a high proportion of time spent playing was with friends and family. Moreover, they found evidence that videogame play was positively associated with family closeness and social involvement.

Additionally, it seems clear that the social connections made during videogame play carry over into real life. Yee (2006) found that players described their online friendships as comparable to their real life friendships and that play was used to form and extend real life relationships.

How games support the discussion of sensitive issues

Cole and Griffiths found that 40% of participants reported that they would discuss sensitive issues with their online gaming friends that they would not necessarily discuss with their real life friends. There is a clear opportunity to help young men and boys build and maintain their relationship with their parents through cooperative, collaborative and creative play afforded through a digital game experience.

Game design can inform other areas in human-computer interaction

What we learn while designing mobile games that promote mental health can be incorporated into other Positive Computing applications (Calvo & Peters, to appear) such as social networks and collaboration software.

Impact

The project will impact the mental health of boys and men in the following ways:

• Stronger relationships and increased connectedness between adolescents and fathers/SMAs.
  Victory condition: That players report the experience made them feel closer to their teammate and/or that they know more about each other. eg. “I learned a lot about my dad.”
• Increased socio-emotional skills derived from novel father-son interactions, structured cooperative play experiences and the negotiation and diverse forms of communication practice that come with these.
  Victory condition: That players report feeling more comfortable talking about a wider range of issues. 
  eg. “I feel like I can talk to my son about sensitive issues more easily now”
• Reduced stigma surrounding mental health issues and around help-seeking achieved through exposure to related scenarios, educational information embedded in gameplay, and simulated experience responding to these issues.  
  Victory condition: That players describe mental health issues as equivalent to any other health issue. That they demonstrate knowledge of prevention strategies and confidence to seek help.  
  eg. “If anxiety was really getting in my way, I would see my doctor to find out what I could do about it.”
• Contribution to research and practice in games for social impact.  While the project is designed to have an immediate impact on those who participate, it will also contribute new knowledge for future work in the use of mobile games as a platform for health promotion and social impact.  Lessons learned will be disseminated via research and trade publications.

Problems

Moreover, they found evidence that videogame play was positively associated with family closeness and social involvement.

• family closeness → How to make it?
• Not so doomed: computer game play and positive adolescent development, Kevin Durkin, Bonnie Barber

• adolescents in naturalistic environments reported higher arousal and more positive subjective states during computer game play, especially when the activity was undertaken in the company of friends or parents.

• how? → induce parents to play this game with adolescents

Cole and Griffiths found that 40% of participants reported that they would discuss sensitive issues with their online gaming friends that they would not necessarily discuss with their real life friends.

• also works for families? if not, how to make it work for families?
• Social Interactions in Massively Multiplayer Online Role-Playing Gamers, HELENA COLE, and MARK D. GRIFFITHS
• an outlet to safely discuss serious matters
• One of the advantages of online friendships is anonymity
• while online, some people self-disclose or act out more frequently or intensely than they would in person
• age range of players
• families → no anonymity → how to make it work for families?

Victory condition: That players report feeling more comfortable talking about a wider range of issues. eg. “I feel like I can talk to my son about sensitive issues more easily now”

• How to make it? 

Victory condition: That players describe mental health issues as equivalent to any other health issue. That they demonstrate knowledge of prevention strategies and confidence to seek help.  
eg. “If anxiety was really getting in my way, I would see my doctor to find out what I could do about it.”

• How to make it?