フォーム内の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の私は彼らに下のスクリーンショットを1として

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

をランダム化するために使用していますことを、あなたは私がsubmitボタンに関しては何を意味するかを見ることができます。

投稿ボタンをトップに移動せずに質問をランダムに入力する方法を教えてください。

Answer 1

送信ボタンも切り離し、ランダム化機能の後に再接続します。

または、別のdiv内にMC divをラップしてから、ランダム化を実行します。