Giter Site home page Giter Site logo

nditech / demgames Goto Github PK

View Code? Open in Web Editor NEW
1.0 8.0 9.0 12.88 MB

DEMGAMES: A civic engagement platform that hosts simple games for engagement at scale for civic organizing, political inclusion, and other democratic concepts.

Home Page: https://demo.demgames.app

License: Other

CSS 7.42% JavaScript 91.81% HTML 0.78%

demgames's Introduction

NDI Logo

DemGames - Debate

License react node node

Documentation - License - Author(s)

Documentation

Table of Contents

  1. Intro
  2. Dependencies
  3. Database Setup
  4. Installation and Configuration
  5. Create Database Schema
  6. Deploying the Application
  7. Contribution

Intro

DemGames is a civic engagement platform that hosts simple games for engagement at scale for civic organizing, political inclusion, and other democratic concepts. Gamified learning platforms offer a unique opportunity to provide light touch, broad reach training for youth with a technology approach that meets them where they are. Games for good can provide basic instruction and reinforce the attitudes and concepts that help young citizens engage in social change. DemGames brings together NDI’s tested civic education best practices with an engaging, fun platform. DemGames makes it easy to set up your own game and gives program implementers an innovative way to reinforce absorption and retention of knowledge while tracking use and learning over time.

Dependencies

In order to run demgames, the items listed below must be installed. The commands for installing each for Ubuntu are included.

  1. Mysql CLI or Mysql Workbench version - 14.14 Distrib 5.7.27

sudo apt install mysql-client-5.7 mysql-server-5.7

  1. Node version - 10.15.3 / NPM (comes prepackaged with node) version - 6.4.1

wget "https://nodejs.org/dist/10.15.3/node-v10.15.3-linux-x64.tar.xz"

sudo tar xf node-v10.15.3-linux-x64.tar.xz --directory /usr/local --strip-components 1

  1. Nodemon (required globally) version - 1.19.1

npm install nodemon -g

  1. Nginx

sudo apt install nginx

  1. Build-Essential

sudo apt install build-essential

  1. Python

sudo apt install python

  1. When installing on a Windows machine: Windows Build Tools

npm install --global windows-build-tools

Database Setup

The database can either be set up locally or on a separate server. DemGames uses MySQL. Connect to MySQL using mysql -u your-username -p and then inputting your password. Initialize the database using:

create schema DemGames;

Installation and Configuration

To download demgames, clone the code using git clone https://github.com/nditech/demgames.git

After downloading the code, edit demgames/server/config/config.json to input the database credentials. Replace the username, password, database, and host based on your database. If you followed these instructions and ran “create schema DemGames;”, the database should be DemGames. The username and password will be what you used for logging in to the database. The host will be 127.0.0.1 unless your database is located on a separate location from your application.

For running on a server:

If you are deploying the code on a server, the several additional changes to files will also be needed. If you are deploying the code locally, ignore these steps and move on to the next section.

  1. In demgames-debate/client/src/settings.js, replace 'http://localhost:9000/api' with '/api'

  2. In demgames-debate/client/src/Auth.js, go to the line that starts with redirectUri: (currently line 16), and replace "https://localhost:8080/callback" with "https://url-of-your-website/callback"

  3. In demgames-debate/server/server.js, go to the last line of the file (currently line 1670), and replace 9000, with 9000,'private-ip-of-the-server',

Additionally, run the following command to set the environment variable to production. Note that this will only apply to the current user and be lost if you logout or start a session as a new user, such as root.

export NODE_ENV=production

Installation

In order to run the application, first run the following command in the demgames directory in order to install the necessary packages:

npm install

Create Database Schema:

To create the database schema, use the following commands in the demgames directory:

cd server
npx sequelize-cli db:migrate
cd ..

Deploying the Application:

The steps to install the server differ depending on whether you are running it on a server or a local computer. Follow only the section below corresponding to which one you are doing.

