mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
Merge branch 'main' into modularization
This commit is contained in:
bjoluc
commit
6a8596fb76
12
docs/demos/external_page.html
Normal file
12
docs/demos/external_page.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<div id="consent">
|
||||||
|
<p>
|
||||||
|
This is a demo experiment, with this minimal consent form being loaded
|
||||||
|
as an external html document. To continue, click the checkbox below
|
||||||
|
and hit "Start Experiment".
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<input type="checkbox" id="consent_checkbox" />
|
||||||
|
I agree to take part in this study.
|
||||||
|
</p>
|
||||||
|
<button type="button" id="start">Start Experiment</button>
|
||||||
|
</div>
|
||||||
174
docs/demos/eye-tracking-with-webgazer.html
Normal file
174
docs/demos/eye-tracking-with-webgazer.html
Normal file
@ -0,0 +1,174 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-init-camera.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-calibrate.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-webgazer-validate.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/js/webgazer/webgazer.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/extensions/jspsych-ext-webgazer.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
images: ['img/blue.png']
|
||||||
|
}
|
||||||
|
|
||||||
|
var camera_instructions = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>In order to participate you must allow the experiment to use your camera.</p>
|
||||||
|
<p>You will be prompted to do this on the next screen.</p>
|
||||||
|
<p>If you do not wish to allow use of your camera, you cannot participate in this experiment.<p>
|
||||||
|
<p>It may take up to 30 seconds for the camera to initialize after you give permission.</p>
|
||||||
|
`,
|
||||||
|
choices: ['Got it'],
|
||||||
|
}
|
||||||
|
|
||||||
|
var init_camera = {
|
||||||
|
type: 'webgazer-init-camera'
|
||||||
|
}
|
||||||
|
|
||||||
|
var calibration_instructions = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>Now you'll calibrate the eye tracking, so that the software can use the image of your eyes to predict where you are looking.</p>
|
||||||
|
<p>You'll see a series of dots appear on the screen. Look at each dot and click on it.</p>
|
||||||
|
`,
|
||||||
|
choices: ['Got it'],
|
||||||
|
}
|
||||||
|
|
||||||
|
var calibration = {
|
||||||
|
type: 'webgazer-calibrate',
|
||||||
|
calibration_points: [
|
||||||
|
[25,25],[75,25],[50,50],[25,75],[75,75]
|
||||||
|
],
|
||||||
|
repetitions_per_point: 2,
|
||||||
|
randomize_calibration_order: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var validation_instructions = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>Now we'll measure the accuracy of the calibration.</p>
|
||||||
|
<p>Look at each dot as it appears on the screen.</p>
|
||||||
|
<p style="font-weight: bold;">You do not need to click on the dots this time.</p>
|
||||||
|
`,
|
||||||
|
choices: ['Got it'],
|
||||||
|
post_trial_gap: 1000
|
||||||
|
}
|
||||||
|
|
||||||
|
var validation = {
|
||||||
|
type: 'webgazer-validate',
|
||||||
|
validation_points: [
|
||||||
|
[25,25],[75,25],[50,50],[25,75],[75,75]
|
||||||
|
],
|
||||||
|
roi_radius: 200,
|
||||||
|
time_to_saccade: 1000,
|
||||||
|
validation_duration: 2000,
|
||||||
|
data: {
|
||||||
|
task: 'validate'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var recalibrate_instructions = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>The accuracy of the calibration is a little lower than we'd like.</p>
|
||||||
|
<p>Let's try calibrating one more time.</p>
|
||||||
|
<p>On the next screen, look at the dots and click on them.<p>
|
||||||
|
`,
|
||||||
|
choices: ['OK'],
|
||||||
|
}
|
||||||
|
|
||||||
|
var recalibrate = {
|
||||||
|
timeline: [recalibrate_instructions, calibration, validation_instructions, validation],
|
||||||
|
conditional_function: function(){
|
||||||
|
var validation_data = jsPsych.data.get().filter({task: 'validate'}).values()[0];
|
||||||
|
return validation_data.percent_in_roi.some(function(x){
|
||||||
|
var minimum_percent_acceptable = 50;
|
||||||
|
return x < minimum_percent_acceptable;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
data: {
|
||||||
|
phase: 'recalibration'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var calibration_done = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: `
|
||||||
|
<p>Great, we're done with calibration!</p>
|
||||||
|
`,
|
||||||
|
choices: ['OK']
|
||||||
|
}
|
||||||
|
|
||||||
|
var begin = {
|
||||||
|
type: 'html-keyboard-response',
|
||||||
|
stimulus: `<p>The next screen will show an image to demonstrate adding the webgazer extension to a trial.</p>
|
||||||
|
<p>Just look at the image while eye tracking data is collected. The trial will end automatically.</p>
|
||||||
|
<p>Press any key to start.</p>
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial = {
|
||||||
|
type: 'image-keyboard-response',
|
||||||
|
stimulus: 'img/blue.png',
|
||||||
|
choices: jsPsych.NO_KEYS,
|
||||||
|
trial_duration: 2000,
|
||||||
|
extensions: [
|
||||||
|
{
|
||||||
|
type: 'webgazer',
|
||||||
|
params: {targets: ['#jspsych-image-keyboard-response-stimulus']}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-keyboard-response',
|
||||||
|
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: jsPsych.NO_KEYS
|
||||||
|
};
|
||||||
|
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [
|
||||||
|
preload,
|
||||||
|
camera_instructions,
|
||||||
|
init_camera,
|
||||||
|
calibration_instructions,
|
||||||
|
calibration,
|
||||||
|
validation_instructions,
|
||||||
|
validation,
|
||||||
|
recalibrate,
|
||||||
|
calibration_done,
|
||||||
|
begin,
|
||||||
|
trial,
|
||||||
|
show_data
|
||||||
|
],
|
||||||
|
extensions: [
|
||||||
|
{type: 'webgazer'}
|
||||||
|
]
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
BIN
docs/demos/img/1.gif
Normal file
BIN
docs/demos/img/1.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
docs/demos/img/10.gif
Normal file
BIN
docs/demos/img/10.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
docs/demos/img/11.gif
Normal file
BIN
docs/demos/img/11.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
docs/demos/img/12.gif
Normal file
BIN
docs/demos/img/12.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
docs/demos/img/2.gif
Normal file
BIN
docs/demos/img/2.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
docs/demos/img/3.gif
Normal file
BIN
docs/demos/img/3.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
docs/demos/img/4.gif
Normal file
BIN
docs/demos/img/4.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
docs/demos/img/5.gif
Normal file
BIN
docs/demos/img/5.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
docs/demos/img/6.gif
Normal file
BIN
docs/demos/img/6.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
docs/demos/img/7.gif
Normal file
BIN
docs/demos/img/7.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
docs/demos/img/8.gif
Normal file
BIN
docs/demos/img/8.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
docs/demos/img/9.gif
Normal file
BIN
docs/demos/img/9.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
BIN
docs/demos/img/backwardN.gif
Normal file
BIN
docs/demos/img/backwardN.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
docs/demos/img/blue.png
Normal file
BIN
docs/demos/img/blue.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
BIN
docs/demos/img/card.png
Normal file
BIN
docs/demos/img/card.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
docs/demos/img/elephant.png
Normal file
BIN
docs/demos/img/elephant.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
docs/demos/img/fixation.gif
Normal file
BIN
docs/demos/img/fixation.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
docs/demos/img/happy_face_1.jpg
Normal file
BIN
docs/demos/img/happy_face_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
docs/demos/img/happy_face_2.jpg
Normal file
BIN
docs/demos/img/happy_face_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
docs/demos/img/happy_face_3.jpg
Normal file
BIN
docs/demos/img/happy_face_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
BIN
docs/demos/img/happy_face_4.jpg
Normal file
BIN
docs/demos/img/happy_face_4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.5 KiB |
BIN
docs/demos/img/lion.png
Normal file
BIN
docs/demos/img/lion.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
docs/demos/img/monkey.png
Normal file
BIN
docs/demos/img/monkey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
docs/demos/img/navarro_burst_03.jpg
Normal file
BIN
docs/demos/img/navarro_burst_03.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 MiB |
BIN
docs/demos/img/normalN.gif
Normal file
BIN
docs/demos/img/normalN.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
docs/demos/img/orange.png
Normal file
BIN
docs/demos/img/orange.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
docs/demos/img/sad_face_1.jpg
Normal file
BIN
docs/demos/img/sad_face_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
BIN
docs/demos/img/sad_face_2.jpg
Normal file
BIN
docs/demos/img/sad_face_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
docs/demos/img/sad_face_3.jpg
Normal file
BIN
docs/demos/img/sad_face_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
docs/demos/img/sad_face_4.jpg
Normal file
BIN
docs/demos/img/sad_face_4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
69
docs/demos/jspsych-animation-demo.html
Normal file
69
docs/demos/jspsych-animation-demo.html
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-animation.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
#jspsych-animation-image {height:80% !important; width: 80% !important;}
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var animation_trial = {
|
||||||
|
type: 'animation',
|
||||||
|
stimuli: [
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/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: 'html-button-response',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
62
docs/demos/jspsych-audio-button-response-demo-1.html
Normal file
62
docs/demos/jspsych-audio-button-response-demo-1.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var timeline = [];
|
||||||
|
|
||||||
|
timeline.push({
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
});
|
||||||
|
|
||||||
|
timeline.push({
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'audio-button-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/tone.mp3',
|
||||||
|
choices: ['Low', 'High'],
|
||||||
|
prompt: "<p>Is the pitch high or low?</p>"
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: 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>
|
||||||
68
docs/demos/jspsych-audio-button-response-demo-2.html
Normal file
68
docs/demos/jspsych-audio-button-response-demo-2.html
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var 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']
|
||||||
|
|
||||||
|
timeline.push({
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true,
|
||||||
|
images: images
|
||||||
|
});
|
||||||
|
|
||||||
|
timeline.push({
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'audio-button-response',
|
||||||
|
stimulus: 'sound/roar.mp3',
|
||||||
|
choices: images,
|
||||||
|
prompt: "<p>Which animal made the sound?</p>",
|
||||||
|
button_html: '<img src="%choice%" />'
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: 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>
|
||||||
61
docs/demos/jspsych-audio-keyboard-response-demo-1.html
Normal file
61
docs/demos/jspsych-audio-keyboard-response-demo-1.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var pre_audio = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'audio-keyboard-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/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: 'html-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
60
docs/demos/jspsych-audio-keyboard-response-demo-2.html
Normal file
60
docs/demos/jspsych-audio-keyboard-response-demo-2.html
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var pre_audio = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'audio-keyboard-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/tone.mp3',
|
||||||
|
choices: jsPsych.NO_KEYS,
|
||||||
|
trial_ends_after_audio: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
60
docs/demos/jspsych-audio-slider-response-demo-1.html
Normal file
60
docs/demos/jspsych-audio-slider-response-demo-1.html
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-slider-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var pre_audio = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'audio-slider-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/sound/speech_joke.mp3',
|
||||||
|
labels: ['Not Funny', 'Funny'],
|
||||||
|
prompt: '<p>How funny is the joke?</p>'
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
62
docs/demos/jspsych-audio-slider-response-demo-2.html
Normal file
62
docs/demos/jspsych-audio-slider-response-demo-2.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-audio-slider-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var pre_audio = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'audio-slider-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/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 show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
59
docs/demos/jspsych-call-function-demo1.html
Normal file
59
docs/demos/jspsych-call-function-demo1.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'call-function',
|
||||||
|
func: myfunc
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
63
docs/demos/jspsych-call-function-demo2.html
Normal file
63
docs/demos/jspsych-call-function-demo2.html
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'call-function',
|
||||||
|
func: function(){ myfunc(jsPsych.data.get()) }
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
64
docs/demos/jspsych-call-function-demo3.html
Normal file
64
docs/demos/jspsych-call-function-demo3.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-call-function.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'call-function',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
85
docs/demos/jspsych-canvas-button-response-demo1.html
Normal file
85
docs/demos/jspsych-canvas-button-response-demo1.html
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'canvas-button-response',
|
||||||
|
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: 'canvas-button-response',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
76
docs/demos/jspsych-canvas-button-response-demo2.html
Normal file
76
docs/demos/jspsych-canvas-button-response-demo2.html
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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']
|
||||||
|
};
|
||||||
|
|
||||||
|
// write the canvas stimulus drawing function without using a named function
|
||||||
|
// the anonymous function must take the canvas as an argument
|
||||||
|
var lines = {
|
||||||
|
type: 'canvas-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
87
docs/demos/jspsych-canvas-button-response-demo3.html
Normal file
87
docs/demos/jspsych-canvas-button-response-demo3.html
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'canvas-button-response',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
67
docs/demos/jspsych-canvas-keyboard-response-demo1.html
Normal file
67
docs/demos/jspsych-canvas-keyboard-response-demo1.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'canvas-keyboard-response',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
67
docs/demos/jspsych-canvas-keyboard-response-demo2.html
Normal file
67
docs/demos/jspsych-canvas-keyboard-response-demo2.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'canvas-keyboard-response',
|
||||||
|
canvas_size: [300, 300],
|
||||||
|
stimulus: drawCirc,
|
||||||
|
prompt: '<p>No key response is allowed.</p><p>The stimulus disappears after 3 seconds.</p>',
|
||||||
|
choices: jsPsych.NO_KEYS,
|
||||||
|
trial_duration: 3000,
|
||||||
|
data: {shape: 'circle', radius: 50}
|
||||||
|
}
|
||||||
|
|
||||||
|
var canvas_data_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
70
docs/demos/jspsych-canvas-slider-response-demo1.html
Normal file
70
docs/demos/jspsych-canvas-slider-response-demo1.html
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-slider-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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']
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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: 'canvas-slider-response',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
76
docs/demos/jspsych-canvas-slider-response-demo2.html
Normal file
76
docs/demos/jspsych-canvas-slider-response-demo2.html
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-canvas-slider-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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']
|
||||||
|
};
|
||||||
|
|
||||||
|
// 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: 'canvas-slider-response',
|
||||||
|
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];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var canvas_data_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
70
docs/demos/jspsych-categorize-animation-demo1.html
Normal file
70
docs/demos/jspsych-categorize-animation-demo1.html
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-animation.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/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 start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var animation_trial = {
|
||||||
|
type: 'categorize-animation',
|
||||||
|
stimuli: [
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
74
docs/demos/jspsych-categorize-animation-demo2.html
Normal file
74
docs/demos/jspsych-categorize-animation-demo2.html
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-animation.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/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 start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var images = [
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
|
||||||
|
];
|
||||||
|
|
||||||
|
var animation_trial = {
|
||||||
|
type: 'categorize-animation',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
61
docs/demos/jspsych-categorize-html-demo1.html
Normal file
61
docs/demos/jspsych-categorize-html-demo1.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-html.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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 categorization_trial = {
|
||||||
|
type: 'categorize-html',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
67
docs/demos/jspsych-categorize-image-demo1.html
Normal file
67
docs/demos/jspsych-categorize-image-demo1.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-categorize-image.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var categorization_trial = {
|
||||||
|
type: 'categorize-image',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
55
docs/demos/jspsych-cloze-demo1.html
Normal file
55
docs/demos/jspsych-cloze-demo1.html
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-cloze.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'cloze',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
58
docs/demos/jspsych-cloze-demo2.html
Normal file
58
docs/demos/jspsych-cloze-demo2.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-cloze.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'cloze',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
71
docs/demos/jspsych-external-html-demo1.html
Normal file
71
docs/demos/jspsych-external-html-demo1.html
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-external-html.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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.'");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
// declare the block.
|
||||||
|
var trial = {
|
||||||
|
type:'external-html',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
73
docs/demos/jspsych-free-sort-demo1.html
Normal file
73
docs/demos/jspsych-free-sort-demo1.html
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-free-sort.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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 sorting_stimuli = [
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_2.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_3.jpg',
|
||||||
|
'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_4.jpg'
|
||||||
|
]
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
images: sorting_stimuli
|
||||||
|
}
|
||||||
|
|
||||||
|
var sort_trial = {
|
||||||
|
type: 'free-sort',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
76
docs/demos/jspsych-fullscreen-demo1.html
Normal file
76
docs/demos/jspsych-fullscreen-demo1.html
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-fullscreen.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
html, body { background-color: white;}
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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 enter_fullscreen = {
|
||||||
|
type: 'fullscreen',
|
||||||
|
fullscreen_mode: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_in_fullscreen = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: 'This trial will be in fullscreen mode.',
|
||||||
|
choices: ['Continue']
|
||||||
|
}
|
||||||
|
|
||||||
|
var exit_fullscreen = {
|
||||||
|
type: 'fullscreen',
|
||||||
|
fullscreen_mode: false,
|
||||||
|
delay_after: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_after_fullscreen = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: 'This trial will NOT be in fullscreen mode.',
|
||||||
|
choices: ['Continue']
|
||||||
|
}
|
||||||
|
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
56
docs/demos/jspsych-html-button-response-demo1.html
Normal file
56
docs/demos/jspsych-html-button-response-demo1.html
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'html-button-response',
|
||||||
|
stimulus: '<p>Running</p>',
|
||||||
|
choices: ['Healthy', 'Unhealthy'],
|
||||||
|
prompt: "<p>Is this activity healthy or unhealthy?</p>"
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
57
docs/demos/jspsych-html-keyboard-response-demo1.html
Normal file
57
docs/demos/jspsych-html-keyboard-response-demo1.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'html-keyboard-response',
|
||||||
|
stimulus: '<p>Running</p>',
|
||||||
|
choices: ['e', 'i'],
|
||||||
|
prompt: "<p>Is this activity healthy or unhealthy?</p><p>Press 'e' for healthy and 'i' for unhealthy.</p>"
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
57
docs/demos/jspsych-html-keyboard-response-demo2.html
Normal file
57
docs/demos/jspsych-html-keyboard-response-demo2.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'html-keyboard-response',
|
||||||
|
stimulus: '<p style="font-size: 48px;">+</p>',
|
||||||
|
choices: jsPsych.NO_KEYS,
|
||||||
|
trial_duration: 1000,
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
58
docs/demos/jspsych-html-slider-response-demo1.html
Normal file
58
docs/demos/jspsych-html-slider-response-demo1.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-slider-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'html-slider-response',
|
||||||
|
stimulus: '<p>Running</p>',
|
||||||
|
require_movement: true,
|
||||||
|
labels: ['healthy', 'unhealthy'],
|
||||||
|
prompt: "<p>How healthy/unhealthy is this activity?</p>"
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
66
docs/demos/jspsych-iat-html-demo1.html
Normal file
66
docs/demos/jspsych-iat-html-demo1.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-iat-html.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'iat-html',
|
||||||
|
stimulus: 'Golf',
|
||||||
|
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'],
|
||||||
|
right_category_label: ['YOUNG'],
|
||||||
|
response_ends_trial: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
72
docs/demos/jspsych-iat-image-demo1.html
Normal file
72
docs/demos/jspsych-iat-image-demo1.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-iat-image.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'iat-image',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/blue.png',
|
||||||
|
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'],
|
||||||
|
right_category_label: ['YOUNG'],
|
||||||
|
response_ends_trial: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
63
docs/demos/jspsych-image-button-response-demo1.html
Normal file
63
docs/demos/jspsych-image-button-response-demo1.html
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'image-button-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
63
docs/demos/jspsych-image-keyboard-response-demo1.html
Normal file
63
docs/demos/jspsych-image-keyboard-response-demo1.html
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'image-keyboard-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
63
docs/demos/jspsych-image-keyboard-response-demo2.html
Normal file
63
docs/demos/jspsych-image-keyboard-response-demo2.html
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-keyboard-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'image-keyboard-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/happy_face_1.jpg',
|
||||||
|
choices: jsPsych.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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
62
docs/demos/jspsych-image-slider-response-demo1.html
Normal file
62
docs/demos/jspsych-image-slider-response-demo1.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-slider-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'image-slider-response',
|
||||||
|
stimulus: 'https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
67
docs/demos/jspsych-instructions-demo-1.html
Normal file
67
docs/demos/jspsych-instructions-demo-1.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Required for each demo -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
<!-- UPDATE depending on current demo -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var demo_trial = {
|
||||||
|
type: 'instructions',
|
||||||
|
pages: [
|
||||||
|
'Welcome to the experiment. Click next to begin.',
|
||||||
|
'This is the second page of instructions.',
|
||||||
|
'This is the final page.'
|
||||||
|
],
|
||||||
|
show_clickable_nav: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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 demo_loop = {
|
||||||
|
timeline: [demo_trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
68
docs/demos/jspsych-instructions-demo-2.html
Normal file
68
docs/demos/jspsych-instructions-demo-2.html
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Required for each demo -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
<!-- UPDATE depending on current demo -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var demo_trial = {
|
||||||
|
type: 'instructions',
|
||||||
|
pages: [
|
||||||
|
'Welcome to the experiment. Click next to begin.',
|
||||||
|
'You will be looking at images of arrows: ' +
|
||||||
|
'<br>' +
|
||||||
|
'<img src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/examples/img/con2.png"></img>'
|
||||||
|
],
|
||||||
|
show_clickable_nav: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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 demo_loop = {
|
||||||
|
timeline: [demo_trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
69
docs/demos/jspsych-instructions-demo-3.html
Normal file
69
docs/demos/jspsych-instructions-demo-3.html
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<!-- Required for each demo -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
<!-- UPDATE depending on current demo -->
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-instructions.js"></script>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload_trial = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var demo_trial = {
|
||||||
|
type: 'instructions',
|
||||||
|
pages: [
|
||||||
|
'Welcome to the experiment. Click next to begin.',
|
||||||
|
'This is the second page of instructions.',
|
||||||
|
'This is the final page.'
|
||||||
|
],
|
||||||
|
button_label_next: "Continue",
|
||||||
|
button_label_previous: "Return to the dark side",
|
||||||
|
show_clickable_nav: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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 demo_loop = {
|
||||||
|
timeline: [demo_trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
57
docs/demos/jspsych-maxdiff-demo1.html
Normal file
57
docs/demos/jspsych-maxdiff-demo1.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-maxdiff.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'maxdiff',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
76
docs/demos/jspsych-preload-demo1.html
Normal file
76
docs/demos/jspsych-preload-demo1.html
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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']
|
||||||
|
};
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
auto_preload: true
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_1 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
stimulus: 'img/happy_face_1.jpg',
|
||||||
|
choices: ['Next']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_2 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
stimulus: 'img/happy_face_2.jpg',
|
||||||
|
choices: ['Next']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_3 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
67
docs/demos/jspsych-preload-demo2.html
Normal file
67
docs/demos/jspsych-preload-demo2.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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']
|
||||||
|
};
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
images: ['img/sad_face_1.jpg']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_1 = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
109
docs/demos/jspsych-preload-demo3.html
Normal file
109
docs/demos/jspsych-preload-demo3.html
Normal file
@ -0,0 +1,109 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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']
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var trial_1 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
stimulus: 'img/happy_face_1.jpg',
|
||||||
|
choices: ['Next']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_2 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
stimulus: 'img/happy_face_2.jpg',
|
||||||
|
choices: ['Next']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_3 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
stimulus: 'img/happy_face_3.jpg',
|
||||||
|
choices: ['Next']
|
||||||
|
}
|
||||||
|
|
||||||
|
var block_1 = {
|
||||||
|
timeline: [trial_1, trial_2, trial_3]
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_4 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
stimulus: 'img/sad_face_1.jpg',
|
||||||
|
choices: ['Next']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_5 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
stimulus: 'img/sad_face_2.jpg',
|
||||||
|
choices: ['Next']
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_6 = {
|
||||||
|
type: 'image-button-response',
|
||||||
|
stimulus: 'img/sad_face_3.jpg',
|
||||||
|
choices: ['Next']
|
||||||
|
}
|
||||||
|
|
||||||
|
var block_2 = {
|
||||||
|
timeline: [trial_4, trial_5, trial_6]
|
||||||
|
}
|
||||||
|
|
||||||
|
var preload_block_1 = {
|
||||||
|
type: 'preload',
|
||||||
|
trials: [block_1]
|
||||||
|
}
|
||||||
|
|
||||||
|
var preload_block_2 = {
|
||||||
|
type: 'preload',
|
||||||
|
trials: [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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
59
docs/demos/jspsych-preload-demo4.html
Normal file
59
docs/demos/jspsych-preload-demo4.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-image-button-response.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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']
|
||||||
|
};
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
56
docs/demos/jspsych-rdk-demo1.html
Normal file
56
docs/demos/jspsych-rdk-demo1.html
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: "rdk",
|
||||||
|
coherent_direction: 0,
|
||||||
|
correct_choice: "p"
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
61
docs/demos/jspsych-rdk-demo2.html
Normal file
61
docs/demos/jspsych-rdk-demo2.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: "rdk",
|
||||||
|
post_trial_gap: 0,
|
||||||
|
number_of_dots: 200,
|
||||||
|
RDK_type: 3,
|
||||||
|
choices: ["a", "l"],
|
||||||
|
correct_choice: "a",
|
||||||
|
coherent_direction: 180,
|
||||||
|
trial_duration: 1000
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
61
docs/demos/jspsych-rdk-demo3.html
Normal file
61
docs/demos/jspsych-rdk-demo3.html
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-rdk.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: "rdk",
|
||||||
|
number_of_apertures: 3, //This needs to be set if more than one aperture
|
||||||
|
trial_duration: 10000,
|
||||||
|
correct_choice: "a",
|
||||||
|
RDK_type: 3, //Applied to all apertures if only one value
|
||||||
|
aperture_width: 200, //Applied to all apertures if only one value
|
||||||
|
number_of_dots: [50, 200, 100], //Different parameter for each aperture. Array length must equal number_of_apertures
|
||||||
|
aperture_center_x: [(window.innerWidth/2)-300,window.innerWidth/2,(window.innerWidth/2)+300] //Separate the apertures on the screen (window.innerWidth/2 is the middle of the screen)
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
76
docs/demos/jspsych-reconstruction-demo1.html
Normal file
76
docs/demos/jspsych-reconstruction-demo1.html
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-keyboard-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-reconstruction.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'html-keyboard-response',
|
||||||
|
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: 'reconstruction',
|
||||||
|
stim_function: sample_function,
|
||||||
|
starting_value: 0.5,
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [match_item, reconstruction, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
58
docs/demos/jspsych-resize-demo1.html
Normal file
58
docs/demos/jspsych-resize-demo1.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-resize.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'resize',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
66
docs/demos/jspsych-same-different-html-demo1.html
Normal file
66
docs/demos/jspsych-same-different-html-demo1.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-same-different-html.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'same-different-html',
|
||||||
|
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_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
75
docs/demos/jspsych-same-different-image-demo1.html
Normal file
75
docs/demos/jspsych-same-different-image-demo1.html
Normal file
@ -0,0 +1,75 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-same-different-image.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
images: [
|
||||||
|
'img/happy_face_1.jpg',
|
||||||
|
'img/sad_face_3.jpg'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'same-different-image',
|
||||||
|
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_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
91
docs/demos/jspsych-serial-reaction-time-demo1.html
Normal file
91
docs/demos/jspsych-serial-reaction-time-demo1.html
Normal file
@ -0,0 +1,91 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'html-button-response',
|
||||||
|
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: 'serial-reaction-time',
|
||||||
|
grid: grid,
|
||||||
|
choices: response_map,
|
||||||
|
target: [0,0]
|
||||||
|
}
|
||||||
|
var trial_2 = {
|
||||||
|
type: 'serial-reaction-time',
|
||||||
|
grid: grid,
|
||||||
|
choices: response_map,
|
||||||
|
target: [0,1]
|
||||||
|
}
|
||||||
|
var trial_3 = {
|
||||||
|
type: 'serial-reaction-time',
|
||||||
|
grid: grid,
|
||||||
|
choices: response_map,
|
||||||
|
target: [0,2]
|
||||||
|
}
|
||||||
|
var trial_4 = {
|
||||||
|
type: 'serial-reaction-time',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
101
docs/demos/jspsych-serial-reaction-time-demo2.html
Normal file
101
docs/demos/jspsych-serial-reaction-time-demo2.html
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'html-button-response',
|
||||||
|
stimulus: '<p>Use the R, I, V, and M keys to respond.</p>',
|
||||||
|
choices: ['Continue']
|
||||||
|
}
|
||||||
|
|
||||||
|
var grid = [
|
||||||
|
[1,1],
|
||||||
|
[1,1]
|
||||||
|
]
|
||||||
|
|
||||||
|
var response_map = [
|
||||||
|
['r','i'],
|
||||||
|
['v','m']
|
||||||
|
]
|
||||||
|
|
||||||
|
var trial_1 = {
|
||||||
|
type: 'serial-reaction-time',
|
||||||
|
grid: grid,
|
||||||
|
choices: response_map,
|
||||||
|
target: [0,0],
|
||||||
|
show_response_feedback: true,
|
||||||
|
feedback_duration: 500
|
||||||
|
}
|
||||||
|
var trial_2 = {
|
||||||
|
type: 'serial-reaction-time',
|
||||||
|
grid: grid,
|
||||||
|
choices: response_map,
|
||||||
|
target: [0,1],
|
||||||
|
show_response_feedback: true,
|
||||||
|
feedback_duration: 500
|
||||||
|
}
|
||||||
|
var trial_3 = {
|
||||||
|
type: 'serial-reaction-time',
|
||||||
|
grid: grid,
|
||||||
|
choices: response_map,
|
||||||
|
target: [1,1],
|
||||||
|
show_response_feedback: true,
|
||||||
|
feedback_duration: 500
|
||||||
|
}
|
||||||
|
var trial_4 = {
|
||||||
|
type: 'serial-reaction-time',
|
||||||
|
grid: grid,
|
||||||
|
choices: response_map,
|
||||||
|
target: [1,0],
|
||||||
|
show_response_feedback: true,
|
||||||
|
feedback_duration: 500
|
||||||
|
}
|
||||||
|
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
77
docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
Normal file
77
docs/demos/jspsych-serial-reaction-time-mouse-demo1.html
Normal file
@ -0,0 +1,77 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time-mouse.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'serial-reaction-time-mouse',
|
||||||
|
grid: grid,
|
||||||
|
target: [0,0]
|
||||||
|
}
|
||||||
|
var trial_2 = {
|
||||||
|
type: 'serial-reaction-time-mouse',
|
||||||
|
grid: grid,
|
||||||
|
target: [0,1]
|
||||||
|
}
|
||||||
|
var trial_3 = {
|
||||||
|
type: 'serial-reaction-time-mouse',
|
||||||
|
grid: grid,
|
||||||
|
target: [0,2]
|
||||||
|
}
|
||||||
|
var trial_4 = {
|
||||||
|
type: 'serial-reaction-time-mouse',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
83
docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
Normal file
83
docs/demos/jspsych-serial-reaction-time-mouse-demo2.html
Normal file
@ -0,0 +1,83 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-serial-reaction-time-mouse.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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,0,1],
|
||||||
|
[0,0,0],
|
||||||
|
[1,0,1]
|
||||||
|
]
|
||||||
|
|
||||||
|
var trial_1 = {
|
||||||
|
type: 'serial-reaction-time-mouse',
|
||||||
|
grid: grid,
|
||||||
|
target: [0,0],
|
||||||
|
target_color: '#006738'
|
||||||
|
}
|
||||||
|
var trial_2 = {
|
||||||
|
type: 'serial-reaction-time-mouse',
|
||||||
|
grid: grid,
|
||||||
|
target: [0,2],
|
||||||
|
target_color: '#F78F1E'
|
||||||
|
}
|
||||||
|
var trial_3 = {
|
||||||
|
type: 'serial-reaction-time-mouse',
|
||||||
|
grid: grid,
|
||||||
|
target: [2,2],
|
||||||
|
target_color: '#13B24B'
|
||||||
|
}
|
||||||
|
var trial_4 = {
|
||||||
|
type: 'serial-reaction-time-mouse',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
57
docs/demos/jspsych-survey-html-form-demo1.html
Normal file
57
docs/demos/jspsych-survey-html-form-demo1.html
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-html-form.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-html-form',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
58
docs/demos/jspsych-survey-html-form-demo2.html
Normal file
58
docs/demos/jspsych-survey-html-form-demo2.html
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-html-form.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-html-form',
|
||||||
|
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_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
67
docs/demos/jspsych-survey-likert-demo1.html
Normal file
67
docs/demos/jspsych-survey-likert-demo1.html
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-likert.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-likert',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
69
docs/demos/jspsych-survey-likert-demo2.html
Normal file
69
docs/demos/jspsych-survey-likert-demo2.html
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-likert.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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 likert_scale = [
|
||||||
|
"Strongly Disagree",
|
||||||
|
"Disagree",
|
||||||
|
"Neutral",
|
||||||
|
"Agree",
|
||||||
|
"Strongly Agree"
|
||||||
|
];
|
||||||
|
|
||||||
|
var trial = {
|
||||||
|
type: 'survey-likert',
|
||||||
|
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_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
69
docs/demos/jspsych-survey-multi-choice-demo1.html
Normal file
69
docs/demos/jspsych-survey-multi-choice-demo1.html
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-choice.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-multi-choice',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
71
docs/demos/jspsych-survey-multi-choice-demo2.html
Normal file
71
docs/demos/jspsych-survey-multi-choice-demo2.html
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-choice.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-multi-choice',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
72
docs/demos/jspsych-survey-multi-select-demo1.html
Normal file
72
docs/demos/jspsych-survey-multi-select-demo1.html
Normal file
@ -0,0 +1,72 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-multi-select.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-multi-select',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
59
docs/demos/jspsych-survey-text-demo1.html
Normal file
59
docs/demos/jspsych-survey-text-demo1.html
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-text',
|
||||||
|
questions: [
|
||||||
|
{prompt: 'How old are you?'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
60
docs/demos/jspsych-survey-text-demo2.html
Normal file
60
docs/demos/jspsych-survey-text-demo2.html
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-text',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
60
docs/demos/jspsych-survey-text-demo3.html
Normal file
60
docs/demos/jspsych-survey-text-demo3.html
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-text',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
66
docs/demos/jspsych-survey-text-demo4.html
Normal file
66
docs/demos/jspsych-survey-text-demo4.html
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-survey-text.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<link
|
||||||
|
rel="stylesheet"
|
||||||
|
href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css"
|
||||||
|
/>
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
images: ['img/navarro_burst_03.jpg']
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'survey-text',
|
||||||
|
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.init({
|
||||||
|
timeline: [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>
|
||||||
|
</html>
|
||||||
65
docs/demos/jspsych-video-button-response-demo1.html
Normal file
65
docs/demos/jspsych-video-button-response-demo1.html
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-video-button-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
video: 'video/fish.mp4'
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'video-button-response',
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
64
docs/demos/jspsych-video-keyboard-response-demo1.html
Normal file
64
docs/demos/jspsych-video-keyboard-response-demo1.html
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/jspsych.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-preload.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-html-button-response.js"></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/plugins/jspsych-video-keyboard-response.js"></script>
|
||||||
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jspsych/jsPsych@6.3.1/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var preload = {
|
||||||
|
type: 'preload',
|
||||||
|
video: 'video/fish.mp4'
|
||||||
|
}
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: 'html-button-response',
|
||||||
|
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: 'video-keyboard-response',
|
||||||
|
stimulus: [
|
||||||
|
'video/fish.mp4'
|
||||||
|
],
|
||||||
|
choices: jsPsych.NO_KEYS,
|
||||||
|
trial_ends_after_video: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.init({
|
||||||
|
timeline: [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>
|
||||||
|
|
||||||
|
</html>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user