LogoLogo
  • Introduction
  • Getting Started
    • Setup
      • Windows WSL Instructions (new)
      • Windows WSL Instructions
      • Linux Instructions
    • Creating your experiment
    • Running your experiment
    • Updating your experiment
  • Conceptual Overview
    • Game Life Cycle
      • Customising when players submit stages
    • Concepts
    • Randomization & Batches
    • API
  • Guides
    • V2 Migration
    • Managing the Data
    • Special Empirica Components
    • The Admin Panel
    • Deploying Your Experiment
      • Ubuntu tutorial
  • Tutorials
    • Beginner Experiment: Prisoner's Dilemma
      • Part 1: Before you start
      • Part 2: Creating the Experiment in Empirica
      • Part 3: Getting Accustomed to the Code
      • Part 4: Coding the Prisoner's Dilemma Game
        • Part 4.1: Removing example code
        • Part 4.2: Intro Text
        • Part 4.3: Set up the game stages
        • Part 4.4: Build the "Choice" React Component
        • Part 4.5: Build the "Result" React Component
        • Part 4.6: Compute the Score
      • Part 5: Customizing the experiment
        • Part 5.1: Changing the number of rounds
        • Part 5.2: Turning the chat on and off
      • Part 6: Deployment
  • FAQ
    • I need help!
    • The Processes and Elements of an Empirica Experiment
    • Managing Players and Games
  • Resources
    • Helpful Linux Commands
    • Code Editors
    • Javascript and React
  • Links
    • Empirica website
    • Twitter
    • GitHub
Powered by GitBook
On this page

Was this helpful?

Edit on GitHub
Export as PDF
  1. Tutorials
  2. Beginner Experiment: Prisoner's Dilemma
  3. Part 4: Coding the Prisoner's Dilemma Game

Part 4.2: Intro Text

The first step in coding our experiment will be to replace the filler text in the Introduction page with actual instructions for the participant. This text is stored the file client/src/intro-exit/Introduction.jsx. The component will initially look like this:

src/intro-exit/Introduction.jsx
import React from "react";
import { Button } from "../components/Button";

export function Introduction({ next }) {
  return (
    <div className="mt-3 sm:mt-5 p-20">
      <h3 className="text-lg leading-6 font-medium text-gray-900">
        Instruction One
      </h3>
      <div className="mt-2 mb-6">
        <p className="text-sm text-gray-500">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius aliquam
          laudantium explicabo pariatur iste dolorem animi vitae error totam. At
          sapiente aliquam accusamus facere veritatis.
        </p>
      </div>
      <Button handleClick={next} autoFocus>
        <p>Next</p>
      </Button>
    </div>
  );
}

The function contained in this file is called a React Component. This is just a function that returns a piece of a page for your browser to display, and it can contain other React components within it. By assembling a number of different React components in a hierarchy, we can build up the whole page, while being able to separate reusable pieces into their own files.

For example, the Button element is another React component that we import into this file. The button's behavior and styling are defined in a separate file (src/components/Button.jsx) so that we can reuse it in a number of pages in our experiment.

All components need to return something that React will translate into plain HTML to display on the page. In this case, it is returning mostly HTML, with the Button component and a little inline styling thrown in (more on this later).

For now, lets replace just the display text (and it's paragraph tags <p>...</p>, lines 11-15 above) with instructions related to the prisoners dilemma.

Feel free to experiment with your own text and styling. The code below is what we will use in this tutorial:

      <p>
        In this game, you will be partnered with another experiment participant.
        <br />
        In <strong>each round of the game</strong>, you and your partner will:
      </p>
      <p>
        (a) choose whether to work together or to look out for your own
        interests
      </p>
      <p>
        (b) see each others choices and the results of your choices
      </p>

Within the browser, you can see these changes reflected immediately by simply saving the changed file. (In some cases, you may need to refresh the page.) This is called 'hot reloading', which is incredibly useful for debugging and UI editing.

Your edited file should look like this:

Introduction.jsx
import React from "react";
import { Button } from "../components/Button";

export function Introduction({ next }) {
  return (
    <div className="mt-3 sm:mt-5 p-20">
      <h3 className="text-lg leading-6 font-medium text-gray-900">
        Instruction One
      </h3>
      <div className="mt-2 mb-6">
        <p>
          In this game, you will be partnered with another experiment
          participant.
          <br />
          In <strong>each round of the game</strong>, you and your partner will:
        </p>
        <p>
          (a) choose whether to work together or to look out for your own
          interests
        </p>
        <p>(b) see each others choices and the results of your choices</p>
      </div>
      <Button handleClick={next} autoFocus>
        <p>Next</p>
      </Button>
    </div>
  );
}
PreviousPart 4.1: Removing example codeNextPart 4.3: Set up the game stages

Last updated 1 year ago

Was this helpful?

hot reloading