随机化表格中div的顺序

Question

我已经查看了有关随机化div的众多问题，并调整了一些能够完美完成工作的代码。

我有一个包含10个多重问题的表单，在页面加载中我想要随机化它们出现的顺序;但是使用下面的代码，它们以随机顺序结束，使用上面表单的提交按钮。

HTML

<form method="POST" action="https://example.com/application/multichoice" 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

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

根据下面的屏幕截图，您可以看到我对提交按钮的含义：

如何在不提交按钮的情况下将问题随机化，就像我一样？

Answer 1

也可以分离提交按钮，并在随机化功能之后重新连接它。

或者将MC div包装在另一个div中，然后执行随机化。