Part 1: Getting Started

Getting Started With Empirica

Although it won't do too much, Empirica works straight out of the box. The first step to customizing your Empirica app is to launch a test game so you can see your edits in action.
    1.
    Follow the setup guide and create your experiment
    2.
    Start your app by running the command meteor
    3.
    Then, visit your admin panel http://localhost:3000/admin
    4.
    Log in using the password generated in the command line by step 2

Configuring your app

    1.
    Click configuration in the upper right corner to access app settings. This is where you'll define all your experimental conditions.
    2.
    Click factors in the menu bar at the top. This is where you set the most
    basic parameters for your experiment. The only default parameter is
    playerCount. Add a new factor by clicking the + button. Set the name to
    one and the value to 1, then click Create Factor Value.
    3.
    Click treatments. This is where you combine factors to create an
    experimental condition. Create a new treatment using the factor you just
    created and name whatever you want.
    4.
    Click Lobby Configurations and create a new lobby configuration using the default settings.

Creating an experiment session

    1.
    Click monitoring in the upper right corner to toggle your admin panel from configuration to monitoring. This is where you'll interact with all the
    Empirica features that have to do with actually running experiments.
    2.
    Click New Batch in the batches panel, select the treatment you just
    created, and click Create Batch.
    3.
    Press the ► Start to start the batch.

Testing the experiment as a participant

    1.
    Navigate to http://localhost:3000/ (or click the ► Open App button on the top right) .
    2.
    Follow through the consent, identification (this would be, e.g., an MTurk/Prolific ID, but you can enter whatever you want right now), instruction pages, and attention check (you have to answer correctly).
    3.
    You're running an experiment! This is the default app, just a slider with 10
    rounds of input. We're going to edit that.
For more information about testing the experiment locally, see our guide on running your experiment.

Creating the experiment title

The client/main.html is the html point of entry for the React code that determines what a participant sees when they are in your experiment. You should NOT change anything in this file except for the text in between the <title></title> tags. There you can put the title you want to appear at the top of the tab when people are using your experiment (e.g., "My First Experiment").

Cleaning up the styling

The styling of an Empirica experiment is set in .client/main.less. Less is very similar to CSS.
The default styling of the experiment is a bit complicated to understand, and to make our experiment look good we want to tweak a few things. Let's start by replacing the code in main.less with this code:
1
/* ----------------
2
- default styling -
3
---------------- */
4
5
.title {
6
text-align: center;
7
}
8
9
input[type="text"],
10
input[type="number"] {
11
padding: 0.3rem 0.5rem;
12
border-radius: 0.3rem;
13
border: 1px solid lightgray;
14
}
15
16
input[type="radio"] {
17
margin-right: 0.5rem;
18
}
19
20
.content {
21
display: flex;
22
flex-wrap: wrap;
23
}
24
25
.content > * {
26
padding: 0.5rem;
27
box-sizing: border-box;
28
}
29
30
.player-profile {
31
display: flex;
32
flex-direction: column;
33
width: 20%;
34
align-items: center;
35
36
.profile-avatar {
37
width: 8rem;
38
height: 8rem;
39
margin: 3rem 0;
40
}
41
42
.profile-score {
43
text-align: center;
44
span {
45
font-size: 3rem;
46
font-weight: bold;
47
}
48
}
49
50
.timer {
51
margin-top: 2rem;
52
text-align: center;
53
54
.seconds {
55
font-size: 3rem;
56
// Helvetica has tabular numbers (fixed width), which looks better
57
// for a timer, doesn't jump all over the place.
58
font-family: Helvetica, Arial, sans-serif;
59
color: green;
60
}
61
&.lessThan10 {
62
.seconds {
63
color: orange;
64
}
65
}
66
&.lessThan5 {
67
.seconds {
68
color: red;
69
}
70
}
71
}
72
}
73
74
.task {
75
display: flex;
76
flex-direction: column;
77
align-items: center;
78
width: 50%;
79
80
.task-image {
81
text-align: center;
82
margin-bottom: 1rem;
83
}
84
85
.task-question {
86
width: 100%;
87
text-align: center;
88
}
89
90
.task-response {
91
width: 100%;
92
93
form {
94
display: flex;
95
justify-content: center;
96
margin-top: 1.5rem;
97
}
98
99
.response-submitted {
100
margin-top: 1.5rem;
101
background-color: #e8e8e8;
102
padding: 2rem;
103
border-radius: 0.4rem;
104
105
h5 {
106
margin: 0 0 0.5rem;
107
font-size: inherit;
108
}
109
}
110
}
111
}
112
113
.social-exposure {
114
width: 30%;
115
116
.alter {
117
display: flex;
118
justify-content: center;
119
align-items: center;
120
margin-bottom: 1rem;
121
122
img {
123
width: 6rem;
124
height: 6rem;
125
margin-right: 3rem;
126
}
127
128
.range {
129
display: flex;
130
align-items: center;
131
justify-content: center;
132
}
133
}
134
}
135
136
button {
137
padding: 0.8rem 1.2rem;
138
border-radius: 0.3rem;
139
border: 1px solid lightgray;
140
background-color: #eee;
141
cursor: pointer;
142
143
&:hover {
144
background-color: #ddd;
145
}
146
}
147
148
.instructions,
149
.quiz,
150
.exit-survey {
151
button {
152
margin: 2rem 1rem 0 0;
153
}
154
155
label {
156
display: block;
157
margin: 2rem 0 1rem;
158
}
159
160
textarea {
161
padding: 0.3rem 0.5rem;
162
border-radius: 0.3rem;
163
border: 1px solid lightgray;
164
}
165
}
166
167
.exit-survey {
168
.form-line {
169
display: flex;
170
171
& > div {
172
margin-right: 30px;
173
174
textarea {
175
min-height: 90px;
176
width: 100%;
177
}
178
}
179
180
&.thirds {
181
& > div {
182
flex-grow: 0;
183
flex-shrink: 0;
184
flex-basis: 30%;
185
186
label {
187
min-height: 36px;
188
}
189
}
190
}
191
}
192
}
193
194
.finished {
195
position: absolute;
196
left: 0;
197
right: 0;
198
top: 0;
199
bottom: 0;
200
display: flex;
201
align-items: center;
202
justify-content: center;
203
}
Copied!

Understanding an Empirica Experiment

As you go about your first experiment, it might help to try and get a global understanding of what an Empirica Experiment is.

The Empirica Framework

The Empirica framework provides powerful tools to create singleplayer and multiplayer games.
You have the frontend in the /client folder. This is where you determine what the users will see when they come to your experiment: which components you build your game with and what they look like.
The backend in the /server folder. This is where you determine the structure of your game.
You have an admin panel in the browser that allows you to create factors and treatments as well as monitor the games you are running. For now, everything is running locally for your to test out, but the admin panel will look similar once deployed to recruit participants online.
The best ways to learn about the structure of an Empirica experiment and testing it locally is to give the Readme.md file a read or consult our other sections in this documentation.

The Technologies used by Empirica

Empirica is a framework that builds on top of a Meteor.js and React.js app. Meteor does the backend and generally building of the app whilst React is used for the front end.
You can find some tutorial online for both technologies. However, you do not need any knowledge of these technologies for this tutorial.
Last modified 3mo ago