This project was generated with create-empirica-app.
a) This task took me about 11 hours to implement. I spent about 3 hours setting up/figuring out the basics of how empirica works, and the rest implementing this task.
b) My biggest challenge implementing this task was figuring out how to make the actual drawing of the lines work and interact with the 9 dots. I decided I would approach this task by taking advantage of the canvas element and using that to draw the lines as well as the dots. This was challenging because it was different from how I would normally use React components which is making a component for each part of the game (for example, at first I considered making a dot component for rendering the dots and somehow figuring out how I would be able to allow users to draw on top of the dots). The reason I ended up mainly using the canvas element to display the dots and lines was because it allowed me to track mouse interactions with the canvas and draw on top of dots easily. The tradeoff then was me having to manually do a lot of the re-rendering React usually helps me do; I took advantage of the componentDidUpdate lifecycle method to do this and manually checked whether or not it was appropriate to update what was being displayed.
c) A key design decision I made was creating a component (NineDotsCanvas) just for rendering the canvas (the dots and the lines the user has inputted). The only information that needs to be associated with a user are the points (xy coordinates) the user has selected on the canvas. Similarily, the only information neccecary to draw out a user's current canvas are the list of points the user has selected. So by making a canvas component that can display the canvas based on just the list of points I am able to re-use this in the SocialExposure component to display the other user's canvases as well as the current user's canvas. Note that I made it optional to pass in some functions as props for the canvas component to deal with mouse clicks and movements that I use to track the current user's movements on the canvas, but for displaying other user's canvases, these functions are not provided since they are not needed.
If you haven't already:
- Install
Node.jsandnpmhere: https://nodejs.org/en/ - Install
Meteorhere: https://www.meteor.com/install
If you have just downloaded, pulled, or cloned this app, you should run this in the command line to install all the Node packages:
meteor npm install
You can now run the app on your local machine with:
meteor
This can take a few minutes.
This will start the app that you can access as a participant: https:/localhost:3000/
You can access the admin panel here: https:/localhost:3000/admin
Log in with the username and password provided in the command line.
To use the app, you usually need to use treatments and factors. Some might be prepared in a .yaml file (e.g., factors.yaml). In the admin panel:
- click on the Configuration button
- click on import
- select the
.yamlfile you want to import the factors and treatments from - wait a few seconds for the factors and treatments to be imported
To run a game create a new batch with the games of treatments you want to use and click start on the batch.
Open a player tab by going to https:/localhost:3000/ or clicking on open app.
The player that you open with https:/localhost:3000/ is cached on your browser. Whenever you start a game with this player, your local app will keep that information. To play again there are multiple things you can do:
- Click on the Reset current session button on the header of a tab with your player to reset this player, and create a new game for this player to join.
- Click on the New Player button on the header of a tab with your player to open a new tab with a different player (you will see the id of that player in the title of the tab).
- Go to the Players tab in the admin panel and retire players that have finished or cancelled.
The app will hot reload as you save changes to your code.
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.
All styling starts in /client/main.less, and is written in
LESS, 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
React components, which compose the UI of your app.
If you are new to React, we recommend you try out the official
React Tutorial.
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.
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.
- Empirica Website: https://empirica.ly/
- Empirica documentation: https://docs.empirica.ly/
- Meteor Tutorial: https://www.meteor.com/tutorials/react/creating-an-app
- React Tutorial: https://reactjs.org/tutorial/tutorial.html
- LESS Intro: http://lesscss.org/#overview
- JavaScript Tutorial: https://javascript.info/