Learn more and in a fun way about cancer with “Hygee” !

In 2013, the regional center Hygée dedicated to the information, prevention and education about cancer, opened on the site of the hospital complex of Saint Etienne (in the south-west of Lyon).

Hygée Center logo

So as to raise awareness of the cancer disease among the young public, the Hygée center asked  Dowino to create a quiz game playable on tablets. Further to successful projects with us (A blind legend 3D audio game, Mission eau mobile game, Effia Synergies quiz, …), Dowino decided to call upon us one more time for the implementation part of the project. We have chosen to use Adobe Integrated Runtime (AIR) to create the application.

Your mission should you choose to accept it, is to help Hygée, the daughter of Asclepios, to perfect her knowledge about medicine (about cancer in fact) and so truly graduate to the rank of Goddess !

Hygée
Hygée, medicine god’s daughter in the Greek mythology

 

The game

As I said before, this mobile application is a quiz game but with a “community aspect“. In fact, the game is intended to be played by multiple persons at the same time. Every good answer add points to a score shared by all the people playing in the same session. There is no more competition but mutual aid between players !

A game session lasts about one hour inside the exposition space, divided in several subjects. To answer the questions, players can get information from medias (signs, videos, …). Players must pay close attention to these medias since good answers brings less points after several mistakes.

You can easily guess that questions are about cancer : history of the disease, screening for cancer, research, … Living hygiene is a determining factor in cancer risk, so put aside red meat, eat your vegetables, go run a marathon and come back to read the end of this article !

Are you done with your vegetables ? … Great !

Conventional web server vs real-time web server

To have the “community” dimension inside the application, a web server is used. The tablets used by the players communicate with the server with a simple client-server communication. The web server hosts a MySQL database which gathers information about the questions and answers, current game session, progress of each player (in the form of a JSON text file *), …

We encountered a big deal with this web server : should it be a conventional one or a real-time one ? The main difference between the two types is the following : a real-time web server is aware of the occurrence of events he was listening to. Thus, it doesn’t require to periodically check for modifications.

With a real-time server, it’s easy to warn players that a session has started / has finished or to update the global score on each tablet. But, it requires much more work (and time) to build such server. On the other hand, the architecture is cleaner and more maintainable and you don’t have to make useless requests every 2 seconds.

Finally, we decided to keep a simple web server based on traditional technologies : Apache, PHP, MySQL, … and AmfPHP, a free and open source software which provides a really simple way of connecting a client with a server, especially useful in Flash to get data from the database.

 

* Why the hell a JSON file to store data and not make use of the database ? Well, I was not fond of this solution either, but since the client wasn’t sure about his needs about player’s progression tracking, we had to be flexible, and the JSON file was the fastest solution VS modifying the database.

BackOffice

Using the web-server to only let players indirectly communicate between us would have not been very intelligent. In fact, the major part of the information stored in the database can be exploited from a website accessible by allowed users.

This web interface let the monitor to start and stop a session, and administrators to get statistics about past sessions : individual and global score, number of tries per question, completed “stations” (set of questions about the same subject), … There is also the possibility to edit questions and to edit a lexicon, accessible by players at any time to get definition of complicated words they can encounter.

To create the back office with a proper architecture and to avoid make it from scratch, I used CRUD Admin Generator, an open source tool to generate a complete backend from a MySql database, made by Jon Segador. The website generated thanks to this tool uses the PHP micro-framework SilexSILEX. It is built on the shoulders of Symfony2 and Pimple and also inspired by sinatra.  Fabien Potencier, the creator of the Symfony framework, and Igor Wiedler are behind this framework (Cocorico !). For the nice aspect of the website Bootstrap Twitter Bootstrap has been used and the iconic font FontAwesome ♥.

The framework is quite easy to use with the MVC design pattern (Twig ♥), but the CRUD Admin Generator terribly lacks of documentation and comments inside the code ! Hopefully, I had some memories about Symfony and I managed to fit the generated website to the client’s needs.

One of the tools I used most is Datatables Datatables, a plug-in for the jQuery Javascript library. Free and open source, it adds advanced interaction controls to any HTML table : sort, pagination, search, … You can easily retrieve data from an Asynchronous JavaScript and XML (AJAX) request, filter and / or edit the data retrieved, add callbacks when a row / cell / header / footer is drawn, …

Deployment

A tricky part of the project was the deployment. The server which host the web-server must not have any access to the internet. To do that, the IP address of the server just has to be changed for a non-routed address. After copying the files on their server, doing some configuration, I had to help the Information Technology Director to configure the last points.

The IT director and I struggled a problem with the connection to the database. The client’s server was using Xampp to “emulate” the server (the time was running !). We thought that XAMPP was trying to use the internet configuration when it has been installed (thus, the routed IP address) and, since the IP address had been changed, MySQL was not able to access the database anymore.

Finally, the problem was a simple line to change in the connection parameters :

'db' => array(
   'driver'   => 'pdo_mysql',
   'dbname'   => '<database_name>',
   'host'     => '<ip_address>', // replaced from 127.0.0.1 to local ip address on the network
   'user'     => '<user_name>',
   'password' => '<password>',
   'charset'  => 'utf8',
 ), 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.