We typically are NOT getting enough donations to pay the monthly server bill. We need your help! Click the thermometer to learn more.
Note: clicking on the above banners and making ANY purchase returns a commission to Turker Nation.
If you can't see the ad, please click on Shop on Amazon instead. | Want to advertise here? PM Spamgirl to learn more!




Results 1 to 1 of 1

Thread: How to make your radio buttons appear in random configurations

  1. #1
    Moderator RippedWarrior's Avatar
    Join Date
    Sep 2011
    Gender
    Male
    Location
    Canada
    Posts
    2,030
    Thanks
    1,538
    Thanked 2,427 Times in 1,015 Posts

    How to make your radio buttons appear in random configurations

    A requester recently enquired about how to make the list of radio buttons appear in a random order for each worker who accessed his HIT. This is common functionality built into Qualtrics or Survey Monkey. The survey was not being hosted externally but rather through the Web UI. Here is what I came up with:

    Here is what I started with:

    <section>
    <fieldset><label>Who is your favorite person? </label>

    <div class="radio"><label><input name="name" type="radio" value="RippedWarrior" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">RippedWarrior</span></div>

    <div class="radio"><label><input name="name" type="radio" value="Walkerz" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">Walkerz</span><label> </label></div>

    <div class="radio"><label><input name="name" type="radio" value="Project_2501" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">Project_2501</span><label> </label></div>

    <div class="radio"><label><input name="name" type="radio" value="Manzician" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">Manzician</span><label> </label></div>

    <div class="radio"><label><input name="name" type="radio" value="Spamgirl" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">Spamgirl</span><label> </label></div>

    <div class="radio"><label><input name="name" type="radio" value="Dack" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">Dack</span><label> </label></div>

    <div class="radio"><label><input name="name" type="radio" value="Katie" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">Katie</span><label> </label></div>

    <div class="radio"><label><input name="name" type="radio" value="Pinkyts" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">Pinkyts</span><label> </label></div>

    <div class="radio"><label><input name="name" type="radio" value="TN-Sharer" /></label><span style="color: rgb(0, 0, 0); font-family: Arial, sans-serif; font-size: small; line-height: 19.5px;">TN-Sharer</span><label> </label></div>
    </fieldset>


    First, I called upon jquery by adding this to the very top of the HIT source:

    <script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>

    Next I added the following code to shuffle the radio buttons underneath the jquery script:

    <script>(function($){

    $.fn.shuffle = function() {

    var allElems = this.get(),
    getRandom = function(max) {
    return Math.floor(Math.random() * max);
    },
    shuffled = $.map(allElems, function(){
    var random = getRandom(allElems.length),
    randEl = $(allElems[random]).clone(true)[0];
    allElems.splice(random, 1);
    return randEl;
    });

    this.each(function(i){
    $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

    };
    })(jQuery);</script>


    Next, added a call to the previous script:

    <script>
    $(document).ready(function(){
    $( '.list label' ).shuffle();
    });
    </script>


    Finally, enclosed the labels inside a div:

    <div class="list"></div>

    I had to remove all the spans so each radio button had only one label tag:

    <fieldset><label>What name do you like best? </label>

    <div class="list">
    <div class="radio"><label><input name="name" type="radio" value="RippedWarrior" /> RippedWarrior</label></div>

    <div class="radio"><label><input name="name" type="radio" value="Walkerz" /> Walkerz</label></div>

    <div class="radio"><label><input name="name" type="radio" value="Project_2501" /> Project_2501</label></div>

    <div class="radio"><label><input name="name" type="radio" value="Manzician" /> Manzician</label></div>

    <div class="radio"><label><input name="name" type="radio" value="Spamgirl" /> Spamgirl</label></div>

    <div class="radio"><label><input name="name" type="radio" value="Dack" /> Dack</label></div>

    <div class="radio"><label><input name="name" type="radio" value="Katie" /> Katie</label></div>

    <div class="radio"><label><input name="name" type="radio" value="Pinkyts" /> Pinkyts</label></div>

    <div class="radio"><label><input name="name" type="radio" value="TN-Sharer" /> TN-Sharer</label></div>
    </div>
    </fieldset>


    There are probably easier ways to do this (I'm brand new to Javascript), but it had the desired result. The radio buttons are now displayed in random order each time the HIT is accessed.
    Eschew obfuscation, espouse elucidation. Batch HITs for newbs. 1000 req'd. 5000 req'd.

  2. The Following User Says Thank You to RippedWarrior For This Useful Post:


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •