CSS/HTML Styling Help for SC-IAT (Single-Category Implicit Association Test)

nathan...@gmail.com

unread,

Jul 14, 2016, 3:58:23 PM7/14/16

to jsPsych

Hello all,

I'm working on coding an SC-IAT in jsPsych and I'm very close to having it completed. However, I'm struggling to get some CSS/HTML to have the three target categories on the upper left and right corners (and then getting one of the target categories to switch sides after the second trial). I'll continue working on it, but if anyone has some ideas I would greatly appreciate it!

My code is below (there's probably a better way to do it than what I wrote, I'm new to JAVA).

SC-IAT jsPsych Code:

<!doctype html>
<html>
<head>
<title>SC-IAT</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jspsych-5.0.3/jspsych.js"></script>
<link href="jspsych-5.0.3/css/jspsych.css" rel="stylesheet" type="text/css"></link>
<script src="jspsych-5.0.3/plugins/jspsych-text.js"></script>
<script src="jspsych-5.0.3/plugins/jspsych-categorize.js"></script>
</head>
<body>
</body>
<script>

/* randomize time between each trial */
var post_trial_gap = function()
{
return Math.floor( Math.random() * 200) + 100;
}

/* ===============INSTRUCTION BLOCKS==================*/

/* define instructions block */
var instructions =
{
type: "text"
,text: "Welcome to the experiment! Please press the space-bar key to begin"
,timing_post_trial: 2000
,cont_key: ['space']
};

/* define instructions2 block */
var instructions2 =
{
type: "text"
,text: "That was just a test...Now it's time for the real thing!!! Press space-bar to continue."
,timing_post_trial: 2000
,cont_key: ['space']
};

/* define rev_instructions block */
var rev_instructions =
{
type: "text"
,text: "Whoa! The words and stuff flipped to the other side! This is a practice round...Press space-bar to continue."
,timing_post_trial: 2000
,cont_key: ['space']
};

/* ============IMAGE AND WORDS FOR BLOCKS===============*/

/* practice trial images */
var practice_trial_images_and_words =
[
{stimulus: 'jspsych-5.0.3/img/AF_300.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Move.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single_Move.png', key_answer: 69}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'Mine', is_html:true, key_answer: 69}
,{stimulus: 'My', is_html:true, key_answer: 69}
,{stimulus: 'Myself', is_html:true, key_answer: 69}
,{stimulus: 'I', is_html:true, key_answer: 69}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'They', is_html:true, key_answer: 73}
,{stimulus: 'Them', is_html:true, key_answer: 73}
,{stimulus: 'Their', is_html:true, key_answer: 73}
,{stimulus: 'Theirs', is_html:true, key_answer: 73}
,{stimulus: 'Others', is_html:true, key_answer: 73}
]

/* full_trial images */
var full_trial_images_and_words =
[
{stimulus: 'jspsych-5.0.3/img/AF_300.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Move.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single_Move.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Move.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single.png', key_answer: 69}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single_Move.png', key_answer: 69}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'Mine', is_html:true, key_answer: 69}
,{stimulus: 'My', is_html:true, key_answer: 69}
,{stimulus: 'Myself', is_html:true, key_answer: 69}
,{stimulus: 'I', is_html:true, key_answer: 69}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'Mine', is_html:true, key_answer: 69}
,{stimulus: 'My', is_html:true, key_answer: 69}
,{stimulus: 'Myself', is_html:true, key_answer: 69}
,{stimulus: 'I', is_html:true, key_answer: 69}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'They', is_html:true, key_answer: 73}
,{stimulus: 'Them', is_html:true, key_answer: 73}
,{stimulus: 'Their', is_html:true, key_answer: 73}
,{stimulus: 'Theirs', is_html:true, key_answer: 73}
,{stimulus: 'Others', is_html:true, key_answer: 73}
,{stimulus: 'They', is_html:true, key_answer: 73}
,{stimulus: 'Them', is_html:true, key_answer: 73}
,{stimulus: 'Their', is_html:true, key_answer: 73}
,{stimulus: 'Theirs', is_html:true, key_answer: 73}
,{stimulus: 'Others', is_html:true, key_answer: 73}
,{stimulus: 'They', is_html:true, key_answer: 73}
,{stimulus: 'Them', is_html:true, key_answer: 73}
,{stimulus: 'Their', is_html:true, key_answer: 73}
,{stimulus: 'Theirs', is_html:true, key_answer: 73}
,{stimulus: 'Others', is_html:true, key_answer: 73}
]

