/client/game/Round.jsx
.Task
and SocialExposure
. The Task
itself is composed of TaskStimulus
which contains the stimulus (e.g., a survey question — or in this example, an estimation task) and TaskResponse
which contains the input for users to response to the stimulus./client/game/Task.jx
so that the component looks like this:this.props
object which contains elements passed into it. These props can be extracted with destructuring (the const {} = this.props
part). Notice that the props here include round
, stage
, and player
. These are your interface with Empirica, and allow you to both read and set data for the state of the experiment.client/game/TaskStimulus.jsx
so that it looks like this:public
directory, create the following directories: /experiment/images/
and add the candy jar image there so that it matches the path we just set: "/experiment/images/candies.jpg"
.public
directory allows you to store static assets, such as images, that can then be accessed on the client side.client/game/TaskResponse.jsx
file. render
based on different conditions (e.g., if the player has already submitted for this stage).renderSlider
function. First let's change it's name to renderInput
. Then, replace the slider with a numeric input box. Because we're asking people to estimate the number of candies in a jar, we'll set the minimum value to one. player
data to control the form input. This player data is created with player.round.set()
in the handleChange
method which is called every time the input is updated. This method will save this data to the database on the server, automagically.handleChange
function to look like this:renderInput
we need to change this in the main render
; instead of calling this.renderSlider()
it should be called this.renderInput()
.TaskResponse.jsx
has a few import lines at the top of the file and then starts with this type of line and opening of curly brackets {}'}' expected
.TaskResponse.jsx
should look like this:constants.js
file (the name of the file in itself is not important, as long as you are consistent), that will contain all the stimulus information, and then use that in the experiment via the Empirica.gameInit
method.server/
directory instead of your client/
directory. Create a file server/constants.js
, and add the following code to it..js
or .jsx
file.constants.js
Empirica.gameInit
callback in /server/main.js
. This is an important event that sets up the rounds and stages of a game. Empirica.gameInit
. In gameInit, you can see that it is going through each player and assigns them some data such as a score and an avatar. Then it is doing something 10 times (using _times()
from underscore.js; a library of convenient JavaScript tools): It is creating 10 rounds, each with one stage.constants.js
data with import { taskData } from "./constants";
added to at the top of server/main.js
.server/main.js
with the following code:data
object to the rounds. Any value in this object can then be access with round.get()
.TaskStimulus.jsx
round.get()
instead of setting them manually. Replace the lines that declare the imagePath and the questionText with these:server/callbacks.js
.Empirica.onRoundEnd
code in server/callbacks.js
with this:correctAnswer
from our constants.js
file.