Create an simple experiment based on https://github.com/PCLLAB/LoP-Effect.
Estimated time: many hours
kyle available for help and questions
please use all tools and resources available
Basically copy the files and structure from LoP-Effect/E1
.
Materials
holds things like images and json files containing instructions and question/answers. We will only be using thePractice.json
and pictures in thePractice
folder for this experiment to keep it short.css
holds css. Mostly unused, but impossible to delete.js
holds js libraries. You may notice an ancient version of jquery and bootstrap 🤮.plugins
contains jsPsych pluginsexperiment.html
is where everything starts. It uses all the js and css files and starts the experiment.experiment.js
is where the logic is defined. This is 99% of what you will need to edit.jspsych.js
is the star of the show. Important to notice, this is jspsych v5.lab-start.html
andverify.html
are used to manually set experiment conditions/parameters. You start atlab-start.html
which directs toverify.html
which directs toexperiment.html
with the chosen URL parameters.
experiment.js
is the basically the only file you will need to edit.
Serve it however you want, it's just a website. If you have npm
, you can run the following commands.
npx http-server -c-1
# `-c-1` disables caching, see https://github.com/http-party/http-server
Access the website via the link in your terminal. You will usually need to go to /experiment.html
to see the experiment or /lab-start.html
if the experiment requires certain parameters.
LoP-Effect
has a parameter Version
so the final url is something like /experiment.html?Version=1
You should have all the same files as LoP-Effect/E1
in your folder. You can delete everything in your experiment.js
and add stuff one by one to see how it work.
Here is a stripped down example.
const files = {
arbitraryName: "path to JSON file",
};
class Experiment {
constructor() {
this.timeline = [];
//calls this.loadMaterials()
}
loadMaterials() {
// loads JSON files and makes them available as fields
//
// calls this.buildTimeline() and this.run()
}
buildTimeline() {
const instructionTrial = {
type: "pcllab-core",
stimuli: [this.arbitraryName["field in json file"]],
show_button: true,
button_text: "Continue",
response_count: 0,
minimum_time: 7000,
};
this.timeline.push(instructionTrial);
}
run() {
// start jsPsych with the built timeline
//
// once finished, sends a post request with experiment data to store in backend
//
// EACH EXPERIMENT HAS A UNIQUE URL TO POST DATA TO, CREATE ONE IN JARVIS
}
}
You can strip out anything related to URL paramters, versions, conditons. There is just one version for this task.
There should be an instruction trial first.
Your experiment should use "Materials/Practice.json"
instead of the "Materials/Order1.json"
and do basically the same thing, show a question, followed by the image and two buttons to respond for each item.
After, the data should be sent to and visible in https://jarvis.psych.purdue.edu/
- Create a new "experiment" using the + icon and use the new data collection URL instead of the URL already in "LoP-Effect". This is important because we want to save the data generated at the end of your "experiment" in a separate place from the actual experimental data that was already collected. You can name the new experiment "Programmer Starter Task_Lastname". After creating a new experiment on Jarvis, you will see a button that says "generate". From there you will be able to see the experiment ID and an URL. You will replace the ID in the saveData() function, and replace the URL in the run() function at the end of the experiment.