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.
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
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 fileexcept 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.