Created
November 2, 2015 20:56
-
-
Save sethrubenstein/b9de34c6f9195f1f6b0b to your computer and use it in GitHub Desktop.
Pew Mechanical Turk Code
This file contains 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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <style> | |
| #main-container { | |
| width: 640px; | |
| /*height: 650px;*/ | |
| margin: 0px auto; | |
| /*border: 1px solid black;*/ | |
| } | |
| #evaluated-text { | |
| text-transform: uppercase; | |
| font-weight: 800; | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| font-size: 15px; | |
| margin: 20px; | |
| min-height: 60px; | |
| } | |
| #instructions { | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| font-size: 13px; | |
| margin: 20px 20px 50px 20px; | |
| font-weight: 400; | |
| /*text-decoration: underline;*/ | |
| } | |
| #instructions img { | |
| width:15px; | |
| height: 15px; | |
| } | |
| span.info { | |
| background-color: #eeece4; | |
| color: #303540; | |
| padding: 0px 8px 0px 8px; | |
| text-align: center; | |
| /*border: 1px solid #000;*/ | |
| font-weight: 800; | |
| /*border-radius: 399px;*/ | |
| width: 13px; | |
| cursor: pointer; | |
| margin-left: 3px; | |
| height: 3px; | |
| } | |
| form#selections { | |
| margin: 20px; | |
| } | |
| input { | |
| float: left; | |
| } | |
| .category { | |
| margin: 12px; | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| font-size: 16px; | |
| } | |
| .category img { | |
| width:15px; | |
| height: 15px; | |
| } | |
| .category:hover { | |
| cursor: pointer; | |
| } | |
| .desc { | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| font-size: 13px; | |
| margin: 20px 20px 20px 30px; | |
| padding: 10px; | |
| display: none; | |
| background-color: #eeece4; | |
| } | |
| .btn { | |
| width: 90%; | |
| margin: 50px 20px; | |
| padding: 10px; | |
| color: #fff; | |
| text-align: center; | |
| text-transform: uppercase; | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| /*box-shadow:inset 0px -3px 7px 0px #29bbff;*/ | |
| -moz-border-radius:3px; | |
| -webkit-border-radius:3px; | |
| border-radius:3px; | |
| background-color: #2dabf9; | |
| opacity: 0.6; | |
| display: none; | |
| } | |
| .btn-active { | |
| opacity:1; | |
| } | |
| .btn:hover { | |
| background-color: #a9a9a9; | |
| /*box-shadow:inset 0px -3px 7px 0px #a9a9a9;*/ | |
| cursor: pointer; | |
| } | |
| #exit-btn { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0; | |
| clear: both; | |
| width: 90%; | |
| margin: 50px 20px; | |
| padding: 10px; | |
| color: #fff; | |
| text-align: center; | |
| text-transform: uppercase; | |
| font-family: Verdana, Arial, Helvetica, sans-serif; | |
| border-radius:3px; | |
| background-color: red; | |
| } | |
| #exit-btn:hover, #next-btn:hover { | |
| background-color: #a9a9a9; | |
| cursor: pointer; | |
| } | |
| #next-btn { | |
| background-color: green; | |
| } | |
| /**TABLE**/ | |
| #table-container { | |
| display: none; | |
| } | |
| .results-table {font-size:12px;color:#333333;width:100%;border-width: 1px;border-color: #729ea5;border-collapse: collapse;} | |
| .results-table th {font-size:12px;background-color:#acc8cc;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;text-align:left;} | |
| .results-table tr {background-color:#ffffff;} | |
| .results-table td {font-size:12px;border-width: 1px;padding: 8px;border-style: solid;border-color: #729ea5;} | |
| .results-table tr:hover {background-color:#ffff99;} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="main-container"> | |
| <div id="evaluated-text"> | |
| Title text goes here | |
| </div><!--/evaluated-text--> | |
| <div id="instructions"> | |
| Please select up to 2 categories. Click <span class="info">?</span> to toggle more information on each cateogry. | |
| </div><!--/instructions--> | |
| <form id="selections" action=""> | |
| <input class="category-checkbox" type="checkbox" value="1"><div class="category" data-num="1">U.S. Politics/Government Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-1">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="2"><div class="category" data-num="2">Foreign/Non-U.S. Politics/Government Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-2">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="3"><div class="category" data-num="3">Economics/Business Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-3">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="4"><div class="category" data-num="4">Technology Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-4">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="5"><div class="category" data-num="5">Science/Helath Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-5">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="6"><div class="category" data-num="6">Minority and Demographic Trends Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-6">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="7"><div class="category" data-num="7">Domestic Affairs Page (Other) <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-7">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="8"><div class="category" data-num="8">Crime Incident Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-8">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="9"><div class="category" data-num="9">Weather Events/Major Disaster/Accident/Traffic Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-9">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="10"><div class="category" data-num="10">Entertainment Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-10">This is the Description for a category</div> | |
| <input type="checkbox" value="11"><div class="category" data-num="11">Sports Page</div> | |
| <div class="desc" id="desc-11">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="12"><div class="category" data-num="12">Lifestyle/Arts/Activities Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-12">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="13"><div class="category" data-num="13">Sensational Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-13">This is the Description for a category</div> | |
| <input class="category-checkbox" type="checkbox" value="99"><div class="category" data-num="99">Miscellaneous/Other Page <span class="info"> ?</span></div> | |
| <div class="desc" id="desc-99">This is the Description for a category</div> | |
| </form> | |
| <div id="submit"> | |
| <div class="btn" id="submit-btn">Submit</div> | |
| <div class="btn" id="next-btn">Next →</div> | |
| </div><!--/submit--> | |
| <div id="exit-btn">exit</div> | |
| <div id="table-container"> | |
| <table class="results-table" border="1"> | |
| <tr><th>worker_id</th><th>title</th><th>title_val_1</th><th>title_val_2</th></tr> | |
| <tr><td id="worker-id"></td><td id="title"></td><td id="title-val-1">null</td><td id="title-val-2">null</td></tr></table> | |
| </div> <!--/table-container--> | |
| </div><!--/main-container--> | |
| <!-- load jQuery, Firebase --> | |
| <script src="https://cdn.firebase.com/js/client/1.1.1/firebase.js"></script> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> | |
| <script> | |
| var titles = [ | |
| ["“Star Wars: The Force Awakens' Photos Show Darth Vader"], | |
| ["Android One vs. Moto E – Specifications"], | |
| ["British Scientists Solve the Mystery of the Himalayan Yeti"], | |
| ["5 Countries That Produce The Best Wine"], | |
| ["Samsung Galaxy S6: 7 New Features Of The New Samsung Flagship"], | |
| ["'Vampire Diaries' Season 6 Spoilers: CW Network Reveals Titles For Episodes 12 And 13"], | |
| ["Ava Estelle"], | |
| ["Manny Pacquiao”s Adviser Michael Koncz Explores Fight Options Than Floyd Mayweather"], | |
| ["Kaley Cuoco-Ryan Sweeting Split: “Big Bang Theor” Actress Shares Photo Of Her Ex Johnny Galecki Ami"], | |
| ["Devina DeDiva Update: Criminal Charges Reportedly Filed Against Miss World Megan Young”s Basher"], | |
| ["Manny Pacquiao Shares Tough Beginnings"], | |
| ["Barcelona President Fire Fights"], | |
| ["US Navy To Move Guided Missile Cruiser"], | |
| ["Anderson Silva Asks Jose Aldo To Hit Conor McGregor Hard At UFC 185"], | |
| ["“Terminator: Genisys” T-800 Collectable Bust"], | |
| ["Google Glass May Be Banned In Australia Under New Proposed Privacy Laws"], | |
| ["Commodities | International Business Times AU"], | |
| ["Diego Sanchez Tweets About Stolen Cars - International Business Times"], | |
| ["Plastic Surgeons Claim Taylor Swift Got Nose Job Done [PHOTOS]"], | |
| ["“Fantastic Four” Movie Plot Details And Logo Leaked Online—Report - International Business Times"], | |
| ["Game of Thrones (GOT) Season 5 Airdate and Spoilers: Things to Expect"], | |
| ["Police Car Chase Kills 17-Month-Old Toddler In Western Sydney - International Business Times"], | |
| ["Moto G: 10 Tips and Tricks You Should Know to Extend and Improve Battery Life - International Busine"], | |
| ["Hoax Alert: Chinese Business Tycoons Offer Mayweather $160B Guaranteed Purse To Fight Pacquiao In Be"], | |
| ["New 'Fifty Shades of Grey' Movie Trailer Premiered At Golden Globes"], | |
| ["Reggie Jackson Almost Dealt To Denver Nuggets"], | |
| ["“Avengers: Age Of Ultron”: “Pesk” Villain Returns In New Trailer [Watch Video] - International Busi"], | |
| ["10-Year-Old Lions Fan Gets Special Gift From EA Sports After Unfair Treatment - International Busine"], | |
| ["“Avengers: Age Of Ultron” Trailer In Lego Plus Thanos As Santa Claus - International Business Times"], | |
| ["“Sons of Anarch” Series Finale: The Release of John Teller”s “Life And Death Of Sam Crow”"], | |
| ["Jay-Z Brags Beyonce Will Never Divorce Him -- Reports - International Business Times"], | |
| ["Is the Skinny Vine Rapper Bryan Silva Dead? - International Business Times"], | |
| ["'Supernatural' Season 10 Spoilers: Claire Plots Revenge Against Dean in Episode 10 Titled 'The Hunted"], | |
| ["Climate Change: Countries that Contributed Less are Most Vulnerable; Top Three are Cambodia"], | |
| ["LG G2 Mini vs. Motorola Moto G: Which One is Better in the Specs and Features Comparison Overview?"], | |
| ["“Call of Duty: Advanced Warfare” Gets Ranked Play For January; “COD Online” Goes Live In China"], | |
| ["“Game of Thrones” Season 5 Featurette To Air In February - International Business Times"], | |
| ["Lindsay Lohan Posts Provocative Picture Of Her All Fours In A Bed And Deleted It"], | |
| ["Chelsea Handler Bares Naked Breasts On Instagram"], | |
| ["“The Young And The Restless” (Y&R) Oct 6-10 Spoilers: Updates On Victoria"], | |
| ["Samsung Galaxy Tab Pro 10.1 vs. Samsung Galaxy Note 10.1 (2014 Edition) - Specs And Price Comparison"], | |
| ["Scott Disick Works Hard For His Family"], | |
| ["Windows 8.1 Tablet Cum Laptop with 10.1 Inch Display to be Sold By Walmart for $179 - International"], | |
| ["Fahion & Life - Arts"], | |
| ["Fantastic Four: Movie Is A' Mess"], | |
| ["Samsung Galaxy S6 Release Update: Full Metal Body And Curved Edge Display Versions To Debut At MWC 2"], | |
| ["Premier League Stars Choose Arsenal Youth Academy For Their Kids - International Business Times"], | |
| ["Top 5 Pirate Bay Alternatives - International Business Times"], | |
| ["White House Hosts Special Screening Of 'Selma' - International Business Times"], | |
| ["Hot Health Trends To Watch In 2015 - International Business Times"] | |
| ]; | |
| //Global variables | |
| var random_title = Math.round(Math.random() * titles.length); | |
| var checked_values_array = []; | |
| //Display titles on document load | |
| function load_titles(){ | |
| $("#evaluated-text, td#title").html(titles[random_title]); | |
| console.log(random_title); | |
| } | |
| $('input[type="checkbox"]').click(function() { | |
| //Add button's active class when a choice is selected | |
| if (this.checked && $('input:checked').length > 0) { | |
| $(".btn").addClass("btn-active") | |
| $("#submit-btn").show(); | |
| } else { | |
| $("#submit-btn").hide(); | |
| } | |
| }); | |
| //Limit checkboxes checked to 2 | |
| $('input[type="checkbox"]').change(function() { | |
| var countchecked = $('input[type="checkbox"]').filter(":checked").length | |
| //Count number of checkboxes that are checked; disable checkboxes if more than 2 are selected | |
| if (countchecked == 2) { | |
| $('input[type="checkbox"]').not(':checked').attr('disabled', true); | |
| //alert('You\'re not allowed to choose more than 2 categories.'); | |
| } else{ | |
| $("input:checkbox").attr("disabled", false); | |
| } | |
| var worker_id = "null"; | |
| //Look for "checked" checkboxes only, capture these values | |
| var is_checked = $('input[type="checkbox"]:checked').map(function() { | |
| return $(this).val(); | |
| }) | |
| .get(); | |
| //$('#table-container').text( JSON.stringify( is_checked ) ); | |
| //Create results table on "submit" click | |
| // $('#table-container').append('<table class="results-table" border="1"><tr><th>worker_id</th><th>title</th><th>title_val_1</th><th>title_val_2</th></tr><tr><td id="worker-id">' + worker_id +'</td><td id="title">' + titles[random_title] + '</td><td id="title-val-1">' + is_checked[0] + '</td><td id="title-val-2">' + is_checked[1] +'</table>'); | |
| $("td#worker-id").html("null"); | |
| $("td#title-val-1").html(is_checked[0]); | |
| $("td#title-val-2").html(is_checked[1]); | |
| }); | |
| //Show descriptions on category click | |
| $('.category').click(function() { | |
| var cat_num = $(this).attr("data-num"); | |
| $("#desc-" + cat_num).toggle(200); | |
| }); | |
| $(document).ready(function(){ | |
| load_titles(); | |
| //Submission click | |
| $("#submit-btn").click(function() { | |
| is_checked = []; | |
| //$("td#title-val-1").html("null"); | |
| //$("td#title-val-2").html("null"); | |
| //Convert table contents to array to be read by Firebase | |
| var table_array = []; | |
| var headers = []; | |
| $('.results-table th').each(function(index, item) { | |
| headers[index] = $(item).html(); | |
| }); | |
| $('.results-table tr').has('td').each(function() { | |
| var array_item = {}; | |
| $('td', $(this)).each(function(index, item) { | |
| array_item[headers[index]] = $(item).html(); | |
| }); | |
| table_array.push(array_item); | |
| }); | |
| //Convert array to an object for Firebase to play nicely | |
| var table_obj = table_array.reduce(function(o, v, i) { | |
| o[i] = v; | |
| return o; | |
| }, {}); | |
| //Push table_obj data to Firebase | |
| var table_obj_data = new Firebase('https://boiling-fire-8273.firebaseio.com/hits/'); | |
| //console.log(table_obj_data); | |
| table_obj_data.push({ table_obj }); | |
| $("#next-btn").show(); | |
| $("#submit-btn").hide(); | |
| //$("#submit-btn").css("opacity","0.6"); | |
| }); | |
| //Clear all data and load new headline | |
| $("#next-btn").click(function() { | |
| location.reload(); | |
| }); | |
| //Exit experiment | |
| $("#exit-btn").click(function() { | |
| //alert("Are you sure that you want to exit?") | |
| }); | |
| }); //end document.ready | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment