This tool is built for Mia to use to measure empathy in participants. It involves a quiz interface which will record quiz data from its users, and an admin interface where administrators of the tool can manage and view sessions, quizzes, and participant data.
- Javascript ES6 (React)
- Firebase (Cloud Firestore)
src/: The React front-end.src/assets/: Images, sound files, and other resources.src/components/: React components, separated intoappandadminfolders for the user-facing quiz and the admin panel respectively.src/stimuli/: Resources used for quizzes.
firebase.json: Contains configurations for Firebase.database.rules.json: Contains Firebase database read/write access rules.yarn.lock: Contains dependency management configurations for Yarn.
While this quiz was originally created for use by Mia, you can easily connect the app to your own Firebase database.
- Create a new Firebase project (or use an existing one).
- Go to the project from the Firebase Console (if you just created a new one, you should already be here).
- Under Get started by adding Firebase to your app, select the Web option.
- Choose an app nickname, and leave the option for Firebase Hosting unchecked (you can always add this later).
- Under the Add Firebase SDK step, copy the contents of the firebaseConfig variable in the code snippet, and replace the config object in
src/Firebase.jswith this code. You can also find this SDK code snippet later in the project settings screen.
From the Firebase Console
- Click Authentication
- Click Set up sign-in method
- Under Sign-in Providers click Email/Password, then click the "Enable" slider, then click Save.
- Under Sign-in Providers click Google, then click the "Enable" slider. Set the Project support email to your email address, then click Save.
This provisions your new Firestore database in a Test Mode. From the Firebase Console
- Click Authentication
- Click Create Database
- Choose "Start in test mode", click Next.
- Select a Cloud Firestore Location, click Done.
- Now select, Start collection.
- Collection ID type "admins", click Next.
- DocumentID, leave as Auto-id.
- For Field, type the value "email", Type string, for Value type in the email you used for Authentication. Click Save.
After building the project locally, you can then access the admin panel and start writing data to your database by adding your own sessions and quizzes. You can view this data both in the app and in your Firebase console in the Cloud Firestore database.
Tested with npm version 6.9.0 and node v10.16.3.
In the project directory, you can run:
Installs all dependencies for the app. You need to run this before you can run npm start.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
If you connected this app to your own Firebase project and have the Firebase CLI installed, you can make use of Firebase hosting by running firebase deploy.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
Docker is a tool designed to make it easier to create, deploy, and run applications by using containers. Containers allow a developer to package up an application with all of the parts it needs, such as libraries and other dependencies, and ship it all out as one package.
We have also included a sample Docker setup to enable you to run a local copy of the Empathy tool on any computer running Docker Desktop.
This will still require you follow the steps for setting up a Firebase App and Database. (See above)
The following files and configuration can be used to get you started, they should not require editing on your part.
Dockerfile: File configures a preferred Node version and runs the necessary build commands as above.docker-compose.yml: Uses the docker-compose utility to handle running the Docker container and code for the Empathy tool.
You need to have added your Firebase SDK Snippet to /src/Firebase.js before running this the first time.
This command will download all the necessary components (e.g. Node and required modules) and build the container for a local instance; as well start the Empathy tool for you, which if completed can be accessed On your local machine.
Will stop the Docker container from running.
Will re-build the image if you've edited any of the configuration files or code in the app.
The admin-side of this app enables creating and managing sessions and quizzes for the app. To access it, go to the /admin route (e.g. https://mia-empathy.firebaseapp.com/admin) and sign in via the Firebase auth interface using the same email you added to the Firestore database.
See the User Guide for an interface walkthrough.
The Empathy Tool is licensed under the Creative Commons Attribution license.
Major support provided by the Andrew W. Mellon Foundation. Generous support provided by Nivin MacMillan, Kaywin Feldman and Jim Lutz, Hubert Joly, John and Nancy Lindahl, Marianne Short and Raymond Skowyra, Jr., Richard and Jennie Carlson, Ken and Linda Cutler, Alfred and Ingrid Lenz Harrison, Leni and David Moore, Jr., Sheila Morgan, John and Carol Prince, Joan and John Rex, and donors to the 2018 Mia Gala.