mardi 21 juin 2016

Randomize order of divs in a form

I have looked around at the numerous questions regarding randomizing divs and have tweaked some code that does the job almost perfectly.

I have a form that contains 10 multichoice questions, on the page load I am wanting to randomize the order that they appear in; but using the code below they end up in a random order, with the submit button of the form above them.

HTML

<form method="POST" action="http://ift.tt/28MEqsv" accept-charset="UTF-8">    

    <div class="form-group">
        <h3>Multiple Choice</h3>
    </div>

    <div class='form-group question'>
        <label for="multi1">1) What is our server&#039;s genre?</label>
        <div class='radio'><label><input name="multi1" type="radio" value="a" id="multi1"> Light Roleplay</label></div>
        <div class='radio'><label><input name="multi1" type="radio" value="b" id="multi1"> Deathmatch/Freeroam</label></div>
        <div class='radio'><label><input name="multi1" type="radio" value="c" id="multi1"> Heavy Roleplay</label></div>
        <div class='radio'><label><input name="multi1" type="radio" value="d" id="multi1"> Drifting</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi2">2) An advanced knowledge of which of the following languages is required on our server?</label>
        <div class='radio'><label><input name="multi2" type="radio" value="a" id="multi2"> Russian</label></div>
        <div class='radio'><label><input name="multi2" type="radio" value="b" id="multi2"> English</label></div>
        <div class='radio'><label><input name="multi2" type="radio" value="c" id="multi2"> Latvian</label></div>
        <div class='radio'><label><input name="multi2" type="radio" value="d" id="multi2"> All languages are acceptable</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi3">3) Which of the following activities are controlled because of Rule 6?</label>
        <div class='radio'><label><input name="multi3" type="radio" value="a" id="multi3"> Torturing a character</label></div>
        <div class='radio'><label><input name="multi3" type="radio" value="b" id="multi3"> Character killing another player's character</label></div>
        <div class='radio'><label><input name="multi3" type="radio" value="c" id="multi3"> Disregarding another player's out-of-character communication</label></div>
        <div class='radio'><label><input name="multi3" type="radio" value="d" id="multi3"> Ignoring an administrator's ruling</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi4">4) If you wish to steal a property from another player, which of the following is the correct way to do so?</label>
        <div class='radio'><label><input name="multi4" type="radio" value="a" id="multi4"> Obtain administrator permission beforehand by using the report system in-game</label></div>
        <div class='radio'><label><input name="multi4" type="radio" value="b" id="multi4"> Roleplay it first, then ask for an administrator to transfer the property</label></div>
        <div class='radio'><label><input name="multi4" type="radio" value="c" id="multi4"> Have the stolen property transferred by filling out the application</label></div>
        <div class='radio'><label><input name="multi4" type="radio" value="d" id="multi4"> None of the above</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi5">5) Which of the following activities is against the rules?</label>
        <div class='radio'><label><input name="multi5" type="radio" value="a" id="multi5"> Killing several gang members in a drive-by without having interacted with them at all beforehand</label></div>
        <div class='radio'><label><input name="multi5" type="radio" value="b" id="multi5"> Requiring that anyone who joins your organization agrees to a CK contract</label></div>
        <div class='radio'><label><input name="multi5" type="radio" value="c" id="multi5"> Demanding a reason for being killed from your killer through out-of-character communication</label></div>
        <div class='radio'><label><input name="multi5" type="radio" value="d" id="multi5"> Robbing someone's character near the boardwalk</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi6">6) Which of the following player names would be acceptable?</label>
        <div class='radio'><label><input name="multi6" type="radio" value="a" id="multi6"> Wei Jiang</label></div>
        <div class='radio'><label><input name="multi6" type="radio" value="b" id="multi6"> Asuka Kasen</label></div>
        <div class='radio'><label><input name="multi6" type="radio" value="c" id="multi6"> Cristiano Ronaldo</label></div>
        <div class='radio'><label><input name="multi6" type="radio" value="d" id="multi6"> Raimonds Vejonis</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi7">7) When is it acceptable to completely ignore another player&#039;s out-of-character communication?</label>
        <div class='radio'><label><input name="multi7" type="radio" value="a" id="multi7"> Always</label></div>
        <div class='radio'><label><input name="multi7" type="radio" value="b" id="multi7"> If they are breaking server rules or encouraging the breaking of server rules</label></div>
        <div class='radio'><label><input name="multi7" type="radio" value="c" id="multi7"> Anytime, as long as it isn't to tell a player why you killed them</label></div>
        <div class='radio'><label><input name="multi7" type="radio" value="d" id="multi7"> Never</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi8">8) You are killed. You see your killer later, yell out to them your reasoning for killing them, and kill them to take revenge. Is that acceptable?</label>
        <div class='radio'><label><input name="multi8" type="radio" value="a" id="multi8"> No, because you did not roleplay with them sufficiently beforehand, so you are guilty of deathmatching</label></div>
        <div class='radio'><label><input name="multi8" type="radio" value="b" id="multi8"> Yes, because you had a solid reason for killing them</label></div>
        <div class='radio'><label><input name="multi8" type="radio" value="c" id="multi8"> No, because killing another player just for killing you is not allowed</label></div>
        <div class='radio'><label><input name="multi8" type="radio" value="d" id="multi8"> Yes, as long as you interacted with them before killing them</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi9">9) Which of the following could be classified as powergaming?</label>
        <div class='radio'><label><input name="multi9" type="radio" value="a" id="multi9"> Killing another player as part of a contract killing</label></div>
        <div class='radio'><label><input name="multi9" type="radio" value="b" id="multi9"> Roleplaying acting on instructions from an NPC of your own creation</label></div>
        <div class='radio'><label><input name="multi9" type="radio" value="c" id="multi9"> Helping a friend evade police who asked for your help over an out-of-character form of communication</label></div>
        <div class='radio'><label><input name="multi9" type="radio" value="d" id="multi9"> Committing a crime in an unrealistic area</label></div>
    </div>

    <div class='form-group question'>
        <label for="multi10">10) Which of the following could be classified as metagaming?</label>
        <div class='radio'><label><input name="multi10" type="radio" value="a" id="multi10"> Assuming a character's gang affiliations by their clothing</label></div>
        <div class='radio'><label><input name="multi10" type="radio" value="b" id="multi10"> Identifying an organization in-game based on publicly available information in an in-character section of the forums</label></div>
        <div class='radio'><label><input name="multi10" type="radio" value="c" id="multi10"> Sharing potentially sensitive in-character information about an organization out of character</label></div>
        <div class='radio'><label><input name="multi10" type="radio" value="d" id="multi10"> Accepting money in-game to kill a target</label></div>
    </div>

    <div class='form-group'>
        <input class="btn btn-primary" type="submit" value="Submit">
    </div>

    </form>

jQuery that I am using to randomize them

$.fn.randomize = function(selector){
    (selector ? this.find(selector) : this).parent().each(function(){
        $(this).children(selector).sort(function(){
            return Math.random() - 0.5;
        }).detach().appendTo(this);
    });

    return this;
};

$('form').randomize('.question');
$('.question').randomize('.radio');

As per the screenshot below, you can see what I mean regarding the submit button:

Submit button above the questions

How can I get the questions randomized like I have done, without the submit button moving up to the top too?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire