Special Empirica Elements (and how to modify them)

Search…
Centered
The Centered component is a custom element from Empirica that you can use to surround other elements of your components. This will make them centered on the page.
Import the element with:
1
import { Centered } from "meteor/empirica:core";
Copied!
And use it like this:
1
<Centered>        
2
    <div> Other elements </div>    
3
</Centered>
Copied!
Timer
There is a Timer.jsx component that represents the stage timer and shows players how much time is left at that stage. 
For the Timer to work, the stage has to be passed down to it as a prop. For example, in the PlayerProfile.jsx of your first Empirica experiment:
1
return (
2
      <aside className="player-profile">
3
        {this.renderProfile()}
4
        {this.renderScore()}
5
        <Timer stage={stage} />
6
      </aside>
7
    );
Copied!
Inside the Timer.jsx component, what makes the timer is that it extracts the remainingSeconds from the stage, and that it imports the StageTimeWrapper to export the Timer with export default (Timer = StageTimeWrapper(timer));. 
Here is the code for a basic Timer component:
1
import { StageTimeWrapper } from "meteor/empirica:core";
2
import React from "react";
3
​
4
class timer extends React.Component {
5
  render() {
6
    const { remainingSeconds } = this.props;
7
​
8
    const classes = ["timer"];
9
    if (remainingSeconds <= 5) {
10
      classes.push("lessThan5");
11
    } else if (remainingSeconds <= 10) {
12
      classes.push("lessThan10");
13
    }
14
​
15
    return (
16
      <div className={classes.join(" ")}>
17
        <h4>Timer</h4>
18
        <span className="seconds">{remainingSeconds}</span>
19
      </div>
20
    );
21
  }
22
}
23
​
24
export default (Timer = StageTimeWrapper(timer));
Copied!
About Section
The About section is a small window that will upon when players click the top right corner button About. For example:
In client/main.js you can set your custom component for the About section. 
Import the component to the client/main.js with:
1
import <component name> from <path>;
Copied!
And then set it with:
1
Empirica.about(<component name>);
Copied!
However, setting an About section is completely optional, you can get rid of it by not writing the Empirica.about line in client/main.js or deleting it if it is already written.
Header
The Header is the blue rectangle at the top of the page in an Empirica app. 
See more about the structure of the Header component here.
Import the component to the client/main.js with:
1
import <component name> from <path>;
Copied!
And then set it with:
1
Empirica.header(<component name>);
Copied!
Or you can get rid of the Header with:
1
Empirica.header(() => null);
Copied!
Special Dev Wrap Header
If you don't want the blue header to show, especially not when you deploy your experiment, but you still want to access the Reset Player and New Player buttons during development, you can surround each of your important components (e.g., Round.jsx, Intro steps, etc.) with this special component:
1
import React from 'react'
2
​
3
export default function DevWrapper({
4
    children,
5
    showOpenAltPlayer,
6
    onOpenAltPlayer,
7
    showReset,
8
    onReset, }) {
9
​
10
    const isDev = showReset || showOpenAltPlayer
11
​
12
    return (
13
        <div>
14
            {isDev &&
15
                <div style={{
16
                    display: "flex"
17
                    , justifyContent: "flex-end"
18
                    , alignItems: "center"
19
                    , margin: "5px"
20
                }}>
21
                    <p style={{
22
                        fontSize: "1rem"
23
                        , color: "grey"
24
                        , margin: "0"
25
                    }}>Dev buttons:</p>
26
                    {showReset &&
27
                        <button style={devButtons} onClick={onReset}>Reset Player</button>
28
                    }
29
                    {showOpenAltPlayer &&
30
                        <button style={devButtons} onClick={onOpenAltPlayer}>New Player</button>
31
                    }
32
​
33
                </div>
34
            }
35
​
36
            { children}
37
        </div >
38
    )
39
}
40
​
41
// Styling
42
const devButtons = {
43
    backgroundColor: "transparent"
44
    , fontSize: "1rem"
45
    , color: "grey"
46
    , margin: "0 2.5px"
47
    , cursor: "pointer"
48
}
Copied!
For example, to have it show in each round, import it into the round component and use it this way:
1
export default class Round extends Component {
2
	render() {
3
		const { round, stage, player, game } = this.props
4
​
5
		return (
6
			<DevWrapper {...this.props}>
7
				<div>
8
					The Rounds
9
				</div>
10
			</DevWrapper>
11
		)
12
	}
13
}
Copied!
Breadcrumb
The Breadcrumb is the track at the top of a Round that shows the player which Stage of the Round they are currently at.
See more about the structure of the Breadcrumb component here.
In client/main.js you can set your custom component for the Breadcrumb. 
Import the component to the client/main.js with:
1
import <component name> from <path>;
Copied!
And then set it with:
1
Empirica.breadcrumb(<component name>);
Copied!
Or you can get rid of the Breadcrumb with:
1
Empirica.breadcrumb(() => null);
Copied!
NewPlayer (where players set their id)
Players have to set their id at a NewPlayer page just after the consent page. This could be a name, an MTurk/Prolific id, a student id, an email, etc. 
You might want to change its design, format, or instructions. For example, if you want participants to provide a student id but no other personal information, you would want to make your own clear instructions.
The default NewPlayer.jsx page looks like this:
1
import React, { Component } from 'react'
2
import { Centered } from "meteor/empirica:core";
3
​
4
export default class NewPlayer extends Component {
5
  state = { id: "" };
6
​
7
  handleUpdate = event => {
8
    const { value, name } = event.currentTarget;
9
    this.setState({ [name]: value });
10
  };
11
​
12
  handleSubmit = event => {
13
    event.preventDefault();
14
​
15
    const { handleNewPlayer } = this.props;
16
    const { id } = this.state;
17
    handleNewPlayer(id);
18
  };
19
​
20
  render() {
21
    const { id } = this.state;
22
​
23
    return (
24
      <Centered>
25
        <div >
26
          <form onSubmit={this.handleSubmit}>
27
            <h1>Identification</h1>
28
​
29
            <p>
30
              Please enter your id:
31
                        </p>
32
​
33
            <input
34
              dir="auto"
35
              type="text"
36
              name="id"
37
              id="id"
38
              value={id}
39
              onChange={this.handleUpdate}
40
              required
41
              autoComplete="off"
42
            />
43
​
44
            <br />
45
​
46
            <p>
47
              <button type="submit">Submit</button>
48
            </p>
49
​
50
          </form>
51
        </div>
52
      </Centered>
53
    )
54
  }
55
}
Copied!
The important parts of your component is to have methods to handle when the player is changing the id they write (handleUpdate) and when the player clicks the submit button (handleSubmit) so that in the end it is using the handleNewPlayer() method that will set the player's id as the string submitted and moves the player to the first Intro Step.
You can either modify the NewPlayer.jsx file, or create a new one and set it in the client/main.js.
If you want to create a new file:
Import the component to the client/main.js with:
1
import <component name> from <path>;
Copied!
And then set it with:
1
Empirica.newPlayer(<component name>);
Copied!
Lobby
In the Admin Panel, in the Configuration tab, in Lobby Configurations, you can set important aspects of the Lobby such as:
The Timeout Type (whole lobby or individual)
The Timeout Duration in Seconds
The Timeout Strategy (fail, ignore)
The Extend Count
But you might want to customise your Lobby even further (e.g., change what it looks like or what is written). To do so, you can create a custom Lobby component. It will receive two props, the player and the gameLobby. The gameLobby can be used to extract the following properties in the customising of your Lobby:
gameLobby.treatment.playerCount will give you how many players the Game expects
gameLobby.queuedCount will give you the total number of players queued for this game, including ready players and players currently going through the intro steps. 
gameLobby.readyCount will give you the number of players ready to play. They have completed the intro steps, and they are on the lobby page.
For a better idea of what you can do and customise, see the default version of the Lobby here.
Once you have created your custom Lobby component, you can import the component to the client/main.js with:
1
import <component name> from <path>;
Copied!
And then set it with:
1
Empirica.lobby(<component name>);
Copied!
Can I add a chat to the Lobby?
To add a chat to the Lobby you need to install the Empirica Chat with:
1
meteor npm install --save @empirica/chat
Copied!
Then you can use the default Lobby with chat. Do so by importing the  LobbyChat component of this package in your experiment's client/main.js file, like this:
1
import { LobbyChat } from "@empirica/chat";
Copied!
And setting it to the lobby like this:
1
Empirica.lobby(LobbyChat);
Copied!
Or you can manually add a chat to your customised Lobby.
Empirica Chat
To add a chat  in Empirica, you can use our simple solution by using the Empirica Chat. For detailed information about Empirica Chat, see here.
Installing
First, install Empirica Chat with:
1
meteor npm install --save @empirica/chat
Copied!
Import and Usage
In the components you want to use the chat, import this:
1
import { Chat } from "@empirica/chat";
Copied!
Then you can create the chat component with:
1
<Chat player={player} scope={game} />
Copied!
chat expects 2 required props:
player: the current player
scope: object that the chat will be attached to, can be game, round, or stage objects.
Scoping
The scope is important because it determines where the chat data (the messages) will be stored. You can access them again afterwards based on the scope. For example, if the scope is set to the Round:
1
const chat = round.get("chat") ?? []
Copied!
Multiple chat instances within the same scope
You can pass an optional customKey string prop to differentiate different chats within the same scope. This changes which get/set key on the given scope the chat will be recorded.
1
<Chat player={player} scope={game} customKey="casual_chat" />
Copied!
Display names
Chat also displays a name for each participant, which you need to set in the experiment independently of the playerId: player.set('name', "myPseudonym")
Adding timestamp to chat message
You can pass an optional timeStamp date prop to add the timestamp attribute on each message sent. 
Run this command to add mizzao timesync:
1
meteor add mizzao:timesync
Copied!
You can pass an optional timeStamp date prop to add the timestamp attribute on each message sent:
1
// reactive time value only updates at 1000 ms
2
const timeStamp = new Date(TimeSync.serverTime(null, 1000));
3
​
4
<Chat player={player} scope={game} timeStamp={timeStamp} />
Copied!
Other functionalities
There are many other functionalities with Empirica chat that you can see here.