Structure

General Structure

Empirica allows you to build powerful apps for multiplayer and singleplayer research. It is made of these important components:

  • Your code.

    • The backend (managing your games and data) with Meteor

    • The frontend (what the players see and interact with) with React.js

  • An Admin Panel that allows you manage the conditions, games, and players in your experiment.

  • A connection to a database, such as MongoDB Atlas, to store your data that can be accessed and modified live by your experiment.

  • The app is deployed to a hosting service, such as Meteor Galaxy, so that your experiment is online and you can send a link for players to connect to it.

File Structure

This is what a starting Empirica experiment file structure looks like:

my-experiment
├── .meteor
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
├── client
│   ├── main.html
│   ├── main.js
│   ├── main.css
│   ├── game
│   │   └── ...
│   ├── intro
│   │   └── ...
│   └── exit
│       └── ...
└── server
    ├── main.js
    ├── callbacks.js
    └── bots.js

It contains:

  • .meteor with the meteor files. You do not need to touch those.

  • node_modules the files for the node modules in your app. You do not need to touch those. This directory should be in the .gitignore file.

  • public where you store static assets (e.g., images).

  • client where you set what the players can see in the experiment.

  • server where you manage the flow and resources of the experiment.

Client

All code in the /client directory will be ran on the client. The entry point for your app on the client can be found in /client/main.js. In there you will find more details about how to customize how a game Round should be rendered, what Consent message and which Intro Steps you want to present the players with, etc.

The HTML root of you app in /client/main.html shouldn't generally be changed much, other than to update the app's HTML <head>, which contains the app's title, and possibly 3rd party JS and CSS imports.

All styling starts in /client/main.less, and is written in LESS, a simple superset of CSS. You can also add a plain CSS files in /client.

The /client/game, /client/intro, /client/exit directories all contain React components, which compose the UI of your app. If you are new to React, we recommend you try out the official React Tutorial.

Server

Server-side code all starts in the /server/main.js file. In that file, we set an important Empirica integration point, the Empirica.gameInit, which allows to configure each game as they are initiated by Empirica.

From there we import 2 other files. First the /server/callback.js file, which contains all the possible callbacks used in the lifecycle of a game. These callbacks, such as onRoundEnd, offer powerful ways to add logic to a game in a central point (the server), which is often preferable to adding all the logic on the client.

Finally, the /server/bots.js file is where you can add bot definitions to your app.

Public

The /public is here to host any static assets you might need in the game, such as images. For example, if you add an image at /public/my-logo.jpeg, it will be available in the app at http://localhost:3000/my-logo.jpeg.

PreviousUsing Custom CollectionsNextGame Life Cycle

Last updated