mmmturkeybacon Embiggen Radio Buttons and Checkboxes

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.
当前为 2015-03-23 提交的版本，查看最新版本。
安装此脚本？
提问、发表评价或者举报此脚本。
换行
// ==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
        });
    }
 
});