diff --git a/.gitignore b/.gitignore index 12940b5..9df9658 100644 --- a/.gitignore +++ b/.gitignore @@ -16,9 +16,12 @@ .DS_Store .env* .env - +*.vs npm-debug.log* yarn-debug.log* yarn-error.log* psiturkit/*_turk +.vs/VSWorkspaceState.json +.vs/slnx.sqlite +.vs/Effort-Task-3/v16/.suo diff --git a/package-lock.json b/package-lock.json index 862368a..db37d2f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "task-effort", - "version": "1.3.2", + "name": "effort-v1.3.3", + "version": "1.3.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/config/experiment.js b/src/config/experiment.js index b1005f6..f29311b 100644 --- a/src/config/experiment.js +++ b/src/config/experiment.js @@ -16,11 +16,11 @@ exptBlock1.get_reward = [true, true, true, false]; exptBlock1.num_breaks = 3; // debug settings where there are only 2 trials in main task block -// exptBlock1.probs = ["100%"]; -// exptBlock1.counterbalance = true; -// exptBlock1.value = [3]; -// exptBlock1.effort = [5]; -// exptBlock1.keys = ["q", "p", "m"]; -// exptBlock1.get_reward = [true]; +//exptBlock1.probs = ["100%"]; +//exptBlock1.counterbalance = true; +//exptBlock1.value = [3]; +//exptBlock1.effort = [5]; +//exptBlock1.keys = ["q", "p", "m"]; +//exptBlock1.get_reward = [true]; export { exptBlock1 }; diff --git a/src/config/main.js b/src/config/main.js index df832a6..9240972 100644 --- a/src/config/main.js +++ b/src/config/main.js @@ -69,6 +69,7 @@ try { // then assume it's online in the browser // with MTurk or Prolific ONLINE = AT_HOME && !IS_ELECTRON ? true : false; +//ONLINE = true; console.log("ONLINE:", ONLINE); // note: it _is_ possible to do both firebase & mturk if desired diff --git a/src/config/trigger.js b/src/config/trigger.js index 0fc57ec..f5226c8 100644 --- a/src/config/trigger.js +++ b/src/config/trigger.js @@ -7,7 +7,7 @@ const eventCodes = { // rewardProbabilityEnd: 11, // reward probability (50% of 100%) offset frameSpikeStart: 20, // frame and spike onset // frameSpikeEnd: 21, // frame and spike offset - costBenefitsStart: 30, // points and effort values for both options onset + costBenefitsStart: 30, // points and effort values for both options onset // costBenefitsEnd: 31, // points and effort values for both options offset choiceStart: 40, // frame + spike + balloons, when participant can choose blue or green // choiceEnd: 41, // frame + spike + balloons offset, once participant has made a choice diff --git a/src/language/en_us.json b/src/language/en_us.json index b39f7e9..ed384b8 100644 --- a/src/language/en_us.json +++ b/src/language/en_us.json @@ -39,15 +39,15 @@ "your_job": "Your job is to pop the balloons by pumping them up to a spike in order to win points!", "pop_balloon_earn_money": "The points earned from popping a balloon will be shown with a '+' sign in front of it (i.e. +1).", "points_to_bonus_conversion": "For every 20 points that you win in the game, you will get $1 at the end of the experiment.", - "cumulative_rewards": "You will be shown the total number of points earned at the end of each trial.", + "cumulative_rewards": "You will be shown the total number of points earned at the end of each trial. *Insert picture here*", "two_balloons": "There are 2 kinds of balloons:
GREEN and BLUE balloons.", - "blue_balloon_points": "BLUE balloons will pop after you pump 20 times and you may win 1 point.", + "blue_balloon_points": "BLUE balloons will always pop after you pump 20 times and you may win 1 point.", "green_balloon_points": "GREEN balloons may win you more points, but will require more pumps.", "green_balloon_pop_time": "GREEN balloons will always pop after 25 seconds.", "green_balloon_pump_bonus": "If you continue to pump the GREEN balloon after it hits the spike within the 25 seconds time limit, the bigger the balloon will get and the more bonus points you will earn.

If you pump the GREEN balloon and it does not reach the spike within the 25 seconds time limit, you will earn some of the points for pumping the balloon.

(Example: If the total possible points you can earn for a balloon is 2 points and you pump the balloon halfway to the spike, you will earn 1 point.)

", "green_balloon_variable_points_pumps": "For the GREEN balloon, the number of pumps needed and the number of points you could win can change on each round. The number of pumps and points are listed below the GREEN balloon.", "blue_balloon_constant_points_pumps": "For the BLUE balloon, the potential win will always stay the same (1 point),
and it will always require 20 pumps.", - "reward_prob_variable": "For some rounds, the chances that you will win points for either balloon are 50%
(even after popping the balloon).", + "reward_prob_variable": "For some rounds, the chances that you will win points for either balloon are 50%
(even after popping the balloon). ", "reward_prob_certain": "In other rounds the chances of winning will be 100%.", "prob_display_location": "The probability at which you will receive points for a trial will appear at the bottom of the screen.", "reward_prob_display_event": "The chances of winning points on that round, and the number of points possible to win, will be shown to you while you choose which balloon to inflate.", diff --git a/src/timelines/breakTrial.js b/src/timelines/breakTrial.js index a482679..41e07d3 100644 --- a/src/timelines/breakTrial.js +++ b/src/timelines/breakTrial.js @@ -1,19 +1,19 @@ -/// import trials +// import trials import { lang } from '../config/main' import breakScreen from '../trials/breakScreen' import buildCountdown from '../trials/countdown' -const breakTrial = () => { +const breakTrial = (iBreak) => { - let timeline = [ - breakScreen(iBreak), - buildCountdown(lang.countdown.post_break_resume, 3) - ] + let timeline = [ + breakScreen(iBreak), + buildCountdown(lang.countdown.post_break_resume, 3) + ] return { - type: 'html_keyboard_response', - timeline: timeline - } + type: 'html_keyboard_response', + timeline: timeline + } } export default breakTrial diff --git a/src/timelines/main.js b/src/timelines/main.js index 9ab6a5c..09d85a9 100644 --- a/src/timelines/main.js +++ b/src/timelines/main.js @@ -73,7 +73,7 @@ const onlineTimeline = MTURK : // PROLIFIC VERSION OF THE TASK BELOW: [ // commented out for now/quick debugging: - // experimentStart(), + experimentStart(), userId(), preamble, bluePracticeInstructions(), diff --git a/src/timelines/taskBlock.js b/src/timelines/taskBlock.js index 369c1cb..4688566 100644 --- a/src/timelines/taskBlock.js +++ b/src/timelines/taskBlock.js @@ -3,26 +3,26 @@ import breakTrial from './breakTrial' import { generateStartingOpts } from '../lib/taskUtils' const taskBlock = (blockSettings) => { - // initialize block + // initialize block const startingOpts = generateStartingOpts(blockSettings) - const blockDetails = { - block_earnings: 0.0, + const blockDetails = { + block_earnings: 0.0, optimal_earnings: 0.0, continue_block: true } // timeline = loop through trials - let timeline = startingOpts.map( (opt) => taskTrial(blockSettings, blockDetails, opt)) + let timeline = startingOpts.map((opt) => taskTrial(blockSettings, blockDetails, opt)) if (blockSettings.num_breaks > 0) { let breakInterval = Math.floor(timeline.length / (blockSettings.num_breaks + 1)) for (let iBreak = 1; iBreak < blockSettings.num_breaks + 1; iBreak++) { - timeline.splice(iBreak*breakInterval, 0, breakTrial(iBreak)) - } + timeline.splice(iBreak * breakInterval, 0, breakTrial(iBreak)) + } } - return { + return { type: 'html_keyboard_response', timeline: timeline } diff --git a/src/timelines/taskTrial.js b/src/timelines/taskTrial.js index 98c06b7..24f3e81 100644 --- a/src/timelines/taskTrial.js +++ b/src/timelines/taskTrial.js @@ -1,9 +1,12 @@ // import trials + import fixation from "../trials/fixation"; import rewardProbability from "../trials/rewardProbability"; import frameSpike from "../trials/frameSpike"; import choice from "../trials/choice"; import costBenefits from "../trials/costBenefits"; +import { ONLINE } from "../config/main"; +import { addData } from "../lib/taskUtils"; import pressBalloon from "../trials/pressBalloon"; import rewardFeedback from "../trials/rewardFeedback"; import cumulativeReward from "../trials/cumulativeReward"; @@ -26,9 +29,9 @@ const taskTrial = (blockSettings, blockDetails, opts) => { // show condition fixation(300), rewardProbability(1000, blockSettings, opts, trialDetails), - frameSpike(700, blockSettings, opts, trialDetails), - costBenefits(1500, blockSettings, opts, trialDetails), - choice(5000, blockSettings, opts), + //frameSpike(700, blockSettings, opts, trialDetails), + //costBenefits(1500, blockSettings, opts, trialDetails), + choice(6000, blockSettings, opts, trialDetails), pressBalloon(25000, blockSettings, opts), fixation(500), rewardFeedback(1000, blockSettings, opts, trialDetails), @@ -36,11 +39,27 @@ const taskTrial = (blockSettings, blockDetails, opts) => { cumulativeReward(1000, blockSettings, blockDetails, opts, trialDetails), // end the trial trialEnd(500), - ]; + ]; + + let timeline_inlab = [ + // show condition + fixation(300), + rewardProbability(1000, blockSettings, opts, trialDetails), + frameSpike(700, blockSettings, opts, trialDetails), + costBenefits(1500, blockSettings, opts, trialDetails), + choice(5000, blockSettings, opts, trialDetails), + pressBalloon(25000, blockSettings, opts), + fixation(500), + rewardFeedback(1000, blockSettings, opts, trialDetails), + fixation(500), + cumulativeReward(1000, blockSettings, blockDetails, opts, trialDetails), + // end the trial + trialEnd(500), + ]; return { type: "html_keyboard_response", - timeline: timeline, + timeline: ONLINE ? timeline : timeline_inlab, }; }; -export default taskTrial; +export default taskTrial; \ No newline at end of file diff --git a/src/trials/breakScreen.js b/src/trials/breakScreen.js index 5641084..e7723b1 100644 --- a/src/trials/breakScreen.js +++ b/src/trials/breakScreen.js @@ -2,21 +2,21 @@ import { lang } from "../config/main"; import { baseStimulus } from "../lib/markup/stimuli"; const breakScreen = (iBreak) => { - let stimulus = baseStimulus( - ` + let stimulus = baseStimulus( + `
-

${lang.break.prompt}&{iBreak} out of 3 +

${lang.break.prompt}${iBreak} out of 3

`, - true - ); + true + ); - return { - type: "html_keyboard_response", - stimulus: stimulus, - prompt: lang.break.done, - response_ends_trial: true, - }; + return { + type: "html_keyboard_response", + stimulus: stimulus, + prompt: lang.break.done, + response_ends_trial: true, + }; }; export default breakScreen; diff --git a/src/trials/choice.js b/src/trials/choice.js index 5640441..8851022 100644 --- a/src/trials/choice.js +++ b/src/trials/choice.js @@ -10,7 +10,7 @@ const canvasHTML = ` `; -const choice = (duration, blockSettings, opts) => { +const choice = (duration, blockSettings, opts, trialDetails) => { let stimulus = `
` + canvasHTML + @@ -133,7 +133,7 @@ const choice = (duration, blockSettings, opts) => { canvasSettings.balloonYpos, canvasSettings.balloonRadius ); - }; + }; canvasDraw(); var timer = setInterval(function () { @@ -159,7 +159,10 @@ const choice = (duration, blockSettings, opts) => { jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener); if (info.key === keys["Q"]) { // 1 key + var timeWhenPressed = new Date().getTime(); + var rt = timeWhenPressed - timeWhenStarted; var returnObj = { + rt:rt, key: info.key, effort: effort[0], value: value[0], @@ -170,16 +173,25 @@ const choice = (duration, blockSettings, opts) => { done(returnObj); } else if (info.key === keys["P"]) { // 0 key + timeWhenPressed = new Date().getTime(); + rt = timeWhenPressed - timeWhenStarted; returnObj = { + rt:rt, key: info.key, effort: effort[1], value: value[1], high_effort: high_effort[1], get_reward: get_reward[1], + subtrial_type: "choice", }; done(returnObj); } } + trialDetails.probability = probability; + trialDetails.effort = effort; + trialDetails.high_effort = high_effort; + trialDetails.value = value; + trialDetails.subtrial_type = "choice"; var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({ callback_function: after_response, diff --git a/src/trials/costBenefits.js b/src/trials/costBenefits.js index 4aef027..d6dff62 100644 --- a/src/trials/costBenefits.js +++ b/src/trials/costBenefits.js @@ -1,5 +1,6 @@ // imports -import { eventCodes, canvasSize, canvasSettings } from "../config/main"; +import { jsPsych } from "jspsych-react"; +import { eventCodes, keys, canvasSize, canvasSettings } from "../config/main"; import { photodiodeGhostBox, pdSpotEncode } from "../lib/markup/photodiode"; import { removeCursor } from "../lib/utils"; import { addData } from "../lib/taskUtils"; @@ -12,14 +13,14 @@ const canvasHTML = `
`; const costBenefits = (duration, blockSettings, opts, trialDetails) => { - let stimulus = - `
` + - canvasHTML + - fixationHTML + - photodiodeGhostBox() + - `
`; + let stimulus = + `
` + + canvasHTML + + fixationHTML + + photodiodeGhostBox() + + `
`; - const startCode = eventCodes.costBenefitsStart; + const startCode = eventCodes.costBenefitsStart; let probability = blockSettings.is_practice ? opts : opts.prob; let value = blockSettings.is_practice ? blockSettings.value : opts.value; @@ -27,11 +28,20 @@ const costBenefits = (duration, blockSettings, opts, trialDetails) => { let high_effort = blockSettings.is_practice ? blockSettings.high_effort : opts.high_effort; - + let valid_keys = blockSettings.keys; + let get_reward = blockSettings.is_practice + ? blockSettings.get_reward + : opts.get_reward; return { type: "call_function", async: true, func: (done) => { + trialDetails.probability = probability; + trialDetails.effort = effort; + trialDetails.high_effort = high_effort; + trialDetails.value = value; + trialDetails.subtrial_type = "costBenefits"; + addData(trialDetails, blockSettings, opts); // add stimulus to the DOM document.getElementById("jspsych-content").innerHTML = stimulus; // $('#jspsych-content').addClass('task-container') @@ -39,92 +49,143 @@ const costBenefits = (duration, blockSettings, opts, trialDetails) => { // set up canvas let canvas = document.querySelector("#jspsych-canvas"); let ctx = canvas.getContext("2d"); + let timeWhenStarted = new Date().getTime(); - const canvasDraw = () => { - // transparent background - ctx.clearRect(0, 0, canvas.width, canvas.height); - var inflateBy; - var spikeHeight = [0, 0]; - for (let i = 0; i < 2; i++) { - if (high_effort[i]) { - inflateBy = canvasSettings.inflateByHE; - } else { - inflateBy = canvasSettings.inflateByNHE; - } + const canvasDraw = () => { + // transparent background + ctx.clearRect(0, 0, canvas.width, canvas.height); + var inflateBy; + var spikeHeight = [0, 0]; + for (let i = 0; i < 2; i++) { + if (high_effort[i]) { + inflateBy = canvasSettings.inflateByHE; + } else { + inflateBy = canvasSettings.inflateByNHE; + } - // how far should the spike be - var targetDist = 2 * inflateBy * (effort[i] - 1); - var balloonBaseHeight = - canvasSettings.balloonBaseHeight + 2 * canvasSettings.balloonRadius; - // distance of the spike from the top - spikeHeight[i] = effort[i] - ? canvasSettings.frameDimensions[1] - - balloonBaseHeight - - targetDist - - canvasSettings.spiketopHeight - : 0; - } + // how far should the spike be + var targetDist = 2 * inflateBy * (effort[i] - 1); + var balloonBaseHeight = + canvasSettings.balloonBaseHeight + 2 * canvasSettings.balloonRadius; + // distance of the spike from the top + spikeHeight[i] = effort[i] + ? canvasSettings.frameDimensions[1] - + balloonBaseHeight - + targetDist - + canvasSettings.spiketopHeight + : 0; + } - drawText( - ctx, - `${probability}`, - canvasSettings.rewProbXpos, - canvasSettings.rewProbYpos, - "undefined" - ); + drawText( + ctx, + `${probability}`, + canvasSettings.rewProbXpos, + canvasSettings.rewProbYpos, + "undefined" + ); - // drawFrame(ctx, canvasSettings.frameDimensions[0], canvasSettings.frameDimensions[1], canvasSettings.frameXpos[0], canvasSettings.frameYpos, canvasSettings.frameLinecolor, false) - drawEffort( - ctx, - value[0], - effort[0], - canvasSettings.textXpos[0], - canvasSettings.textYpos, - high_effort[0] - ); - drawSpike( - ctx, - canvasSettings.spikeWidth, - spikeHeight[0], - canvasSettings.spikeXpos[0], - canvasSettings.spikeYpos, - canvasSettings.frameLinecolor, - canvasSettings.frameLinecolor, - false - ); + // drawFrame(ctx, canvasSettings.frameDimensions[0], canvasSettings.frameDimensions[1], canvasSettings.frameXpos[0], canvasSettings.frameYpos, canvasSettings.frameLinecolor, false) + drawEffort( + ctx, + value[0], + effort[0], + canvasSettings.textXpos[0], + canvasSettings.textYpos, + high_effort[0] + ); + drawSpike( + ctx, + canvasSettings.spikeWidth, + spikeHeight[0], + canvasSettings.spikeXpos[0], + canvasSettings.spikeYpos, + canvasSettings.frameLinecolor, + canvasSettings.frameLinecolor, + false + ); - // drawFrame(ctx, canvasSettings.frameDimensions[0], canvasSettings.frameDimensions[1], canvasSettings.frameXpos[1], canvasSettings.frameYpos, canvasSettings.frameLinecolor, false) - drawEffort( - ctx, - value[1], - effort[1], - canvasSettings.textXpos[1], - canvasSettings.textYpos, - high_effort[1] - ); - drawSpike( - ctx, - canvasSettings.spikeWidth, - spikeHeight[1], - canvasSettings.spikeXpos[1], - canvasSettings.spikeYpos, - canvasSettings.frameLinecolor, - canvasSettings.frameLinecolor, - false - ); - }; + // drawFrame(ctx, canvasSettings.frameDimensions[0], canvasSettings.frameDimensions[1], canvasSettings.frameXpos[1], canvasSettings.frameYpos, canvasSettings.frameLinecolor, false) + drawEffort( + ctx, + value[1], + effort[1], + canvasSettings.textXpos[1], + canvasSettings.textYpos, + high_effort[1] + ); + drawSpike( + ctx, + canvasSettings.spikeWidth, + spikeHeight[1], + canvasSettings.spikeXpos[1], + canvasSettings.spikeYpos, + canvasSettings.frameLinecolor, + canvasSettings.frameLinecolor, + false + ); + }; + canvasDraw(); + var timer = setInterval(function () { + var now = new Date().getTime(); + var percTimePassed = (now - timeWhenStarted) / 1000 / (duration / 1000); - trialDetails.probability = probability; - trialDetails.effort = effort; - trialDetails.high_effort = high_effort; - trialDetails.value = value; - trialDetails.subtrial_type = "cost_benefits"; + if (percTimePassed >= 1) { + jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener); + clearInterval(timer); + var returnObj = { + key: 0, + effort: 0, + value: 0, + high_effort: 0, + get_reward: 0, + subtrial_type: "costBenefits", + }; + done(returnObj); + } + }, 50); + function after_response(info) { + clearInterval(timer); + jsPsych.pluginAPI.cancelKeyboardResponse(keyboardListener); + if (info.key === keys["Q"]) { + // 1 key + var timeWhenPressed = new Date().getTime(); + var rt = timeWhenPressed - timeWhenStarted; + var returnObj = { + rt:rt, + key: info.key, + effort: effort[0], + value: value[0], + high_effort: high_effort[0], + get_reward: get_reward[0], + subtrial_type: "costBenefits", + }; + done(returnObj); + } else if (info.key === keys["P"]) { + // 0 key + timeWhenPressed = new Date().getTime(); + rt = timeWhenPressed - timeWhenStarted; + returnObj = { + rt: rt, + key: info.key, + effort: effort[1], + value: value[1], + high_effort: high_effort[1], + get_reward: get_reward[1], + subtrial_type: "costBenefits" + }; + done(returnObj); + } + } - canvasDraw(); - setTimeout(() => { - done(addData(trialDetails, blockSettings, opts)); - }, duration); - }, + var keyboardListener = jsPsych.pluginAPI.getKeyboardResponse({ + callback_function: after_response, + valid_responses: valid_keys, + rt_method: "date", + persist: true, + allow_held_key: false, + }); + + }, on_load: () => { removeCursor("experiment"); pdSpotEncode(startCode); diff --git a/src/trials/rewardFeedback.js b/src/trials/rewardFeedback.js index c9cb428..6260e73 100644 --- a/src/trials/rewardFeedback.js +++ b/src/trials/rewardFeedback.js @@ -15,7 +15,9 @@ const rewardFeedback = (duration, blockSettings, opts, trialDetails) => { let rewards = jsPsych.data.get().select("value").values; let last = rewards[rewards.length - 1]; let stimulus; - if (last) { + console.log("last:", last); + console.log("rewards:", rewards); + if (last) { stimulus = `

+${last.reward.toFixed(2)}

` + photodiodeGhostBox() +