mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-12 08:38:11 +00:00
Merge pull request #1983 from kurokida/docs-demos
Add live demos to docs pages for canvas-keyboard-response, canvas-slider-response, call-function, categorize-animation
This commit is contained in:
Becky Gilbert
GitHub
commit
97fe654e0e
59
docs/plugins/demos/jspsych-call-function-demo1.html
Normal file
59
docs/plugins/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/plugins/demos/jspsych-call-function-demo2.html
Normal file
63
docs/plugins/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>
|
||||
71
docs/plugins/demos/jspsych-call-function-demo3.html
Normal file
71
docs/plugins/demos/jspsych-call-function-demo3.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-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){
|
||||
// can perform async operations here like
|
||||
// creating an XMLHttpRequest to communicate
|
||||
// with a server
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var response_data = xhttp.responseText;
|
||||
// line below is what causes jsPsych to
|
||||
// continue to next trial. response_data
|
||||
// will be stored in jsPsych data object.
|
||||
done(response_data);
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "path_to_server_script.php", true);
|
||||
xhttp.send();
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
@ -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>
|
||||
@ -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 accepted</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/plugins/demos/jspsych-canvas-slider-response-demo1.html
Normal file
70
docs/plugins/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/plugins/demos/jspsych-canvas-slider-response-demo2.html
Normal file
76
docs/plugins/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/plugins/demos/jspsych-categorize-animation-demo1.html
Normal file
70
docs/plugins/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/plugins/demos/jspsych-categorize-animation-demo2.html
Normal file
74
docs/plugins/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>
|
||||
@ -24,58 +24,81 @@ value | any | The return value of the called function.
|
||||
|
||||
## Examples
|
||||
|
||||
#### Calling a simple function
|
||||
???+ example "Calling a simple function"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var myfunc = function() {
|
||||
return 'you called?';
|
||||
}
|
||||
|
||||
```javascript
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
func: myfunc
|
||||
}
|
||||
```
|
||||
|
||||
var myfunc = function() {
|
||||
return 'you called?';
|
||||
}
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-call-function-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
func: myfunc
|
||||
}
|
||||
```
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-call-function-demo1.html">Open demo in new tab</a>
|
||||
|
||||
#### Using an anonymous function to pass variables
|
||||
|
||||
```javascript
|
||||
???+ example "Using an anonymous function to pass variables"
|
||||
=== "Code"
|
||||
```javascript
|
||||
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 myfunc = function(data){
|
||||
// data contains all the experiment data so far,
|
||||
// so this function could implement code to write
|
||||
// the data to a database.
|
||||
}
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
func: function(){ myfunc(jsPsych.data.get()) }
|
||||
}
|
||||
```
|
||||
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
func: function(){ myfunc(jsPsych.data.get())}
|
||||
}
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-call-function-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
#### Async function call
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-call-function-demo2.html">Open demo in new tab</a>
|
||||
|
||||
```javascript
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
async: true,
|
||||
func: function(done){
|
||||
// can perform async operations here like
|
||||
// creating an XMLHttpRequest to communicate
|
||||
// with a server
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
???+ example "Async function call"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var trial = {
|
||||
type: 'call-function',
|
||||
async: true,
|
||||
func: function(done){
|
||||
// can perform async operations here like
|
||||
// creating an XMLHttpRequest to communicate
|
||||
// with a server
|
||||
var xhttp = new XMLHttpRequest();
|
||||
xhttp.onreadystatechange = function() {
|
||||
if (this.readyState == 4 && this.status == 200) {
|
||||
var response_data = xhttp.responseText;
|
||||
// line below is what causes jsPsych to
|
||||
// continue to next trial. response_data
|
||||
// will be stored in jsPsych data object.
|
||||
done(response_data);
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "path_to_server_script.php", true);
|
||||
xhttp.send();
|
||||
}
|
||||
};
|
||||
xhttp.open("GET", "path_to_server_script.php", true);
|
||||
xhttp.send();
|
||||
}
|
||||
}
|
||||
```
|
||||
}
|
||||
```
|
||||
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-call-function-demo3.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-call-function-demo3.html">Open demo in new tab</a>
|
||||
|
||||
|
||||
|
||||
@ -29,40 +29,56 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
|
||||
|
||||
## Examples
|
||||
|
||||
### Draw rectangle and wait for response
|
||||
???+ example "Draw rectangle and wait for response"
|
||||
=== "Code"
|
||||
```javascript
|
||||
function drawRect(c){
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.beginPath();
|
||||
ctx.rect(30, 30, 200, 50);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
```javascript
|
||||
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'}
|
||||
}
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-canvas-keyboard-response-demo1.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
var trial = {
|
||||
type: 'canvas-keyboard-response',
|
||||
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'}
|
||||
}
|
||||
```
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-canvas-keyboard-response-demo1.html">Open demo in new tab</a>
|
||||
|
||||
### Draw circle, no response allowed
|
||||
???+ example "Draw circle, no response allowed"
|
||||
=== "Code"
|
||||
```javascript
|
||||
function drawCirc(c){
|
||||
var ctx = c.getContext('2d');
|
||||
ctx.beginPath();
|
||||
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
```javascript
|
||||
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 accepted</p><p>The stimulus disappears after 3 seconds.</p>',
|
||||
choices: jsPsych.NO_KEYS,
|
||||
trial_duration: 3000,
|
||||
data: {shape: 'circle', radius: 50}
|
||||
}
|
||||
```
|
||||
|
||||
var trial = {
|
||||
type: 'canvas-keyboard-response',
|
||||
stimulus: drawCirc,
|
||||
choices: jsPsych.NO_KEYS,
|
||||
trial_duration: 1000,
|
||||
data: {shape: 'circle', radius: 50}
|
||||
}
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-canvas-keyboard-response-demo2.html" width="90%;" height="500px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-canvas-keyboard-response-demo2.html">Open demo in new tab</a>
|
||||
|
||||
@ -36,54 +36,72 @@ Note: the canvas stimulus is *not* included in the trial data because it is a fu
|
||||
|
||||
## Examples
|
||||
|
||||
### Draw two squares
|
||||
???+ example "Draw two squares"
|
||||
=== "Code"
|
||||
```javascript
|
||||
var colors = ['#FF3333', '#FF6A33'];
|
||||
|
||||
```javascript
|
||||
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);
|
||||
}
|
||||
|
||||
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 trial = {
|
||||
type: 'canvas-slider-response',
|
||||
stimulus: twoSquares,
|
||||
labels: ['0','10'],
|
||||
canvas_size: [200, 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]}
|
||||
}
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-canvas-slider-response-demo1.html" width="90%;" height="550px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
### Draw two squares with additional parameters
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-canvas-slider-response-demo1.html">Open demo in new tab</a>
|
||||
|
||||
```javascript
|
||||
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);
|
||||
}
|
||||
???+ example "Draw two squares with additional parameters"
|
||||
=== "Code"
|
||||
```javascript
|
||||
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];
|
||||
}
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-canvas-slider-response-demo2.html" width="90%;" height="550px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-canvas-slider-response-demo2.html">Open demo in new tab</a>
|
||||
|
||||
|
||||
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];
|
||||
}
|
||||
};
|
||||
```
|
||||
@ -17,7 +17,7 @@ In addition to the [parameters available in all plugins](/overview/plugins#param
|
||||
| frame_time | numeric | 500 | How long to display each image (in milliseconds). |
|
||||
| sequence_reps | numeric | 1 | How many times to show the entire sequence. |
|
||||
| allow_response_before_complete | boolean | false | If true, the subject can respond before the animation sequence finishes. |
|
||||
| prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press). |
|
||||
| prompt | string | null | This string can contain HTML markup. Any content here will be displayed below the stimulus or the end of the animation depending on the allow_response_before_complete parameter. The intention is that it can be used to provide a reminder about the action the subject is supposed to take (e.g., which key to press). |
|
||||
| feedback_duration | numeric | 2000 | How long to show the feedback (milliseconds). |
|
||||
| render_on_canvas | boolean | true | If true, the images will be drawn onto a canvas element. This prevents a blank screen (white flash) between consecutive images in some browsers, like Firefox and Edge. If false, the image will be shown via an img element, as in previous versions of jsPsych. |
|
||||
|
||||
@ -34,27 +34,53 @@ In addition to the [default data collected by all plugins](/overview/plugins#dat
|
||||
|
||||
## Examples
|
||||
|
||||
#### Basic example
|
||||
???+ example "Basic example"
|
||||
=== "Code"
|
||||
```javascript
|
||||
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',
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-categorize-animation-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
```javascript
|
||||
var animation_trial = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"],
|
||||
choices: ['p', 'q'],
|
||||
key_answer: 'q',
|
||||
};
|
||||
```
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-categorize-animation-demo1.html">Open demo in new tab</a>
|
||||
|
||||
#### Giving feedback with `%ANS%` string
|
||||
???+ example "Giving feedback with `%ANS%` string"
|
||||
=== "Code"
|
||||
```javascript
|
||||
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'
|
||||
];
|
||||
|
||||
```javascript
|
||||
var animation_trial = {
|
||||
type: 'categorize-animation',
|
||||
stimuli: ["img/face_3.jpg", "img/face_2.jpg", "img/face_4.jpg", "img/face_1.jpg"],
|
||||
choices: ['p', 'q'],
|
||||
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 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%.'
|
||||
};
|
||||
```
|
||||
=== "Demo"
|
||||
<div style="text-align:center;">
|
||||
<iframe src="../plugins/demos/jspsych-categorize-animation-demo2.html" width="90%;" height="600px;" frameBorder="0"></iframe>
|
||||
</div>
|
||||
|
||||
<a target="_blank" rel="noopener noreferrer" href="../plugins/demos/jspsych-categorize-animation-demo2.html">Open demo in new tab</a>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user