HoshinoKoji/jsPsych
1
0
Fork 0
mirror of https://github.com/jspsych/jsPsych.git synced 2025-05-10 11:10:54 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add html-video-response demos

Browse Source
This commit is contained in:
Josh de Leeuw 2022-07-12 15:28:57 -04:00
parent 704d18bb9e
commit af69fcd099
3 changed files with 137 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
docs/demos/jspsych-html-video-response-demo1.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html>
<head>
<script src="docs-demo-timeline.js"></script>
<!--<script src="https://unpkg.com/jspsych@7.2.3"></script>-->
<script src="../../packages/jspsych/dist/index.browser.js"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.1"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.0"></script>-->
<script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.0"></script>-->
<script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.2.3/css/jspsych.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych();
var init_camera = {
type: jsPsychInitializeCamera
}
var trial = {
type: jsPsychHtmlVideoResponse,
stimulus: `
<p style="font-size:48px; color:red;"> <-- </p>
<p>Turn your head in the direction of the arrow</p>`,
recording_duration: 3500,
show_done_button: false,
};
const timeline = [init_camera, trial];
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

42
docs/demos/jspsych-html-video-response-demo2.html Normal file
View File

@ -0,0 +1,42 @@
<!DOCTYPE html>
<html>
<head>
<script src="docs-demo-timeline.js"></script>
<!--<script src="https://unpkg.com/jspsych@7.2.3"></script>-->
<script src="../../packages/jspsych/dist/index.browser.js"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.1"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.0"></script>-->
<script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.0"></script>-->
<script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.2.3/css/jspsych.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych();
var init_camera = {
type: jsPsychInitializeCamera
}
var trial = {
type: jsPsychHtmlVideoResponse,
stimulus: `<p>Make a sad face</p>`,
recording_duration: 3500,
show_done_button: false,
allow_playback: true
};
const timeline = [init_camera, trial];
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>

52
docs/demos/jspsych-html-video-response-demo3.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<script src="docs-demo-timeline.js"></script>
<!--<script src="https://unpkg.com/jspsych@7.2.3"></script>-->
<script src="../../packages/jspsych/dist/index.browser.js"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.1"></script>
<script src="https://unpkg.com/@jspsych/plugin-video-button-response@1.1.1"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-html-video-response@1.0.0"></script>-->
<script src="../../packages/plugin-html-video-response/dist/index.browser.js"></script>
<!--<script src="https://unpkg.com/@jspsych/plugin-initialize-camera@1.0.0"></script>-->
<script src="../../packages/plugin-initialize-camera/dist/index.browser.js"></script>
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.2.3/css/jspsych.css">
<link rel="stylesheet" href="docs-demo.css" type="text/css">
</head>
<body></body>
<script>
var jsPsych = initJsPsych();
var init_camera = {
type: jsPsychInitializeCamera
}
var record = {
type: jsPsychHtmlVideoResponse,
stimulus: `<p>Make a sad face.</p>`,
recording_duration: 1500,
show_done_button: false,
save_video_url: true
};
var classify = {
type: jsPsychVideoButtonResponse,
stimulus: () => {
return [jsPsych.data.get().last(1).values()[0].video_url];
},
choices: ["Happy", "Sad", "Angry", "Surprised"],
prompt: "<p>What emotion is this?</p>",
}
const timeline = [init_camera, record, classify];
if (typeof jsPsych !== "undefined") {
jsPsych.run(generateDocsDemoTimeline(timeline));
} else {
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
}
</script>
</html>