Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Flip Book using HTML5 & Javascript

Hi...

I am attempting to present images in a flip book within a version 8 survey. It uses HTML5 and Javascript. I can get the flip book working in a HTML page on my server but can't seem to get it working on a page with a sawtooth survey.

Here is the script pasted into the page header...

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://www.surveyhelp.com.au/st8/PageTurn/graphics/turn.min.js"></script>
<style type="text/css">
body{
    background:#ccc;
}
#magazine{
    width:1152px;
    height:752px;
}
#magazine .turn-page{
    background-color:#ccc;
    background-size:100% 100%;
}
</style>


And here is the script posted in the body of the page....

<div id="magazine">
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img1.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img2.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img3.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img4.jpg');"></div>    
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img5.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img6.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img7.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img8.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img9.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img10.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img11.jpg');"></div>
    <div style="background-image:url('http://www.surveyhelp.com.au/st8/PageTurn/graphics/img12.jpg');"></div>
</div>
<script type="text/javascript">

$(window).ready(function() {
$('#magazine').turn({
    display: 'double',
    acceleration: true,
    gradients: !$.isTouch,
    elevation:50,
when: {
    turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});

$(window).bind('keydown', function(e){

if (e.keyCode==37)
    $('#magazine').turn('previous');
    else if (e.keyCode==39)
    $('#magazine').turn('next');
            
});
</script>


So I am wondering why the above script works in a HTML page but not in a survey page of a Sawtooth survey? I don't have much knowledge of Javascript unfortunately - just enough to copy and paste some-one elses work. Are the js libraries not being called properly within Sawtooth or something?

Link to working example in page on server
http://www.surveyhelp.com.au/st8/pt/PageTurn.html


Link to survey where flip book doesn't work (but exactly same script)
http://www.surveyhelp.com.au/st8/PageTurn/cgi-bin/ciwweb.pl?studyname=PageTurn&pw=test


Many thanks for any suggestions
Russell
asked Jun 12, 2013 by rapizel Bronze (1,420 points)
Did you get sucess on this?
No not yet... This will work on ipads, where FLASH alternatives won't. So hopefully I can get it going.

2 Answers

+3 votes
Can you check using jQuery.noConflict() function. It suppose be not working due to this. It happens with me lot of time. Use code like ...

jQuery.noConflict();
jQuery(window).ready(function() {
jQuery('#magazine').turn({

You need to replace $ with jQuery and run.
answered Jun 14, 2013 by Rajesh Rana Gold (23,530 points)
How to add a timer
+2 votes
Try FlexPaper if you can't get it to work,  its a jQuery plugin for creating HTML5 flip books from PDF docs

http://flexpaper.devaldi.com
answered Oct 1, 2013 by Don Man
...