To print, go here and print from your browser in landscape:
http://bl.ocks.org/audionerd/raw/3fb820c3380a451f232822d5d52cc01a
Last active
February 26, 2017 07:10
-
-
Save audionerd/3fb820c3380a451f232822d5d52cc01a to your computer and use it in GitHub Desktop.
Oscar Ballot Bingo 2017
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Oscar Ballot Bingo 2017</title> | |
| <!-- | |
| TIPS: | |
| Print in Landscape | |
| Edit LINES to change the lines (must be 24 lines) | |
| Change x for # per cards page | |
| Change y for # of pages | |
| --> | |
| <style> | |
| *, *:before, *:after { | |
| box-sizing: inherit; | |
| } | |
| html { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| margin: 0; | |
| font-size: 11px; | |
| font-family: "Helvetica Neue"; | |
| line-height: 1.4; | |
| } | |
| table { | |
| padding: 0; | |
| margin: 0; | |
| border-collapse: collapse; | |
| } | |
| tr { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| td { | |
| margin: 0; | |
| padding: 0; | |
| border: 1px solid black; | |
| } | |
| .free { | |
| background: url('http://static.rogerebert.com/uploads/review/primary_image/reviews/the-great-gatsby-2013/hero_gatsbywide.png') no-repeat center center; | |
| background-size: cover; | |
| color: white; | |
| font-weight: bold; | |
| -webkit-text-stroke-width: 1px; | |
| -webkit-text-stroke-color: black; | |
| font-size: 18px; | |
| } | |
| .page { | |
| overflow: hidden; | |
| clear: both; | |
| border-collapse: collapse; | |
| } | |
| .area { | |
| float: left; | |
| margin: 0.1in; | |
| } | |
| .cell { | |
| width: 0.96in; | |
| height: 0.96in; | |
| padding: 0.1in; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .inner { | |
| text-align: center; | |
| } | |
| </style> | |
| <style type="text/css" media="print"> | |
| * { -webkit-print-color-adjust:exact; } | |
| div.page { | |
| page-break-after: always; | |
| page-break-inside: avoid; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| const LINES = [ | |
| 'Agent is thanked', | |
| 'Mom thanked but not Dad', | |
| 'Meryl Streep Looks Overly Enthusiastic', | |
| 'Climate change', | |
| 'Casey Affleck doesn’t laugh at a joke', | |
| 'Clooney’s having twins gets mentioned', | |
| 'Lin-Manuel Miranda is called a genius', | |
| 'Someone makes a Trump joke', | |
| 'Standing ovation', | |
| '"Fake news"', | |
| '"Alternative facts"', | |
| 'Winner cries', | |
| 'A loser doesn’t hide their disappointment', | |
| 'Academy is thanked', | |
| 'Trump is referenced without saying his name', | |
| 'Someone mentions #OscarsSoWhite', | |
| 'Jimmy Kimmel sings', | |
| 'La La Land gets spoofed', | |
| 'Someone mentions a hashtag in a speech', | |
| 'Wardrobe malfunction', | |
| 'Foreign winner speaks in foreign language', | |
| 'Speech cut off by music', | |
| 'Actress covers mouth with both hands in shock', | |
| 'Humbled' | |
| ] | |
| </script> | |
| <script type="text/javascript"> | |
| // Fisher–Yates FTW | |
| function shuffle(array) { | |
| let counter = array.length; | |
| // While there are elements in the array | |
| while (counter > 0) { | |
| // Pick a random index | |
| let index = Math.floor(Math.random() * counter); | |
| // Decrease counter by 1 | |
| counter--; | |
| // And swap the last element with it | |
| let temp = array[counter]; | |
| array[counter] = array[index]; | |
| array[index] = temp; | |
| } | |
| return array; | |
| } | |
| let renderCell = (str, isFreeSpace) => | |
| `<td class="${isFreeSpace ? 'free' : ''}"><div class="cell"><div class="inner">${str}</div></div></td>` | |
| let y = 0 | |
| while (y < 8) { | |
| let el = document.createElement('div') | |
| let str = [] | |
| str.push(`<div class="page">`) | |
| let x = 0 | |
| while (x < 2) { | |
| let lines = JSON.parse(JSON.stringify(LINES)) | |
| shuffle(lines) | |
| lines.splice(12, 0, 'FREE') | |
| str.push(`<div class="area">`) | |
| str.push(`<table cellpadding="0">`) | |
| str.push(`<tr>`) | |
| str.push(renderCell(lines[0])) | |
| str.push(renderCell(lines[1])) | |
| str.push(renderCell(lines[2])) | |
| str.push(renderCell(lines[3])) | |
| str.push(renderCell(lines[4])) | |
| str.push(`</tr>`) | |
| str.push(`<tr>`) | |
| str.push(renderCell(lines[5])) | |
| str.push(renderCell(lines[6])) | |
| str.push(renderCell(lines[7])) | |
| str.push(renderCell(lines[8])) | |
| str.push(renderCell(lines[9])) | |
| str.push(`</tr>`) | |
| str.push(`<tr>`) | |
| str.push(renderCell(lines[10])) | |
| str.push(renderCell(lines[11])) | |
| str.push(renderCell(lines[12], true)) | |
| str.push(renderCell(lines[13])) | |
| str.push(renderCell(lines[14])) | |
| str.push(`</tr>`) | |
| str.push(`<tr>`) | |
| str.push(renderCell(lines[15])) | |
| str.push(renderCell(lines[16])) | |
| str.push(renderCell(lines[17])) | |
| str.push(renderCell(lines[18])) | |
| str.push(renderCell(lines[19])) | |
| str.push(`</tr>`) | |
| str.push(`<tr>`) | |
| str.push(renderCell(lines[20])) | |
| str.push(renderCell(lines[21])) | |
| str.push(renderCell(lines[22])) | |
| str.push(renderCell(lines[23])) | |
| str.push(renderCell(lines[24])) | |
| str.push(`</tr>`) | |
| str.push(`</table>`) | |
| str.push(`</div>`) | |
| x++ | |
| } | |
| str.push(`</div>`) | |
| el.innerHTML = str.join('') | |
| document.body.appendChild(el) | |
| y++ | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment