Display a black rectangle in the corner of the screen during trials: doesn't reach the edge? #2698
-
|
Hi! I am marking trials onsets in EEG using a photosensor attached in the corner of the screen. Thus, I need to draw a rectangle that turns to black at every trial. So far, I tried 1) retrieving the screen size using
Below is a reproducible `html` minimal example:<!-- Load jsPsych-->
<!DOCTYPE html>
<html>
<head>
<!--create title shown in tab; not the same as header on webpage-->
<title>RestingState</title>
<script src="https://unpkg.com/jspsych"></script>
<!--Load all necessary plugins using cdn hosted library-->
<script src="https://unpkg.com/@jspsych/plugin-html-keyboard-response"></script>
<script src="https://unpkg.com/@jspsych/plugin-html-button-response"></script>
<script src="https://unpkg.com/@jspsych/plugin-fullscreen"></script>
<script src="https://unpkg.com/@jspsych/plugin-survey-text"></script>
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-keyboard-response"></script>
<script src="https://unpkg.com/@jspsych/plugin-canvas-button-response"></script>
<script src="https://unpkg.com/@jspsych/plugin-preload"></script>
<script src="https://unpkg.com/@jspsych/plugin-browser-check"></script>
<!-- Applying default style here -->
<link
href="https://unpkg.com/[email protected]/css/jspsych.css"
rel="stylesheet"
type="text/css"
/>
<style>
/* set canvas to be full screen */
.trigger {
margin: 0%;
max-width: 100%;
}
/*Hide scrollbar while keeping it functional */
body {
overflow-y: scroll;
}
Body::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body></body>
<script>
/* ----------------- Initialize experiment ----------------- */
var timeline = []
var jsPsych = initJsPsych({})
// Enter fullscreen mode
timeline.push({
type: jsPsychFullscreen,
fullscreen_mode: true,
delay_after: 0,
})
// Retrieve and save browser info
var screen_width = 0
var screen_height = 0
var browser_check = {
type: jsPsychBrowserCheck,
data: {
screen: "browser_info",
},
on_finish: function () {
data = jsPsych.data
.get()
.filter({ screen: "browser_info" })
.values()[0]
screen_height = data["height"]
screen_width = data["width"]
for (var key in data) {
if (
[
"vsync_rate",
"os",
"mobile",
"browser",
"browser_version",
].includes(key)
) {
jsPsych.data.addProperties({
[key]: data[key],
})
}
}
jsPsych.data.addProperties()
},
}
timeline.push(browser_check)
var test1 = {
type: jsPsychCanvasKeyboardResponse,
stimulus: function (canvas, color = "black") {
var ctx = canvas.getContext("2d")
ctx.beginPath()
ctx.fillRect(0, 0, 100, 100)
ctx.fillStyle = color
ctx.fill()
},
canvas_size: function () {
return [screen_height / 2, screen_width]
},
prompt: "<p style='font-size:50px;'>Demo with Keyboard</p>",
choices: ["s"],
trial_duration: 1000,
css_classes: ["fixation"],
}
timeline.push(test1)
jsPsych.run(timeline)
</script>
</html>Also, is it possible to draw on the canvas in other modules? Such as Image-keyboard-response? Because ultimately I'd need to add this rectangle overlay for trials that display images... Thanks a lot for any pointer! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
The not-quite-on-the-edge problem might be due to the jspsych.css default of making the display 95% of the width of the screen. (This default was to fix a legacy Internet Explorer bug, and we are planning to switch to a more intuitive 100% in version 8.) You can override this by setting a CSS rule: <head>
<style>
.jspsych-content { max-width: 100%; }
</style>
</head>For placing this in the upper-corner regardless of trial type, here's an idea but it is a bit hacky and I haven't tested it. In the const trial = {
type: jsPsychWhatever,
on_load: () => {
const html = `<div id="black-box" style="position: absolute; top:0; left:0; width:50px; height:50px; background-color: black;"></div>`
document.querySelector('body').insertAdjacentHTML('beforeend', html);
},
on_finish: () => {
document.querySelector('#black-box').remove();
}
} |
Beta Was this translation helpful? Give feedback.
-
|
Works like charm, that's awesome, thanks so much |
Beta Was this translation helpful? Give feedback.
Hi @DominiqueMakowski
The not-quite-on-the-edge problem might be due to the jspsych.css default of making the display 95% of the width of the screen. (This default was to fix a legacy Internet Explorer bug, and we are planning to switch to a more intuitive 100% in version 8.) You can override this by setting a CSS rule:
For placing this in the upper-corner regardless of trial type, here's an idea but it is a bit hacky and I haven't tested it.
In the
on_loadmethod for any trial you can add a<div>element withposition: absolute; top: 0; left: 0. Then you can clear this in theon_finishmethod for the trial.