以随机顺序制作 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));
}

参考here

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>