How can I randomly choose 5 TR items and show them to the user?

How can I randomly select and display 5 questions for the user?

The rest of the questions should be hidden on the page and only 5 questions should be displayed.

This is a sample code. I want the user to see 5 questions out of many questions when the page loads.

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

Answer №1

Utilize the Math.random() function to generate random numbers and display questions accordingly.

$('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>

  1. hide() is used to initially hide all tr elements
  2. filter(':hidden') is applied to filter out hidden elements and prevent selecting the same tr multiple times
  3. eq() is used to select tr elements from the hidden table rows
  4. Math.floor(Math.random() * (10 - i))
     generates a random number for selection
  5. show() is used to display the selected question

Answer №2

Collect all of them and then choose one at random, use the following code snippet:

let elements = $('form tr');
function getRandomIndex(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
let minIndex = 0;
let maxIndex = elements.length;
let randomIndex = getRandomIndex(0, elements.length);
// You can access the randomly selected element by
elements[randomIndex];

I trust this information is beneficial.

Answer №3

  1. Utilize a javascript random function to create a number within the range of 0 to 10 (let's call it x).
  2. Next, employ jquery to conceal the element with the id of "TrX".
  3. Save the generated number in a storage.
  4. Repeat this process until we have acquired 5 unique numbers.

Code for Random Number Generation:

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

Answer №4

Here's a similar concept:

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

Explanation :

1) Capture all the TR elements in an array.

2) Randomly sort the array.

3) Select a specific number of elements

4) Display those elements

View Live Demo

Credit To Original Answer By Nick Craver

Answer №5

//hiding all table rows
$("tr").hide();

//determining the total number of questions
var totalRows = $("tr").length;

//creating an array with these numbers
var numArray = [];
for (i=0; i<totalRows; i++) { 
  numArray.push(i);
}

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

numArray = shuffleArray(numArray);

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

It is important to note that this technique ensures that exactly 5 questions will be displayed. Other methods that rely on random number generation may select the same number more than once, potentially resulting in less than 5 questions being shown.

Answer №6

Give this a shot:

    <html>
    <head>
        <style type="text/css>
        tr {
            display: none;
        }
        </style>
        <script type="text/javascript">
        function selectFive(){
            var idArray=new Array(0,1,2,3,4,5,6,7,8,9);
            for (var i = 0; i <5; i++) {
                selection=Math.random()*idArray.length;
                leftPart=idArray.slice(0,selection);
                rightPart=idArray.slice(selection+1,idArray.length);
                idArray=leftPart.concat(rightPart);
            };
            for (var i = idArray.length - 1; i >= 0; i--) {
                document.getElementById('Tr'+idArray[i]).style.display='table-row';
            };
        }
        </script>
    </head>
    <body onload="selectFive()">
        <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>

Answer №7

Check out the code snippet below:

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

Answer №8

Here's a neat trick for hiding random rows in a table with JavaScript: Utilize the Math.random method to generate a random row count and then hide those rows by their index.

$(function(){
    $('button[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++;
           }        

       }
    });
});

Check out the JSfiddle Demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding options to a dropdown list dynamically within a ASP.NET Datagrid using Jquery

While the function in my 'aspx' page is functioning properly, I am facing an issue with the 'dropdown' inside the GridControl. It appears to be getting duplicated from the original row and not updating with the values from the appended ...

javascriptjqueryasp.netxml

Render inline CSS styles with AngularJS

Can we use angular variables to write inline CSS styles? <div style="background: transparent url({{eventInfo.eventHeaderImg}}) top center no-repeat;"></div> Here is the output I received: "NetworkError: 404 Not Found - http://test/eventInfo. ...

htmlcssangularjs

What is the best API for incorporating interactive maps into my Android application?

I am looking to create an Android app (using Java) with interactive maps similar to ammaps, which can be integrated with HTML5/jQuery Mobile. Check out for reference. The app will display a world map where different areas are highlighted or colored based ...

androidjqueryhtmlgoogle-maps

Troubleshoot mobile overflow-x problem when expanding div beyond container boundaries

Recently, I experimented with a method to extend the background-color of my div outside its container. Everything was working fine except for the fact that applying overflow-x to the body on mobile browsers didn't completely disable horizontal scrolli ...

htmlcssmobileresponsive-design

When pressed, the button changes color to a vibrant shade of blue, and not just a simple outline

