Problem with jspsych-external-html plugin #731
-
|
Hi there, I'm trying to integrate a virtual chinrest using the above plug-in. This determines the screen res & distance the participant is from the screen so that stimuli can be dynamically resized to be the same for all participants (would make a great new plug-in). Most of it works but the JQuery slider widget does not appear. I think the JQuery-UI is not loading somehow but I can't see where. There are no errors in Chrome Dev tools. Relevant code fragments of the index and virtual chin rest html page are outlined below. ` <!doctype html>
<html lang="en">
<head>
<title>Serial Dependance Gabor Rotation [jsPsych]</title>
<meta charset="UTF-8">
<script type="text/javascript" src="jspsych-6.1.0/jspsych.js"></script>
<!-- jQuery from vc -->
<script type="text/javascript" src="lib/vendors/jquery-2.2.0.min.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="lib/jspsych-pavlovia-3.0.6.js"></script>
<link href="virtual_chinrest/styles.css" rel="stylesheet" type="text/css" />
<link href="jspsych-6.1.0/css/jspsych.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jspsych-6.1.0/plugins/jspsych-html-keyboard-response.js"></script>
<script type="text/javascript" src="jspsych-6.1.0/plugins/jspsych-image-keyboard-response.js"></script>
<script type="text/javascript" src="jspsych-6.1.0/plugins/jspsych-reconstruction.js"></script>
<script type="text/javascript" src="jspsych-6.1.0/plugins/jspsych-fullscreen.js"></script>
<script type="text/javascript" src="jspsych-6.1.0/plugins/jspsych-external-html.js"></script>
<!-- css from vc -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" type="text/css">
<!-- SVG.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.3/svg.min.js"></script>
<!-- script -->
<script src="virtual_chinrest/virtual_chinrest.js"></script>
</head>
<body>
<script type='text/javascript'>
/* create timeline */
var timeline = [];
/* init connection with pavlovia.org */
var pavlovia_init = {
type: "pavlovia",
command: "init"
};
timeline.push(pavlovia_init);
/* init virtual chinrest */
var virtual_chinrest = {
type:'external-html',
url: "virtual_chinrest/virtual_chinrest.html",
cont_btn: "continue",
force_refresh: true,
execute_script: true
};
timeline.push(virtual_chinrest);` <html>
<head>
<!-- script -->
<script src="virtual_chinrest.js"></script>
<link href="jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" type="text/css">
</head>
<body class="body_vc">
<div class="jspsych-top" id="content">
<div class="body_vc" id="page-size">
<h2> Let’s find out what your monitor size is (click to go into <div onclick='fullScreen(); registerClick();' style='display:inline; cursor:pointer; color: red'><em><u>full screen mode</u></em></div>).</h2>
<p>Please use any credit card that you have available (it can also be a grocery store membership card, your drivers license, or anything that is of the same format), hold it onto the screen, and adjust the slider below to its size.</p>
<p>(If you don't have access to a real card, you can use a ruler to measure image width to 3.37inch or 85.6mm, or make your best guess!)</p>
<b style="font-style: italic">Make sure you put the card onto your screen.</b>
<br>
<div id="container">
<div id="slider"></div>
<br>
<img id="card" src="virtual_chinrest/card.png" style="width: 50%">
<br><br>
<button class="btn btn-primary" onclick="configureBlindSpot()">Click here when you are done!</button>
</div>
</div>
<div id="blind-spot" style="visibility: hidden">
<!-- <h2 class="bolded-blue">Task 2: Where’s your blind spot?</h2> -->
<h3>Now, let’s quickly test how far away you are sitting.</h3>
<p>You might know that vision tests at a doctor’s practice often involve chinrests; the doctor basically asks you to sit away from a screen in a specific distance. We do this here with a “virtual chinrest”.</p>
<h3>Instructions</h3>
<p>1. Put your finger on <b>space bar</b> on the keyboard.</p>
<p>2. Close your right eye. <em>(Tips: it might be easier to cover your right eye by hand!)</em></p>
<p>3. Using your left eye, focus on the black square.</p>
<p>4. Click the button below to start the animation of the red ball. The <b style="color: red">red ball</b> will disappear as it moves from right to left. Press the “Space” key as soon as the ball disappears from your eye sight.</p>
<br>
<p>Please do it <b>five</b> times. Keep your right eye closed and hit the “Space” key fast!</p>
<br>
<button class="btn btn-primary" id="start" onclick="animateBall()">Start</button>
<div id="svgDiv" style="width:1000px;height:200px;"></div>
Hit 'space' <div id="click" style='display:inline; color: red; font-weight: bold'>5</div> more times!
</div>
<div id="info">
<h3 id="distance"></h3>
<p id="info-p"></p>
</div>
<div>Once 5 trials are complete click the continue button below.</div>
<br>
<button class="btn btn-primary" id="continue">Continue</button>
</div>
</body>
</html> |
Beta Was this translation helpful? Give feedback.
Replies: 2 comments 4 replies
-
|
Isn't this the role of the https://www.jspsych.org/plugins/jspsych-resize/ plugin? |
Beta Was this translation helpful? Give feedback.
-
|
The resize plugin does the first part of this (scaling based on credit card size) but not the second (blind spot detection to determine how far away the participant is from the monitor). |
Beta Was this translation helpful? Give feedback.
-
|
I agree about offering a plugin version of this. It's a very cool innovation. Do you have a copy of this experiment deployed anywhere. This is a tough one to debug without interactive access to the debugger during the experiment. |
Beta Was this translation helpful? Give feedback.
-
|
No dramas. Had trouble adding you to the project so I sent an GitLab email invite to your college email. |
Beta Was this translation helpful? Give feedback.
-
|
Here is a link to the exp as well. |
Beta Was this translation helpful? Give feedback.
-
|
OK, I think what's happening here is that the I have no idea if this will work... but one option may be to copy the virtual_chinrest.js code and stick it in the Realistically the better option might be to try and create the plugin version of the virtual chinrest. I'd be happy to answer questions if you get stuck doing that. |
Beta Was this translation helpful? Give feedback.
I agree about offering a plugin version of this. It's a very cool innovation.
Do you have a copy of this experiment deployed anywhere. This is a tough one to debug without interactive access to the debugger during the experiment.