Cross-browser compatibility: IE, Safari

261 views
Skip to first unread message

jcarpe...@g.ucla.edu

unread,
Nov 19, 2015, 1:43:14 PM11/19/15
to jsPsych
Hey Josh,

I have a question regarding the cross-browser compatibility of the jsPsych plugin, particularly with regards to IE and Safari. It appears to work just fine in Firefox and Chrome.

My experiment is at the following website: http://carpenter-experiments.co.nf/experimentMain.html

Safari: Does not allow user input, either in the survey-text plugin or even as a response to the xab plugin. In fact, it doesn't appear to allow the user to do anything keyboard-related except they can press the unspecified (any key) cont_key for the text plugin.

IE: When in fullscreen mode, the location of the plugins appear to be shifted to the top left of the screen (as opposed to the top center), which creates serious issues particularly with using the survey-likert plugin, but also looks bad in general when all the text being displayed is just sitting in the top left corner.

I am wondering if these are issues particular to my code or if they are general cross-browser compatibility limitations of jsPsych?

While it is okay if I can only run my experiment in Firefox and Chrome, it would be nice if I could port it to any of the major browsers (IE, Safari, Firefox, & Chrome).

On a side note: I am getting extremely close to completing my experiment and am very excited for it! Thank you so much for all your help getting it along this far Josh. You're awesome!

Best,
Jason

Josh de Leeuw

unread,
Nov 20, 2015, 9:19:06 AM11/20/15
to jcarpe...@g.ucla.edu, jsPsych

I am not aware of any specific issues with the library but I would not be surprised if they exist. I am traveling right now, but I can look into this next week.


--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/78fa92ca-8bde-4dd2-8d65-1aae4b89b03a%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

jcarpe...@g.ucla.edu

unread,
Nov 20, 2015, 9:35:18 AM11/20/15
to jsPsych, jcarpe...@g.ucla.edu
Interesting,

It must be my code then. I'll see if I can figure it out for now.

Enjoy traveling!

Best,
Jason

jcarpe...@g.ucla.edu

unread,
Dec 1, 2015, 1:36:34 PM12/1/15
to jsPsych, jcarpe...@g.ucla.edu
Follow-up:

I was unable to find anywhere in my code that might introduce cross-browser compatibility issues. For anyone else experiencing this issue, I implemented a way to check what browser the participant is using (function getBrowserInfo() was not my original work, it was adapted from someone else's code) and kindly ask them to switch to one that workers (Google Chrome/Mozilla Firefox). The code is below. Simply add the following to the beginning of your <script type="text/javascript">, below your <body> :

function getBrowserInfo()
{
var ua = navigator.userAgent, tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1]))
{
tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome')
{
tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
}
M = M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null)
M.splice(1, 1, tem[1]);
return { 'browser': M[0], 'version': M[1] };
}

var browserInfo = getBrowserInfo();
if(browserInfo.browser !== 'Chrome' && browserInfo.browser !== 'Firefox')
{
var wrong_browser =
{
type: 'text',
text: '<p>This experiment only has support for Google Chrome or Mozilla Firefox.</p>'
+'<p>Please reopen the experiment in one of these browsers.</p>',
};
jsPsych.init({
experiment_structure: [wrong_browser],
});
}
else // Code to run experiment
{

var trial = { ... };
experiment = [];
experiment.push(trial);

jsPsych.init({
experiment_structure: experiment
});
}

Hope this helps anyone!

--Jason
Message has been deleted

Josh de Leeuw

unread,
Sep 6, 2016, 1:41:44 PM9/6/16
to nathan...@gmail.com, jsPsych, jcarpe...@g.ucla.edu
I did not have a chance to look at this. The base HTML and CSS for jsPsych has been heavily revised for the upcoming version 6. I'll test it to see if the problem still exists. I suspect that this has to do with some different interpretation of CSS rules in IE11.

On Tue, Sep 6, 2016 at 8:54 AM <nathan...@gmail.com> wrote:
Hi Josh,

I found that I'm experiencing the same issue as Jason - when using IE (I tested with v11), entering fullscreen mode causes the text and objects to be pushed up to the top left. Jason's code is helpful, but it doesn't resolve the issue. Were you able to take a look at this back in December? If not, would you have any recommendations of where I could start? Simple Google searches aren't providing much help.

Thanks!

Nate


--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages