📖
Empirica v1 Docs
  • Introduction
  • Getting Started
    • Setup
      • Windows WSL Instructions
    • Creating your experiment
    • Running your experiment
    • Updating your experiment
  • Guides
    • Tutorial: Your First Experiment
      • Part 1: Getting Started
      • Part 2: Configuring the Experiment
      • Part 3: Adding Social Information and New Factors
      • Part 4: Adding Chats
      • Part 5: Adding Bots
    • The Settings File
      • Specifying Login Details
      • Setting player ids via URL queries
      • Connecting Locally to MongoDB
    • The Admin Panel
    • Special Empirica Elements (and how to modify them)
    • Deploying Your Experiment
      • Database
      • Hosting
    • Managing the Data
    • Using Custom Collections
  • Conceptual Overview
    • Structure
    • Game Life Cycle
      • Customising when players submit stages
    • Concepts
    • Randomization & Batches
    • API
  • FAQ
    • I need help!
    • The Processes and Elements of an Empirica Experiment
    • Managing Players and Games
  • Community Demos
    • Guess The Correlation
    • Random Dot Motion
    • Room Assignment
  • Tips & Tricks
    • Helpful Linux Commands
    • Code Editors
  • Links
    • Empirica website
    • Twitter
    • GitHub
Powered by GitBook
On this page
  • General Structure
  • File Structure
  • Client
  • Server
  • Public

Was this helpful?

  1. Conceptual Overview

Structure

PreviousUsing Custom CollectionsNextGame Life Cycle

Last updated 4 years ago

Was this helpful?

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.

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.

All styling starts in /client/main.less, and is written in , 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 components, which compose the UI of your app. If you are new to React, we recommend you try out the official .

LESS
React
React Tutorial