以随机顺序创建HTML表单

Question

如何以随机顺序制作HTML表单？ 这是我的HTML代码：

<div class="form-row">
            <label>
                <span>Welke game heeft géén multiplayer?</span>
                <select name="geen_multiplayer">
                    <option selected disabled>Maak een keuze</option>
                    <option>Red Dead Redemption 2</option>
                    <option>Destiny 2</option>
                    <option>South Park: The Fractured but Whole</option>
                    <option>FIFA 18</option>
                </select>
            </label>
        </div>


        <div class="form-row">
            <label>
                <span>Welke game is door Rockstar Games gemaakt?</span>
                <select name="gemaakt_rockstar">
                    <option selected disabled>Maak een keuze</option>
                    <option>Star Wars Battlefront II</option>
                    <option>The Elder Scrolls Online: Morrowind</option>
                    <option>Destiny 2</option>
                    <option>Red Dead Redemption 2</option>
                </select>
            </label>
        </div>

        <div class="form-row">
            <label>
                <span>Wat is géén shooter?</span>
                <select name="geen_shooter">
                    <option selected disabled>Maak een keuze</option>
                    <option>Red Dead Redemption 2</option>
                    <option>Destiny 2</option>
                    <option>Call of Duty: WWII</option>
                    <option>Star Wars Battlefront II</option>
                </select>
            </label>

所以这些是3个问题。 我想这样做，以便当您刷新页面时，问题将按随机顺序排列。 我也在使用python，但如果我需要它，那就不要随意使用它。 我在python中访问这样的表单：

if (request.form["gemaakt_rockstar"] == "Red Dead Redemption 2"):
    score += 1

有没有办法以随机顺序提出这些问题？ 我需要python还是别的什么？

Answer 1

你可以简单地使用jquery来做到这一点。

var forms = $(".form-row");
for(var i = 0; i < forms.length; i++){
    var target = Math.floor(Math.random() * forms.length -1) + 1;
    var target2 = Math.floor(Math.random() * forms.length -1) +1;
    forms.eq(target).before(forms.eq(target2));
}

请参考这里

 var forms = $(".form-row"); for(var i = 0; i < forms.length; i++){ var target = Math.floor(Math.random() * forms.length -1) + 1; var target2 = Math.floor(Math.random() * forms.length -1) +1; forms.eq(target).before(forms.eq(target2)); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-row"> <label> <span>Welke game heeft géén multiplayer?</span> <select name="geen_multiplayer"> <option selected disabled>Maak een keuze</option> <option>Red Dead Redemption 2</option> <option>Destiny 2</option> <option>South Park: The Fractured but Whole</option> <option>FIFA 18</option> </select> </label> </div> <div class="form-row"> <label> <span>Welke game is door Rockstar Games gemaakt?</span> <select name="gemaakt_rockstar"> <option selected disabled>Maak een keuze</option> <option>Star Wars Battlefront II</option> <option>The Elder Scrolls Online: Morrowind</option> <option>Destiny 2</option> <option>Red Dead Redemption 2</option> </select> </label> </div> <div class="form-row"> <label> <span>Wat is géén shooter?</span> <select name="geen_shooter"> <option selected disabled>Maak een keuze</option> <option>Red Dead Redemption 2</option> <option>Destiny 2</option> <option>Call of Duty: WWII</option> <option>Star Wars Battlefront II</option> </select> </label> <div>