🛡️myPAL Bots

myPAL Bots is a privacy education project created by Tina McComiskey to help people of all ages develop digital literacy skills. While initially designed with children and parents in mind, the project serves anyone looking to better understand online privacy - from high school students to adults beginning their digital privacy journey.

Whether you're a parent guiding your child, a student learning about digital safety, or an adult looking to improve your online privacy awareness, myPAL Bots offers accessible education for all levels of technical experience.

Educational Curriculum

Category	Key Topics	Skills Gained	Real-World Applications
Core Concepts	Privacy fundamentals, Digital rights, Data ownership	Critical thinking about personal data	Understanding privacy policies, Recognizing data collection
Laws & Regulations	GDPR, COPPA, Regional compliance laws	Legal awareness, Compliance basics	Navigating consent forms, Understanding user rights
Security Tools	VPNs, Encryption, Anonymous browsing	Technical implementation, Risk assessment	Secure browsing, Safe online transactions
Best Practices	Password hygiene, Data minimization, 2FA	Proactive protection, Security habits	Account security, Reducing digital footprint

Table of Contents

• Homepage
• Spot the Sensitive Information
• Safe to Share
• Installation
• Setup Virtual Environment
• Running the Project
• Contributing
• License
• License
• Adding Questions

Homepage

A description of each of the reocurring characters so audiences understand their role before they see them in the comcis and games. Cards that redirect to each of the lessons.

Spot the Sensitive Information

When you begin a game, you're presented with a comic that reflects the lesson of double-checking images before you post them online.

Each question in this game mimics the UI of an Instagram post. You're able to hover over each square and choose which one you think is revealing sensitive information. The square becomes green if you guessed correctly, and red if it's incorrect.

The end screen displays the total number of correct answers you got.

Safe to Share

When you begin a game, you're presented with a comic that reflects the lesson of paying attention to the context of a situation before deciding to share it.

Each question in this game has drag and drop answers that you put into the answer box. It presents you with a specific situation and you can choose whether you would want to share information in that situation. This is meant to be more nuanced than simple "right" or "wrong" so the wrong answers highlight yellow and you get a hint to help you consider what you might have missed.

The ending displays which category you ended up in based on your answers. It might say you may be too protective of your information (Clam), not protective enough (Goldfish), good at knowing the difference between when to share data and when not to (Octopus), or still new to understanding the concept (Baby Sea Turtle).

Installation

Follow these steps to get the project up and running on your local machine:

Clone the repository

Open your terminal and run the following command:

git clone git@github.com:DIPrLab/EduPrivacy.git 

Setup Virtual Environment

Follow these steps to get the python virtual environment setup

python -m venv venv

1. Activate the Virtual Environment

You need to make sure the virtual environment is activated before you run the following commands.

• On macOS/Linux:

   source venv/bin/activate

  On Windows:

   .\venv\Scripts\activate

Make sure that your terminal shows the name of the virtual environment (venv) at the start of the shell prompt.

2. Install Dependencies

Once the virtual environment is install is activated, run the following command to install all dependencies listed in the requirements.txt file.

pip install -r requirements.txt

Verify all the dependencies are installed

pip freeze

This will show the list of packages that were installed. Check to make sure they match with the requirements.txt file contents if there are any issues.

Node Modules Setup (Node + Pug)

This project uses Pug for HTML templating. To compile the templates and work on the frontend, follow these steps:

1. Install Node.js Dependencies

Make sure you have Node.js installed (v14+ recommended).

Then run the following in the project root to install dependencies from package.json:

npm install

Running the Project

Flask Development Cheat Sheet

Project Setup

Command	Description	Example
python -m venv venv	Create virtual environment	python -m venv venv
source venv/bin/activate	Activate virtual env (Linux/Mac)	source venv/bin/activate
.\venv\Scripts\activate	Activate virtual env (Windows)	.\venv\Scripts\activate
pip install flask	Install Flask	pip install flask==3.0.0
pip freeze > requirements.txt	Save dependencies	pip freeze > requirements.txt

Running the Application

Command	Description	Environment Variables
flask run	Start dev server	FLASK_APP=app.py
flask --debug run	Debug mode (auto-reload)	FLASK_DEBUG=1
flask shell	Open Python shell with app context	FLASK_APP=app.py

Database Commands (Flask-SQLAlchemy)

Command	Description	Example
flask db init	Initialize migrations	flask db init
flask db migrate	Create migration	flask db migrate -m "create users table"
flask db upgrade	Apply migrations	flask db upgrade
flask shell	Interactive ORM shell	db.session.query(User).all()

Pug Package (HTML Templating)

Pug (formerly Jade) is a high-performance HTML templating engine with a clean, whitespace-sensitive syntax.

