I'm having a bit of trouble adding my own javascipt to an edge animate project. I created a website that has javascipt in it. I am trying to recreate it using edge animate because I was interested in using edge animate to take the site up a notch... basically I have a template of what I need the site to do with the existing javascipt I have, but I haven't gotten it to work integrated into edge animated yet.
I imported all of the images I have from the existing website into edge animate and then relabled all of the instances on the stage to reflect what I have called them in the javascript. I've tried importing my javascript file into the "scripts" section and then just linking to the source in the main html page that edge generates but the javascript doesn't work. Then I've tried putting parts of the script into the CompositionReady panel and onto the button I want clicked directly in the elements.... this works ok, except I have to change the syntax a little (not too much of a pain except when I don't think the edge animate javascript has the same functions).....I'll post below and see if someone can help me get this working either by just linking to the file directly from the html or making the script campatable in edge syntax and posting it in the appropriate element panel. Here is the seperate script from the outside javascript... show I change the syntax and put it directly on the"checkbutton" button in the elements (if so, how?) or should I just link to the file (if so, how come when I put a simple link in the header that it doesn't work: <script type="text/javascript" charset="utf-8" src="js/myscript.js"></script>
script from myscript.js:
//sym.$("pic1a").hide(); //edge animate syntax when in animate panels.... does my external js sheet have to keep this syntax?
var carArrayX = [140,140,330,460,650,765];
var carArrayXcounter = 0;
var carArrayY = [ 440,440,405,390,390,390];
var carArrayYcounter = 0;
$( '#blueCar' ).addClass( "hidden" );
var counterBox = 0;
$('#checkButton').click(function(){
if (counterBox == 0)
{
alert("Please choose an answer");
}
else if (counterBox > 1)
{
alert("Please choose only one answer");
}
else if (counterBox == 1)
{
$(this).css('background-image', 'url(button_down.png)');
$("#pic2a").unbind("click");
$("#pic2b").unbind("click");
$("#pic2c").unbind("click");
$("#pic2d").unbind("click");
$("#pic2e").unbind("click");
$("#pic2f").unbind("click");
if($("#pic2a").hasClass("hidden")){
$("#words_correct").removeClass("hidden");
$( '#pic3a' ).removeClass( "hidden" ); //correct answer
$( '#pic1a' ).addClass( "hidden" );
$( '#blueCar' ).removeClass( "hidden" );
$('#blueCar').animate({
left:carArrayX[carArrayXcounter] + "px",
top:carArrayY[carArrayYcounter] + "px"
});
carArrayXcounter ++;
carArrayYcounter ++;
var cookieXcounter = carArrayXcounter;
var cookieYcounter = carArrayYcounter;
//console.log(cookieXcounter);
//console.log(cookieYcounter);
$.cookie('mycookieX',cookieXcounter,{expires:7,path:'/'});
$.cookie('mycookieY',cookieYcounter,{expires:7,path:'/'});
console.log($.cookie('mycookieX'));
$( '#pic1b' ).addClass( "hidden" );
$( '#pic1c' ).addClass( "hidden" );
$( '#pic1d' ).addClass( "hidden" );
}
else if($("#pic2b").hasClass("hidden")){
$("#words_wrong").removeClass("hidden");
$( '#pic4b' ).removeClass("hidden");//incorrect answer
$( '#pic1b' ).addClass( "hidden" );
$( '#pic1a' ).addClass( "hidden" );
$( '#pic1c' ).addClass( "hidden" );
$( '#pic1d' ).addClass( "hidden" );;
}
else if($("#pic2c").hasClass("hidden")){
$("#words_wrong").removeClass("hidden");
$( '#pic4c' ).removeClass( "hidden" );//incorrect answer
$( '#pic1c' ).addClass( "hidden" );
$( '#pic1a' ).addClass( "hidden" );
$( '#pic1b' ).addClass( "hidden" );
$( '#pic1d' ).addClass( "hidden" );;
}
else if($("#pic2d").hasClass("hidden")){
$("#words_wrong").removeClass("hidden");
$( '#pic4d' ).removeClass( "hidden" );//incorrect answer
$( '#pic1d' ).addClass( "hidden" );
$( '#pic1a' ).addClass( "hidden" );
$( '#pic1b' ).addClass( "hidden" );
$( '#pic1c' ).addClass( "hidden" );;
}
}
});
$('#pic2a').click(function(){
$( '#pic1a' ).removeClass( "hidden" );
$( '#pic2a' ).addClass( "hidden" );
counterBox++;
});
$('#pic2b').click(function(){
$( '#pic1b' ).removeClass( "hidden" );
$( '#pic2b' ).addClass( "hidden" );
counterBox++;
});
$('#pic2c').click(function(){
$( '#pic1c' ).removeClass( "hidden" );
$( '#pic2c' ).addClass( "hidden" );
counterBox++;
});
$('#pic2d').click(function(){
$( '#pic1d' ).removeClass( "hidden" );
$( '#pic2d' ).addClass( "hidden" );
counterBox++;
});
$('#pic2e').click(function(){
$( '#pic1e' ).removeClass( "hidden" );
$( '#pic2e' ).addClass( "hidden" );
counterBox++;
});
$('#pic2f').click(function(){
$( '#pic1f' ).removeClass( "hidden" );
$( '#pic2f' ).addClass( "hidden" );
counterBox++;
});
$('#pic1a').click(function(){
$( '#pic2a' ).removeClass( "hidden" );
$( '#pic1a' ).addClass( "hidden" );
counterBox--;
});
$('#pic1b').click(function(){
$( '#pic2b' ).removeClass( "hidden" );
$( '#pic1b' ).addClass( "hidden" );
counterBox--;
});
$('#pic1c').click(function(){
$( '#pic2c' ).removeClass( "hidden" );
$( '#pic1c' ).addClass( "hidden" );
counterBox--;
});
$('#pic1d').click(function(){
$( '#pic2d' ).removeClass( "hidden" );
$( '#pic1d' ).addClass( "hidden" );
counterBox--;
});
$('#pic1e').click(function(){
$( '#pic2e' ).removeClass( "hidden" );
$( '#pic1e' ).addClass( "hidden" );
counterBox--;
});
$('#pic1f').click(function(){
$( '#pic2f' ).removeClass( "hidden" );
$( '#pic1f' ).addClass( "hidden" );
counterBox--;
});