/* reverse practice trial images */
var rev_practice_trial_images_and_words =
[
{stimulus: 'jspsych-5.0.3/img/AF_300.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Move.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single_Move.png', key_answer: 73}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'Mine', is_html:true, key_answer: 69}
,{stimulus: 'My', is_html:true, key_answer: 69}
,{stimulus: 'Myself', is_html:true, key_answer: 69}
,{stimulus: 'I', is_html:true, key_answer: 69}
,{stimulus: 'They', is_html:true, key_answer: 73}
,{stimulus: 'Them', is_html:true, key_answer: 73}
,{stimulus: 'Their', is_html:true, key_answer: 73}
,{stimulus: 'Theirs', is_html:true, key_answer: 73}
,{stimulus: 'Others', is_html:true, key_answer: 73}
]

/* reverse full trial images and words */
var rev_full_trial_images_and_words =
[
{stimulus: 'jspsych-5.0.3/img/AF_300.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Move.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single_Move.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Move.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single.png', key_answer: 73}
,{stimulus: 'jspsych-5.0.3/img/AF_300_Single_Move.png', key_answer: 73}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'Mine', is_html:true, key_answer: 69}
,{stimulus: 'My', is_html:true, key_answer: 69}
,{stimulus: 'Myself', is_html:true, key_answer: 69}
,{stimulus: 'I', is_html:true, key_answer: 69}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'Mine', is_html:true, key_answer: 69}
,{stimulus: 'My', is_html:true, key_answer: 69}
,{stimulus: 'Myself', is_html:true, key_answer: 69}
,{stimulus: 'I', is_html:true, key_answer: 69}
,{stimulus: 'Me', is_html:true, key_answer: 69}
,{stimulus: 'Mine', is_html:true, key_answer: 69}
,{stimulus: 'My', is_html:true, key_answer: 69}
,{stimulus: 'Myself', is_html:true, key_answer: 69}
,{stimulus: 'I', is_html:true, key_answer: 69}
,{stimulus: 'They', is_html:true, key_answer: 73}
,{stimulus: 'Them', is_html:true, key_answer: 73}
,{stimulus: 'Their', is_html:true, key_answer: 73}
,{stimulus: 'Theirs', is_html:true, key_answer: 73}
,{stimulus: 'Others', is_html:true, key_answer: 73}
,{stimulus: 'They', is_html:true, key_answer: 73}
,{stimulus: 'Them', is_html:true, key_answer: 73}
,{stimulus: 'Their', is_html:true, key_answer: 73}
,{stimulus: 'Theirs', is_html:true, key_answer: 73}
,{stimulus: 'Others', is_html:true, key_answer: 73}
]

/* =============RANDOMIZATION OF STIMULI IN BLOCKS================== */

/* practice trial stimuli randomization */
var practice_trial_stimuli = jsPsych.randomization.repeat(practice_trial_images_and_words,2);

/* full trial stimuli randomization */
var full_trial_stimuli = jsPsych.randomization.repeat(full_trial_images_and_words,2);

/* reverse practice trial stimuli randomization */
var rev_practice_trial_stimuli = jsPsych.randomization.repeat(rev_practice_trial_images_and_words,2);

/* reverse full trial stimuli randomization */
var rev_full_trial_stimuli = jsPsych.randomization.repeat(rev_full_trial_images_and_words,2);

