This forum is now read-only. Please use our new forums! Go to forums
How can I make bouncing bubbles work away from Codecademy?
Our animation is based on external script files. You can use them outside Codecademy, but you should not claim that you wrote them or try to sell them. If you use them on a public website the right thing to do would be to give credit to the work done by others just as the people at Codecademy did. “We want to thank Google, Rob Hawkes, and Mark Brenig-Jones & Emile Petrone. This course was inspired by and built on their work.”
It is very easy to accomplish. You should create files called main.js
and index.html
. Then you have to copy code from your Codecademy project (index.html
and main.js
tabs) and paste it inside corresponding newly created files.
You should remember that:
- you should not change the name of your script file (
main.js
) unless you also change the file’s name in your.html
file - you can change name of your
html
file (for example toanimation.html
) - both files have to be in the same directory (for example
root
,public_html
ordesktop
)
Answer 535bd4428c1cccab8d000064
Answer 535f7cb27c82ca657d001949
Hi AlbionsRefuge,
Thanks alot for getting back to me so promptly. Yes, i did not think about doing that. Great!!! i will have a look through the code and learn how to create a Canvas. I am going to try and edit the dimensions of the canvas. Thanks alot
I am spreading the word about CodeCademy in the UK. Great site, Great idea, Great execution.
Kudos
Cheers Ryan
3 comments
Hello Ryan! We are still working on that, but I think that it might be helpful for you even in this stadium. Here you can find bubbles.js with comments written by me and AlbionsRefuge - https://github.com/AlbionsRefuge/bubbles-faq/blob/master/gists/bubbles.js Line 248 should interest you ;)
Hi Maciej
Thanks for this, i will take a copy of this code and create a new ‘Bubble.js’ (with your permission of course :)). i then need to learn how to direct teh src to a local ‘bubbles.js’.
Always learning!!!
Love you pic BTW lol
Thanks Ryan
Hahaha, thank you :) You do not have to ask for permission, we made that to make bubbles.js easier to customize and to understand. So we are pleased that you will use this. But, as I mentioned above, if you want to use bubbles.js on a public site, then it would be nice to add an information that this animation was inspired and build upon a work of Google, Rob Hawkes, and Mark Brenig-Jones & Emile Petrone. To direct the src to a local file, if your html and js files are in same directory, you can use this code: :) In case of any questions do not hesitate to ask!
Answer 538c8afd7c82caa65c002998
hm… little help please, i’m Keenan
this is my code, it’s passed all the exercise but it won’t be appered in my browser. so little help please
it’s my index.html code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js
var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var myName = "Keenan";
var letterColors = [red, orange, green, blue, purple];
if(15 > 5) {
bubbleShape = "circle";
} else {
bubbleShape = "square";
}
drawName(myName, letterColors);
bounceBubbles();
5 comments
Works for me. Hm, try to change this line ‘‘ into ‘‘. Or read this article -> http://www.codecademy.com/forum_questions/533869a69c4e9dd03e0070d9 . Which web browser you use?
hey , tnx , you made my day….that was the mistake…..!!!, if you are a person of codecademy, you must change the codecademy code, as many are facing this problem…!!!
kudos…!!
Hello, sorry that so late. Hm, I am not a codecademy employee, I am only a volunteer moderator. The problem is that the code provided by codecademy is good, there should not be a http prefix. Why? There are two protocols in which site might work -> http (normal) and https (secure version). Because in codecademy code, protocol is not defined script will be loaded in a current one (so it will work in both protocols). Problems arise when users try to use this code in environment different than web. File system uses special protocol called ‘file’. It means that if protocol is not defined, browser will treat every link as a link to a file, not a web resource. In summary, in my opinion, they choose a best way to link these resources. It is not perfect, but every other solution would cause a lot more problems :(
thanks for your help, Maciej Wiercioch !
You’re welcome Muhammad :)
Answer 53982f0d7c82cac206001451
How do I put them both open at the same time? I am on mac and did everything as you said but how do I open both files into my web browser at once (Chrome or Firefox) and make the name appear? (I am pretty new to this stuff) I also would like to make it the heading for my website, credit will be given of course. here is the code I did
my index.html
console.log(<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js"></script>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript" src="http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>)
my main.js
console.log(var red = [0, 100, 63];
var orange = [40, 100, 60];
var green = [75, 100, 40];
var blue = [196, 77, 55];
var purple = [280, 50, 60];
var myName = "Kaidan";
letterColors = [red, orange, green, blue, purple]
if(15 > 5) {
bubbleShape = "circle";
}
else {
bubbleShape = "square";
}
drawName(myName, letterColors);
bounceBubbles()
)
Thanks, Kc
(Don’t know why the main.js doesn’t wanna show up on here but I checked it and it is right I am sure.)
7 comments
I mean I don’t know why the index.html doesn’t want to show up. The main.js comes up fine
Hello Kaidan :) You just do not need these console.log statements around both files. I corrected your code, take a look here -> https://gist.github.com/factoradic/649c65ab8d28e8cc0084 If it would not work or in case of any further questions, do not hesitate to ask.
Thanks
now do I just run them both at once?
into my web browser or make it the heading of my website?
Don’t worry figured it out Thanks fr the help
Great that it works now! :) You’re welcome!
Answer 53a73ac5548c3507de005567
8 comments
Hello Richard :) I am in train right now and I do not have all the necessary tools, but I think I know where the problem is. To check if I am right please try to change links: http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/alphabet.js, http://s3.amazonaws.com/codecademy-content/courses/hour-of-code/js/bubbles.js and http://code.jquery.com/jquery-1.10.2.min.js to https versions (just add ‘s’ after http in every link). Please let me know if it solved the problem. If not, I will dig into it in the evening. Regards! :)
Thank you so much Maciej it still running right now - where was the reason for the error? best regards Richard
and thank you for your very quick respond
i´m not sure.. is it necessary to declare the builders as like i´ve done? sorry for my english what i wrote are my first steps
You’re welcome Richard, glad it works :) Sorry that I am responding so late, but during travel I rely on wifi from hotspots, so in Poland… usually I do not have access. And please, do not worry about your english, also for me this language is problematic. Where was the reason for the error. Hm, to understand it you have to know difference between http and https protocols. https is a secure http, it means that all data transfers are secured by SSL keys. Your website has a https certificate. This is of course nothing wrong, actually it is very good :) But in https protocol all resources (like JavaScript scripts) must be launched in secure way (in https protocol). That was the reason. About credits, they should be visible (like now), but if they are destroying design of your site, or something like that you can place them inside your main.js file as a comment (at the top of the file add // and then paste credits) :) If you have any further questions you can ask them in German, I will understand.
Danke das du dir die Zeit genommen hast mir zuantworten und das auch so ausführlich. An das HTTPS Zertifikat habe ich leider nicht gedacht. Der Fehler erscheint mir nun recht logisch zusein. Ich werde die Credits nur im Quellcode aufführen. Mit freundlichem Gruß Richard
How do i format the files into html or get it to appear on my website sending it through an html code?
never mind. i added the main.js in
Answer 53bae49180ff334b6300004f
where do i put the code so it’s on a website or so i can see it in my browser and not on codeacademy
1 comments
I was able to save index.html and main.js by following this thread but it opens a web page. I guess that’ll work too. Thanks!
Answer 5400fdae7c82ca2506000362
If I want to put this in a blog of some sort, for example Blogger. How would I do it? I found how you put in the blog itself using the HMTL/Javascript widget in the layout, but when i copy the index.html the only thing that happens is theres a big box in the area. Do I also need to put the main.js somewhere in there too? Where?
2 comments
Hello :) At the end of your widget code you have to add pair of script tags inside this tag you have to paste code from main.js :)
Thank you so much it worked perfectly!!!
Answer 55c668bde39efee48f0005b6
HI! I was wondering if there were other bubbleshapes than square and circle.
1 comments
Hi cp99455, you might be interested in some of these topics https://www.codecademy.com/forum_questions/533857ac631fe9794700a672 – there is one thread there about how to make more bubble shapes and another where people have been showing off their shapes.
Popular free courses
- Free Course
Learn SQL
In this SQL course, you'll learn how to manage large datasets and analyze real data using the standard data management language.Beginner friendly,4 LessonsLanguage Fluency - Free Course
Learn JavaScript
Learn how to use JavaScript — a powerful and flexible programming language for adding website interactivity.Beginner friendly,11 LessonsLanguage Fluency - Free Course
Learn HTML
Start at the beginning by learning HTML basics — an important foundation for building and editing web pages.Beginner friendly,6 LessonsLanguage Fluency
2 comments
Hi Ryan, I’m glad you are finding this helpful. Check the index.html tab in your project. It contains links to all the external files. More questions? Just ask.
i also find this site vry helpful…. Thanx codecademy