how to select random 5 TR and display for user?

Question

how to select random 5 question and display for user?

other question should be hide in page and display only 5 question.

my sample code, i want when user load page see 5 question in many question's.

<form>
    <table>
        <tbody>
            <tr id="Tr0">
                <td>Question 1: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr1">
                <td>Question 2: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr2">
                <td>Question 3: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr3">
                <td>Question 4: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr4">
                <td>Question 5: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr5">
                <td>Question 6: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr6">
                <td>Question 7: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr7">
                <td>Question 8: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr8">
                <td>Question 9: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
            <tr id="Tr9">
                <td>Question 10: </td>
                <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
            </tr>
        </tbody>
    </table>
</form>

What have you tried? What exactly is your problem? This plattform is not for writing the code for you. — k0pernikus, Oct 30 '14 at 08:46
@Arman: have a look at my answer. hope it will help you to solve your problem. — SpiderCode, Oct 30 '14 at 09:05

Pranav C Balan · Accepted Answer · 2014-10-31T04:27:50.310

Use Math.random() to generate random number , and use it for showing questions

$('table tr').hide();
for (var i = 0; i < 5; i++) {
  $('table tr').filter(':hidden')
               .eq(Math.floor(Math.random() * (10 - i)))
               .show();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <table>
    <tbody>
      <tr id="Tr0">
        <td>Question 1:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr1">
        <td>Question 2:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr2">
        <td>Question 3:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr3">
        <td>Question 4:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr4">
        <td>Question 5:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr5">
        <td>Question 6:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr6">
        <td>Question 7:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr7">
        <td>Question 8:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr8">
        <td>Question 9:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
      <tr id="Tr9">
        <td>Question 10:</td>
        <td>
          <input type="radio" value="True" />
          <input type="radio" value="False" />
        </td>
      </tr>
    </tbody>
  </table>
</form>

hide() using for hiding all tr initially
filter(':hidden') for filtering hidden elements , this will avoid selecting same tr multiple times
eq() using for selecting tr from hidden table rows
Math.floor(Math.random() * (10 - i)) it's for generating random number
show() for displaying selected question

CaribouCode · Answer 2 · 2014-10-30T08:59:42.680

//hide all trs
$("tr").hide();

//determine the number of questions
var trLength = $("tr").length;

//create an array with this number in
var numberArray = [];
for (i=0; i<trLength; i++) { 
  numberArray.push(i);
}

//shuffle the array
function shuffle(o){
  for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
};

numberArray = shuffle(numberArray);

//use first 5 from shuffled array
for (i=0; i<5; i++) { 
  $("tr").eq(numberArray[i]).show();
}

Note that this method guarantees 5 questions will be shown. Other methods using a random number generator might pick the same random number twice and therefore try to show the same question twice, resulting in less than 5 actually being shown.

score 1 · Answer 3 · answered Oct 30 '14 at 08:54

1

save all of them and then get a random one, code is under:

var x = $('form tr')
function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
min = 0;
max = x.length;
var random_number = getRandomInt(0, x.length);
//you can get the random element by
x[random_number]

Hope this helps

answered Oct 30 '14 at 08:54

Aameer

1,366
1
11
30

Couldn't this result in duplicate random numbers? You can't show the same question twice. – CaribouCode Oct 30 '14 at 08:56
you can add a condition which will save the random numbers in another array and check if that question has been asked or not – Aameer Oct 30 '14 at 08:58

score 1 · Answer 4 · answered Oct 30 '14 at 08:57

Use javascript random generator to generate number between 0 - 10 (for example x).
After that use jquery to hide the element with id="TrX"
Store the number that have been generated.
Loop until we get 5 different number.

Random Generator Code:

Math.floor((Math.random() * 10)

score 1 · Answer 5 · edited May 23 '17 at 12:03

1

Something like this:

var tr=$("table tr").get().sort(function(){ 
  return Math.round(Math.random())-0.5;
}).slice(0,4);
$(tr).show();

Explanation :

1) Get all the TR elements in array.

2) Then sort them randomly.

3) Pick n elements

4) Show them

Working Demo

Taken From Answer Posted BY Nick Craver

edited May 23 '17 at 12:03

Community

1
1

answered Oct 30 '14 at 08:57

Milind Anantwar

81,290
25
94
125

score 1 · Answer 6 · answered Oct 30 '14 at 09:01

Try this:

    <html>
    <head>
        <style type="text/css">
        tr {
            display: none;
        }
        </style>
        <script type="text/javascript">
        function selFive(){
            var idc=new Array(0,1,2,3,4,5,6,7,8,9);
            for (var i = 0; i <5; i++) {
                sel=Math.random()*idc.length;
                left=idc.slice(0,sel);
                right=idc.slice(sel+1,idc.length);
                idc=left.concat(right);
            };
            for (var i = idc.length - 1; i >= 0; i--) {
                document.getElementById('Tr'+idc[i]).style.display='table-row';
            };
        }
        </script>
    </head>
    <body onload="selFive()">
        <form>
            <table>
                <tbody>
                    <tr id="Tr0">
                        <td>Question 1: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr1">
                        <td>Question 2: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr2">
                        <td>Question 3: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr3">
                        <td>Question 4: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr4">
                        <td>Question 5: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr5">
                        <td>Question 6: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr6">
                        <td>Question 7: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr7">
                        <td>Question 8: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr8">
                        <td>Question 9: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                    <tr id="Tr9">
                        <td>Question 10: </td>
                        <td><input type="radio" value="True" /><input type="radio" value="False" /></td>
                    </tr>
                </tbody>
            </table>
        </form>
    </body>
</html>

score 0 · Answer 7 · answered Oct 30 '14 at 09:04

Have a look at below code sample:

HTML:

<table id="tableQuestions">
    <tbody>
        <tr id="tr1"><td>Question 1</td></tr>
        <tr id="tr2"><td>Question 2</td></tr>
        <tr id="tr3"><td>Question 3</td></tr>
        <tr id="tr4"><td>Question 4</td></tr>
        <tr id="tr5"><td>Question 5</td></tr>
        <tr id="tr6"><td>Question 6</td></tr>
        <tr id="tr7"><td>Question 7</td></tr>
        <tr id="tr8"><td>Question 8</td></tr>
    </tbody>
</table>

JQuery

var generatedNumber;


$(document).ready(function() {
    $('#tableQuestions tr').each(function () {
        $(this).css('display','none');
    });

    generatedNumber = new Array();

    for (var i = 1; i <= 5; i++) {
        var n = getRandomArbitrary();
        alert('#tr' + parseInt(n).toString());
        $('#tr' + parseInt(n).toString()).css('display', '');
    }
});

function getRandomArbitrary() {
    var min = 1;
    var max = 8;
    var num = parseInt(Math.random() * (max - min) + min);
    if (generatedNumber.indexOf(num) > 0) {
        getRandomArbitrary(min, max);
    }

    return num ;
}

score 0 · Answer 8 · answered Oct 30 '14 at 09:09

Try this : use Math.random to get random row count and hide using index.

$(function(){
    $('input[value="Shuffle"]').click(function(){
        $('table tr').show();

       var count = 0;
       var array = [];
       while(count<5)
       { var index = parseInt(Math.random(100)*10);

           if(array.indexOf(index)<0)
           {
               array.push(index);
               $('table tr:eq('+index+')').hide();
               count++;
           }        

       }
    });
});

JSfiddle Demo

how to select random 5 TR and display for user?

8 Answers8