To Run

Installing dependencies and running the flask application:

cd flask-app
pip3 install -r requirements.txt
flask run

Building and running the node.js server which handles the socket.io calls:

cd server 
npm install
node index.js

Running React.js client:

cd client
npm install
npm start 

Reference: Build a real-time chat app with React hooks and Socket.io.

Project structure

1. \client: This folder contains the code for the React.js frontend of the application
2. \server: This folder contains the code for the node.js application which is handling the configuration and socket.io server.
3. \flask-app: This folder contains the flask application code which is used to expose API's to retrive and store information to a MYSQL database

Database structure:

This project uses MYSQL for storing all the data which is generated by users through the frontend interactions.

Following is a description of the tables and the data they hold:

1. demographic_info: This tables hosts the data entered by users when they start interacting with the application. This table includes information like users age, primary language etc.
2. player_moves: This table contains information about the cards selected by specific users during various rounds of the game
3. survey_repsonses: This table has the user responses for survey questions asked after each round and after each game.

Configuring the room/ game/ card information

All the configuration for the application can be made using RoomCardConfig.json file present in \server folder.

The following is a description on how to change/ add/ remove different components of this json file to change the behavior on the application:

1. Editing a Card information like description or name etc.

   {
   "rooms": [
       {...
           "games": [
               {...
                   "cards": [
                       {"name": "Card 1.1", "description": "Card 1.1 description", "player": 0}
   

   Edit the cards[].name or cards[].description fields to change information about a specific card in the game

2. Changing Survey questions asked to the user at the end of a round or a game:

   {
   "rooms": [
       {...
           "games": [
               {...
                   "feedback_questions": ["Question 1.1", "Question 1.2"],
                   "game_end_survey": ["Game end survey Question 1.1", "Game end survey Question 1.2"]
   

   • Change the values of list "feedback_questions" to change the questions displayed after each round of a certain game.

   • Chnage the values of the list "game_End_survey" to change the questions displayed after each game. NOTE: In the current implementation these lists can only contains 2 questions. In future updates this will be made dynamic

3. Changing game parameters like number of players, rounds or games or the time delay for displayig the survey page after the user plays a card.

   {
   "rooms": [
       {
           "roomid": "a",
           "player_limit": 2,
           "round_limit": 2,
           "game_limit": 2,
           "display_survey_delay": 10000,
   

   • Changing the parameters "roomid", "player_limit", "round_limit", "game_limit" or "display_survye_delay" can change different aspects of the game
   • NOTE: If the number of games is changed make sure that the "games" list for that room is also modified to reflect the new number of games
   • NOTE: the parameter "display_survey_delay" takes values in milliseconds

4. Adding new rooms to the game:

       {
       "roomid": "a",
       "player_limit": 2,
       "round_limit": 2,
       "game_limit": 2,
       "display_survey_delay": 10000,
       "games": [
           {
               "gameid": "Game 1",
               "cards": [
                   {"name": "Card 1.1", "description": "Card 1.1 description", "player": 0},
                   {"name": "Card 1.2", "description": "Card 1.2 description", "player": 0},
                   {"name": "Card 1.3", "description": "Card 1.3 description", "player": 1},
                   {"name": "Card 1.4", "description": "Card 1.4 description", "player": 1}
               ],
               "feedback_questions": ["Question 1.1", "Question 1.2"],
               "game_end_survey": ["Game end survey Question 1.1", "Game end survey Question 1.2"]
           },
           {
               "gameid": "Game 2",
               "cards": [
                   {"name": "Card 2.1", "description": "Card 2.1 description", "player": 0},
                   {"name": "Card 2.3", "description": "Card 2.3 description", "player": 0},
                   {"name": "Card 2.2", "description": "Card 2.2 description", "player": 1},
                   {"name": "Card 2.4", "description": "Card 2.4 description", "player": 1}
               ],
               "feedback_questions": ["Question 2.1", "Question 2.2"],
               "game_end_survey": ["Game end survey Question 2.1", "Game end survey Question 2.2"]
           }
       ]
   }
   

   • Each room in the game is defined wih a configuration block as shown above.
   • Adding or removing such blocks from the configuration will allow us to add or remove rooms into which users can join.