Randomoptions

by mamounothman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="question_form">

  Question 1
  <div class="question_container">
    <div class="question_div">
      <p>Some persons can do piece of work in 12 days. Twice the number of such persons will do half of that work in, how many days.</p>

      <p>&nbsp;</p>
      <input type="hidden" name="qid1" value="244">
      <div class="option_group">
        <div class="option_div">
          <input type="radio" name="radio1" id="checka1" value="A">
          <label for="checka1"><p>1</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkb1" value="B">
          <label for="checkb1"><p>2</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkc1" value="C">
          <label for="checkc1"><p>3</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checkd1" value="D">
          <label for="checkd1"><p>4</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio1" id="checke1" value="E">
          <label for="checke1"><p>None of these</p>
</label>
        </div>
      </div>

    </div>
    <button class="show_ans" type="button" name="showanswer1" id="showanswer1">Show Answer1</button>
  </div>

  Question 2
  <div class="question_container">
    <div class="question_div">
      <p>In a dairy farm, 40 cows eat 40 bags of husk in 40 days. In how many days one cow will eat one bag of husk.</p>
      <input type="hidden" name="qid2" value="245">
      <div class="option_group">
        <div class="option_div">
          <input type="radio" name="radio2" id="checka2" value="A">
          <label for="checka2"><p>&nbsp;44</p>
</label>
        </div>
        <div class="option_div">
          <input type="radio" name="radio2" id="checkb2" value="B">
          <label...

CSS

label {
  display: inline-block;
  margin-left: 5px;
}

.option_div {
  float: left;
  width: 200px;
}

div.option_div:nth-child(odd) {
  clear: left;
}
.question_div {
  display:inline-block;
}

JavaScript

window.onload = function() {
  randomize();
	randomizeq();
};

function randomize() {
  let questions = $(".question_div");

  questions.each(function() {
    let divCollection = $(this).find(".option_div");
    let divs = Array.from(divCollection);
    shuffleArray(divs);
    for (const div of divs) {
      $(this).append(div);
    }
  });
}

function randomizeq() {
   let divCollection = $(".question_div");
  let divs = Array.from(divCollection);
  shuffleArray(divs);
  $(".question_container").each(function(j) {
    $(this).append(divs[j]);
    $(this).append($(`#showanswer${j+1}`));
	$(this).append("<hr><br/>");
  });
}

function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}