/* =================DEFINE BLOCKS================= */

/* define practice trial block */
var practice_trial =
{
type: 'categorize'
,choices: ['E','I']
,timing_post_trial: post_trial_gap
,timing_feedback_duration: 300
,correct_text:""
,incorrect_text:"X"
,force_correct_button_press: false
,timing_response: 5000
,timeout_message:"Please respond faster."
,timeline: practice_trial_stimuli
};

/* define full trial block */
var full_trial =
{
type: 'categorize'
,choices: ['E','I']
,timing_post_trial: post_trial_gap
,timing_feedback_duration: 300
,correct_text:""
,incorrect_text:"X"
,timing_response: 5000
,timeout_message:"Please respond faster."
,force_correct_button_press: false
,timeline: full_trial_stimuli
};

/* define reverse practice trial block */
var rev_practice_trial =
{
type: 'categorize'
,choices: ['E','I']
,timing_post_trial: post_trial_gap
,timing_feedback_duration: 300
,correct_text:""
,incorrect_text:"X"
,timing_response: 5000
,timeout_message:"Please respond faster."
,force_correct_button_press: false
,timeline: rev_practice_trial_stimuli
};

/* define reverse full trial block */
var rev_full_trial =
{
type: 'categorize'
,choices: ['E','I']
,timing_post_trial: post_trial_gap
,timing_feedback_duration: 300
,correct_text:""
,incorrect_text:"X"
,timing_response: 5000
,timeout_message:"Please respond faster."
,force_correct_button_press: false
,timeline: rev_full_trial_stimuli
};

/* ====================CREATE EXPERIMENT TIMELINE AND START IT================= */

/* create experiment timeline array */
var timeline = [];
timeline.push(instructions);
timeline.push(practice_trial);
timeline.push(instructions2);
timeline.push(full_trial);
timeline.push(rev_instructions);
timeline.push(rev_practice_trial);
timeline.push(instructions2);
timeline.push(rev_full_trial);

/* start the experiment */
jsPsych.init({
timeline: timeline
,fullscreen: true
,on_finish: function()
{
jsPsych.endExperiment('The experiment was ended. This is the end message.');
jsPsych.data.displayData();
}
});
</script>
</html>

CSS CODE:
=============================================================
=============================================================

/*
* CSS for jsPsych experiments.
*
* This stylesheet provides minimal styling to make jsPsych
* experiments look polished without any additional styles.
*/

/* fonts and type */

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
html {
font-family: 'Open Sans', 'Arial', sans-serif;
font-size: 18px;
line-height: 1.6em;
}
body {
margin: 0;
padding: 0;
}
p {
clear: both;
}
.very-small {
font-size: 50%;
}
.small {
font-size: 75%;
}
.large {
font-size: 125%;
}
.very-large {
font-size: 150%;
}

/* Classes for changing location of things */

.left {
float: left;
}
.right {
float: right;
}
.center-content {
text-align: center;
font-size: 150%;
}

.block-center {
margin: 1em auto;
display: block;
}
/* Form elements like input fields and buttons */

input[type="text"] {
font-family: 'Open Sans', 'Arial', sans-sefif;
font-size: 14px;
}

/* borrowing Bootstrap style for btn elements, but combining styles a bit */
.jspsych-btn {
display: inline-block;
padding: 6px 12px;
margin: 0px 8px;
font-size: 14px;
font-weight: 400;
font-family: 'Open Sans', 'Arial', sans-serif;
cursor: pointer;
line-height: 1.4;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
color: #333;
background-color: #fff;
border-color: #ccc;
}

.jspsych-btn:hover {
background-color: #ddd;
border-color: #aaa;
}

/* Container holding jsPsych content */

.jspsych-display-element {
width: 800px;
font-size: 150%;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);

}

/* jsPsych progress bar */

