mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 03:00:54 +00:00
create function to generate docs demos, transition all demos to use this function
This commit is contained in:
Josh de Leeuw
parent
129227ad27
commit
78584a17e1
52
docs/demos/docs-demo-timeline.js
Normal file
52
docs/demos/docs-demo-timeline.js
Normal file
@ -0,0 +1,52 @@
|
||||
function generateDocsDemoTimeline(timeline, setup_timeline) {
|
||||
let setup;
|
||||
if (setup_timeline) {
|
||||
setup = {
|
||||
timeline: setup_timeline,
|
||||
};
|
||||
}
|
||||
|
||||
const start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: "",
|
||||
choices: ["Run demo"],
|
||||
};
|
||||
|
||||
let run = 0;
|
||||
|
||||
let trial = {
|
||||
timeline: timeline,
|
||||
data: {
|
||||
run: () => {
|
||||
return run;
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p style="margin-bottom:0px; font-weight: bold;">Trial data:</p>
|
||||
<pre style="margin-top:0px; text-align:left; font-size:14px; line-height:1.3em;"></pre>`,
|
||||
on_load: function () {
|
||||
const trial_data = jsPsych.data.get().filter({ run: run }).ignore("run").values();
|
||||
const trial_json = JSON.stringify(trial_data, null, 2);
|
||||
jsPsych.getDisplayElement().querySelector("pre").innerText = trial_json;
|
||||
},
|
||||
choices: ["Repeat demo"],
|
||||
};
|
||||
|
||||
const trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function () {
|
||||
run++;
|
||||
return true;
|
||||
},
|
||||
};
|
||||
|
||||
if (setup_timeline) {
|
||||
return [setup, start, trial_loop];
|
||||
} else {
|
||||
return [start, trial_loop];
|
||||
}
|
||||
}
|
||||
1
docs/demos/docs-demo.css
Normal file
1
docs/demos/docs-demo.css
Normal file
@ -0,0 +1 @@
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
@ -15,11 +15,7 @@
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
@ -132,7 +128,7 @@
|
||||
`
|
||||
}
|
||||
|
||||
var trial = {
|
||||
const trial = {
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'img/blue.png',
|
||||
choices: "NO_KEYS",
|
||||
|
||||
@ -1,69 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
#jspsych-animation-image {height:80% !important; width: 80% !important;}
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<style>
|
||||
#jspsych-animation-image {
|
||||
height: 80% !important;
|
||||
width: 80% !important;
|
||||
}
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var animation_trial = {
|
||||
type: jsPsychAnimation,
|
||||
stimuli: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
],
|
||||
sequence_reps: 3,
|
||||
frame_time: 300,
|
||||
prompt: '<p style="margin-top:0px;">Watch the faces.</p>'
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var animation_data_loop = {
|
||||
timeline: [animation_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, animation_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
var animation_trial = {
|
||||
type: jsPsychAnimation,
|
||||
stimuli: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
],
|
||||
sequence_reps: 3,
|
||||
frame_time: 300,
|
||||
prompt: '<p style="margin-top:0px;">Watch the faces.</p>'
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [animation_trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,62 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var timeline = [];
|
||||
const timeline = [];
|
||||
|
||||
timeline.push({
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
});
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
|
||||
timeline.push({
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
choices: ['Run demo']
|
||||
});
|
||||
const trial = {
|
||||
type: jsPsychAudioButtonResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: ['Low', 'High'],
|
||||
prompt: "<p>Is the pitch high or low?</p>"
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychAudioButtonResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: ['Low', 'High'],
|
||||
prompt: "<p>Is the pitch high or low?</p>"
|
||||
};
|
||||
timeline.push(trial);
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
timeline.push({
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(timeline);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,68 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var timeline = [];
|
||||
const timeline = [];
|
||||
|
||||
// sound source: https://www.videvo.net/sound-effect/lion-growl-angry-gene-pe931902/249942/
|
||||
// images source: http://clipart-library.com/cartoon-animal-clipart.html
|
||||
var images = ['img/lion.png', 'img/elephant.png', 'img/monkey.png']
|
||||
// sound source: https://www.videvo.net/sound-effect/lion-growl-angry-gene-pe931902/249942/
|
||||
// images source: http://clipart-library.com/cartoon-animal-clipart.html
|
||||
const images = ['img/lion.png', 'img/elephant.png', 'img/monkey.png']
|
||||
|
||||
timeline.push({
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true,
|
||||
images: images
|
||||
});
|
||||
|
||||
timeline.push({
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
choices: ['Run demo']
|
||||
});
|
||||
|
||||
var trial = {
|
||||
type: jsPsychAudioButtonResponse,
|
||||
stimulus: 'sound/roar.mp3',
|
||||
choices: images,
|
||||
prompt: "<p>Which animal made the sound?</p>",
|
||||
button_html: '<img src="%choice%" />'
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
timeline.push({
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true,
|
||||
images: images
|
||||
}
|
||||
});
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(timeline);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychAudioButtonResponse,
|
||||
stimulus: 'sound/roar.mp3',
|
||||
choices: images,
|
||||
prompt: "<p>Which animal made the sound?</p>",
|
||||
button_html: '<img src="%choice%" />'
|
||||
};
|
||||
|
||||
timeline.push(trial);
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,61 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var pre_audio = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
choices: ['Run demo']
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychAudioKeyboardResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: ['e', 'i'],
|
||||
prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>",
|
||||
response_ends_trial: true
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, pre_audio, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
const trial = {
|
||||
type: jsPsychAudioKeyboardResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: ['e', 'i'],
|
||||
prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>",
|
||||
response_ends_trial: true
|
||||
};
|
||||
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,60 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var pre_audio = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
choices: ['Run demo']
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychAudioKeyboardResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: "NO_KEYS",
|
||||
trial_ends_after_audio: true
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, pre_audio, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
|
||||
const trial = {
|
||||
type: jsPsychAudioKeyboardResponse,
|
||||
stimulus: 'sound/tone.mp3',
|
||||
choices: "NO_KEYS",
|
||||
trial_ends_after_audio: true
|
||||
};
|
||||
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,60 +1,36 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
|
||||
var pre_audio = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychAudioSliderResponse,
|
||||
stimulus: 'sound/speech_joke.mp3',
|
||||
labels: ['Not Funny', 'Funny'],
|
||||
prompt: '<p>How funny is the joke?</p>'
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychAudioSliderResponse,
|
||||
stimulus: 'sound/speech_joke.mp3',
|
||||
labels: ['Not Funny', 'Funny'],
|
||||
prompt: '<p>How funny is the joke?</p>'
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, pre_audio, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,62 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-audio-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
};
|
||||
|
||||
var pre_audio = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div style="max-width:600px;"><p>Some browsers now require the user to interact with a page before it can play audio. '+
|
||||
'Clicking the button below counts as an interaction.</p><p>Be aware of this when planning audio experiments if '+
|
||||
'you want the first trial to include audio.</p></div>',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychAudioSliderResponse,
|
||||
stimulus: 'sound/speech_joke.mp3',
|
||||
labels: ['Not Funny', 'Funny'],
|
||||
prompt: '<p>How funny is the joke?</p>',
|
||||
response_allowed_while_playing: false,
|
||||
require_movement: true
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychAudioSliderResponse,
|
||||
stimulus: 'sound/speech_joke.mp3',
|
||||
labels: ['Not Funny', 'Funny'],
|
||||
prompt: '<p>How funny is the joke?</p>',
|
||||
response_allowed_while_playing: false,
|
||||
require_movement: true
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, pre_audio, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,49 +1,27 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychBrowserCheck
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychBrowserCheck
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,53 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
const trial = {
|
||||
type: jsPsychBrowserCheck,
|
||||
inclusion_function: (data) => {
|
||||
return ['chrome', 'firefox'].contains(data.browser);
|
||||
},
|
||||
exclusion_message: `<p>You must use Chrome or Firefox to complete this experiment.</p>`
|
||||
};
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychBrowserCheck,
|
||||
inclusion_function: (data) => {
|
||||
return ['chrome', 'firefox'].contains(data.browser);
|
||||
},
|
||||
exclusion_message: `<p>You must use Chrome or Firefox to complete this experiment.</p>`
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,51 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>If you want to test the interactive resize, make your browser window small before continuing.</p>',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>If you want to test the interactive resize, make your browser window small before continuing.</p>',
|
||||
choices: ['OK']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychBrowserCheck,
|
||||
minimum_width: 1000,
|
||||
minimum_height: 600
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychBrowserCheck,
|
||||
minimum_width: 1000,
|
||||
minimum_height: 600
|
||||
};
|
||||
|
||||
const timeline = [instructions, trial];
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,59 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-browser-check@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychBrowserCheck,
|
||||
inclusion_function: (data) => {
|
||||
return data.browser == 'chrome' && data.mobile === false
|
||||
},
|
||||
exclusion_message: (data) => {
|
||||
if(data.mobile){
|
||||
return '<p>You must use a desktop/laptop computer to participate in this experiment.</p>';
|
||||
} else if(data.browser !== 'chrome'){
|
||||
return '<p>You must use Chrome as your browser to complete this experiment.</p>'
|
||||
const trial = {
|
||||
type: jsPsychBrowserCheck,
|
||||
inclusion_function: (data) => {
|
||||
return data.browser == 'chrome' && data.mobile === false
|
||||
},
|
||||
exclusion_message: (data) => {
|
||||
if(data.mobile){
|
||||
return '<p>You must use a desktop/laptop computer to participate in this experiment.</p>';
|
||||
} else if(data.browser !== 'chrome'){
|
||||
return '<p>You must use Chrome as your browser to complete this experiment.</p>'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,59 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var myfunc = function() {
|
||||
return 'you called?';
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychCallFunction,
|
||||
func: myfunc
|
||||
}
|
||||
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const myfunc = function() {
|
||||
return 'you called?';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychCallFunction,
|
||||
func: myfunc
|
||||
}
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,63 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
// Using an anonymous function to pass variables
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
// Using an anonymous function to pass variables
|
||||
|
||||
var myfunc = function(data){
|
||||
// data contains all the experiment data so far,
|
||||
// so this function could implement code to write
|
||||
// the data to a database.
|
||||
console.log(data.values())
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychCallFunction,
|
||||
func: function(){ myfunc(jsPsych.data.get()) }
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const myfunc = function(data){
|
||||
// data contains all the experiment data so far,
|
||||
// so this function could implement code to write
|
||||
// the data to a database.
|
||||
console.log(data.values())
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychCallFunction,
|
||||
func: function(){ myfunc(jsPsych.data.get()) }
|
||||
}
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,64 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-call-function@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychCallFunction,
|
||||
async: true,
|
||||
func: function(done){
|
||||
// generate a delay between 1500 and 3000 milliseconds to simulate
|
||||
// waiting for an event to finish after an unknown duration,
|
||||
// then finish the trial
|
||||
const rand_delay = (Math.floor(Math.random() * (3000 - 1500 + 1) + 1500));
|
||||
jsPsych.pluginAPI.setTimeout(function() {
|
||||
// end the trial and save the delay duration to the data
|
||||
done(rand_delay.toString()+"ms");
|
||||
}, rand_delay)
|
||||
}
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychCallFunction,
|
||||
async: true,
|
||||
func: function(done){
|
||||
// generate a delay between 1500 and 3000 milliseconds to simulate
|
||||
// waiting for an event to finish after an unknown duration,
|
||||
// then finish the trial
|
||||
var rand_delay = (Math.floor(Math.random() * (3000 - 1500 + 1) + 1500));
|
||||
jsPsych.pluginAPI.setTimeout(function() {
|
||||
// end the trial and save the delay duration to the data
|
||||
done(rand_delay.toString()+"ms");
|
||||
}, rand_delay)
|
||||
}
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,85 +1,58 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var all_trial_data = jsPsych.data.get().filter({trial_type: 'canvas-button-response'});
|
||||
var last_two_data = all_trial_data.last(2).values(); // One block consists of two canvas-button-response trials
|
||||
var trial_json = JSON.stringify(last_two_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
|
||||
// stimulus function that takes the canvas and additional parameters (radius, color)
|
||||
// this can be called inside of an anonymous stimulus function, which takes the canvas (c) as its only argument
|
||||
function filledCirc(canvas, radius, color) {
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.beginPath();
|
||||
ctx.arc(150, 150, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
var circle_1 = {
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, 100, 'blue');
|
||||
},
|
||||
canvas_size: [300, 300],
|
||||
choices: ['Red', 'Green', 'Blue'],
|
||||
prompt: '<p>What color is the circle?</p>',
|
||||
data: {color: 'blue', radius: 100}
|
||||
};
|
||||
|
||||
var circle_2 = {
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, 150, 'green');
|
||||
},
|
||||
canvas_size: [300, 300],
|
||||
choices: ['Larger', 'Smaller'],
|
||||
stimulus_duration: 1000,
|
||||
prompt: '<p>Is this circle larger or smaller than the last one?</p>'+
|
||||
'<p>Stimulus will be hidden after 1 second.</p>',
|
||||
data: {color: 'green', radius: 150}
|
||||
};
|
||||
|
||||
var canvas_data_loop = {
|
||||
timeline: [circle_1, circle_2, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
// stimulus function that takes the canvas and additional parameters (radius, color)
|
||||
// this can be called inside of an anonymous stimulus function, which takes the canvas (c) as its only argument
|
||||
function filledCirc(canvas, radius, color) {
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.beginPath();
|
||||
ctx.arc(150, 150, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const circle_1 = {
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, 100, 'blue');
|
||||
},
|
||||
canvas_size: [300, 300],
|
||||
choices: ['Red', 'Green', 'Blue'],
|
||||
prompt: '<p>What color is the circle?</p>',
|
||||
data: {color: 'blue', radius: 100}
|
||||
};
|
||||
|
||||
</script>
|
||||
const circle_2 = {
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, 150, 'green');
|
||||
},
|
||||
canvas_size: [300, 300],
|
||||
choices: ['Larger', 'Smaller'],
|
||||
stimulus_duration: 1000,
|
||||
prompt: '<p>Is this circle larger or smaller than the last one?</p>'+
|
||||
'<p>Stimulus will be hidden after 1 second.</p>',
|
||||
data: {color: 'green', radius: 150}
|
||||
};
|
||||
|
||||
const timeline = [circle_1, circle_2];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,76 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
// write the canvas stimulus drawing function without using a named function
|
||||
// the anonymous function must take the canvas as an argument
|
||||
const lines = {
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
const ctx = c.getContext("2d");
|
||||
// first line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(200, 10);
|
||||
ctx.lineTo(200, 250);
|
||||
ctx.lineWidth = 10;
|
||||
ctx.strokeStyle = 'MediumBlue';
|
||||
ctx.stroke();
|
||||
// second line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(20, 100);
|
||||
ctx.lineTo(100, 250);
|
||||
ctx.lineWidth = 10;
|
||||
ctx.strokeStyle = 'MediumPurple';
|
||||
ctx.stroke();
|
||||
},
|
||||
canvas_size: [300, 300],
|
||||
choices: ['Blue line', 'Purple line'],
|
||||
prompt: '<p>Which line is longer?</p>',
|
||||
data: {line1_color: 'blue', line1_length: 290, line2_color: "purple", line2_length: 170}
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [lines];
|
||||
|
||||
// write the canvas stimulus drawing function without using a named function
|
||||
// the anonymous function must take the canvas as an argument
|
||||
var lines = {
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
var ctx = c.getContext("2d");
|
||||
// first line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(200, 10);
|
||||
ctx.lineTo(200, 250);
|
||||
ctx.lineWidth = 10;
|
||||
ctx.strokeStyle = 'MediumBlue';
|
||||
ctx.stroke();
|
||||
// second line
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(20, 100);
|
||||
ctx.lineTo(100, 250);
|
||||
ctx.lineWidth = 10;
|
||||
ctx.strokeStyle = 'MediumPurple';
|
||||
ctx.stroke();
|
||||
},
|
||||
canvas_size: [300, 300],
|
||||
choices: ['Blue line', 'Purple line'],
|
||||
prompt: '<p>Which line is longer?</p>',
|
||||
data: {line1_color: 'blue', line1_length: 290, line2_color: "purple", line2_length: 170}
|
||||
};
|
||||
|
||||
var canvas_data_loop = {
|
||||
timeline: [lines, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,87 +1,61 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var all_trial_data = jsPsych.data.get().filter({trial_type: 'canvas-button-response'});
|
||||
var last_three_data = all_trial_data.last(3).values(); // One block consists of three canvas-button-response trials
|
||||
var trial_json = JSON.stringify(last_three_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
function filledCirc(canvas, radius, color) {
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.beginPath();
|
||||
ctx.arc(150, 150, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
// To use the canvas stimulus function with timeline variables,
|
||||
// the jsPsych.timelineVariable() function can be used inside your stimulus function.
|
||||
// In addition, this code demonstrates how to check whether participants' answers were correct or not.
|
||||
var circle_procedure = {
|
||||
timeline: [{
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color'));
|
||||
},
|
||||
canvas_size: [300, 300],
|
||||
choices: ['Red', 'Green', 'Blue'],
|
||||
prompt: '<p>What color is the circle?</p>',
|
||||
data: {
|
||||
radius: jsPsych.timelineVariable('radius'),
|
||||
color: jsPsych.timelineVariable('color'),
|
||||
correct_response: jsPsych.timelineVariable('correct_response')
|
||||
},
|
||||
on_finish: function(data){
|
||||
data.correct = (data.response == data.correct_response);
|
||||
}
|
||||
}],
|
||||
timeline_variables: [
|
||||
{radius: 80, color: 'red', correct_response: 0},
|
||||
{radius: 100, color: 'green', correct_response: 1},
|
||||
{radius: 50, color: 'blue', correct_response: 2}
|
||||
],
|
||||
randomize_order: true
|
||||
};
|
||||
|
||||
var canvas_data_loop = {
|
||||
timeline: [circle_procedure, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
function filledCirc(canvas, radius, color) {
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.beginPath();
|
||||
ctx.arc(150, 150, radius, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = color;
|
||||
ctx.fill();
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
// To use the canvas stimulus function with timeline variables,
|
||||
// the jsPsych.timelineVariable() function can be used inside your stimulus function.
|
||||
// In addition, this code demonstrates how to check whether participants' answers were correct or not.
|
||||
const circle_procedure = {
|
||||
timeline: [{
|
||||
type: jsPsychCanvasButtonResponse,
|
||||
stimulus: function(c) {
|
||||
filledCirc(c, jsPsych.timelineVariable('radius'), jsPsych.timelineVariable('color'));
|
||||
},
|
||||
canvas_size: [300, 300],
|
||||
choices: ['Red', 'Green', 'Blue'],
|
||||
prompt: '<p>What color is the circle?</p>',
|
||||
data: {
|
||||
radius: jsPsych.timelineVariable('radius'),
|
||||
color: jsPsych.timelineVariable('color'),
|
||||
correct_response: jsPsych.timelineVariable('correct_response')
|
||||
},
|
||||
on_finish: function(data){
|
||||
data.correct = (data.response == data.correct_response);
|
||||
}
|
||||
}],
|
||||
timeline_variables: [
|
||||
{radius: 80, color: 'red', correct_response: 0},
|
||||
{radius: 100, color: 'green', correct_response: 1},
|
||||
{radius: 50, color: 'blue', correct_response: 2}
|
||||
],
|
||||
randomize_order: true
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [circle_procedure];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,67 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
|
||||
function drawRect(c){
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.beginPath();
|
||||
ctx.rect(30, 30, 200, 50);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychCanvasKeyboardResponse,
|
||||
canvas_size: [300, 300],
|
||||
stimulus: drawRect,
|
||||
choices: ['e','i'],
|
||||
prompt: '<p>Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.</p>',
|
||||
data: {shape: 'rectangle'}
|
||||
}
|
||||
|
||||
|
||||
var canvas_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
function drawRect(c){
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.beginPath();
|
||||
ctx.rect(30, 30, 200, 50);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychCanvasKeyboardResponse,
|
||||
canvas_size: [300, 300],
|
||||
stimulus: drawRect,
|
||||
choices: ['e','i'],
|
||||
prompt: '<p>Is this a circle or a rectangle? Press "e" for circle and "i" for rectangle.</p>',
|
||||
data: {shape: 'rectangle'}
|
||||
}
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,67 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
|
||||
function drawCirc(c){
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.beginPath();
|
||||
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychCanvasKeyboardResponse,
|
||||
canvas_size: [300, 300],
|
||||
stimulus: drawCirc,
|
||||
prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',
|
||||
choices: "NO_KEYS",
|
||||
trial_duration: 3000,
|
||||
data: {shape: 'circle', radius: 50}
|
||||
}
|
||||
|
||||
var canvas_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
function drawCirc(c){
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.beginPath();
|
||||
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychCanvasKeyboardResponse,
|
||||
canvas_size: [300, 300],
|
||||
stimulus: drawCirc,
|
||||
prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',
|
||||
choices: "NO_KEYS",
|
||||
trial_duration: 3000,
|
||||
data: {shape: 'circle', radius: 50}
|
||||
}
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,70 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
// Draw two squares
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const colors = ['#FF3333', '#FF6A33'];
|
||||
|
||||
// Draw two squares
|
||||
|
||||
var colors = ['#FF3333', '#FF6A33'];
|
||||
|
||||
function twoSquares(c) {
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.fillStyle = colors[0];
|
||||
ctx.fillRect(200, 70, 40, 40);
|
||||
ctx.fillStyle = colors[1];
|
||||
ctx.fillRect(260, 70, 40, 40);
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychCanvasSliderResponse,
|
||||
stimulus: twoSquares,
|
||||
labels: ['0','10'],
|
||||
canvas_size: [150, 500],
|
||||
prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)</p>',
|
||||
data: {color1: colors[0], color2: colors[1]}
|
||||
}
|
||||
|
||||
var canvas_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
function twoSquares(c) {
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.fillStyle = colors[0];
|
||||
ctx.fillRect(200, 70, 40, 40);
|
||||
ctx.fillStyle = colors[1];
|
||||
ctx.fillRect(260, 70, 40, 40);
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychCanvasSliderResponse,
|
||||
stimulus: twoSquares,
|
||||
labels: ['0','10'],
|
||||
canvas_size: [150, 500],
|
||||
prompt: '<p>How different would you say the colors of these two squares are on a scale from 0 (the same) to 10 (completely different)</p>',
|
||||
data: {color1: colors[0], color2: colors[1]}
|
||||
}
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,76 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-canvas-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
// Draw two squares with additional parameters
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
let colors;
|
||||
|
||||
// Draw two squares with additional parameters
|
||||
|
||||
var colors;
|
||||
|
||||
function twoSquares(c, colors) {
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.fillStyle = colors[0];
|
||||
ctx.fillRect(200, 70, 40, 40);
|
||||
ctx.fillStyle = colors[1];
|
||||
ctx.fillRect(260, 70, 40, 40);
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychCanvasSliderResponse,
|
||||
stimulus: function(c) {
|
||||
colors = ['darkred', 'cyan'];
|
||||
twoSquares(c, colors);
|
||||
},
|
||||
labels: ['Exactly<br>the same','Totally<br>different'],
|
||||
canvas_size: [200, 500],
|
||||
prompt: '<p>How different would you say the colors of these two squares are?</p>',
|
||||
on_finish: function(data) {
|
||||
data.color1 = colors[0];
|
||||
data.color2 = colors[1];
|
||||
function twoSquares(c, colors) {
|
||||
const ctx = c.getContext('2d');
|
||||
ctx.fillStyle = colors[0];
|
||||
ctx.fillRect(200, 70, 40, 40);
|
||||
ctx.fillStyle = colors[1];
|
||||
ctx.fillRect(260, 70, 40, 40);
|
||||
}
|
||||
};
|
||||
|
||||
var canvas_data_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
|
||||
const trial = {
|
||||
type: jsPsychCanvasSliderResponse,
|
||||
stimulus: function(c) {
|
||||
colors = ['darkred', 'cyan'];
|
||||
twoSquares(c, colors);
|
||||
},
|
||||
labels: ['Exactly<br>the same','Totally<br>different'],
|
||||
canvas_size: [200, 500],
|
||||
prompt: '<p>How different would you say the colors of these two squares are?</p>',
|
||||
on_finish: function(data) {
|
||||
data.color1 = colors[0];
|
||||
data.color2 = colors[1];
|
||||
}
|
||||
};
|
||||
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, canvas_data_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,70 +1,51 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
#jspsych-categorize-animation-stimulus {height:80% !important; width: 80% !important;}
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<style>
|
||||
#jspsych-categorize-animation-stimulus {
|
||||
height: 80% !important;
|
||||
width: 80% !important;
|
||||
}
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var animation_trial = {
|
||||
type: jsPsychCategorizeAnimation,
|
||||
stimuli: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
],
|
||||
prompt: `Press the P or Q key.`,
|
||||
choices: ['p', 'q'],
|
||||
key_answer: 'q',
|
||||
};
|
||||
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [animation_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychCategorizeAnimation,
|
||||
stimuli: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
],
|
||||
prompt: `Press the P or Q key.`,
|
||||
choices: ['p', 'q'],
|
||||
key_answer: 'q',
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,74 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
#jspsych-categorize-animation-stimulus {height:80% !important; width: 80% !important;}
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-animation@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<style>
|
||||
#jspsych-categorize-animation-stimulus {
|
||||
height: 80% !important;
|
||||
width: 80% !important;
|
||||
}
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var images = [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
];
|
||||
|
||||
var animation_trial = {
|
||||
type: jsPsychCategorizeAnimation,
|
||||
stimuli: images,
|
||||
choices: ['p', 'q'],
|
||||
prompt: `Press the P or Q key.`,
|
||||
key_answer: 'q',
|
||||
text_answer: 'Dax', // the label for the sequence is 'Dax'
|
||||
correct_text: 'Correct! This was a %ANS%.',
|
||||
incorrect_text: 'Incorrect. This was a %ANS%.'
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [animation_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const images = [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
];
|
||||
|
||||
</script>
|
||||
const trial = {
|
||||
type: jsPsychCategorizeAnimation,
|
||||
stimuli: images,
|
||||
choices: ['p', 'q'],
|
||||
prompt: `Press the P or Q key.`,
|
||||
key_answer: 'q',
|
||||
text_answer: 'Dax', // the label for the sequence is 'Dax'
|
||||
correct_text: 'Correct! This was a %ANS%.',
|
||||
incorrect_text: 'Incorrect. This was a %ANS%.'
|
||||
};
|
||||
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,60 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-html@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-html@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychCategorizeHtml,
|
||||
stimulus: '<p>B</p>',
|
||||
key_answer: 'p',
|
||||
text_answer: 'letter',
|
||||
choices: ['p', 'q'],
|
||||
correct_text: "<p class='prompt'>Correct, this is a %ANS%.</p>",
|
||||
incorrect_text: "<p class='prompt'>Incorrect, this is a %ANS%.</p>",
|
||||
prompt: "<p>Press p for letter. Press q for number.</p>"
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var categorization_trial = {
|
||||
type: jsPsychCategorizeHtml,
|
||||
stimulus: '<p>B</p>',
|
||||
key_answer: 'p',
|
||||
text_answer: 'letter',
|
||||
choices: ['p', 'q'],
|
||||
correct_text: "<p class='prompt'>Correct, this is a %ANS%.</p>",
|
||||
incorrect_text: "<p class='prompt'>Incorrect, this is a %ANS%.</p>",
|
||||
prompt: "<p>Press p for letter. Press q for number.</p>"
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [categorization_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,67 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-image@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-categorize-image@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var categorization_trial = {
|
||||
type: jsPsychCategorizeImage,
|
||||
stimulus: 'img/blue.png',
|
||||
key_answer: 'b',
|
||||
text_answer: 'Blue',
|
||||
choices: ['r', 'g', 'b'],
|
||||
correct_text: "<p class='prompt'>Correct! The color is %ANS%.</p>",
|
||||
incorrect_text: "<p class='prompt'>Incorrect. The color is %ANS%.</p>",
|
||||
prompt: "<p>Is the color of this circle (R)ed, (G)reen, or (B)lue?</p>"
|
||||
};
|
||||
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [categorization_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychCategorizeImage,
|
||||
stimulus: 'img/blue.png',
|
||||
key_answer: 'b',
|
||||
text_answer: 'Blue',
|
||||
choices: ['r', 'g', 'b'],
|
||||
correct_text: "<p class='prompt'>Correct! The color is %ANS%.</p>",
|
||||
incorrect_text: "<p class='prompt'>Incorrect. The color is %ANS%.</p>",
|
||||
prompt: "<p>Is the color of this circle (R)ed, (G)reen, or (B)lue?</p>"
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,54 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychCloze,
|
||||
text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var cloze_trial = {
|
||||
type: jsPsychCloze,
|
||||
text: 'The %% is the largest terrestrial mammal. It lives in both %% and %%.'
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [cloze_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,57 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-cloze@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
const trial = {
|
||||
type: jsPsychCloze,
|
||||
text: 'A rectangle has % 4 % corners and a triangle has % 3 %.',
|
||||
check_answers: true,
|
||||
button_text: 'Next',
|
||||
mistake_fn: function(){alert("Wrong answer. Please check again.")}
|
||||
};
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var cloze_trial = {
|
||||
type: jsPsychCloze,
|
||||
text: 'A rectangle has % 4 % corners and a triangle has % 3 %.',
|
||||
check_answers: true,
|
||||
button_text: 'Next',
|
||||
mistake_fn: function(){alert("Wrong answer. Please check again.")}
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [cloze_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,99 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<!--<script src="../../packages/extension-mouse-tracking/dist/index.browser.js"></script>-->
|
||||
<script src="https://unpkg.com/@jspsych/extension-mouse-tracking@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<!--<script src="../../packages/extension-mouse-tracking/dist/index.browser.js"></script>-->
|
||||
<script src="https://unpkg.com/@jspsych/extension-mouse-tracking@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych({
|
||||
extensions: [
|
||||
{ type: jsPsychExtensionMouseTracking, params: {minimum_sample_time: 0} }
|
||||
]
|
||||
});
|
||||
const jsPsych = initJsPsych({
|
||||
extensions: [
|
||||
{ type: jsPsychExtensionMouseTracking, params: {minimum_sample_time: 0} }
|
||||
]
|
||||
});
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({task: 'draw'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div id="target" style="width:250px; height: 250px; background-color: #333; margin: auto;"></div>',
|
||||
choices: ['Done'],
|
||||
prompt: "<p>Move your mouse around inside the square.</p>",
|
||||
extensions: [
|
||||
{type: jsPsychExtensionMouseTracking, params: {targets: ['#target']}}
|
||||
],
|
||||
data: {
|
||||
task: 'draw'
|
||||
}
|
||||
};
|
||||
|
||||
var replay = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div id="target" style="width:250px; height: 250px; background-color: #333; margin: auto; position: relative;"></div>',
|
||||
choices: ['Done'],
|
||||
prompt: "<p>Here's the recording of your mouse movements</p>",
|
||||
on_load: function(){
|
||||
var mouseMovements = jsPsych.data.get().last(1).values()[0].mouse_tracking_data;
|
||||
var targetRect = jsPsych.data.get().last(1).values()[0].mouse_tracking_targets['#target'];
|
||||
|
||||
var startTime = performance.now();
|
||||
|
||||
function draw_frame() {
|
||||
var timeElapsed = performance.now() - startTime;
|
||||
var points = mouseMovements.filter((x) => x.t <= timeElapsed);
|
||||
var html = ``;
|
||||
for(var p of points){
|
||||
html += `<div style="width: 3px; height: 3px; background-color: blue; position: absolute; top: ${p.y - 1 - targetRect.top}px; left: ${p.x - 1 - targetRect.left}px;"></div>`
|
||||
}
|
||||
document.querySelector('#target').innerHTML = html;
|
||||
if(points.length < mouseMovements.length) {
|
||||
requestAnimationFrame(draw_frame);
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div id="target" style="width:250px; height: 250px; background-color: #333; margin: auto;"></div>',
|
||||
choices: ['Done'],
|
||||
prompt: "<p>Move your mouse around inside the square.</p>",
|
||||
extensions: [
|
||||
{type: jsPsychExtensionMouseTracking, params: {targets: ['#target']}}
|
||||
],
|
||||
data: {
|
||||
task: 'draw'
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(draw_frame);
|
||||
const replay = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<div id="target" style="width:250px; height: 250px; background-color: #333; margin: auto; position: relative;"></div>',
|
||||
choices: ['Done'],
|
||||
prompt: "<p>Here's the recording of your mouse movements</p>",
|
||||
on_load: function(){
|
||||
const mouseMovements = jsPsych.data.get().last(1).values()[0].mouse_tracking_data;
|
||||
const targetRect = jsPsych.data.get().last(1).values()[0].mouse_tracking_targets['#target'];
|
||||
|
||||
},
|
||||
data: {
|
||||
task: 'replay'
|
||||
const startTime = performance.now();
|
||||
|
||||
function draw_frame() {
|
||||
const timeElapsed = performance.now() - startTime;
|
||||
const points = mouseMovements.filter((x) => x.t <= timeElapsed);
|
||||
let html = ``;
|
||||
for(const p of points){
|
||||
html += `<div style="width: 3px; height: 3px; background-color: blue; position: absolute; top: ${p.y - 1 - targetRect.top}px; left: ${p.x - 1 - targetRect.left}px;"></div>`
|
||||
}
|
||||
document.querySelector('#target').innerHTML = html;
|
||||
if(points.length < mouseMovements.length) {
|
||||
requestAnimationFrame(draw_frame);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(draw_frame);
|
||||
|
||||
},
|
||||
data: {
|
||||
task: 'replay'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, replay, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const timeline = [trial, replay];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,70 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-external-html@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-external-html@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
// sample function that might be used to check if a subject has given
|
||||
// consent to participate.
|
||||
var check_consent = function(elem) {
|
||||
if (document.getElementById('consent_checkbox').checked) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
alert("If you wish to participate, you must check the box next to the statement 'I agree to participate in this study.'");
|
||||
// sample function that might be used to check if a subject has given
|
||||
// consent to participate.
|
||||
const check_consent = function(elem) {
|
||||
if (document.getElementById('consent_checkbox').checked) {
|
||||
return true;
|
||||
}
|
||||
else {
|
||||
alert("If you wish to participate, you must check the box next to the statement 'I agree to participate in this study.'");
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// declare the block.
|
||||
const trial = {
|
||||
type: jsPsychExternalHtml,
|
||||
url: "external_page.html",
|
||||
cont_btn: "start",
|
||||
check_fn: check_consent
|
||||
};
|
||||
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
// declare the block.
|
||||
var trial = {
|
||||
type: jsPsychExternalHtml,
|
||||
url: "external_page.html",
|
||||
cont_btn: "start",
|
||||
check_fn: check_consent
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,73 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-free-sort@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-free-sort@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const sorting_stimuli = [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
]
|
||||
|
||||
var sorting_stimuli = [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/happy_face_2.jpg',
|
||||
'img/happy_face_3.jpg',
|
||||
'img/happy_face_4.jpg'
|
||||
]
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
images: sorting_stimuli
|
||||
}
|
||||
|
||||
var sort_trial = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: sorting_stimuli,
|
||||
stim_width: 80,
|
||||
stim_height: 60,
|
||||
sort_area_width: 500,
|
||||
sort_area_height: 500,
|
||||
stim_starts_inside: true,
|
||||
prompt: "<p>Click and drag the images below to sort them so that similar items are close together.</p>"
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [sort_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
images: sorting_stimuli
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychFreeSort,
|
||||
stimuli: sorting_stimuli,
|
||||
stim_width: 80,
|
||||
stim_height: 60,
|
||||
sort_area_width: 500,
|
||||
sort_area_height: 500,
|
||||
stim_starts_inside: true,
|
||||
prompt: "<p>Click and drag the images below to sort them so that similar items are close together.</p>"
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,15 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-fullscreen@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-fullscreen@1.0.1"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<style>
|
||||
html, body { background-color: white;}
|
||||
html,
|
||||
body {
|
||||
background-color: white;
|
||||
}
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
@ -18,59 +19,37 @@
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const enter_fullscreen = {
|
||||
type: jsPsychFullscreen,
|
||||
fullscreen_mode: true
|
||||
}
|
||||
|
||||
var enter_fullscreen = {
|
||||
type: jsPsychFullscreen,
|
||||
fullscreen_mode: true
|
||||
}
|
||||
const trial_in_fullscreen = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: 'This trial will be in fullscreen mode.',
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var trial_in_fullscreen = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: 'This trial will be in fullscreen mode.',
|
||||
choices: ['Continue']
|
||||
}
|
||||
const exit_fullscreen = {
|
||||
type: jsPsychFullscreen,
|
||||
fullscreen_mode: false,
|
||||
delay_after: 0
|
||||
}
|
||||
|
||||
var exit_fullscreen = {
|
||||
type: jsPsychFullscreen,
|
||||
fullscreen_mode: false,
|
||||
delay_after: 0
|
||||
}
|
||||
const trial_after_fullscreen = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: 'This trial will NOT be in fullscreen mode.',
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var trial_after_fullscreen = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: 'This trial will NOT be in fullscreen mode.',
|
||||
choices: ['Continue']
|
||||
}
|
||||
const timeline = [enter_fullscreen, trial_in_fullscreen, exit_fullscreen, trial_after_fullscreen];
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [enter_fullscreen, trial_in_fullscreen, exit_fullscreen, trial_after_fullscreen, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,55 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const timeline = [];
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p style="font-size:48px; color:red;">GREEN</p>',
|
||||
choices: ['Red', 'Green', 'Blue'],
|
||||
prompt: "<p>What color is the ink?</p>"
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p style="font-size:48px; color:red;">GREEN</p>',
|
||||
choices: ['Red', 'Green', 'Blue'],
|
||||
prompt: "<p>What color is the ink?</p>"
|
||||
};
|
||||
timeline.push(trial);
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,56 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychHtmlKeyboardResponse,
|
||||
stimulus: '<p style="font-size:48px; color:green;">BLUE</p>',
|
||||
choices: ['r', 'g', 'b'],
|
||||
prompt: "<p>Is the ink color (r)ed, (g)reen, or (b)lue?</p>"
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychHtmlKeyboardResponse,
|
||||
stimulus: '<p style="font-size:48px; color:green;">BLUE</p>',
|
||||
choices: ['r', 'g', 'b'],
|
||||
prompt: "<p>Is the ink color (r)ed, (g)reen, or (b)lue?</p>"
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,56 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychHtmlKeyboardResponse,
|
||||
stimulus: '<p style="font-size: 48px;">+</p>',
|
||||
choices: "NO_KEYS",
|
||||
trial_duration: 1000,
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychHtmlKeyboardResponse,
|
||||
stimulus: '<p style="font-size: 48px;">+</p>',
|
||||
choices: "NO_KEYS",
|
||||
trial_duration: 1000,
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,66 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-slider-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychHtmlSliderResponse,
|
||||
stimulus: `<div style="width:500px;">
|
||||
<p>How likely is it that team A will win this match?</p>
|
||||
<div style="width:240px; float: left;">
|
||||
<p>TEAM A</p>
|
||||
<p>10 wins, 5 losses, 6 draws</p>
|
||||
</div>
|
||||
<div style="width:240px; float: right;">
|
||||
<p>TEAM B</p>
|
||||
<p>6 wins, 4 losses, 11 draws</p>
|
||||
</div>
|
||||
</div>`,
|
||||
require_movement: true,
|
||||
labels: ['100% chance', '50% chance', '0% chance']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychHtmlSliderResponse,
|
||||
stimulus: `<div style="width:500px;">
|
||||
<p>How likely is it that team A will win this match?</p>
|
||||
<div style="width:240px; float: left;">
|
||||
<p>TEAM A</p>
|
||||
<p>10 wins, 5 losses, 6 draws</p>
|
||||
</div>
|
||||
<div style="width:240px; float: right;">
|
||||
<p>TEAM B</p>
|
||||
<p>6 wins, 4 losses, 11 draws</p>
|
||||
</div>
|
||||
</div>`,
|
||||
require_movement: true,
|
||||
labels: ['100% chance that team A wins', '50% chance that team A wins', '0% chance that team A wins']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,65 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-iat-html@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-iat-html@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychIatHtml,
|
||||
stimulus: 'Joyous',
|
||||
stim_key_association: 'left',
|
||||
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
|
||||
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
|
||||
force_correct_key_press: true,
|
||||
display_feedback: true,
|
||||
trial_duration: 3000, //Only if display_feedback is false
|
||||
left_category_key: 'e',
|
||||
right_category_key: 'i',
|
||||
left_category_label: ['OLD', 'GOOD'],
|
||||
right_category_label: ['YOUNG', 'BAD'],
|
||||
response_ends_trial: true
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const trial = {
|
||||
type: jsPsychIatHtml,
|
||||
stimulus: 'Joyous',
|
||||
stim_key_association: 'left',
|
||||
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
|
||||
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
|
||||
force_correct_key_press: true,
|
||||
display_feedback: true,
|
||||
trial_duration: 3000, //Only if display_feedback is false
|
||||
left_category_key: 'e',
|
||||
right_category_key: 'i',
|
||||
left_category_label: ['OLD', 'GOOD'],
|
||||
right_category_label: ['YOUNG', 'BAD'],
|
||||
response_ends_trial: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,72 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-iat-image@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-iat-image@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
|
||||
var trial = {
|
||||
type: jsPsychIatImage,
|
||||
stimulus: 'img/iat_old_face.jpg',
|
||||
stim_key_association: 'left',
|
||||
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
|
||||
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
|
||||
force_correct_key_press: true,
|
||||
display_feedback: true,
|
||||
trial_duration: 3000, //Only if display_feedback is false
|
||||
left_category_key: 'e',
|
||||
right_category_key: 'i',
|
||||
left_category_label: ['OLD', 'GOOD'],
|
||||
right_category_label: ['YOUNG', 'BAD'],
|
||||
response_ends_trial: true
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychIatImage,
|
||||
stimulus: 'img/iat_old_face.jpg',
|
||||
stim_key_association: 'left',
|
||||
html_when_wrong: '<span style="color: red; font-size: 80px">X</span>',
|
||||
bottom_instructions: '<p>If you press the wrong key, a red X will appear. Press the other key to continue</p>',
|
||||
force_correct_key_press: true,
|
||||
display_feedback: true,
|
||||
trial_duration: 3000, //Only if display_feedback is false
|
||||
left_category_key: 'e',
|
||||
right_category_key: 'i',
|
||||
left_category_label: ['OLD', 'GOOD'],
|
||||
right_category_label: ['YOUNG', 'BAD'],
|
||||
response_ends_trial: true
|
||||
}
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,63 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
|
||||
var trial = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Happy', 'Sad'],
|
||||
prompt: "<p>Is this person happy or sad?</p>"
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Happy', 'Sad'],
|
||||
prompt: "<p>Is this person happy or sad?</p>"
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,63 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
|
||||
var trial = {
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['e', 'i'],
|
||||
prompt: "<p>Is this person happy or sad? Press 'e' for happy and 'i' for sad.</p>",
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['e', 'i'],
|
||||
prompt: "<p>Is this person happy or sad? Press 'e' for happy and 'i' for sad.</p>",
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,63 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: "NO_KEYS",
|
||||
prompt: "<p>Study this face for 5 seconds.</p>",
|
||||
trial_duration: 5000
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychImageKeyboardResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: "NO_KEYS",
|
||||
prompt: "<p>Study this face for 5 seconds.</p>",
|
||||
trial_duration: 5000
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,62 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-slider-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-slider-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychImageSliderResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
labels: ['happy', 'sad'],
|
||||
prompt: "<p>How happy/sad is this person?</p>",
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychImageSliderResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
labels: ['happy', 'sad'],
|
||||
prompt: "<p>How happy/sad is this person?</p>",
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,32 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var demo_trial = {
|
||||
const trial = {
|
||||
type: jsPsychInstructions,
|
||||
pages: [
|
||||
'Welcome to the experiment. Click next to begin.',
|
||||
@ -36,30 +24,12 @@
|
||||
show_clickable_nav: true
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var demo_loop = {
|
||||
timeline: [demo_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, demo_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,66 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/con2.png']
|
||||
}
|
||||
const preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/con2.png']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var demo_trial = {
|
||||
const trial = {
|
||||
type: jsPsychInstructions,
|
||||
pages: [
|
||||
'Welcome to the experiment. Click next to begin.',
|
||||
'You will be looking at images of arrows: ' +
|
||||
'<br>' +
|
||||
'<br>' +
|
||||
'<img src="img/con2.png"></img>'
|
||||
],
|
||||
show_clickable_nav: true
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var demo_loop = {
|
||||
timeline: [demo_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload_trial]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, demo_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,32 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-instructions@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload_trial = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var demo_trial = {
|
||||
const trial = {
|
||||
type: jsPsychInstructions,
|
||||
pages: [
|
||||
'Welcome to the experiment. Click next to begin.',
|
||||
@ -38,30 +26,12 @@
|
||||
show_clickable_nav: true
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return '<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>'+
|
||||
'<pre style="margin-top:0px;text-align:left;">'+trial_json+'</pre>';
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var demo_loop = {
|
||||
timeline: [demo_trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload_trial, start, demo_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,56 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-maxdiff@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-maxdiff@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychMaxdiff,
|
||||
alternatives: ['apple', 'orange', 'pear', 'banana'],
|
||||
labels: ['Most Preferred', 'Least Preferred'],
|
||||
preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>'
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychMaxdiff,
|
||||
alternatives: ['apple', 'orange', 'pear', 'banana'],
|
||||
labels: ['Most Preferred', 'Least Preferred'],
|
||||
preamble: '<p> Please select your <b>most preferred</b> and <b>least preferred</b> fruits. </p>'
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,76 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial_1 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
auto_preload: true
|
||||
}
|
||||
const trial_2 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_1 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
const trial_3 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_2 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
const timeline = [preload, trial_1, trial_2, trial_3];
|
||||
|
||||
var trial_3 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [preload, trial_1, trial_2, trial_3, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,67 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/sad_face_1.jpg']
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial_1 = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>Study this face</p>
|
||||
<img src="img/sad_face_1.jpg"></img>
|
||||
`,
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/sad_face_1.jpg']
|
||||
}
|
||||
const timeline = [preload, trial_1];
|
||||
|
||||
var trial_1 = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>Study this face</p>
|
||||
<img src="img/sad_face_1.jpg"></img>
|
||||
`,
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [preload, trial_1, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,107 +1,79 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial_1 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(2).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial_2 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_1 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
const trial_3 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_2 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
const block_1 = {
|
||||
timeline: [trial_1, trial_2, trial_3]
|
||||
}
|
||||
|
||||
var trial_3 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/happy_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
const trial_4 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var block_1 = {
|
||||
timeline: [trial_1, trial_2, trial_3]
|
||||
}
|
||||
const trial_5 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_4 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_1.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
const trial_6 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
|
||||
var trial_5 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_2.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
const block_2 = {
|
||||
timeline: [trial_4, trial_5, trial_6]
|
||||
}
|
||||
|
||||
var trial_6 = {
|
||||
type: jsPsychImageButtonResponse,
|
||||
stimulus: 'img/sad_face_3.jpg',
|
||||
choices: ['Next']
|
||||
}
|
||||
const preload_block_1 = {
|
||||
type: jsPsychPreload,
|
||||
trials: [block_1]
|
||||
}
|
||||
|
||||
var block_2 = {
|
||||
timeline: [trial_4, trial_5, trial_6]
|
||||
}
|
||||
const preload_block_2 = {
|
||||
type: jsPsychPreload,
|
||||
trials: [block_2]
|
||||
}
|
||||
|
||||
var preload_block_1 = {
|
||||
type: jsPsychPreload,
|
||||
trials: [block_1]
|
||||
}
|
||||
|
||||
var preload_block_2 = {
|
||||
type: jsPsychPreload,
|
||||
trials: [block_2]
|
||||
}
|
||||
const timeline = [preload_block_1, block_1, preload_block_2, block_2],
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [preload_block_1, block_1, preload_block_2, block_2, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,59 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-image-button-response@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/bad_file_path.png'],
|
||||
show_detailed_errors: true
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'preload'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [preload];
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/bad_file_path.png'],
|
||||
show_detailed_errors: true
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [preload, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,75 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-reconstruction@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-reconstruction@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var sample_function = function(param){
|
||||
var size = 50 + Math.floor(param*250);
|
||||
var html = '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
|
||||
'<div style="display: block; position: absolute; top: '+(150 - size/2)+'px; left:'+(150 - size/2)+'px; background-color: #000000; '+
|
||||
'width: '+size+'px; height: '+size+'px;"></div></div><p>Press "h" to make the square larger. Press "g" to make the square smaller.</p>'+
|
||||
'<p>When the square is the same size as the previous one, click Continue.</p>';
|
||||
return html;
|
||||
}
|
||||
|
||||
var match_item = {
|
||||
type: jsPsychHtmlKeyboardResponse,
|
||||
stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
|
||||
'<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+
|
||||
'width: 210px; height: 210px;"></div></div>',
|
||||
choices: ['c'],
|
||||
post_trial_gap: 1250,
|
||||
prompt: '<p>Study the size of this square carefully. On the next screen you will have to recreate it. When you are ready, press "c".</p>'
|
||||
}
|
||||
|
||||
var reconstruction = {
|
||||
type: jsPsychReconstruction,
|
||||
stim_function: sample_function,
|
||||
starting_value: 0.5,
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [match_item, reconstruction, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const sample_function = function(param){
|
||||
const size = 50 + Math.floor(param*250);
|
||||
const html = '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
|
||||
'<div style="display: block; position: absolute; top: '+(150 - size/2)+'px; left:'+(150 - size/2)+'px; background-color: #000000; '+
|
||||
'width: '+size+'px; height: '+size+'px;"></div></div><p>Press "h" to make the square larger. Press "g" to make the square smaller.</p>'+
|
||||
'<p>When the square is the same size as the previous one, click Continue.</p>';
|
||||
return html;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const match_item = {
|
||||
type: jsPsychHtmlKeyboardResponse,
|
||||
stimulus: '<div style="display: block; margin: auto; height: 300px; width: 300px; position: relative;">'+
|
||||
'<div style="display: block; position: absolute; top: '+(150 - 210/2)+'px; left:'+(150 - 210/2)+'px; background-color: #000000; '+
|
||||
'width: 210px; height: 210px;"></div></div>',
|
||||
choices: ['c'],
|
||||
post_trial_gap: 1250,
|
||||
prompt: '<p>Study the size of this square carefully. On the next screen you will have to recreate it. When you are ready, press "c".</p>'
|
||||
}
|
||||
|
||||
</script>
|
||||
const reconstruction = {
|
||||
type: jsPsychReconstruction,
|
||||
stim_function: sample_function,
|
||||
starting_value: 0.5,
|
||||
}
|
||||
|
||||
const timeline = [match_item, reconstruction],
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,57 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-resize@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-resize@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychResize,
|
||||
item_width: 3 + 3/8,
|
||||
item_height: 2 + 1/8,
|
||||
prompt: "<p>Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.</p>",
|
||||
pixels_per_unit: 150
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychResize,
|
||||
item_width: 3 + 3/8,
|
||||
item_height: 2 + 1/8,
|
||||
prompt: "<p>Click and drag the lower right corner of the box until the box is the same size as a credit card held up to the screen.</p>",
|
||||
pixels_per_unit: 150
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,66 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-same-different-html@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychSameDifferentHtml,
|
||||
stimuli: [
|
||||
'<p style="font-size:30px;">Climbing</p>',
|
||||
'<p style="font-size:30px;">Walking</p>'
|
||||
],
|
||||
prompt: `<p>Press 's' if the activities require the same amount of physical exertion.</p>
|
||||
<p>Press 'd' if the activities require different amount of physical exertion.</p>`,
|
||||
same_key: 's',
|
||||
different_key: 'd',
|
||||
first_stim_duration: 800,
|
||||
answer: 'different'
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSameDifferentHtml,
|
||||
stimuli: [
|
||||
'<p style="font-size:30px;">Climbing</p>',
|
||||
'<p style="font-size:30px;">Walking</p>'
|
||||
],
|
||||
prompt: `<p>Press 's' if the activities require the same amount of physical exertion.</p>
|
||||
<p>Press 'd' if the activities require different amount of physical exertion.</p>`,
|
||||
same_key: 's',
|
||||
different_key: 'd',
|
||||
first_stim_duration: 800,
|
||||
answer: 'different'
|
||||
}
|
||||
const timeline = [trial];
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,76 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-same-different-image@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/sad_face_3.jpg'
|
||||
]
|
||||
}
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/sad_face_3.jpg'
|
||||
]
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychSameDifferentImage,
|
||||
stimuli: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/sad_face_3.jpg'
|
||||
],
|
||||
prompt: `<p>Press s if the faces had the same emotional expression.</p>
|
||||
<p>Press d if the faces had different emotional expressions.</p>`,
|
||||
same_key: 's',
|
||||
different_key: 'd',
|
||||
first_stim_duration: 800,
|
||||
second_stim_duration: 800,
|
||||
answer: 'different'
|
||||
}
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSameDifferentImage,
|
||||
stimuli: [
|
||||
'img/happy_face_1.jpg',
|
||||
'img/sad_face_3.jpg'
|
||||
],
|
||||
prompt: `<p>Press s if the faces had the same emotional expression.</p>
|
||||
<p>Press d if the faces had different emotional expressions.</p>`,
|
||||
same_key: 's',
|
||||
different_key: 'd',
|
||||
first_stim_duration: 800,
|
||||
second_stim_duration: 800,
|
||||
answer: 'different'
|
||||
}
|
||||
const timeline = [trial];
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,91 +1,63 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
const instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>Use the S, F, H, and K keys to respond.</p>',
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
const grid = [
|
||||
[1,1,1,1]
|
||||
]
|
||||
|
||||
const response_map = [
|
||||
['s','f','h','k']
|
||||
]
|
||||
|
||||
const trial_1 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,0]
|
||||
}
|
||||
const trial_2 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,1]
|
||||
}
|
||||
const trial_3 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,2]
|
||||
}
|
||||
const trial_4 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,3]
|
||||
}
|
||||
|
||||
const timeline = [instructions, trial_1, trial_2, trial_3, trial_4],
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(4).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>Use the S, F, H, and K keys to respond.</p>',
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var grid = [
|
||||
[1,1,1,1]
|
||||
]
|
||||
|
||||
var response_map = [
|
||||
['s','f','h','k']
|
||||
]
|
||||
|
||||
var trial_1 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,0]
|
||||
}
|
||||
var trial_2 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,1]
|
||||
}
|
||||
var trial_3 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,2]
|
||||
}
|
||||
var trial_4 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,3]
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [instructions, trial_1, trial_2, trial_3, trial_4, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,101 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(4).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>Use the R, I, V, and M keys to respond.</p>',
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '<p>Use the R, I, V, and M keys to respond.</p>',
|
||||
choices: ['Continue']
|
||||
}
|
||||
const grid = [
|
||||
[1,1],
|
||||
[1,1]
|
||||
]
|
||||
|
||||
var grid = [
|
||||
[1,1],
|
||||
[1,1]
|
||||
]
|
||||
const response_map = [
|
||||
['r','i'],
|
||||
['v','m']
|
||||
]
|
||||
|
||||
var response_map = [
|
||||
['r','i'],
|
||||
['v','m']
|
||||
]
|
||||
const trial_1 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,0],
|
||||
show_response_feedback: true,
|
||||
feedback_duration: 500
|
||||
}
|
||||
const trial_2 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,1],
|
||||
show_response_feedback: true,
|
||||
feedback_duration: 500
|
||||
}
|
||||
const trial_3 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [1,1],
|
||||
show_response_feedback: true,
|
||||
feedback_duration: 500
|
||||
}
|
||||
const trial_4 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [1,0],
|
||||
show_response_feedback: true,
|
||||
feedback_duration: 500
|
||||
}
|
||||
|
||||
var trial_1 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,0],
|
||||
show_response_feedback: true,
|
||||
feedback_duration: 500
|
||||
}
|
||||
var trial_2 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [0,1],
|
||||
show_response_feedback: true,
|
||||
feedback_duration: 500
|
||||
}
|
||||
var trial_3 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [1,1],
|
||||
show_response_feedback: true,
|
||||
feedback_duration: 500
|
||||
}
|
||||
var trial_4 = {
|
||||
type: jsPsychSerialReactionTime,
|
||||
grid: grid,
|
||||
choices: response_map,
|
||||
target: [1,0],
|
||||
show_response_feedback: true,
|
||||
feedback_duration: 500
|
||||
}
|
||||
const timeline = [instructions, trial_1, trial_2, trial_3, trial_4],
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [instructions, trial_1, trial_2, trial_3, trial_4, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,77 +1,49 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
const grid = [
|
||||
[1,1,1,1]
|
||||
]
|
||||
|
||||
const trial_1 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,0]
|
||||
}
|
||||
const trial_2 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,1]
|
||||
}
|
||||
const trial_3 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,2]
|
||||
}
|
||||
const trial_4 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,3]
|
||||
}
|
||||
|
||||
const timeline = [trial_1, trial_2, trial_3, trial_4]
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(4).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var grid = [
|
||||
[1,1,1,1]
|
||||
]
|
||||
|
||||
var trial_1 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,0]
|
||||
}
|
||||
var trial_2 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,1]
|
||||
}
|
||||
var trial_3 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,2]
|
||||
}
|
||||
var trial_4 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,3]
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial_1, trial_2, trial_3, trial_4, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,83 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-serial-reaction-time-mouse@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(4).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const grid = [
|
||||
[1,0,1],
|
||||
[0,0,0],
|
||||
[1,0,1]
|
||||
]
|
||||
|
||||
var grid = [
|
||||
[1,0,1],
|
||||
[0,0,0],
|
||||
[1,0,1]
|
||||
]
|
||||
const trial_1 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,0],
|
||||
target_color: '#006738'
|
||||
}
|
||||
const trial_2 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,2],
|
||||
target_color: '#F78F1E'
|
||||
}
|
||||
const trial_3 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [2,2],
|
||||
target_color: '#13B24B'
|
||||
}
|
||||
const trial_4 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [2,0],
|
||||
target_color: '#E74921'
|
||||
}
|
||||
|
||||
var trial_1 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,0],
|
||||
target_color: '#006738'
|
||||
}
|
||||
var trial_2 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [0,2],
|
||||
target_color: '#F78F1E'
|
||||
}
|
||||
var trial_3 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [2,2],
|
||||
target_color: '#13B24B'
|
||||
}
|
||||
var trial_4 = {
|
||||
type: jsPsychSerialReactionTimeMouse,
|
||||
grid: grid,
|
||||
target: [2,0],
|
||||
target_color: '#E74921'
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial_1, trial_2, trial_3, trial_4, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const timeline = [trial_1, trial_2, trial_3, trial_4]
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,42 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
const trial = {
|
||||
type: jsPsychSketchpad,
|
||||
prompt: '<p>Draw an apple!</p>',
|
||||
prompt_location: 'abovecanvas',
|
||||
@ -45,15 +22,10 @@
|
||||
canvas_border_width: 2
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,42 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
const trial = {
|
||||
type: jsPsychSketchpad,
|
||||
prompt: '<p>Circle the mouth using red. Circle the eyes using blue.</p>',
|
||||
prompt_location: 'abovecanvas',
|
||||
@ -46,16 +23,11 @@
|
||||
canvas_width: 380,
|
||||
canvas_height: 252
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,43 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-sketchpad@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().last(2).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var draw = {
|
||||
const draw = {
|
||||
type: jsPsychSketchpad,
|
||||
prompt: '<p>Draw the first animal that comes to mind. You have 30 seconds!</p>',
|
||||
prompt_location: 'belowcanvas',
|
||||
@ -45,10 +22,10 @@
|
||||
show_countdown_trial_duration: true,
|
||||
}
|
||||
|
||||
var label = {
|
||||
const label = {
|
||||
type: jsPsychSurveyText,
|
||||
preamble: () => {
|
||||
var imageData = jsPsych.data.get().last(1).values()[0].png;
|
||||
const imageData = jsPsych.data.get().last(1).values()[0].png;
|
||||
return `<img src="${imageData}"></img>`;
|
||||
},
|
||||
questions: [
|
||||
@ -56,15 +33,10 @@
|
||||
]
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const timeline = [draw, label]
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
@ -1,58 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-html-form@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyHtmlForm,
|
||||
preamble: '<p>How are you feeling <b>right now?</b></p>',
|
||||
html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychSurveyHtmlForm,
|
||||
preamble: '<p>How are you feeling <b>right now?</b></p>',
|
||||
html: '<p> I am feeling <input name="first" type="text" />, <input name="second" type="text" />, and <input name="third" type="text" />.</p>'
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,59 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-html-form@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychSurveyHtmlForm,
|
||||
preamble: '<p>What is your favorite bird?</p>',
|
||||
html: '<p>My favorite bird is <input type="text" id="test-resp-box" name="response" size="10" /></p>',
|
||||
autofocus: 'test-resp-box'
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyHtmlForm,
|
||||
preamble: '<p>What is your favorite bird?</p>',
|
||||
html: '<p>My favorite bird is <input type="text" id="test-resp-box" name="response" size="10" /></p>',
|
||||
autofocus: 'test-resp-box'
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,68 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyLikert,
|
||||
questions: [
|
||||
{
|
||||
prompt: "I like vegetables.",
|
||||
labels: [
|
||||
"Strongly Disagree",
|
||||
"Disagree",
|
||||
"Neutral",
|
||||
"Agree",
|
||||
"Strongly Agree"
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const trial = {
|
||||
type: jsPsychSurveyLikert,
|
||||
questions: [
|
||||
{
|
||||
prompt: "I like vegetables.",
|
||||
labels: [
|
||||
"Strongly Disagree",
|
||||
"Disagree",
|
||||
"Neutral",
|
||||
"Agree",
|
||||
"Strongly Agree"
|
||||
]
|
||||
}
|
||||
};
|
||||
]
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,70 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-likert@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const likert_scale = [
|
||||
"Strongly Disagree",
|
||||
"Disagree",
|
||||
"Neutral",
|
||||
"Agree",
|
||||
"Strongly Agree"
|
||||
];
|
||||
|
||||
var likert_scale = [
|
||||
"Strongly Disagree",
|
||||
"Disagree",
|
||||
"Neutral",
|
||||
"Agree",
|
||||
"Strongly Agree"
|
||||
];
|
||||
const trial = {
|
||||
type: jsPsychSurveyLikert,
|
||||
questions: [
|
||||
{prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
|
||||
{prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},
|
||||
{prompt: "I like meat.", name: 'Meat', labels: likert_scale},
|
||||
],
|
||||
randomize_question_order: true
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyLikert,
|
||||
questions: [
|
||||
{prompt: "I like vegetables.", name: 'Vegetables', labels: likert_scale},
|
||||
{prompt: "I like fruit.", name: 'Fruit', labels: likert_scale},
|
||||
{prompt: "I like meat.", name: 'Meat', labels: likert_scale},
|
||||
],
|
||||
randomize_question_order: true
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,70 +1,42 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
const trial = {
|
||||
type: jsPsychSurveyMultiChoice,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of the following do you like the most?",
|
||||
name: 'VegetablesLike',
|
||||
options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'],
|
||||
required: true
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyMultiChoice,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of the following do you like the most?",
|
||||
name: 'VegetablesLike',
|
||||
options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'],
|
||||
required: true
|
||||
},
|
||||
{
|
||||
prompt: "Which of the following do you like the least?",
|
||||
name: 'FruitDislike',
|
||||
options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'],
|
||||
required: false
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
{
|
||||
prompt: "Which of the following do you like the least?",
|
||||
name: 'FruitDislike',
|
||||
options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'],
|
||||
required: false
|
||||
}
|
||||
};
|
||||
],
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,72 +1,44 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-choice@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
const trial = {
|
||||
type: jsPsychSurveyMultiChoice,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of the following do you like the most?",
|
||||
name: 'VegetablesLike',
|
||||
options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'],
|
||||
required: true,
|
||||
horizontal: true
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyMultiChoice,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of the following do you like the most?",
|
||||
name: 'VegetablesLike',
|
||||
options: ['Tomato', 'Cucumber', 'Eggplant', 'Corn', 'Peas'],
|
||||
required: true,
|
||||
horizontal: true
|
||||
},
|
||||
{
|
||||
prompt: "Which of the following do you like the least?",
|
||||
name: 'FruitDislike',
|
||||
options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'],
|
||||
required: false,
|
||||
horizontal: true
|
||||
}
|
||||
],
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
{
|
||||
prompt: "Which of the following do you like the least?",
|
||||
name: 'FruitDislike',
|
||||
options: ['Apple', 'Banana', 'Orange', 'Grape', 'Strawberry'],
|
||||
required: false,
|
||||
horizontal: true
|
||||
}
|
||||
};
|
||||
],
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,73 +1,45 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-multi-select@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css" />
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
const trial = {
|
||||
type: jsPsychSurveyMultiSelect,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of these colors do you like?",
|
||||
options: ["Red", "Yellow", "Green", "Blue", "Black"],
|
||||
horizontal: true,
|
||||
required: true,
|
||||
name: 'Colors'
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyMultiSelect,
|
||||
questions: [
|
||||
{
|
||||
prompt: "Which of these colors do you like?",
|
||||
options: ["Red", "Yellow", "Green", "Blue", "Black"],
|
||||
horizontal: true,
|
||||
required: true,
|
||||
name: 'Colors'
|
||||
},
|
||||
{
|
||||
prompt: "Which of these foods do you like?",
|
||||
options: ["Apples", "Bananas", "Carrots", "Donuts", "Eggplant"],
|
||||
horizontal: true,
|
||||
required: true,
|
||||
name: 'Foods'
|
||||
}
|
||||
],
|
||||
randomize_question_order: true
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
{
|
||||
prompt: "Which of these foods do you like?",
|
||||
options: ["Apples", "Bananas", "Carrots", "Donuts", "Eggplant"],
|
||||
horizontal: true,
|
||||
required: true,
|
||||
name: 'Foods'
|
||||
}
|
||||
};
|
||||
],
|
||||
randomize_question_order: true
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,59 +1,31 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'How old are you?'}
|
||||
]
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'How old are you?'}
|
||||
]
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,60 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'What is your date of birth?', placeholder: 'mm/dd/yyyy', required: true},
|
||||
{prompt: 'What country do you currently live in?'}
|
||||
]
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'What is your date of birth?', placeholder: 'mm/dd/yyyy', required: true},
|
||||
{prompt: 'What country do you currently live in?'}
|
||||
]
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,60 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'What did you eat for breakfast?', name: 'Breakfast'},
|
||||
{prompt: 'What did you eat for lunch?', name: 'Lunch'}
|
||||
]
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyText,
|
||||
questions: [
|
||||
{prompt: 'What did you eat for breakfast?', name: 'Breakfast'},
|
||||
{prompt: 'What did you eat for lunch?', name: 'Lunch'}
|
||||
]
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,66 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-survey-text@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/navarro_burst_03.jpg']
|
||||
}
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/navarro_burst_03.jpg']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychSurveyText,
|
||||
preamble: `<img src="img/navarro_burst_03.jpg" style="width:400px;"></img>`,
|
||||
questions: [
|
||||
{prompt: 'Describe your reaction to the image above', rows: 5}
|
||||
]
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const timeline = [trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychSurveyText,
|
||||
preamble: `<img src="img/navarro_burst_03.jpg" style="width:400px;"></img>`,
|
||||
questions: [
|
||||
{prompt: 'Describe your reaction to the image above', rows: 5}
|
||||
]
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,65 +1,40 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-button-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychVideoButtonResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
choices: ['0-5', '6-10','11-15','16-20','21-25','25+'],
|
||||
prompt: "<p>How many different fish are shown in the video?</p>",
|
||||
response_allowed_while_playing: false
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychVideoButtonResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
choices: ['0-5', '6-10','11-15','16-20','21-25','25+'],
|
||||
prompt: "<p>How many different fish are shown in the video?</p>",
|
||||
response_allowed_while_playing: false
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,64 +1,39 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-keyboard-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychVideoKeyboardResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
choices: "NO_KEYS",
|
||||
trial_ends_after_video: true
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychVideoKeyboardResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
choices: "NO_KEYS",
|
||||
trial_ends_after_video: true
|
||||
};
|
||||
|
||||
</script>
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,64 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-slider-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-video-slider-response@1.0.0"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychVideoSliderResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
labels: ["Hated it", "Loved it"],
|
||||
prompt: '<p>Please rate your enjoyment of the video clip.</p>'
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
video: 'video/fish.mp4'
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
const trial = {
|
||||
type: jsPsychVideoSliderResponse,
|
||||
stimulus: [
|
||||
'video/fish.mp4'
|
||||
],
|
||||
labels: ["Hated it", "Loved it"],
|
||||
prompt: '<p>Please rate your enjoyment of the video clip.</p>'
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,63 +1,38 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
};
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
};
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "none",
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "none",
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const timeline = [trial];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,73 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
};
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
};
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "cm",
|
||||
pixels_per_unit: 50,
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'virtual-chinrest'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "cm",
|
||||
pixels_per_unit: 50,
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
var resized_stimulus = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>If the measurements were done correctly, the square below should be 10 cm x 10 cm.</p>
|
||||
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||
`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, resized_stimulus, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const resized_stimulus = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>If the measurements were done correctly, the square below should be 10 cm x 10 cm.</p>
|
||||
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||
`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
|
||||
</script>
|
||||
const timeline = [trial, resized_stimulus];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,73 +1,48 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||
<style>
|
||||
.jspsych-btn {margin-bottom: 10px;}
|
||||
</style>
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-virtual-chinrest@1.0.0"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.get().filter({trial_type: 'virtual-chinrest'}).last(1).values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
|
||||
var trial = {
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "deg",
|
||||
pixels_per_unit: 50,
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
var resized_stimulus = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.</p>
|
||||
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||
`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [trial, resized_stimulus, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/card.png']
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
const trial = {
|
||||
type: jsPsychVirtualChinrest,
|
||||
blindspot_reps: 3,
|
||||
resize_units: "deg",
|
||||
pixels_per_unit: 50,
|
||||
item_path: "img/card.png"
|
||||
};
|
||||
|
||||
</script>
|
||||
const resized_stimulus = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `
|
||||
<p>If the measurements were done correctly, the square below should take up about 10 degrees of visual angle.</p>
|
||||
<div style="background-color: black; width: 500px; height: 500px; margin: 20px auto;"></div>
|
||||
`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
const timeline = [trial, resized_stimulus];
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,74 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-visual-search-circle@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/backwardN.gif', 'img/normalN.gif', 'img/fixation.gif']
|
||||
}
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/backwardN.gif', 'img/normalN.gif', 'img/fixation.gif']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `<p>Press J if there is a backwards N.</p>
|
||||
<p>Press F if all the Ns are in the normal orientation.</p>`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychVisualSearchCircle,
|
||||
target: 'img/backwardN.gif',
|
||||
foil: 'img/normalN.gif',
|
||||
fixation_image: 'img/fixation.gif',
|
||||
target_present: true,
|
||||
set_size: 4
|
||||
}
|
||||
|
||||
var instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `<p>Press J if there is a backwards N.</p>
|
||||
<p>Press F if all the Ns are in the normal orientation.</p>`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
const timeline = [instructions, trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychVisualSearchCircle,
|
||||
target: 'img/backwardN.gif',
|
||||
foil: 'img/normalN.gif',
|
||||
fixation_image: 'img/fixation.gif',
|
||||
target_present: true,
|
||||
set_size: 4
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [instructions, trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -1,74 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<script src="docs-demo-timeline.js"></script>
|
||||
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-preload@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||
<script src="https://unpkg.com/@jspsych/plugin-visual-search-circle@1.0.0"></script>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css"
|
||||
/>
|
||||
<style>
|
||||
.jspsych-btn {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css" />
|
||||
<link rel="stylesheet" href="docs-demo.css" type="text/css">
|
||||
</head>
|
||||
<body></body>
|
||||
<script>
|
||||
|
||||
var jsPsych = initJsPsych();
|
||||
const jsPsych = initJsPsych();
|
||||
|
||||
var preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/elephant.png', 'img/lion.png', 'img/monkey.png']
|
||||
}
|
||||
const preload = {
|
||||
type: jsPsychPreload,
|
||||
images: ['img/elephant.png', 'img/lion.png', 'img/monkey.png']
|
||||
}
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
const instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `<p>Press E if there is an elephant in the group.</p>
|
||||
<p>Press N if there is no elephant in the group.</p>`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: function() {
|
||||
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||
},
|
||||
choices: ['Repeat demo']
|
||||
};
|
||||
const trial = {
|
||||
type: jsPsychVisualSearchCircle,
|
||||
stimuli: ['img/elephant.png', 'img/lion.png', 'img/monkey.png'],
|
||||
fixation_image: 'img/fixation.gif',
|
||||
target_present_key: 'e',
|
||||
target_absent_key: 'n',
|
||||
target_present: true
|
||||
}
|
||||
|
||||
var instructions = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: `<p>Press E if there is an elephant in the group.</p>
|
||||
<p>Press N if there is no elephant in the group.</p>`,
|
||||
choices: ['Continue']
|
||||
}
|
||||
const timeline = [instructions, trial];
|
||||
|
||||
var trial = {
|
||||
type: jsPsychVisualSearchCircle,
|
||||
stimuli: ['img/elephant.png', 'img/lion.png', 'img/monkey.png'],
|
||||
fixation_image: 'img/fixation.gif',
|
||||
target_present_key: 'e',
|
||||
target_absent_key: 'n',
|
||||
target_present: true
|
||||
}
|
||||
|
||||
var trial_loop = {
|
||||
timeline: [instructions, trial, show_data],
|
||||
loop_function: function() {
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run([preload, start, trial_loop]);
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
if (typeof jsPsych !== "undefined") {
|
||||
jsPsych.run(generateDocsDemoTimeline(timeline, [preload]));
|
||||
} else {
|
||||
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||
}
|
||||
</script>
|
||||
</html>
|
||||
|
||||
@ -53,7 +53,7 @@ slider_start | numeric | The starting value of the slider.
|
||||
</div>
|
||||
</div>`,
|
||||
require_movement: true,
|
||||
labels: ['100% chance that team A wins', '50% chance that team A wins', '0% chance that team A wins']
|
||||
labels: ['100% chance', '50% chance', '0% chance']
|
||||
};
|
||||
```
|
||||
|
||||
|
||||
@ -18,11 +18,7 @@
|
||||
]
|
||||
});
|
||||
|
||||
var start = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
stimulus: '',
|
||||
choices: ['Run demo']
|
||||
};
|
||||
|
||||
|
||||
var show_data = {
|
||||
type: jsPsychHtmlButtonResponse,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user