Command	Description	Example	When to Use
npm install pug	Installs Pug	npm install pug --save-dev	Initial setup
pug [input] -o [output]	Compiles Pug to HTML	pug src/ -o dist/	Build step
pug --pretty	Pretty-print HTML output	pug file.pug --pretty	Debugging
pug --watch	Auto-recompile on changes	pug --watch src/ -o dist/	Development
pug --version	Check installed version	pug --version	Debugging

Key Features

• Clean syntax: No closing tags, uses indentation
• Dynamic content: Supports variables, conditionals, loops
• Mixins: Reusable components
• Template inheritance: Extend base layouts
• Filters: Embed other languages (Markdown, etc.)

Common Flags

Flag	Description
-o, --out [dir]	Set output directory
-P, --pretty	Pretty-print HTML
-w, --watch	Watch for changes
-E, --extension [ext]	Change output file extension

Basic Syntax Example

//- Template
doctype html
html
  head
    title= pageTitle
  body
    h1 Welcome #{user.name}!
    if user.isAdmin
      button Delete All

To apply changes to CTF

cd into the app\templates\ctf and execute the below.

Command	Description	Environment Variables
npm run build	Creates the build of the CTF	Use --help for more info

Next time when you run the project, your changes should be applied.

Heroku Deployment

Cloud hosting for developers of all levels

Heroku is a platform-as-a-service (PaaS) that simplifies deploying, managing, and scaling web applications. Perfect for beginners, it handles infrastructure so you can focus on coding.

Essential Resources

• Official Heroku Docs
• Getting Started Guide
• Best Practices

Pro Tip: Heroku offers a free tier with limited dyno hours—ideal for testing and small projects.

1. Install heroku CLI

Create Procfile

Define a Procfile Use a Procfile, a text file in the root directory of your application, to explicitly declare what command to execute to start your app.

The Procfile in the example app looks like this:

web: gunicorn --config gunicorn.conf.py gettingstarted.wsgi

install the Heroku CLI for MACOS | WINDOWS

curl https://cli-assets.heroku.com/install.sh | sh

or use homebrew for (macOS)

brew tap heroku/brew && brew install heroku

2. Login to heroku

heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

3. Create app (if not done)

heroku create `your-app-name`

4. Deploy to heroku server

git push heroku master

Key Points:

• Heroku automatically detects most languages (Node.js, Python, Ruby, etc.)
• Requires requirements.txt (Python) or package.json (Node.js)
• First deploy may take several minutes

5. Open Live app

heroku open

• Alternatively, visit https://your-app-name.herokuapp.com

• Check logs if the app fails to load

  heroku logs --tail
  

6. Making code changes

1. Edit code
2. commit

git add .
git commit -m "Add user authentication"
git push

3. Deploy again

git push heroku master

Heroku CLI Command Reference

Essential Commands

Command	Description	Example	Flags
heroku login	Authenticates your CLI with Heroku account	heroku login	-i for interactive CI login
heroku create	Creates a new Heroku app with random name	heroku create	--region eu (specify region)
heroku apps	Lists all your Heroku apps	heroku apps	--all shows all team apps
heroku open	Opens app in default browser	heroku open	--app APPNAME specify app
heroku logs	Displays recent logs	heroku logs -n 50	--tail streams live logs

Deployment & Scaling

Command	Description	Example	When to Use
git push heroku main	Deploys code to Heroku	git push heroku main	After each code change
heroku ps	Shows dyno status	heroku ps	Check if app is running
heroku ps:scale	Scales dynos up/down	heroku ps:scale web=2 worker=1	During traffic spikes
heroku restart	Restarts all dynos	heroku restart	After config changes
heroku releases	Shows deploy history	heroku releases	Debug failed deploys
heroku rollback	Reverts to previous version	heroku rollback v123	Fix broken deploy

Common Flags

• -a, --app APPNAME - Specify app name
• -r, --remote REMOTE - Use custom git remote
• --tail - Stream live output
• -n NUM - Limit output lines

Adding Questions

Each multiple-choice question is pulled from a JSON file that follows a simple template so even a non-programmer could easily add more sets of questions to a particular game.

An entire set of questions in a file is surrounded by square brackets. Each question is surrounded by curly brackets. A comma separates each question. For the “Spot the Sensitive Information” game, each question follows this format:

Field	Description
question	A description to introduce the scenario.
type	The format of the question, in this case, “image-grid”.
image	The file path to the visual asset.
options	A list of answers to choose from with descriptions and feedback. The options are surrounded by square brackets, each option is surrounded by curly brackets, and a comma separates each option. The correct option is set to “true”.

And the "Safe to Share" game follows this format:

Field	Description
question	A character asking you to share specific information
context	The context for why the character is asking for that information
answers	The choice of "Share" and "Do Not Share". They each have their own attributes that determine whether they're right or wrong, and reasoning or a hint.
characterName	The name of the character asking for your information.