2016-06-22 4 views
1

div를 무작위로 할당하는 것과 관련된 수많은 질문을 둘러 보았고 작업을 거의 완벽하게 수행하는 코드를 수정했습니다.형식으로 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'); 

을 랜덤 화하기 :

Submit button above the questions

제출 버튼을 위로 이동하지 않고 질문을 무작위로 얻으려면 어떻게해야합니까?

답변

1

제출 버튼도 분리하고 임의 화 기능 후에 다시 첨부하십시오.

또는 다른 div 내에 MC div를 래핑 한 다음 임의 화를 수행하십시오.

+0

두 번째 솔루션을 권하고 싶습니다. 정렬 전에 모든 질문을 하나의 래퍼 div에 넣으십시오. 이것은 그것을하는 더 좋은 방법 인 것 같습니다. – Flixer

+0

첫 번째 방법은 중첩 구조를 보존하는 반면 두 번째 방법은 중첩 구조를 변경합니다. 어떤 경우에는 구조를 보존해야 할 수도 있습니다. 당신은 css 선언을 단단히 묶었습니다. OP 질문은 중요하지 않습니다. 나는 두 번째 해결책을 직접 수행했을 것이다. – kazenorin

+0

두 번째 솔루션은 대우를 받았습니다! 나는 jQuery에 익숙하지 않았고이 솔루션은 완전히 나를 암시했다. – James

관련 문제