how to add some extra code

HI I need to add some extra code to my outputted storyline files - I am just outputting the web version not LMS.

I have found some code to fix the issue on the iPad with the double tap zoom here:

http://stackoverflow.com/questions/3103842/safari-ipad-prevent-zoom-on-double-tap

but I am not sure where and how to add it to the files - any coders out there able to help?

8 Replies
Dave Cox

If you just want to add the meta tag, you can add it in the story.html file inside of the <head> tag. Add it right after any existing meta tags.

The other code in your example talks about adding jquery. Although this can be done, it isn't for the faint of heart, and I really don't recommend that you attempt it without a really good understanding of HTML, javascript and jquery. 

Lizzie Wakefield

thanks for the reply Dave - my coding experience is very limited. I have no idea how to go about doing this.

My problem is though that the double tap to zoom on the ipad is breaking the storyline files so that users cant complete the course, and I have one that has to be working on the iPad that is meant to go out next week - looking for a fix to hold it together

Dave Cox

Hi Lizzie,

I understand your dilemma. I would try the meta tag fix first, and see if the solves your issue. If it does, then you are golden.

Adding jquery to a published module, although it can be done, isn't a trivial undertaking.  With a lot of coding experience, even I would approach this fix very carefully, keeping in mind that the is completely unsupported by Articulate. Not only do you need to add the code listed in the examples, but you need to link to the jquery libraries. And then you don't know what other unexpected affects that this will have on the rest of your project. 

Have you looked around the forums to see if anyone else has solved this issue?

Dave Cox

Hi Lizzie,

Try using the script below. This is not jquery, but pure javascript. You should be able to add it to a javascript block on the first slide of your project rather than modifying the html file. I believe it should work from there.

If it doesn't, then you can try adding it to the script section of the story.html file, in the script section. You can use any pure text editor, to add this to the story.html file. For example, notepade works well. (Not wordpad.)

(function() {
var lastTouch = 0;
function preventZoom(e) {
var t2 = e.timeStamp;
var t1 = lastTouch || t2;
var dt = t2 - t1;
var fingers = e.touches.length;
lastTouch = t2;

if (!dt || dt >= 300 || fingers > 1) {
return;
}
resetPreventZoom();
e.preventDefault();
e.target.click();
}
function resetPreventZoom() {
lastTouch = 0;
}
document.addEventListener('touchstart', preventZoom, false);
document.addEventListener('touchmove', resetPreventZoom, false);
})();