Running on Local Computer:

You should be able to start the application with the following command:

npm run dev

Alternatively if this does not work, it will also start by running the two commands below in the following order:

nodemon server/server.js
npm run start

Note that if you have already have the node server running, you may need to kill it and restart it. To do so, run the command below, and then run either set of commands above.

fuser -k 9000/tcp

Once the application is running, you can access it by navigating to https://localhost:8080 in your browser. Note that you may need to clear your browser cache to get an updated version of the site. To get content to load, you may also need to install a browser extension to allow CORS or else start a browser session to allow it by running:

google-chrome --disable-web-security --user-data-dir="/tmp/chrome_tmp"

Deploying the Application:

To build the application, run the following command in the demgames directory

npm run build

This should update the directory demgames/dist. Move this directory to /var/www/demgames/dist/ using the following command:

sudo cp ./dist/. /var/www/demgames/dist/ -r

Then, configure nginx. Below is an example of a sample nginx file. Replace the contents of /etc/nginx/sites-available/default.conf with the file below, then run service nginx restart. Then, in the demgames directory, run the node server using npm run server. If you navigate to the url of the server, the application should now be running.

server {
        listen 80 default_server;
        server_name staging.demgames.app;
        root /var/www/demgames/dist/;
        index index.html index.htm;
        error_page 500 /;
        location / {
                autoindex on;
                try_files $uri /index.html;
        }
        location /api {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-for $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://127.0.0.1:9000/api;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        }
}

Contribution

License

GNU General Public License v3.0

Author(s)

⬆ back to top

demgames's People

Contributors

berhanubk avatar blynchndi avatar jatin-narang avatar nguyendviet avatar shahbaz2707 avatar singhsuyash avatar stigsfoot avatar turnerd avatar vnndi avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

demgames's Issues

Update Readme

Update readme based on the new deployment instructions for the new release of demgames

'Move to next level' button text does not fit within the button

The text for the move to next level button (for example 'Move to Level 4') does not fit within the button, and cannot be seen without highlighting. The most obvious solution would be to make the button bigger.

Screenshot from 2019-02-19 12-04-57.png (https://nditech.aha.io/attachments/6662328374142728229/token/b469f896d0a13b7a520a4fbc25f6ae74cdfa9d472805784893b1dc57f6db64db.download?size=original)

Screenshot from 2019-02-19 12-04-59.png (https://nditech.aha.io/attachments/6662328373894200056/token/01e3cc2e0953942771bae8e6b9583607cd3220340ad16f69c405d9954a490fca.download?size=original)

Aha! Link: https://nditech.aha.io/features/G4G-89

Proceed button should be more visible

When selecting an answer for a question on the first level, the proceed button appears at the bottom of the screen below what was previously the bottom of the screen that you could scroll to. If you don't know that you are supposed scroll down further after selecting the answer, you might not be able to find the proceed button. Fixes would either be to always have the proceed button visible but not clickable until you select an answer (maybe make it gray before an answer is selected), or to have the submit button appear in a spot that would be more visible.

Aha! Link: https://nditech.aha.io/features/G4G-83

Text overflows the answer box

In the example text from module 3, the text overflows the box. Ideally, when the text exceed the normal length of the answer boxes, the answer box would expand to fit all the text (and all other answer boxes would match the length so that they all were equal sizes), but this might not be simple to do

Screenshot from 2019-02-19 12-39-11.png (https://nditech.aha.io/attachments/6662328379932502734/token/6c477f419b5071db822415e79143a90198baf2996b6e4f804a8a1ed99644439e.download?size=original)

Aha! Link: https://nditech.aha.io/features/G4G-92

Changing the score in the total score for a level does not change the completion screen

When editing the json file to change the total score for a level, it changes the total score on the selection screen, but not on the completion screen. In the example below, I updated the total score to be 10. This changed the score to 10 for the selection scene as seen in the first screenshot, but it remained at 100 in two places on the completion screen as seen in the second screenshot.

Screenshot from 2019-02-19 12-35-04.png (https://nditech.aha.io/attachments/6662328376481390020/token/0afa148f11923d852b3fa73e618b6f7c7a1401680e2574c16482dd3ee5909485.download?size=original)

Screenshot from 2019-02-19 12-34-06.png (https://nditech.aha.io/attachments/6662328376129767665/token/4a30d2445270a5ef8733584d723eb207360b62904f562a9ac07274269838fe25.download?size=original)

Aha! Link: https://nditech.aha.io/features/G4G-90

Game allowed me to advance to the next level despite losing the previous one

Despite getting a score of 0 on the first level of the first module, I was able to advance to the second level despite getting every question wrong. After getting a winning score for the second level, I advanced to the third. After going back to the level screen, I then had access to levels 1 and 3, but not level 2, which should not be possible.

Screenshot from 2019-02-28 09-23-54.png (https://nditech.aha.io/attachments/6663114423036159596/token/4fcef0007310a0c125b6fd957c9e1640f0bf855abc95fdac63a554b51bacfcdd.download?size=original)

Screenshot from 2019-02-28 09-25-12.png (https://nditech.aha.io/attachments/6663114423005208134/token/f6e7b2e15d4d86e7f1129ba7464219b6d5de324aab32878ea5596ec0fb8eca16.download?size=original)

Aha! Link: https://nditech.aha.io/features/G4G-94

Proceed button hovers over answers

After getting an answer wrong, the proceed button hovers at the bottom of the window even when scrolling up or down, so that it floats over other objects. It should instead stay at the bottom of the page below the correct answer.

Screenshot from 2019-02-19 11-26-09.png (https://nditech.aha.io/attachments/6662328364977449397/token/ab42e1620275cf8b10d241562a7beaca90bfc0fac61293d721eb21e42336eae7.download?size=original)

Screenshot from 2019-02-19 11-26-16.png (https://nditech.aha.io/attachments/6662328364804281891/token/83d2311d6e0b3f314f0497f7d70ebeb387f8e7021bd716f6ae64c4aa81b63469.download?size=original)

Screenshot from 2019-02-19 11-24-22.png (https://nditech.aha.io/attachments/6662328363746193664/token/99ef248343337dfbfd9e64c133ad939c7543f7418ba028d4750f73b5661ab29e.download?size=original)

Aha! Link: https://nditech.aha.io/features/G4G-82

Questions are showing up in a color that is not readable

I am encountering an issue where questions are appearing with a color that is almost the same as the background color, making it not possible to read them unless you highlight them with the mouse.

Screenshot from 2019-02-19 11-23-58.png (https://nditech.aha.io/attachments/6662328366650353196/token/78f89abbd83b3339aaa93600f7fec46aed8f8b5e1a813aa8a6829c8219fb8069.download?size=original)

Screenshot from 2019-02-19 11-23-55.png (https://nditech.aha.io/attachments/6662328366618523454/token/6e6dc5bf7dab019242ad59a1569ce89099c7eeee5ddd672ab7bde64462c45bef.download?size=original)

Aha! Link: https://nditech.aha.io/features/G4G-84

Game content disappears in incognito mode

For some reason, the main view for the game content is missing when viewing the Demgames app in Google Chrome Version 74.0.3729.108 (Official Build) on mobile and Desktop (Android 9 and Mac 10.14.4 respectively),

test

sent from slack

By editing the url, players can gain access to levels they have not unlocked.

For example by changing the url from 'http://localhost:8080/module/1/level/1/questions/' to 'http://localhost:8080/module/1/level/3/questions/', a they can gain access to a level that they have not unlocked. Not sure if this is worth worrying about. One potential solution would be if a user tries to do this, they are redirected to another screen if they do not have access to that level.

Aha! Link: https://nditech.aha.io/features/G4G-93

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.