#jspsych-progressbar-container {
color: #777;
border-bottom: 2px solid #dedede;
background-color: #f3f3f3;
margin-bottom: 1em;
text-align: center;
padding: 10px 0px;
}
#jspsych-progressbar-container s {}
#jspsych-progressbar-outer {
background-color: #dedede;
border-radius: 5px;
padding: 1px;
width: 800px;
margin: auto;
}
#jspsych-progressbar-inner {
background-color: #aaa;
/* #3EB3D7; */
width: 0%;
height: 1em;
border-radius: 5px;
}

/* PLUGIN: jspsych-animation */

#jspsych-animation-image {
display: block;
margin-left: auto;
margin-right: auto;
}

/* PLUGIN: jspsych-categorize-animation */

#jspsych-categorize-animation-stimulus {
display: block;
margin-left: auto;
margin-right: auto;
}

/* PLUGIN: jspsych-categorize */

#jspsych-categorize-stimulus {
display: block;
margin-left: auto;
margin-right: auto;
}
.feedback {
display: block;
margin-left: auto;
margin-right: auto;
}

/* PLUGIN: jspsych-free-sort */

#jspsych-free-sort-arena {
margin-left: auto;
margin-right: auto;
border: 2px solid #444;
}
.jspsych-free-sort-draggable {
cursor: move;
}
#jspsych-free-sort-done-btn {
display: block;
margin: auto;
margin-top: 25px;
}

/* PLUGIN: jspsych-instructions */

.jspsych-instructions-nav {
text-align: center;
margin-top: 2em;
}
.jspsych-instructions-nav button {
margin: 20px;
}

/* PLUGIN: jspsych-multi-stim-multi-response */

#jspsych-multi-stim-multi-response-stimulus {
display: block;
margin: auto;
}

/* PLUGIN: jspsych-palmer */

#jspsych-palmer-snapCanvas {
margin-left: auto;
margin-right: auto;
}

/* PLUGIN: jspsych-same-different */

.jspsych-same-different-stimulus {
display: block;
margin-left: auto;
margin-right: auto;
}

/* PLUGIN: jspsych-single-stim */

#jspsych-single-stim-stimulus {
display: block;
margin-left: auto;
margin-right: auto;
}

/* PLUGIN: jspsych-survey-text */

.jspsych-survey-text {
margin: 0.25em 0em;
}
.jspsych-survey-text-question {
margin: 2em 0em;
}

/* PLUGIN: jspsych-survey-likert */

.jspsych-survey-likert-statement {
display:block;
font-size: 18px;
padding-top: 30px;
margin-bottom:10px;
}
.jspsych-survey-likert-opts {
list-style:none;
width:100%;
margin:0;
padding:0 0 35px;
display:block;
font-size: 14px;
line-height:1.1em;
}

.jspsych-survey-likert-opt-label {
line-height: 1.1em;
}

.jspsych-survey-likert-opts:before {
content: '';
position:relative;
top:11px;
/*left:9.5%;*/
display:block;
background-color:#efefef;
height:4px;
width:100%;
}

.jspsych-survey-likert-opts:last-of-type {
border-bottom: 0;
}

.jspsych-survey-likert-opts li {
display:inline-block;
/*width:19%;*/
text-align:center;
vertical-align: top;
}

.jspsych-survey-likert-opts li input[type=radio] {
display:block;
position:relative;
top:0;
left:50%;
margin-left:-6px;
}

/*
*
* PLUGIN: jspsych-survey-multi-choice
*
*/

.jspsych-survey-multi-choice-question {
margin-top: 2em;
margin-bottom: 2em;
}

.jspsych-survey-multi-choice-text span.required {
color: darkred;
}

.jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-text {
text-align: center;
}

.jspsych-survey-multi-choice-option {
line-height: 2;
}
.jspsych-survey-multi-choice-horizontal .jspsych-survey-multi-choice-option {
display: inline-block;
margin-left: 1em;
margin-right: 1em;
vertical-align: top;
}

