0

I have a book designed in Adobe Indesign. The book when printed has questions and the answers are there in flaps. Kids will lift the flaps up, right, left or bottom direction to view the answer.

What I want is to have this exact feature replicated in the digital output and make an ePub so that we can run it in iPad. So my questions are:

a) How to put that flip kind of animation in Indesign
b) If I develop the entire thing in HTML5 and CSS2 with Jquery then how to compile that. I tried with ePub Maker after creating the necessary animation and that flip effect in HTML, css and jquery. but after compiling it shows error when trying to run in iPad.

Thanks is advance

soumyajit banerjee
  • 9
  • 1
  • 4
  • What's the error? And are you creating an epub 2.0 or 3.0 document? – Freney Oct 25 '12 at 10:27
  • Well am trying to create an ePub 2.0 document. – soumyajit banerjee Oct 25 '12 at 11:52
  • In that case it's a bit pickier about JS support. EPub 3.0 I hear is more robust in this area, and iPad supports it (generally speaking). Can you add details of the error, or even some code? Or you might like to compare it to working examples, such as this: http://blog.threepress.org/2010/06/24/javascript-and-interactivity-in-ibooks/ – Freney Oct 25 '12 at 12:26
  • Hi Freney,Thanks for the replies, honestly am new in this epub making and have deleted the file to show u the error. Anyways am explaining what I want to do exactly.The requirement is that there is a children book that have small question and when kids lifts up the flap the answer of the question is reveled (all this is in printed version). Now the requirement is this same functionality will go in digital form in ePub output. I tried creating the same with CSS Modal window but not working :( – soumyajit banerjee Oct 25 '12 at 13:05
  • It would be very helpful if you can send me an eg where HTML, CSS and JS is being used to make modal or something sort of that. – soumyajit banerjee Oct 25 '12 at 13:14
  • Try the example linked above. – Freney Oct 25 '12 at 19:25

2 Answers2

1

If your intent is to deliver animated content to iPads, then try using Apple's iBooks Author. It's a free download and quite straightforward. I don't know if it does exactly the sort of animation you're trying to implement, but if not, perhaps there's an alternate animation that might work as well.

Professor Walrus
  • 11
  • 1
0

I solved it by using jquery show/hide method.

$(document).ready(function() { $('#q1, #ans1, #q2, #ans2, #modal').hide();

$('#btn1').click(function(){
    $('#q1, #modal').show();
    $('#btn1, #btn2').hide();
});

$('#q1').click(function(){
    $('#ans1').show();
    $('#q1, #btn1, btn2').hide();
});

$('#ans1').click(function(){
    $('#ans1, #modal').hide();
    $('#btn1, #btn2').show();
});


$('#btn2').click(function(){
    $('#q2, #modal').show();
    $('#btn1, #btn2').hide();
});

$('#q2').click(function(){
    $('#ans2').show();
    $('#q2, #btn1, #btn2').hide();      
});

$('#ans2').click(function(){
    $('#ans2, #modal').hide();
    $('#btn1, #btn2').show();
});

});

soumyajit banerjee
  • 9
  • 1
  • 4