Battle of the Bills test

by Mike Zavarello

HTML

<p>The bills below are “competing” in four categories, and you can help determine the eventual winner! Mouse over each bill to reveal a relevant fact. Then, make your choices in each matchup and record your choices using the button at the bottom.</p><p>Come back each week to see the outcomes, learn more facts about the winners, and make new choices. As play progresses, you’ll learn more about the surviving bills, and it will culminate in the final matchup in the Battle of the Bills on [ DATE ]!</p>
<div class="BracketContainer">
  <div class="BracketLogo"><img src="https://www.frbatlanta.org/~/media/images/economy-matters/battle-of-the-bills/em_battle_bills_logo.png" style="width: 100%; height: auto; vertical-align: middle;" /></div>
  <div class="BracketColumn">
    <div class="BracketRow Bracket8">
    <a href="#" class="billImage" id="bill01"><img src="https://www.philadelphiafed.org/-/media/education/money-in-motion/treasure-trove/americas-ever-changing-money/_images/greenback_5-demand-note-f.jpg?la=en" style="width: 100%; height: auto; vertical-align: middle;"></a>
    </div>
    <div class="BracketRow Bracket8">
    <a href="#" class="billImage" id="bill02"><img src="https://www.philadelphiafed.org/-/media/education/money-in-motion/treasure-trove/americas-ever-changing-money/_images/greenback_1-legal-tender-f.jpg?la=en" style="width: 100%; height: auto; vertical-align: middle;"></a>
    </div>
    <div class="BracketRow Bracket8">
    <a href="#" class="billImage" id="bill03"><img src="https://www.philadelphiafed.org/-/media/education/money-in-motion/treasure-trove/americas-ever-changing-money/_images/fractional-currency_10-cent-f.jpg?la=en" style="width: 100%; height: auto; vertical-align: middle;"></a>
    </div>
    <div class="BracketRow Bracket8">
    <a href="#" class="billImage" id="bill04"><img src="https://www.philadelphiafed.org/-/media/education/money-in-motion/treasure-trove/americas-ever-changing-money/_images/national-bank-note_1863.jpg?la=en"...

CSS

html, body { height: 100%; }
p { font-family: Arial; font-size: 14px; line-height: 22px; color: #333333; }
.BracketContainer { 
  width: 98%; height: 100%; padding: 10px;
  background-color: '#eeeeed';
  background-image: url('https://www.frbatlanta.org/~/media/images/economy-matters/battle-of-the-bills/em_battle_bills_background.png');
  background-repeat: no-repeat;
  background-size: 100% auto; 
  border: 1px solid #bebebe;
}
.BracketLogo { width: 23%; margin: 0 auto; position: absolute; left: 39%; }
.BracketColumn { width: 9.25%; float: left; height: 100%; }
.BracketFrame { width: 2%; float: left; height: 100%; }
.BracketRow { text-align: center; position: relative; }
/* https://stackoverflow.com/questions/6071987/line-height-as-a-percentage-not-working */
.BracketRow img { outline: 3px solid black; outline-offset: -2px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; }
.BracketRow img:hover { outline: 3px solid #F5892F; }
.Bracket16 { height: 6.25%; }
.Bracket8 { height: 12.5%; }
.Bracket4 { height: 25%; }
.Bracket2 { height: 50%; }
.Bracket1 { height: 100%; }
.BorderTop { border-top: 1px solid #4e4e4e; }
.BorderRight { border-right: 1px solid #4e4e4e; }
.BorderLeft { border-left: 1px solid #4e4e4e; }

JavaScript

$('.billImage').click(function() {
	alert('You clicked ' + (this).id);
})

$('.BracketRow a').not(this).each(function(){
  $(this).addClass('collapsiblockCollapsed');
  $(this.target).animate({height:'hide', opacity:'hide'}, slidespeed);
});