Follow the steps below to implement the GeoJourney module into your website:

  • Copy the entirestring of code in Figure 1.
  • Paste the code between the <head></head> tags on your webpage.
  • Change three variables in the code to fit your station.

Click here to learn how to change the variables

Variable

Line of Code

Action

Station

geoJourney.station = "WXYZ";

Change the call letters ‘WXYZ’ to your station’s call letters. This information is used to collect statistics in analytics.

Zip

geoJourney.zip = "12345";

Replace ‘12345‘ with your station’s zip code or a zip code that most of your viewing area is located within. This information is used as a default location if IP address cannot be detected.

External Links

geoJourney.external_links = "true";

This allows or disallows external linking to operate outside of the Flash environment. This affects the Panoramio linking and Geocaching.com database functionality. Valid values: true or false. Recommended value: “true.”

Figure 1

<style type="text/css">
 
#geocaching { height: 600px; width: 800px; }
 
</style>
 
<script src="http://wfsu.org/GeoJourney/js/jquery_1_5.js"type="text/javascript"> </script>
<script src="http://wfsu.org/GeoJourney/js/geocaching.js.php"type="text/javascript"> </script>
<script src="http://wfsu.org/GeoJourney/js/swfobject.js"type="text/javascript"> </script>
<script type="text/javascript">
geoJourney.station = "WXYZ";
geoJourney.zip = "12345";
geoJourney.external_links = "true";
geoJourney.init();
</script>
  • Copy the entireline of code in Figure 2.
  • Paste the codein the HTML body where you would like the game to appear on your webpage.

Figure 2

<div id="geocaching"></div>

 

  • Copy the entirestring of code in Figure 3.
  • Paste the code into the HTML body where you would like the promo widget to appear on your webpage.
  • Change two variables in the code to fit your station.
Click here to learn how to change the variables

 

Variable

Line of Code

Definition

size

geoJourneyWidget.size = "portrait";

Determines the layout of your widget.

  • landscape = 600px x 150px
  • portrait = 230px x 450px

Type either landscape OR portrait between the quotes.

gameURL

geoJourneyWidget.gameURL = "http://www.wfsu.org/kids/geojourney.php";

Determines where your game is located locally.
After geoJourneyWidget.gameURL type the URL of where your game is located locally. The widget will redirect there after the “find yours now” button is clicked.

Figure 3

<script src="http://wfsu.org/GeoJourney/js/jquery_1_5.js"type="text/javascript"> </script>
<script src="http://www.wfsu.org/GeoJourney/widget/js/geocaching.js.php"type="text/javascript"></script>
<script type="text/javascript">
//aspectratio forgame...
//either"portrait"for230 x 450
//or"landscape"for600 x 150
geoJourneyWidget.size = "portrait";
//locationof web page where you have locally installed the GeoJourney game
geoJourneyWidget.gameURL = "http://www.wfsu.org/kids/geojourney.php";
geoJourneyWidget.init();
</script>
<div id="geocaching"></div>

 

Implementation for Bento

Implementing this module on Bento? Use the Station PBS Kids GeoJourney Game Module and the Station PBS Kids GeoJourney Head Tag Smart Snippet and add them to your page(s). For instructions on how to add Smart Snippets to a page click here.

Promote this module!

Download this toolkit containing a variety of promotional materials including customizable stickers and postcards, vector logos, dynamic online widgets and an event planning guide.