Interactive Principles

A deck of learning science principles for designing transformational games

---

2019.12.13 Update

Major updates:

1. Introduced two-factor menu system:

   • Game Design Component (new)
   • Learning Science Principles (original)

2. Updated sidebar menu

   • Implemented as Checkbox to improve interactivity
   • Close-up if click elsewhere

3. Added an intro page:

   • Implemented as Tabs
   • Alternate between Learning Science Introduction / Game Design Introduction

• Package Structure

interactive-principles
├── README.md
├── package.json
├── package-lock.json
├── webpack.config.js
├── .gitignore
├── node_modules
├── config
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── Components
    ├── image
    ├── styles
    ├── principles.json
    ├── intro.json
    ├── index.js
    ├── index.html
    ├── logo.png
    └── favicon.ico

Developed With

• Node.js 8.11 - Javascript runtime
• React 16.4 - A javascript library for building user interfaces
• Babel 6.26 - A transpiler for javascript
• Webpack 4.x - A module bundler
• SCSS - A css metalanguage

---

Getting Started

Run the following commands to run this project on your local server.

Prerequisites

The following software is required to be installed on your system:

• Node 8.x
• Npm 3.x

Type the following commands in the terminal to verify your node and npm versions

node -v
npm -v

Install

Follow the following steps to get development environment running.

• Clone 'interactive-principles' repository from GitHub

  git clone https://github.com/eharpste/interactive-principles.git

  OR USING SSH

  git clone https://github.com/eharpste/interactive-principles.git

• Install node modules

  npm install

Build

Build Application

dev	prod
npm run build:dev	npm run build:prod

Build Application And Watch For Changes

dev	prod
npm run build:dev:watch	npm run build:prod:watch

Build Application With BundleAnalayzer Plugin Included

dev	prod
npm run build:dev:bundleanalyze	npm run build:prod:bundleanalyze

After running the above command, a browser window will open displaying an interactive graph resembling the following image:

Run ESlint

Lint Project Using ESLint

npm run lint

Lint Project Using ESLint, and autofix

npm run lint:fix

Run

Run Start

This will run the 'serve:dev' npm task

npm start

Run Dev Server

npm run serve:dev

Run Dev Server With Dashboard

npm run serve:dev:dashboard

The above command will display a dashboard view in your console resembling the following image:

Run Prod Server

This command will build application using production settings and start the application using live-server

npm run serve:prod

---

Thanks

• Erik Harpstead - Project Advisor - erikharpstead.net

---

Authors

• Katie McTigue - Design + Dev - kaitlinmctigue.github.io
• Cora Wang - Design + Dev - corawang.dev