Develop Reference

QRTEngine - Hiding Init and Exit questions

I am using QRTEngine in qualtrics. I have a problem with hiding the Init and the Exit part, here is what I have tried to do so far:
Init:
QRTE.Init({
// should correspond with Embedded Data field names
blockData: ‘${e://Field/QRTE_blockData}’,
idData: ‘${e://Field/QRTE_idData}’,
columnData: ‘${e://Field/QRTE_columns}’,
exitQuestions: ‘${e://Field/QRTE_exitQuestions}’,
exitItemTag: ‘ExitQ’, // DO NOT FORGET TO CHANGE FOR NEW BLOCKS
blockId: ‘Deafult Question Block’, // DO NOT FORGET TO CHANGE FOR NEW BLOCKS
onLoadFn: function() {
// set trial configuration for the screens
QRTE.setConfig(‘Smiley’, ‘duration’, 2000);
QRTE.setConfig(‘StroopItem’, ‘duration’, 6000);
QRTE.setConfig(‘StroopItem’, ‘allowable’, ‘xm’);
QRTE.setConfig(‘StroopItem’, ‘EndAction’, ‘TERMINATE’);
// save trial configurations for later analysis
QRTE.setTrialData(‘StimulusSimely’, ‘${lm://Field/1}’);
QRTE.setTrialData(‘Piconright’, ‘${lm://Field/2}’);
QRTE.setTrialData(‘Piconleft’, ‘${lm://Field/3}’);
this.questionContainer.style.display = ‘none';
},
interTrialDelay: [1000] // set interTrialDelay
});
onLoadFn: (function()
{
this.questionContainer.style.display = ‘none';
});
Exit:
QRTE.Exit();
Qualtrics.SurveyEngine.addOnload(function()
{
this.questionContainer.style.display = ‘none';
});
My goal would be to prevent the engine from displaying these questions.
I have tried to set the intertrialdelay to 0, but in that case the whole experiment became a mess.

Wistia Javascript API - set video foam true and hide social buttons

Here is my code,
<div id="wistia_bqur1fvyag" class="wistia_embed" style="width:420px;height:234px;"> </div>
<script charset="ISO-8859-1" src="//fast.wistia.net/assets/external/E-v1.js"></script>
<script>
wistiaEmbed = Wistia.embed("bqur1fvyag", {
plugin: {
"socialbar-v1": {
buttons: "",
videoFoam: true
}
}
});
</script>
When i run this code, it shows black bar on left and right side.
I put videoFoam: true but, it didn't work.
Can anyone help me to remove black bar, still am i right? or can i use different api?
Thanks in advance.

I did it via the embed code directly, from the page linked below, using the two parameters to disable the social bar and enable videoFoam.
http://wistia.com/doc/iframe-embed-options
?videoFoam=true&plugin%5Bsocialbar-v1%5D%5Bon%5D=false
For what you have above, videoFoam is not part of the plugin but a standard parameter, so I'd try the following:
wistiaEmbed = Wistia.embed("bqur1fvyag", {
videoFoam: true,
plugin: {
"socialbar-v1": {
on: false
}
}
});

Jssor Slider - Text hyper link to a particular slide?

I am using Jssor Slider to display multiple images.
I have a separate thumbnail section which when clicked, should show the larger image in the slider.
Jssor Slider has an API to do this:
jssor_slider1.$GoTo(2);
How ever, I don't understand how to run this from a hyperlink.
I have tried doing onClick="jssor_slider1.$GoTo(2);" but this shows up an error in the console that "jssor_slider1" is undefined.
<script src="js/slider-master/js/jquery-1.9.1.min.js"></script>
<script src="js/slider-master/js/jssor.slider.mini.js"></script>
<script>
jQuery(document).ready(function($) {
var options = {
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2
}
};
var jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>
How would be correct way of doing this be? Thank you.

Make the jssor_slider1 variable global, you can access the instance anywhere.
Also, jssor_slider1.$PlayTo(2); is resonable as well.
<script src="js/slider-master/js/jquery-1.9.1.min.js"></script>
<script src="js/slider-master/js/jssor.slider.mini.js"></script>
<script>
var jssor_slider1;
jQuery(document).ready(function($) {
var options = {
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$,
$ChanceToShow: 2
}
};
jssor_slider1 = new $JssorSlider$('slider1_container', options);
});
</script>

Why can't I get destroy() call for skrollr to work?

Hello I am trying to use skrollr on a responsive site, and I just want to turn it off for mobile and then back on for table / desktop. I keep getting this error:
Uncaught TypeError: Object # has no method 'destroy'. A point in the right direction would be helpful as I wasn't able to find an example that is using the destroy call for skrollr.
Below is the code that I am using:
var s = skrollr.init(
{
forceHeight: false,
constants:
{
box: '50p'
}
});
// set breakpoints
$(window).setBreakpoints(
{
// use only largest available vs use all available
distinct: true,
// array of widths in pixels where breakpoints
breakpoints:
[
480,
768
]
});
$(window).bind('enterBreakpoint480',function()
{
console.log("this is now 480");
s.destroy();
});
$(window).bind('enterBreakpoint768',function()
{
console.log("this is now 768");
s = skrollr.get();
});

Custom transition timing in impress.js

I'm trying to create different transition times for each slide in an impress.js presentation.
I found the code below in a book about impress.js. But checking it on JSLint it shows errors. I am not good enough with javascript to correct this myself. Anybody willing to help me out?
Edit: I need a solution without jQuery. This is because impress.js allows you to navigate through the presentation with spacebar and arrow keys and I don't want to lose that functionality.
I found that when navigating with the keys (while jQuery is timing the auto-advance) it does not respect the position where you navigated to, but forces you away from where you are. I would like instead that if you navigate to a slide (position) the auto-advance starts running the custom set time for that particular slide and advances to the next slide when the set amount of time has passed. This would be an awesome addition to impress.js. I hope this can be done. Thanks for your effort!
JSFiddle: http://jsfiddle.net/5sSE5/8/ (script added at the end of impress.js)
var step_transitions = [
{ "slide": 1, "duration": 2000 },
{ "slide": 2, "duration": 4000 },
{ "slide": 3, "duration": 1000 }
];
$(document).ready(function () {
var time_frame = 0;
step_transitions.filter(function (steps) {
time_frame = time_frame + steps.duration;
setTimeout(function () {
api.goto(steps.slide);
}); time_frame;
});
});
Addition: below script respects keyboard navigation, but all the slides have the same transition time.
var impress = impress();
impress.init();
document.addEventListener('impress:stepenter', function(e){
if (typeof timing !== 'undefined') clearInterval(timing);
var duration = (e.target.getAttribute('data-transition-duration') ? e.target.getAttribute('data-transition-duration') : 10000); // in ms
timing = setInterval(impress.next, duration);
});

There is an error in your code in the setTimeout:
setTimeout(function () {
api.goto(steps.slide);
}, time_frame);
It seems that the time_frame variable should be second argument of the setTimeout method.
Update
You also forgot to initialize the api variable before using it:
var api = impress();
You also need the jQuery library to be able to use the $ function.
See updated fiddle
Update 2
I reworked your code to make it continue from the first slide after the last is reached:
var step_transitions = [
{ "slide": 0, "duration": 3000 },
{ "slide": 1, "duration": 4000 },
{ "slide": 2, "duration": 2000 }
];
$(document).ready(function () {
var time_frame = 0,
api = impress(),
current_step_index = 0,
do_transition = function (){
var step = step_transitions[current_step_index];
api.goto(step.slide);
current_step_index++;
if(current_step_index >= step_transitions.length){
current_step_index = 0;
}
setTimeout(do_transition, step.duration);
};
//initial run
do_transition();
});
Note, that slides must start from 0, not 1.
See updated fiddle