-
Notifications
You must be signed in to change notification settings - Fork 1
Home
This guide explains how the game code works and how to make modifications.
-
/src/experiment.ts– Contains all game logic. Most changes to the game will happen here, such as the number of rounds, probability assignments, etc. -
index.html– Defines the structure of the project. This includes game instructions, image placement, and image loading. -
styles.css– Handles visual adjustments like fonts, background colors, spacing, margins, and image alignment. CSS resources can be easily found online or through ChatGPT. -
/imgfolder – Stores images used in the experiment. Theoldsubfolder contains inactive images kept for reference. -
/datafolder – Stores experiment data. A CSV file is saved here whenever someone exits the game window or completes the task.
⚠ Note: Merge conflicts may occur if a CSV file gets saved while you are making local changes. Always rungit pullbeforegit pushto avoid conflicts.
📖 Read more: Using Git for Version Control.
This game involves different stages, rounds, and player actions. Players can make choices, earn rewards, and progress through various stages. The code controls game logic, tracks progress, and handles rewards.
-
round– Tracks the current round number (initially set to 1). -
practiceRounds,mainRounds– Define the number of rounds in practice and main stages. -
totalRounds– Tracks the total number of rounds (initially set to practice rounds). -
points– Tracks the player's current points. -
currentStage– Tracks the current stage of the game (e.g.,intake,welcome,instructions,practiceStage1, etc.).
-
results– An array storing the outcome of each round, including stage, choice, reward, and points.
-
keyInputAllowed– A flag to control whether keyboard input is allowed at any given moment.
The game includes different types of rewards (e.g., gems or dirt). Each reward has associated points, an image, and a message.
-
stage1Probability– The probability associated with outcomes in stage 1. -
stage2Options– An object containing different probability settings for stage 2, based on choices (A,B,C, orD).
Variables used to set the intervals between trials:
intertrialInterval1intertrialInterval2
-
Stages & Rounds: The game progresses through different stages, such as "intake," "welcome," and various instruction screens. The main gameplay involves practice and main stages where the player makes choices and earns rewards.
-
Rewards System: The code includes different reward scenarios:
-
Game Setting 1: Players can either find a gem (+100 points) or dirt (0 points).
-
Likelihoods in Stage 2: In stage 2, the player's choices (A, B, C, or D) influence the likelihood of different outcomes. The stage2Options object defines these likelihoods using arrays of probabilities.
To get started with the task_spaceships-aliens_twostep project, you need to clone the repository from GitHub to your local machine. Open your terminal and run the following command to clone the repository:
git clone https://github.com/emberlzhang/task_spaceships-aliens_twostep.git
Once the cloning process is complete, navigate into the project directory:
cd /{YOUR_FOLDER_PATH_HERE/task_spaceships-aliens_twostep
Below are examples of common things you might want to change in the codebase.
If you want to change the number of practice or main rounds, modify the practiceRounds and mainRounds variables.
let practiceRounds: number = 5; // Change to 5 practice rounds
let mainRounds: number = 100; // Change to 100 main rounds
To add a new stage, update the currentStage variable and add logic for the new stage. For example:
let currentStage: string = "newStage"; // Add your new stage here
You can modify the rewards by changing the values in the REWARD_1 and REWARD_2 constants.
const REWARD_1 = { points: 200, image: "new-reward-image", message: "You found a treasure chest (+200 points)!" };
To modify the probabilities in stage 2, update the stage2Options object. For example, to make option "A" more likely to result in a positive outcome:
stage2Options["A"].likelihoods = [0.9, 0.9, 0.9, 0.9, 0.9]; // Increase the likelihood of a positive outcome
If you want to change the order in which stages appear, simply modify the currentStage sequence. For instance, if you want "practiceStage1" to come before "instructions1":
let currentStage: string = "practiceStage1"; // Set this before "instructions1"
Let's say you want to add a new reward that gives the player 150 points for finding a special item. You would update the code like this:
const REWARD_3 = { points: 150, image: "reward-img-special", message: "You found a special item (+150 points)!" };
This will create a new reward with an image and message. You can then add logic to determine when the player receives this reward.
After making changes to the code, add your changes to be committed:
git add .
Commit your changes with a descriptive message:
git commit -m "Your descriptive commit message here"
Push your changes to the remote repository:
git push origin main
Handling Merge Conflicts:
If there are merge conflicts when pulling the latest changes from the repository, first pull the changes:
git pull origin main
Resolve any conflicts that arise. Git will mark the conflicting sections in the affected files. Edit these files to resolve conflicts, then add and commit the resolved files:
git add <resolved-file>
git commit -m "Resolved merge conflict in <filename>"
Tip: If merging conflicts arise and are difficult to solve through the terminal, consider downloading Github Desktop for an easier time.
Finally, push the resolved changes back to the repository:
git push origin main
To test the application locally, you need to run a local server. In Google Chrome (or your chosen web browser), go to:
file:///[YOUR-PROJECT-CODE-FOLDER-PATH]/task_spaceships-aliens_twostep/index.html
Before pushing any changes, you need to compile experiment.ts. Because the web browser only reads javascript files, changes to experiment.ts need to be reflected in the experiment.js file in order for the app to run. It is essential to compile any changes you made to the experiment.ts file before pushing changes to the repo.
Run the following command in terminal to update any changes made to experiment.ts file:
tsc
Note: The experiment code is written in TypeScript–a modified form of Javascript–because it utilizes the modern software development best practice of specifying object types in Javascript code, which is not possible in regular Javascript. The practice of naming object types (naming a string as “str”, an integer as “int”, a decimal as “float”, an array as “list”, etc….) helps to prevent unwanted errors from occurring as an application gets more complex.
To launch your experiment online, deploy your application on [Render](https://render.com/).
The project is deployed on Render, a platform for web application deployments. On Render, you can view the deployment status, manage environments, and access deployment logs. In case of deployment issues or to redeploy manually, you can use the dashboard options available for your project. Typically, you should not need to interact with the Render dashboard frequently.
This code is designed to be flexible, allowing researchers to modify stages, rewards, rounds, and probabilities easily. Experiment with the variables and logic to customize the game to your needs. Always test changes thoroughly to ensure the game runs smoothly.