American Public Media: Engage 08: Budget Hero

Budget Hero

Budget Hero is an engaging and journalistically sound game that encourages players to think through the complexities and challenges of the federal budget and the major policy issues of the 2008 election. It frames the policy debate as a set of federal budget choices determining how money will be raised and spent. Budget Hero forces players make tradeoffs and confront compromises inherent in balancing a budget. Can they be Budget Heroes by staying true to their values while creating a sustainable government?

Terms of Use
Budget Hero is built and maintained by American Public Media, the producer and distributor of national public radio programming, and the Woodrow Wilson International Center for Scholars and is supported in part by funding from the Corporation for Public Broadcasting. Interested in using this game on a Web site or in a blog? You may do so at no cost, subject to the download policies contained in the American Public Media Web site terms and conditions. Please credit American Public Media as the game's creator and copyright owner.

Budget Hero Example

Play Budget Hero»

Instructions:
The Budget Hero can be embedded on your Web site in one of two ways. First, if your site is wide enough to embed an image that is 705px in width, you can use an <iframe> in your source code. If your site cannot accommodate that width, you can embed a pop-up link that will allow The Budget Hero to load in its own pop-up window.

<iFrame> Embedding Instructions

Cut and paste the following code snippet into your page's source code. Locate this code snippet within an <html> element in the position you would like it to display.

Modifications:
Within the above code snippet you can make the following modifications:

Width: The width attribute is set to "705" by default because the game is 705px wide. It is a Flash application and cannot be scaled to a smaller size.; To change the width, change the code text width="705" to width="xx%" (percentage) or width="xx" (width in pixels). A percentage width means that the frame will expand to that percentage of the width of the element in which you place it.; Note: If you change the width to something less than 705px, make certain that the "scrolling" attribute of the frame is set to "yes" so that your users can reach all parts of the game.
Height: The height attribute is set to "630" pixels by default because the game is 630px high. It is a Flash application and cannot be scaled to a smaller size.; To change the height, change the code text height="630" to height="xx%" (percentage) or height="xx" (height in pixels). A percentage height means that the frame will expand to that percentage of the height of the element in which you place it.; Note: If you change the height to something less than 630px, make certain that the "scrolling" attribute of the frame is set to "yes" so that your users can reach all parts of the game.
Border: The frameborder attribute is set to "0" by default which prevents a border from displaying around the <iframe>.; To show a border, change the code text frameborder="0" to frameborder="1". However, be advised that this will not show a border in all browsers.
Scrolling: The scrolling attribute is set to "yes" by default. This means that when there is content that extends beyond the width or height of the <iframe>, scrollbars appear to allow users to access that content.; DO NOT CHANGE the scrolling attribute to "no" unless you are certain that you have allowed enough room for all the content on the poll page, results page and candidate position page. If you have not, users will not be able to use the widget effectively.
CSS Styles: You can use CSS styles to style the <iframe> itself, but the styles will not affect the Budget Hero content.

Pop-up Embedding Instructions

To create a pop-up window for the Budget Hero, cut and paste the following code snippet into your page's source code. Locate this code snippet within the <head> tags of your page or in a linked JavaScript file.

Note: It is imperative that there are no spaces between the single quotes in the snippet. Do not add spaces to the word 'BudgetHero' or after any of the commas in the line beginning with 'height... and ending with ...,toolbar=no')

Identify the button, image or link the user will click on in order to initiate the pop-up window. Add the following JavaScript action to your button, image or link..

Modifications:
You can add this pop-up action to a button, image or text link using the following code:

Button: In your button tag, include the onclick... code above. Your code might look something like the code below:; <input type="button" name="request" value="Play Budget Hero" onclick="return showBH('http://budgethero.publicradio.org/widget/widget.php?refid=apm');" /> To copy this code, click SELECT THIS CODE and then press Control->C.
Image: Surrounding your image tag, use an <a href=... tag that links the image to the game. Include the onclick... code above in the <a href=... tag. The JavaScript in your header will keep the main browser window from moving to the game's URL unless the user does not have JavaScript enabled. Your code might look something like the code below:; <a href="http://budgethero.publicradio.org/widget/widget.php?refid=apm" onclick="return showBH('http://budgethero.publicradio.org/widget/widget.php?refid=apm');"><img src="my_image.jpg" alt="Play Budget Hero" border="0" /> </a> To copy this code, click SELECT THIS CODE and then press Control->C.; Note: In your image tag, be sure to set the border attribute to "0" or the link will give the image a border.
Text Link: Construct the link exactly as you would for an image (above) except use the <a href=... tags to surround the text you want linked rather than the image. Again, the JavaScript in your header will keep the main browser window from moving to the game's URL unless the user does not have JavaScript enabled. Your code might look something like the code below:; <a href="http://budgethero.publicradio.org/widget/widget.php?refid=apm" onclick="return showBH('http://budgethero.publicradio.org/widget/widget.php?refid=apm');">Play Budget Hero</a> To copy this code, click SELECT THIS CODE and then press Control->C.
CSS Styles: You can use CSS styles to style the buttons, images or text that you link, but the styles will not affect the Budget Hero content.

Promotional graphics to promote Budget Hero:

To save images: right click the image you wish to save and choose "Save Image As..." from the pop-up menu.

300 x 250 pixels

200 x 150 pixels

160 x 600 pixels

100 x 128