HotRod Module

Over the past few years several people have asked for a more advanced module whereby they could image005implement their own custom JavaScript module. And, true to the Skybuilder team’s “aim to please” nature, we’re happy to introduce the Hotrod (as in ‘build your own’) module.

What’s JavaScript?
By definition, JavaScript is a programming language used to make web pages (and app modules) interactive. JavaScript is often used to create polls, quizzes, calculators, games, etc.

As you know, Skybuilder comes with several such interactive modules. However, there are times when you might want a special module that, while it is important to your app’s niche, might not be used by other apps created in Skybuilder. Some have asked for such programs in the past … programs such as a Golf Score Keeper, A BMI calculator, a Currency Converter, among many others. With the Hotrod module, any interactive JavaScript program may be implemented. So, if you can find it (or create it), then you should be able to run it with the Hotrod module.

Where to Find Pre-Made Scripts
There are several great sites for locating free (and paid) JavaScript programs. Google is your friend, here, as you can do a generic or specific search and come up with hundreds of ideas. Here are a few sites we’ve found that offer free JavaScript code. Note: Please DO read the Advanced section at the end of this document as many scripts won’t work without a little tweaking as described in that section.

http://www.unheap.com/
https://gallery.technet.microsoft.com/scriptcenter
http://codepen.io/collections/ (a site with newer scripts)
http://www.javascriptkit.com/cutpastejava.shtml (a newer site)
http://www.javascriptsource.com/ (100’s of scripts)
http://cgi.resourceindex.com/programs_and_scripts/perl/ (really old resource; be sure to search for newer code)
http://www.hotscripts.com/category/scripts/javascript/scripts-programs/ (another older site).
http://www.scriptasylum.com/scripts.html (A list of older scripts. One would need to copy the script from the .js file, and the images would need to be remotely hosted. The script owner offers no support for the scripts, so use at your own risk.)

Note: The above list is offered for your convenience only. We do not have anything to do with the repositories, and cannot support the scripts. Some will work; others will not.

When searching for scripts, keep in mind that the Hotrod module requires header script as well as html code. While you don’t need to know how to create a JavaScript program (as stated already, there are many pre-written scripts available), you will need a little knowledge of how it works in order to use this module. If you’d like to learn more about JavaScript, these sites offer free training:

http://eloquentjavascript.net/
https://www.codecademy.com/
http://www.w3schools.com/js/
In addition to needing to a basic knowledge of JavaScript a you will also need an elementary understanding of HTML and CSS if you intend to adjust the look and feel of your module.

Customizing the Hotrod Module

  1. Locate a JavaScript program (or create one from scratch)
  2. Copy/Paste the CSS (if any) into the bottom CSS box, and the JS code into the middle JavaScript box. This will automatically go into the module’s HTML <head>.
  3. Copy/Paste the HTML code into the top box – this is the body and is what your users will see. There is no need to add <body> or <head> tags – just the HTML that normally goes in the <body> tag.
  4. Modify the script (as described in the Advanced Usage Tips section of this document) if necessary.
  5. Once you have saved the module the results will appear in the Preview on the right. 

Advanced Usage Tips
The best results will come from scripts based on jQuery, which allow the binding of functions to an event, such as clicking a HTML element, for example:

$(“#element_id”).click(function() {

alert(“hello world!”);

});

Your final Javascript will automatically be wrapped in its own (function(){})() scope, and in a jQuery $(document).ready() function (telling the app to initiate the code once the module has loaded). This means that any functions declared in you script, which need to be accessed outside of this scope will need a little modification – for example, you create a JavaScript function called changeColour(), and you want this to be called when a <span> tag is clicked. With non-jQuery scripts, the function is typically called by setting it in the HTML element’s “onclick” attribute, for example:

<span onclick=”changeColour();”>Colour will change when clicked</span>

However, since the HotRod script is wrapped in its own scope, the <span> tag is not able to access the changeColour() function. Don’t panic! We have a solution…

The HotRod module has its own object bound to the main window object, and is automatically created when the module loads:

window.SkyBuilder.hotrod = {};

Any number of functions, variables, classes, objects etc. can be added to this “global” object. For example, where the function was previously declared as follows:

function changeColour() {

//do something cool…

}

we simply need to change the declaration and bind it to the global object, as follows:

window.SkyBuilder.hotrod.changeColour = function() {

//do something cool…

}

Instead of calling the function using onclick=”changeColour()”, we simply change it to:

<span onclick=”window.SkyBuilder.hotrod.changeColour();”>some text</span>

Note: If a function is not accessed outside of the scope, then it does not need to be attached to the global object. Here’s a couple of examples so you can see how it works in the module.

Skybuilder_HotRod_Examples

Final Note

As stated, this is a module for advanced users. We cannot debug scripts, so if it does not work for you, work with your script provider.

As always, test the scripts on real devices. A script that works on Android, for example, might not work on an iOS or Windows device.