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 example

Browse Source
This commit is contained in:
Josh de Leeuw 2022-05-28 14:31:44 -04:00
parent 7466fc6ee2
commit a3b7d3453e
1 changed files with 52 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
examples/extension-record-video.html Normal file
View File

@ -0,0 +1,52 @@
<!DOCTYPE html>
<html>
<head>
<script src="../packages/jspsych/dist/index.browser.js"></script>
<script src="../packages/plugin-html-keyboard-response/dist/index.browser.js"></script>
<script src="../packages/plugin-initialize-camera/dist/index.browser.js"></script>
<script src="../packages/extension-record-video/dist/index.browser.js"></script>
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css" />
</head>
<body></body>
<script>
const jsPsych = initJsPsych({
extensions: [
{type: jsPsychExtensionRecordVideo}
]
});
const initCamera = {
type: jsPsychInitializeCamera
}
const trials = [
{x:25, y:25},
{x:25, y:75},
{x:75, y:25},
{x:75, y:75}
];
const trial = {
timeline: [{
type: jsPsychHtmlKeyboardResponse,
stimulus: ()=>{
let html = `<div style="width:100vw; height:100vh; position: relative;">
<div style="width:15px; height:15px; border-radius:15px; background-color: #000; position:absolute; top: ${jsPsych.timelineVariable('y')}%; left: ${jsPsych.timelineVariable('x')}%;"></div>
</div>`;
return html;
},
choices: "NO_KEYS",
trial_duration: 500,
extensions: [{
type: jsPsychExtensionRecordVideo
}]
}],
timeline_variables: trials,
randomize_order: true
}
jsPsych.run([initCamera, trial]);
</script>
</html>