Adds a colored label around radio buttons and checkboxes that increases the area that registers a click. If the button/box is clicked the label turns green. This script lets you more effectively click while requiring less precision and makes it easier to see which items are selected. I can't guarantee this script won't foul up a page's layout. If it does disable it. mmmturkeybacon Unclick Radio Button is a helpful companion to this script.
目前为
// ==UserScript==
// @name mmmturkeybacon Embiggen Radio Buttons and Checkboxes
// @author mmmturkeybacon
// @description Adds a colored label around radio buttons and checkboxes that increases the area that registers a click. If the button/box is clicked the label turns green. This script lets you more effectively click while requiring less precision and makes it easier to see which items are selected. I can't guarantee this script won't foul up a page's layout. If it does disable it. mmmturkeybacon Unclick Radio Button is a helpful companion to this script.
// @namespace http://userscripts.org/users/523367
// @match http://*/*
// @match https://*/*
// //@match https://*.mturk.com/mturk/preview*
// //@match https://*.mturk.com/mturk/accept*
// //@match https://*.mturk.com/mturk/continue*
// //@match https://*.mturk.com/mturk/submit*
// //@match https://*.mturk.com/mturk/return*
// //@match https://*.mturkcontent.com/dynamic/hit?*
// //@match https://*.amazonaws.com/mturk_bulk/hits*
// //@match https://*.crowdcomputingsystems.com/mturk-web/*
// //@match https://*.qualtrics.com/*
// //@match https://*.surveygizmo.com/*
// //@match https://*.surveymonkey.com/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
// @version 1.10
// @grant GM_addStyle
// ==/UserScript==
/*
Examples:
http://i.imgur.com/6AK6fqq.png
http://i.imgur.com/ZmKaA1o.png
For testing and debugging:
https://www.surveymonkey.com/s/ProfessionalProcesses
https://www.surveygizmo.com/s3/2046887/73e44deab261
https://msuccas.co1.qualtrics.com/SE/?SID=SV_0ilMmQXcdpZQ04d
https://princetonsurvey.az1.qualtrics.com/SE/?SID=SV_8jDoy6P7ibFZN0p
https://www.mturkcontent.com/dynamic/hit?assignmentId=ASSIGNMENT_ID_NOT_AVAILABLE&hitId=3DIIW4IV8PEUCG2TZJS01EOATJII4F
https://s3.amazonaws.com/mturk_bulk/hits/138816851/qUqSeewj13pzxUGTsERnXg.html?assignmentId=ASSIGNMENT_ID_NOT_AVAILABLE&hitId=39KMGHJ4RY9B0N33T566YLUDOYX006
https://s3.amazonaws.com/mturk_bulk/hits/138909729/mndG5I_WE1o9e66s6lB8ZA.html?assignmentId=ASSIGNMENT_ID_NOT_AVAILABLE&hitId=3DGDV62G7OEP3AI3W6SRGMH1P9TP2S
http://fordhambusiness.az1.qualtrics.com/jfe/form/SV_5sv1TzUahXAxhch?MID=
https://hbs.qualtrics.com/jfe/form/SV_cwjMpy2RQqAJbFz
*/
var SIZE = 54; // pixels
var TOP_SPACING = (1/2)*SIZE + 1;
var RIGHT_SPACING = (2/10)*SIZE;
var BOTTOM_SPACING = (1/2)*SIZE + 1;
var LEFT_SPACING = (4/10)*SIZE;
var UNCHECKED_COLOR = '#00f';
var CHECKED_COLOR = '#0f0';
var DISABLED_COLOR = '#999';
var OPACITY = 0.25;
var radio_button_index = 0;
var checkbox_index = 0;
var radio_button_queue_count = 0;
var checkbox_queue_count = 0;
var already_ran = false;
function addstyle()
{
if (already_ran == false)
{
already_ran = true;
GM_addStyle(' \
@font-face { \
font-family: "icomoon"; \
src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SB4AAAAC8AAAAYGNtYXDqkerYAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZkY5wa4AAAF4AAAB9GhlYWQFf52VAAADbAAAADZoaGVhB8IDyQAAA6QAAAAkaG10eBIAAAAAAAPIAAAAIGxvY2EBkgEcAAAD6AAAABJtYXhwAAwAOQAAA/wAAAAgbmFtZVcZpu4AAAQcAAABRXBvc3QAAwAAAAAFZAAAACAAAwQAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADqVgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEAEAAAAAMAAgAAgAEAAEAIOpU6lb//f//AAAAAAAg6lLqVv/9//8AAf/jFbIVsQADAAEAAAAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAACAAD/wAQAA8AAEAAXAAABISIGFREUFjMhMjY1ETQmIwEnNxcBFwEDgP0ANUtLNQMANUtLNf5A7VqTATNa/nMDwEs1/QA1S0s1AwA1S/zl7lqSATJa/nIAAgAA/8AEAAPAABAAFQAAASEiBhURFBYzITI2NRE0JiMRIREhEQOA/QA1S0s1AwA1S0s1/QADAAPASzX9ADVLSzUDADVL/IADAP0AAAMAAP/ABAADwAAUACkANgAAASIOAhUUHgIzMj4CNTQuAiMRIi4CNTQ+AjMyHgIVFA4CIwM0NjMyFhUUBiMiJjUCAGq7i1BQi7tqaruLUFCLu2pQi2k8PGmLUFCLaTw8aYtQwHBQUHBwUFBwA8BQi7tqaruLUFCLu2pqu4tQ/IA8aYtQUItpPDxpi1BQi2k8AYBQcHBQUHBwUAAAAAIAAP/ABAADwAAUACkAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAiMCAGq7i1BQi7tqaruLUFCLu2pQi2k8PGmLUFCLaTw8aYtQA8BQi7tqaruLUFCLu2pqu4tQ/IA8aYtQUItpPDxpi1BQi2k8AAEAAAABAADOghiAXw889QALBAAAAAAA0TAsjAAAAADRMCyMAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4ASgBwAL4A+gAAAAEAAAAIADcAAwAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format("truetype"), \
url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAXQAAsAAAAABYQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIHgGNtYXAAAAFoAAAAVAAAAFTqkerYZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAfQAAAH0RjnBrmhlYWQAAAO4AAAANgAAADYFf52VaGhlYQAAA/AAAAAkAAAAJAfCA8lobXR4AAAEFAAAACAAAAAgEgAAAGxvY2EAAAQ0AAAAEgAAABIBkgEcbWF4cAAABEgAAAAgAAAAIAAMADluYW1lAAAEaAAAAUUAAAFFVxmm7nBvc3QAAAWwAAAAIAAAACAAAwAAAAMEAAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6lYDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABABAAAAADAAIAAIABAABACDqVOpW//3//wAAAAAAIOpS6lb//f//AAH/4xWyFbEAAwABAAAAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAA/8AEAAPAABAAFwAAASEiBhURFBYzITI2NRE0JiMBJzcXARcBA4D9ADVLSzUDADVLSzX+QO1akwEzWv5zA8BLNf0ANUtLNQMANUv85e5akgEyWv5yAAIAAP/ABAADwAAQABUAAAEhIgYVERQWMyEyNjURNCYjESERIREDgP0ANUtLNQMANUtLNf0AAwADwEs1/QA1S0s1AwA1S/yAAwD9AAADAAD/wAQAA8AAFAApADYAAAEiDgIVFB4CMzI+AjU0LgIjESIuAjU0PgIzMh4CFRQOAiMDNDYzMhYVFAYjIiY1AgBqu4tQUIu7amq7i1BQi7tqUItpPDxpi1BQi2k8PGmLUMBwUFBwcFBQcAPAUIu7amq7i1BQi7tqaruLUPyAPGmLUFCLaTw8aYtQUItpPAGAUHBwUFBwcFAAAAACAAD/wAQAA8AAFAApAAABIg4CFRQeAjMyPgI1NC4CIxEiLgI1ND4CMzIeAhUUDgIjAgBqu4tQUIu7amq7i1BQi7tqUItpPDxpi1BQi2k8PGmLUAPAUIu7amq7i1BQi7tqaruLUPyAPGmLUFCLaTw8aYtQUItpPAABAAAAAQAAzoIYgF8PPPUACwQAAAAAANEwLIwAAAAA0TAsjAAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAEoAcAC+APoAAAABAAAACAA3AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("woff"); \
font-weight: normal; \
font-style: normal; \
} \
input[type=radio], \
input[type=checkbox] { \
display: visible; \
} \
input[type=radio] + div[id^="mtb_div_for_"], \
input[type=checkbox] + div[id^="mtb_div_for_"] { \
/*float: left; !important;*/ \
display: inline-block !important; \
width: 0px !important; \
height: 0px !important; \
z-index: 100 !important; \
} \
input[type=radio] + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"], \
input[type=checkbox] + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"] { \
margin: 0px !important; \
padding: 0px !important; \
z-index: 100 !important; \
} \
input[type=radio] + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before, \
input[type=checkbox] + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before { \
font-family: "icomoon" !important; \
speak: none !important; \
font-style: normal !important; \
font-weight: normal !important; \
font-variant: normal !important; \
font-size: '+SIZE+'px !important; \
text-transform: none !important; \
line-height: 1 !important; \
opacity: '+OPACITY+' !important; \
/* Better Font Rendering =========== */ \
-webkit-font-smoothing: antialiased !important; \
-moz-osx-font-smoothing: grayscale !important; \
} \
input[type=radio]:disabled + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before, \
input[type=checkbox]:disabled + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before { \
color: '+DISABLED_COLOR+'; \
} \
input[type=radio]:focus + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before, \
input[type=checkbox]:focus + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before { \
outline: 1px dotted !important; \
} \
input[type=radio] + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before { \
content: "\\ea56" !important; \
color: '+UNCHECKED_COLOR+'; \
} \
input[type=radio]:checked + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before { \
content: "\\ea54" !important; \
color: '+CHECKED_COLOR+'; \
} \
input[type=checkbox] + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before { \
content: "\\ea53" !important; \
color: '+UNCHECKED_COLOR+'; \
} \
input[type=checkbox]:checked + div[id^="mtb_div_for_"] > label[id^="mtb_label_for_"]::before { \
content: "\\ea52" !important; \
color: '+CHECKED_COLOR+'; \
} \
');
}
}
function embiggen_radio_button(new_radio_button)
{
addstyle();
var $radio_button = $(new_radio_button);
$radio_button.attr('mtb_embiggened', 'true');
var offset = {};
var center_offset = {};
var id = $radio_button.attr('id');
if (id == null)
{
id = 'mtb_big_radio_button_id' + radio_button_index;
radio_button_index++;
$radio_button.attr('id', id);
}
$radio_button.css('display', 'visible');
var container_height = $radio_button.outerHeight(true);
var container_width = $radio_button.outerWidth(true);
var TOP_MARGIN = TOP_SPACING - container_height/2;
var RIGHT_MARGIN = RIGHT_SPACING - container_width/2;
var BOTTOM_MARGIN = BOTTOM_SPACING - container_height/2;
var LEFT_MARGIN = LEFT_SPACING - container_width/2;
//var MARGIN = TOP_MARGIN+'px '+RIGHT_MARGIN+' px'+BOTTOM_MARGIN+' px'+LEFT_MARGIN+' px';
$radio_button.wrap('<div style="display: inline-block; height: '+container_height+'px; width: '+container_width+'px; margin: '+TOP_MARGIN+'px '+RIGHT_MARGIN+'px '+BOTTOM_MARGIN+'px '+LEFT_MARGIN+'px ">');
var $this_container = $radio_button.parent();
$this_container.append('<div id="mtb_div_for_'+id+'"><label for="'+id+'" id="mtb_label_for_'+id+'"></label></div>');
var $this_div = $('div[id="mtb_div_for_'+id+'"]');
var $this_label = $('label[id="mtb_label_for_'+id+'"]');
var label_abs_top = -SIZE/2+'px';
var label_abs_left = -SIZE/2+'px';
$this_label.css({"position": "absolute", "top": label_abs_top, "left": label_abs_left});
if (document.domain.indexOf('surveymonkey') > -1)
{
var $next_label = $radio_button.parent().parent('.qOption').children('label');
if ($next_label.length > 0)
{
$next_label.css('display', 'inline');
$next_label.find('img').css('visibility', 'hidden');
}
}
else if (document.domain.indexOf('surveygizmo') > -1)
{
$radio_button.css('position', 'static');
}
else if (document.domain.indexOf('qualtrics') > -1)
{
$radio_button.css('float', 'none');
$('span[class="LabelWrapper"]').css('float', 'none');
}
offset = $radio_button.offset();
center_offset.top = offset.top + $radio_button.height()/2;
center_offset.left = offset.left + $radio_button.width()/2;
$this_div.offset(center_offset);
// Don't hide the radio buttons so that the Tab key can still be used to navigate to between them.
//$radio_button.css('visibility', 'hidden');
radio_button_queue_count--;
}
function embiggen_checkbox(new_checkbox)
{
addstyle();
var $checkbox = $(new_checkbox);
$checkbox.attr('mtb_embiggened', 'true');
var offset = {};
var center_offset = {};
var id = $checkbox.attr('id');
if (id == null)
{
id = 'mtb_big_checkbox_id' + checkbox_index;
checkbox_index++;
$checkbox.attr('id', id);
}
$checkbox.css('display', 'visible');
var container_height = $checkbox.outerHeight(true);
var container_width = $checkbox.outerWidth(true);
var TOP_MARGIN = TOP_SPACING - container_height/2;
var RIGHT_MARGIN = RIGHT_SPACING - container_width/2;
var BOTTOM_MARGIN = BOTTOM_SPACING - container_height/2;
var LEFT_MARGIN = LEFT_SPACING - container_width/2;
//var MARGIN = TOP_MARGIN+'px '+RIGHT_MARGIN+' px'+BOTTOM_MARGIN+' px'+LEFT_MARGIN+' px';
$checkbox.wrap('<div style="display: inline-block; height: '+container_height+'px; width: '+container_width+'px; margin: '+TOP_MARGIN+'px '+RIGHT_MARGIN+'px '+BOTTOM_MARGIN+'px '+LEFT_MARGIN+'px ">');
var $this_container = $checkbox.parent();
$this_container.append('<div id="mtb_div_for_'+id+'"><label for="'+id+'" id="mtb_label_for_'+id+'"></label></div>');
var $this_div = $('div[id="mtb_div_for_'+id+'"]');
var $this_label = $('label[id="mtb_label_for_'+id+'"]');
var label_abs_top = -SIZE/2+'px';
var label_abs_left = -SIZE/2+'px';
$this_label.css({"position": "absolute", "top": label_abs_top, "left": label_abs_left});
if (document.domain.indexOf('surveymonkey') > -1)
{
var $next_label = $checkbox.parent().parent('.qOption').children('label');
if ($next_label.length > 0)
{
$next_label.css('display', 'inline');
$next_label.find('img').css('visibility', 'hidden');
}
}
else if (document.domain.indexOf('surveygizmo') > -1)
{
$checkbox.css('position', 'static');
}
else if (document.domain.indexOf('qualtrics') > -1)
{
$checkbox.css('float', 'none');
$('span[class="LabelWrapper"]').css('float', 'none');
}
offset = $checkbox.offset();
center_offset.top = offset.top + $checkbox.height()/2;
center_offset.left = offset.left + $checkbox.width()/2;
$this_div.offset(center_offset);
// Don't hide the radio buttons so that the Tab key can still be used to navigate to between them.
//$checkbox.css('visibility', 'hidden');
checkbox_queue_count--;
}
function queue_radio_button(new_radio_button)
{
(function(new_radio_button, radio_button_queue_count){setTimeout(function(){embiggen_radio_button(new_radio_button)}, radio_button_queue_count*10) })(new_radio_button, radio_button_queue_count);
radio_button_queue_count++;
}
function queue_checkbox(new_checkbox)
{
(function(new_checkbox, checkbox_queue_count){setTimeout(function(){embiggen_checkbox(new_checkbox)}, checkbox_queue_count*10) })(checkbox_button, checkbox_queue_count);
checkbox_queue_count++;
}
$(window).load(function()
//$(document).ready(function()
{
var selector_prefix = ($('div[id="hit-wrapper"]').length > 0) ? 'div[id="hit-wrapper"] ' : '';
if (selector_prefix || document.domain != 'www.mturk.com')
{ // if selector_prefix is non-empty then it is an internal HIT
var radio_buttons = document.querySelectorAll(selector_prefix+'input[type="radio"]:not([mtb_embiggened="true"])');
Array.prototype.forEach.call(radio_buttons, queue_radio_button);
//http://stackoverflow.com/questions/25711476/why-is-my-mutationobserver-callback-not-being-executed-for-some-new-tags
var observer = new MutationObserver(function(mutations, obs)
{
for(var i=0; i<mutations.length; ++i)
{
for(var j=0; j<mutations[i].addedNodes.length; ++j)
{
var newTag = mutations[i].addedNodes[j];
if (newTag.querySelectorAll)
{
Array.prototype.forEach.call(
newTag.querySelectorAll('input[type="radio"]:not([mtb_embiggened="true"])'), queue_radio_button);
}
}
}
});
observer.observe(document.documentElement,
{
childList: true,
subtree: true
});
}
});