label.jspsych-survey-multi-choice-text input[type="radio"] {
margin-right: 1em;
}

#jspsych-survey-multi-choice-next {
display: block;
margin: auto;
}

/** PLUGIN: jspsych-visual-search-circle **/

#jspsych-visual-search-circle-svg {
display: block;
margin-left: auto;
margin-right: auto;
}

/* PLUGIN: jspsych-vsl-animate-occlusion */

#jspsych-vsl-animate-occlusion-canvas {
display: block;
margin: auto;
}

/* PLUGIN: jspsych-xab */

.jspsych-xab-stimulus {
display: block;
margin-left: auto;
margin-right: auto;
}

Josh de Leeuw

unread,

Jul 15, 2016, 11:27:42 AM7/15/16

to nathan...@gmail.com, jsPsych

It looks like you don't yet have any code for putting the category labels in. Is that right?

You'll need to learn a bit about CSS positioning to get the exact effect you want. I suggest finding a tutorial on positioning with CSS (there are many, targeted at different levels of comfort with HTML, CSS, and programming in general). Once you understand concepts of relative and absolute positioning I think you'll be able to get the effect you want.

An IAT plugin remains on the to do list...

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/2957140e-b82b-4ff6-9e48-b19316498544%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

nathan...@gmail.com

unread,

Jul 15, 2016, 11:35:56 AM7/15/16

to jsPsych, nathan...@gmail.com

Thanks for the reply Josh! I've done some reading on CSS positioning and I'll continue to read on the topic per your recommendation. Originally, I tried to manipulate the code for "prompt:" in the categorize plugin. I figured that if I changed the way the prompt text is displayed it could work. No success so far though. I'll keep you posted.

Josh de Leeuw

unread,

Jul 15, 2016, 11:40:44 AM7/15/16

to nathan...@gmail.com, jsPsych

I think using prompt could work. Any HTML code in prompt gets appended *below* the stimulus. But if you use absolute positioning, and add a CSS rule to the container that marks the container as relative positioning, then I think you'll be able to adjust where the labels get displayed.

Alternatively, it might be easier to just modify the categorize or single-stim plugin into an IAT plugin that displays labels in the correct location. In either case you'll need to know how CSS positioning works, but a plugin would have more freedom about where in the DOM the labels get inserted which might make the CSS rules more straightforward.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/bbe64114-6a07-44fa-9fc5-62a32697293e%40googlegroups.com.

Nathan Parkin

unread,

Jul 16, 2016, 7:23:07 AM7/16/16

to Josh de Leeuw, jsPsych

Hi Josh,

Thanks again for the helpful response. I managed the play around with the CSS as you recommended and got the labels to display correctly – good news! I created two <div> elements: one that displays text on the top left corner, and one that displays text on the top right corner.

However, the prompt refreshes with each trial, causing the labels flash between each response. This is what I expected (and feared). Do you have any ideas of how I could get the labels to display as a background to the script to that it doesn’t flash after each trial? For instance, could I use “document.body.style.background =” in jsPsych tell it to display the <div> elements I created in CSS? I played around with this and couldn’t seem to get it to work – maybe it’s not supported in jsPsych?

Thanks again,

Nate

Nathan Parkin

unread,

Jul 18, 2016, 5:56:16 AM7/18/16

to Josh de Leeuw, jsPsych

Hi all,

As an update, I managed to “create” a new plugin that allows the user to enter what words will be displayed on the left and right corners. The plugin is a copy of the catergorize plugin with only a few modifications.

I figured out a way to avoid the refresh flash by inserting the target words in the body of the html (see code below). The only issue with this option is that it keeps the words permanently after each trial. In other words, the target words stack on top of each other as I progress through the IAT. I’ve tried different methods such as inserting: document.getElementsByTagName(‘body’)[0].innerHTML = ''; in the code but haven’t had any success.

