☰

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.

اعتبارا من 22-03-2015. شاهد أحدث إصدار.

// ==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.00
// @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
*/

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_buttons;
var $checkboxes;

function place_radio_button(i)
{
    if (i < $radio_buttons.length)
    {
        var $radio_button = $radio_buttons.eq(i);
        var offset = {};
        var center_offset = {};

        var id = $radio_button.attr('id');
        if (id == null)
        {
            id = 'mtb_big_radio_button_id' + i;
            $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');            
        }

        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');

        (function(j){setTimeout(function(){place_radio_button(j)}, 10) })(i+1);
    }
}

function place_checkbox(i)
{
    if (i < $checkboxes.length)
    {
        var $checkbox = $checkboxes.eq(i);
        var offset = {};
        var center_offset = {};

        var id = $checkbox.attr('id');
        if (id == null)
        {
            id = 'mtb_big_checkbox_id' + i;
            $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');            
        }

        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 checkboxes so that the Tab key can still be used to navigate to between them.
        //$checkbox.css('visibility', 'hidden');

        (function(j){setTimeout(function(){place_checkbox(j)}, 10) })(i+1);
    }
}

function embiggen()
{
    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

        $radio_buttons = $(selector_prefix+'input[type="radio"]');
        $checkboxes = $(selector_prefix+'input[type="checkbox"]');
        if ($radio_buttons.length > 0 || $checkboxes.length > 0)
        {
            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+';                                                                   \
                }                                                                                               \
            ');

            place_radio_button(0);
            place_checkbox(0);
        }
    }
}

//$(document).ready(function()
$(window).load(function()
{
    if (document.domain.indexOf('qualtrics.com') == -1)
    {
        embiggen();
    }
    else
    {
        var already_ran = false;
        if ($('div:contains("Survey Powered By") a[href="http://www.qualtrics.com"]:contains("Qualtrics")').length > 0 && already_ran == false)
        {
            already_ran = true;
            embiggen();
        }
        else
        {
            $(document).bind('DOMNodeInserted',function()
            {
                if ($('div:contains("Survey Powered By") a[href="http://www.qualtrics.com"]:contains("Qualtrics")').length > 0 && already_ran == false)
                {
                    already_ran = true;
                    embiggen();
                }
            })
        }
   }
});