Make a HTML form in a random order

Question

How do I make a HTML form in a random order? This is my HTML code:

<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>

So these are 3 questions. I would like to make it so that when you refresh the page, the questions will be in a random order. I am also using python, but I don't if I need that to make it random. I am accesing the form like this in python:

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

Is there a way to make these questions in a random order? Do I need python or something else?

My full script at the moment: https://pastebin.com/U8QxgtGy Why isn't this working? — J.K. Harthoorn, Jun 19 '17 at 18:25

score 0 · Answer 1 · answered Jun 19 '17 at 15:16

0

You could simply use jquery to do that.

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));
}

Refer from 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>

answered Jun 19 '17 at 15:16

Nikhil Nanjappa

6,454
3
28
44

Thanks for the reply. At the moment, it doesn't work for me. Am I doing something wrong? This is my full HTML code: https://pastebin.com/n5nzAsmB – J.K. Harthoorn Jun 19 '17 at 15:26
Looking at your code, I see other elements too have the class `.form-row`(the textbox and the button containers). Maybe you can remove them or add a different class say `questions` to ONLY the questions containers(because you need to randomize only your questions & not everything) and use those in the jquery like `var forms = $(".questions")` – Nikhil Nanjappa Jun 19 '17 at 15:33
Ok I get it. I did that but it still doesn't seem to work. I've included the CSS in my HTML: https://pastebin.com/GJxnmqJV – J.K. Harthoorn Jun 19 '17 at 15:43
It seems to be working here - https://codepen.io/PleaseBugMeNot/pen/awJLJx. Can you check. Hope you are only looking at the questions, the first textbox will not change – Nikhil Nanjappa Jun 19 '17 at 15:47
Maybe the problem is that I only use the HTML part? I am only using a html file and pasted the script in there? Is that a problem? – J.K. Harthoorn Jun 19 '17 at 15:54
Sorry I didn't understand .. what do you mean by "I am only using a html file and pasted the script in there" – Nikhil Nanjappa Jun 19 '17 at 16:03
In the link you sent, you can see a tab with HTML and a tab with JS. I only use a HTML file and not a JS file. Does that matter? – J.K. Harthoorn Jun 19 '17 at 16:08
How do I do this? – J.K. Harthoorn Jun 19 '17 at 17:03
Sorry that I am asking it so much, but I have to hand this in for school and it doesn't work. – J.K. Harthoorn Jun 19 '17 at 17:54
Yes, the way you're doing is the issue then. Put the ` – Nikhil Nanjappa Jun 20 '17 at 08:40

Make a HTML form in a random order

1 Answers1