I’ll keep working on it, but any ideas or suggestions are always appreciated.

Best,

Nate

// if left_target is set, show left_target

if (trial.left_target !== "") {

$('body').before($('<div class = "left-side">'+trial.left_target+'</div>'));

}

// if right_target is set, show right_target

if (trial.right_target !== "") {

$('body').before($('<div class = "right-side">'+trial.right_target+'</div>'));

Nathan Parkin

unread,

Jul 18, 2016, 11:39:32 AM7/18/16

to Josh de Leeuw, jsPsych

Another update: I found a method to keep the target words in place until the end of each block of trials. I’ll refine the CSS a bit and post the final version for those who may be interested. The solution was simple – I added one line of code that empties the <div> elements that hold the left and right target words. After both are emptied, the next line adds the appropriate target words. This is done nearly instantaneously, so the targets always remain visible on the screen to the user.

// new params for IAT

trial.left_target = (typeof trial.left_target === 'undefined') ? "" : trial.left_target;

trial.right_target = (typeof trial.right_target === 'undefined') ? "" : trial.right_target;

// if left_target is set, show left_target

if (trial.left_target !== "") {

$('div.left-side').empty();

$('body').before($('<div class = "left-side">'+trial.left_target+'</div>'));

}

// if right_target is set, show right_target

if (trial.right_target !== "") {

$('div.right-side').empty();

nicole.l...@gmail.com

unread,

Aug 18, 2016, 4:38:43 PM8/18/16

to jsPsych, josh.d...@gmail.com, nathan...@gmail.com

Hi Nate,

I stumbled across this and could cry with relief -- I've been struggling with how to create an online IAT for my research, and I am not at all someone who can code. When you are finished, can you share the whole code? I would be beyond grateful and would be willing to send you a thank you card and so many good vibes throughout the universe!!!

Nicole

Nathan Parkin

unread,

Aug 19, 2016, 4:38:14 PM8/19/16

to nicole.l...@gmail.com, jsPsych, josh.d...@gmail.com

Hi Nicole,

I know the feeling - it's been super helpful to have jsPsych that allows for an online version (huge thanks again to Josh for this tool!). We've done multiple experiments with it and found that it works very well.

I'd be more than happy to share the code in exchange for positive vibes. I'm working on making the IAT plugin I've adapted to be more user-friendly. At the moment, there's still a fair amount of coding that has to be done if you want to set up your own experiment. That being said, if you'd like to have what's available now, I can send it to you. And/Or, I can keep you posted as I make progress on the plugin. Let me know what you feel comfortable with.

Best,

Nate

odegaar...@gmail.com

unread,

May 5, 2017, 1:49:11 PM5/5/17

to jsPsych, nicole.l...@gmail.com, josh.d...@gmail.com

Hi Nathan -

Our lab here at UCLA is looking to set up an online IAT task, and it looks like you got further than anyone on jsPsych so far.

Any chance you'd be willing to share your code?

Looks like another user got far in creating a new plugin (e.g., https://github.com/JHonaker/jsPsych/blob/2e66c598b03c25abb61c06605d823242bd8f4386/plugins/jspsych-iat.js),

but I'd love to see what you developed.

We'd be forever grateful!!! :) Let us know if this is a possibility.

Brian Odegaard

UCLA Consciousness & Metacognition Lab

Nathan Parkin

unread,

May 9, 2017, 11:38:18 AM5/9/17

to odegaar...@gmail.com, jsPsych, Nicole Lorenzetti, Josh de Leeuw

Hey Brian,

Sorry for the delay - I'd be happy to share with you and your team. I'll pull together the materials and reply to this email with all the resources you need to run an iat or sciat.

Nathan

Virus-free. www.avast.com

Nathan Parkin

--
You received this message because you are subscribed to a topic in the Google Groups "jsPsych" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jspsych/3-YrE1upPqM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jspsych+unsubscribe@googlegroups.com.

To post to this group, send email to jsp...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/c0b1a0b9-c1d2-4504-b2ab-ac00be4e3d19%40googlegroups.com.

Nathan Parkin

unread,

May 18, 2017, 12:44:25 AM5/18/17

to odegaar...@gmail.com, jsPsych, Nicole Lorenzetti, Josh de Leeuw

Hi Brian,

The link below takes you to a folder with all the code you need to run both IATs and SCIATs. In addition, I've included four HTML files of example studies I used (the experiments failed, but the SCIATs and IATs worked great!)

https://drive.google.com/drive/folders/0Bx8L4-y3mzQbVFVwTUhqbWktUWM?usp=sharing

If you download these files to your desktop, the HTML files should work when you open them in your browser. This allows you to test on an individual computer before uploading to your server.

In addition, because of the interest from other faculty at my school, I developed a step-by-step video instruction series. The playlist covers everything I know about jsPsych in relation to running IATs/SCIATs. The videos do have some parts that are specific to the file hosting service we used, but those parts can easily be adapted to any server/file host you choose to run.

https://www.youtube.com/playlist?list=PLHnflhwIUMdWK-KNBe4ZKvfyW9hoQK8p_

I hope this is helpful!

Nathan

Nathan Parkin

Brian Odegaard

unread,

May 18, 2017, 8:04:16 PM5/18/17

to Nathan Parkin, jsPsych, Nicole Lorenzetti, Josh de Leeuw

Nathan -

You're amazing! My RA actually got another IAT version up and running last week, but these resources look great!

Thanks for putting it all together . . . we will be sure to keep this post/the links as resources for the future, and I'm sure many anonymous internet people will be implicitly sending gratitude your way for creating this stuff for public use. ;)

Thanks again!

- Brian

--

Brian Odegaard, PhD
Post-Doc
Consciousness and Metacognition Lab
UCLA Department of Psychology
Los Angeles, California 90095-1563

This email may contain material that is confidential and/or privileged for the sole use of the intended recipient. Any review, reliance or distribution by others or forwarding without express permission is strictly prohibited. If you are not the intended recipient, please contact the sender and delete all copies.

rooseve...@gmail.com

unread,

Jul 14, 2018, 10:17:51 AM7/14/18

to jsPsych

Hi Nathan,

Thank you very much for making these codes available. I’m trying to set an experiment in Brazil and your codes helped me a lot. However, even though I got the experiment running all good, I cannot find the excel files with the answers. I uploaded the folder with the jsPsych in my public_html folder and I created the .html experiment using your example as a base. Do you know where I need to adjust the code to have my participants’ answers stored? I saw in one of your YouTube videos that the participants’ answers are saved in a folder called data. I didn’t have this folder but I created one. I’m wondering what I should do to have the experiment linked to this folder. Sorry for bothering you with that and I appreciate any comments.
You can find the code that I have adapted bellow.

https://drive.google.com/open?id=1xpiqE-kAQ84dCCUSRfrNQTYI2eoe9Y8O

King Regards,
Roosevelt

Em quinta-feira, 18 de maio de 2017 16:44:25 UTC+12, Nathan Parkin escreveu:
> Hi Brian,
>
>
> The link below takes you to a folder with all the code you need to run both IATs and SCIATs. In addition, I've included four HTML files of example studies I used (the experiments failed, but the SCIATs and IATs worked great!)
> https://drive.google.com/drive/folders/0Bx8L4-y3mzQbVFVwTUhqbWktUWM?usp=sharing
>
>
>
> If you download these files to your desktop, the HTML files should work when you open them in your browser. This allows you to test on an individual computer before uploading to your server.
>
>
> In addition, because of the interest from other faculty at my school, I developed a step-by-step video instruction series. The playlist covers everything I know about jsPsych in relation to running IATs/SCIATs. The videos do have some parts that are specific to the file hosting service we used, but those parts can easily be adapted to any server/file host you choose to run.
>
>
> https://www.youtube.com/playlist?list=PLHnflhwIUMdWK-KNBe4ZKvfyW9hoQK8p_
>
>
>
> I hope this is helpful!
>
>
> Nathan
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
> Nathan Parkin
>
>
>
>
> On Tue, May 9, 2017 at 8:38 AM, Nathan Parkin <nathan...@gmail.com> wrote:
>
>
> Hey Brian,
>
>
> Sorry for the delay - I'd be happy to share with you and your team. I'll pull together the materials and reply to this email with all the resources you need to run an iat or sciat.
>
>
> Nathan
>
>
>
>
>
>
>

> > > ....

alexsmg...@gmail.com

unread,

Jul 15, 2018, 4:05:47 PM7/15/18

to jsPsych

Parece que estamos enfrentando a mesma dificuldade Roosevelt. heheeh. Faz mais de um mês que quebro cabeça com isso. Espero que você tenha mais sorte que eu.
Abraços!!

Nathan Parkin

unread,

Jul 16, 2018, 2:18:25 AM7/16/18

to alexsmg...@gmail.com, jsPsych

Hey Alex and Roosevelt,

I'm not quite sure why you're having this issue, but I have a couple guesses: 1) do you have the iatphp.php file in the public_html folder? If this is missing it would cause the data to not write to the correct location. 2) it could be that the latest version of jsPsych no longer supports the calls used in older versions. I'd recommend reading Josh's latest documentation to ensure the code below is still supported. If it's not, one quick solution would be to download the files I posted earlier in a Google drive link and use it instead since it contains an older version of jsPsych. Hope this helps!

Nate

/* write to server */
	function saveData(filename, filedata)
	{
	  $.ajax({
      type:'post',
      cache: false,
      url: 'iatphp.php', // this is the path to the above PHP script
      data: {filename: filename, filedata: filedata}
   });
	}
	
	/* grab data before the end of the experiment */
	var save_data = {
	type: 'call-function'
	,func: function()
		{
			saveData("data"+urlvar.subject+"_"+urlvar.condition+".csv", jsPsych.data.dataAsCSV())
		}
	,timing_post_trial: 0
	}
	
	/* save data and debrief */
	timeline.push(save_data);

Nathan Parkin

--
You received this message because you are subscribed to a topic in the Google Groups "jsPsych" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jspsych/3-YrE1upPqM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jspsych+unsubscribe@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/c4386ec4-4e28-4147-8748-1350c7f757cc%40googlegroups.com.

Alex Grangeiro

unread,

Jul 16, 2018, 7:58:35 AM7/16/18

to jsPsych

Hi Nathan, thank you very much for your attention! I have the iatphp.php file in public.html and am using the old version of JsPsych that you made available in GoogleDrive, but even then, I'm not getting it to work. You could send your version of the iatphp.php file. She was not on Google Drive.

Thank you!

Daniel Phipps

unread,

Sep 2, 2020, 6:57:15 PM9/2/20

to jsPsych

Hey Nathan,

I realize this is pretty old and might be a long shot, but I cant find the iatphp.php file anywhere. Would you be able to send it to me?

I found be forever appreciative!

Kind regards,

Dan

To unsubscribe from this group and all its topics, send an email to jspsych+u...@googlegroups.com.

To post to this group, send email to jsp...@googlegroups.com.

Nathan Parkin

unread,

Sep 3, 2020, 9:59:53 PM9/3/20

to Daniel Phipps, jsPsych

Of course, I've uploaded it to the Google Drive folder I shared earlier. It's been a long time, but I've uploaded the file as I used it.

https://drive.google.com/drive/folders/0Bx8L4-y3mzQbVFVwTUhqbWktUWM?usp=sharing

Best of luck!

Nate

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/3edbe925-847d-4e8a-830c-e06106891b13n%40googlegroups.com.

Reply all

Reply to author

Forward