I'm experiencing an issue with a button that turns blue when the user holds onto it for a while on mobile. You can see an example in the image below: https://i.sstatic.net/VmnZ8.png Adding ::selected or outline did not resolve the problem as the ent ...

javascripthtmlcss

How can I create a mipmap for a planet using three.js?

Recently, I delved into the realm of mipmapping and its definition, but I find myself uncertain about how to effectively implement this technique in three.js. After exploring a couple of examples like: and also this one: Both examples appear to utilize ...

javascriptthree.js

AngularJS fails to fetch data from API queries

Currently facing a challenge with retrieving API data in my AngularJS project. The code below successfully fetches the data and logs it on the console as an array, but I am unable to access and utilize it in the front-end. Please note that the placeholder ...

htmlangularjsangularjs-scope

When the key property is utilized, the state in react useState is automatically updated; however, for updating without it, the useEffect or a

I am working on a component that looks like this: import React, { useState } from "react"; import { FormControl, TextField } from "@material-ui/core"; interface IProps { text?: string; id: number; onValueChange: (text: stri ...

javascriptreactjstypescriptuse-state

React Native vector icons display enigmatic symbols

I recently installed react-native-vector, but I'm seeing strange symbols when using it. Can anyone provide guidance on how to properly utilize this library? Platform: Android import React from 'react'; import {View, Text, StyleSheet} from & ...

javascriptreactjsreact-nativenpmicons

What is the best way to specify the border color of a fieldset?

Is there a way to set the border color of a fieldset while removing the default border color? I have tried using a class but it doesn't seem to work as expected. How can I achieve setting the border color for the fieldset? <fieldset class="field_s ...

htmlcssborder

Is there a way to confirm if one field value is greater than another using the Ajv JSON schema validator?

Is it feasible to receive a validation error using ajv when minPrice exceeds maxPrice? What is the recommended method of achieving this, ideally adhering to the JSON schema standard? ...

javascriptnode.jsjsonschemaajv

PHP Administrator Access

When a user logs in as an admin on my website, I want certain options to be available. My concern is ensuring the security of this admin account. Currently, after the login process is authenticated, I set $_SESSION['status'] = 'authorized&ap ...

phpjqueryhtmlauthenticationuser-accounts

jQuery, trigger a function when the document has finished loading

I have created the following code in an attempt to display a message to only Internet Explorer users visiting the page: <script src="jquery.reject.js"></script> <script> $(document).ready(function() { $.reject({ reject: { a ...

javascriptjqueryhtml

How should I integrate my JS authentication function in Rshiny to enable the app to utilize the outcome?

Currently, I have an Rshiny application set to be published on the server but in order to ensure that a specific user has access, we require an API authentication token. The process of authentication is handled within JS tags outside of the application, wh ...

javascriptrshiny

What's the best way to get this jQuery code to slide in from the left side?

<html> <title></title> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> </head> <body> <script type="text/javascript"> function animateRightToLeft($src, $ ...

jquery

What is the best way to dissect emails using Haraka?

After delving into the haraka project (at ), I managed to successfully install it on my linux machine. Now, I'm interested in finding a comprehensive tutorial on parsing email meta headers and content body using haraka. Despite searching through their ...

javascriptnode.jsemailsmtpmail-server

Tips for integrating the connect-orientdb module with the Express framework

My objective is to establish a connection between my server code, written in nodejs using the expressjs framework, and my database which is built on orientdb. Initially, I aimed to store sessions in the database but encountered difficulties when trying to ...

javascriptnode.jsexpressorientdbnosql

The functionality of Laravel middleware seems to be failing when called in an AJAX request URL

Utilizing ajax to insert data into the database and retrieve it for display is something I often do. Here's an example of how I typically use ajax: $.ajax({ method: 'POST', url: "{{ route('comments.store') }}", data: { comment ...

phpjqueryajaxlaravelmiddleware

Issue with AJAX call not functioning properly within PHP document

I've encountered an issue with a form that triggers an ajax call upon clicking the submit button. The ajax function is located within a PHP file as I need to populate some variables with data from the database. However, the before / success callbacks ...

javascriptphpjqueryajax

The jQuery Ajax script fails to send data to the webservice function

Having trouble passing values from my ajax code to my webservice method. I believe I may be doing something wrong. Any guidance would be appreciated. This is the code in my .aspx file: $(function () { $.ajax({ type: "POS ...

c#jqueryasp.netajax