Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Randomizing Table Row Order in One Question Without Affecting Another Question

mrli999
Topic Author
Offline
Premium Member

More

1 year 3 months ago #251025 by mrli999

Randomizing Table Row Order in One Question Without Affecting Another Question was created by mrli999

I designed a survey with only one group. In this group there are two questions. The first question's type is Text Display, and the second question's type is Array. In the first question, there is a table with a total of 7 rows. Excluding the header, there are 6 rows remaining.

I want the order of these 6 rows to be randomized. I added some JavaScript code in the first question that does randomize the order of the 6 rows, but it also mixes up the second question together with the first question. I'd like to ask how I can adjust the JavaScript code so that it randomizes just the 6 rows in the first question's table, without affecting the second question.

The table in the first question is as follows:
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
 <tbody>
 <tr>
<td style="text-align: center;" width="20%"> </td>
 <td style="text-align: center;" width="0%"> </td>
 <td bgcolor="#D4D7E4" style="text-align: center;" width="35%"> 
 Student1 
 </td>
 <td style="text-align: center;" width="0%"> </td>
 <td bgcolor="#D4D7E4" style="text-align: center;" width="35%">Student2</td>
 </tr>
 <tr style="height: 6px; text-align: center;">
 </tr>
 <tr>
 <td bgcolor="#F2F2F2" style="text-align: center;">Honor</td>
 <td style="text-align: center;" width="0%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">diligent</td>
 <td style="text-align: center;" width="0%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">outstanding</td>
 </tr>
 <tr style="height: 6px; text-align: center;">
 </tr>
 <tr>
 <td bgcolor="#F2F2F2" style="text-align: center;">Father's job</td>
 <td style="text-align: center;" width="0%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">engineer</td>
 <td style="text-align: center;" width="0%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">teacher</td>
 </tr>
 <tr style="height: 6px; text-align: center;">
 </tr>
<tr>
 <td bgcolor="#F2F2F2" style="text-align: center;">Grassroots experience</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">freshman</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">administration</td>
 </tr>
 <tr style="height: 6px; text-align: center;">
 </tr>
 <tr>
 <td bgcolor="#F2F2F2" style="text-align: center;">Political status</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">communist</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">independent</td>
 </tr>
 <tr style="height: 6px; text-align: center;">
 </tr>
 <tr>
 <td bgcolor="#F2F2F2" style="text-align: center;"> Graduated from</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">top university</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">local college</td>
 </tr>
 <tr style="height: 6px; text-align: center;">
 </tr>
<tr>
 <td bgcolor="#F2F2F2" style="text-align: center;"> Gender</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">male</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">female</td>
 </tr>
 <tr style="height: 6px; text-align: center;">
 </tr>
 <tr>
 <td bgcolor="#F2F2F2" style="text-align: center;">Education</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">master</td>
 <td style="text-align: center;" width="1%"> </td>
 <td bgcolor="#F2F2F2" style="text-align: center;">bachelor</td>
 </tr>
 </tbody>
</table>

The JavaScript code in the first question is:
<script type="text/javascript" charset="utf-8">

$(document).ready(function(){
// Get all row elements
const rows = document.querySelectorAll('tr');

// Remove header row
const dataRows = Array.from(rows).slice(1);

// Randomly sort row elements
dataRows.sort(() => Math.random() - 0.5);

// Remove original rows
dataRows.forEach(row => row.remove());

// Insert rows in new order
dataRows.forEach(row => {
document.querySelector('tbody').appendChild(row);
});

});</script>

Please see the attached exported survey for reference.

File Attachment:

File Name: limesurvey...7456.lss
File Size:20 KB

Thank you!

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

1 year 3 months ago #251026 by Joffm

Replied by Joffm on topic Randomizing Table Row Order in One Question Without Affecting Another Question

Hi,
Why didn't you answer the questions at the beginning?
You not only ignored them, you removed them.

If you insert code, please use the button here

to insert code well formatted.

Now your question.
If you use the old "green apple - banana" example, you should use it correctly.
This is a question of type array, where you move the radio-buttons of the answer container into the question container - your table.
This part of the original script was missing.

And as you do not want to randomize the "selection" row,

add a class to the other rows
refer to this class in your randomization script
place the "selection" row outside the "tbody" part
and remove these empty rows, use css to have a spacing

Please, revise the inline css of your table.

Code:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
    <tbody>
        <tr>
            <td style="text-align: center;" width="20%"> </td>
            <td style="text-align: center;" width="0%"> </td>
            <td bgcolor="#D4D7E4" style="text-align: center;width:35%"><span style="color:#c0392b;"><span style="font-size:24px;"><strong>A</strong></span></span></td>
            <td style="text-align: center;" width="0%"> </td>
            <td bgcolor="#D4D7E4" style="text-align: center;width:35%"><span style="color:#c0392b;"><span style="font-size:24px;"><strong>B</strong></span></span></td>
        </tr>
        <tr class="rand" style="border-top:5px solid white">
            <td bgcolor="#F2F2F2" style="text-align: left;"><font color="#000000"><span style="font-size: 20px;"><b>Honor</b></span></font></td>
            <td style="text-align: center;" width="0%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">diligent</span></span></strong></td>
            <td style="text-align: center;" width="0%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">outstanding</span></span></strong></td>
        </tr>
        <tr class="rand" style="border-top:5px solid white">
            <td bgcolor="#F2F2F2" style="text-align: left;"><strong><span style="color:#000000;"><span style="font-size:20px;">Father's job</span></span></strong></td>
            <td style="text-align: center;" width="0%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">engineer</span></span></strong></td>
            <td style="text-align: center;" width="0%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">teacher</span></span></strong></td>
        </tr>
        <tr class="rand" style="border-top:5px solid white">
            <td bgcolor="#F2F2F2" style="text-align: left;"><strong><span style="color:#000000;"><span style="font-size:20px;">Grassroots experience</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">freshman</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">administration</span></span></strong></td>
        </tr>
        <tr class="rand" style="border-top:5px solid white">
            <td bgcolor="#F2F2F2" style="text-align: left;"><strong><span style="color:#000000;"><span style="font-size:20px;">status</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size: 20px;">dependent</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size: 20px;">independent</span></span></strong></td>
        </tr>
        <tr class="rand" style="border-top:5px solid white">
            <td bgcolor="#F2F2F2" style="text-align: left;"><strong><span style="color:#000000;"><span style="font-size: 20px;">Graduated from</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">top university</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">local college</span></span></strong></td>
        </tr>
        <tr class="rand" style="border-top:5px solid white">
            <td bgcolor="#F2F2F2" style="text-align: left;"><strong><span style="color:#000000;"><span style="font-size: 20px;">Gender</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">male</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">female</span></span></strong></td>
        </tr>
        <tr class="rand" style="border-top:5px solid white">
            <td bgcolor="#F2F2F2" style="text-align: left;"><font color="#000000"><span style="font-size: 20px;"><b>Education</b></span></font></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">master</span></span></strong></td>
            <td style="text-align: center;" width="1%"> </td>
            <td bgcolor="#F2F2F2" style="text-align: center;"><strong><span style="color:#000000;"><span style="font-size:20px;">bachelor</span></span></strong></td>
        </tr>
    </tbody>
    <tbody>
        <tr style="border-top:16px solid white">
            <td bgcolor="#f2f2f2" style="text-align: left;"><span style="font-size:18px;"><strong>Your Choice</strong></span></td>
            <td style="text-align: center;" width="0%"> </td>
            <td bgcolor="#f2f2f2" style="text-align: center;"> </td>
            <td style="text-align: center;" width="0%"> </td>
            <td bgcolor="#f2f2f2"> </td>
        </tr>
    </tbody>
</table>
 
<script type="text/javascript" charset="utf-8">
       
    $(document).on('ready pjax:scriptcomplete',function(){
 
        // Identify this question
        var thisQuestion = $('#question{QID}');

        // Move the radios
        $('.question-text table:eq(0) tr:last td:eq(2)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(0) *', thisQuestion));
        $('.question-text table:eq(0) tr:last td:eq(4)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(1) *', thisQuestion));
        
        // Some classes for presentation
        $('.question-text table:eq(0) input:radio', thisQuestion).closest('td').addClass('answer-item radio-item text-center radio');
        $('.question-text table:eq(0) .radio-item label', thisQuestion).show();
        
        // Click event on the table cells
        $('.question-text table:eq(0) .radio-item', thisQuestion).on('click', function(e) {
            $('input:radio', this).trigger('click');
        });
        $('.question-text table:eq(0) input:radio', thisQuestion).on('click', function(e) {
            e.stopPropagation();
        });
        
        // Clean-up styles
        $('.answer-container', thisQuestion).hide();
        $('.question-text table:eq(0) .label-text', thisQuestion).remove();
        $('.question-text table:eq(0) .radio-text', thisQuestion).css({
            'cursor': 'pointer'
        });
    });
</script>
 
<script type="text/javascript" charset="utf-8">
 
 $(document).ready(function(){
// Get all row elements  
const rows = document.querySelectorAll('tr.rand');
 
// Remove header row
const dataRows = Array.from(rows).slice(1); 
 
// Randomly sort row elements
dataRows.sort(() => Math.random() - 0.5);
 
// Remove original rows
dataRows.forEach(row => row.remove()); 
 
// Insert rows in new order
dataRows.forEach(row => {
  document.querySelector('tbody').appendChild(row);  
});
 
});
</script>

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: mrli999

Please Log in to join the conversation.

mrli999
Topic Author
Offline
Premium Member

More

1 year 3 months ago #251030 by mrli999

Replied by mrli999 on topic Randomizing Table Row Order in One Question Without Affecting Another Question

Thank you for your helpful response. I really appreciate you taking the time to address my questions.

I'm using quite an old version of LimeSurvey (2.73.1+171220).

I have a new question about getting the value of an equation question in JavaScript. If I have an equation question named 'randA11', how can I get its value in JavaScript code? Should I use:

var randA11value = $('#question{randA11}');

Thanks again.

Please Log in to join the conversation.

tpartner
Offline
LimeSurvey Community Team

More

1 year 3 months ago - 1 year 3 months ago #251033 by tpartner

Replied by tpartner on topic Randomizing Table Row Order in One Question Without Affecting Another Question

How is this related to this topic? Always open new threads for new topics.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 1 year 3 months ago by tpartner.

The following user(s) said Thank You: mrli999

Please Log in to join the conversation.

mrli999
Topic Author
Offline
Premium Member

More

1 year 3 months ago #251036 by mrli999

Replied by mrli999 on topic Randomizing Table Row Order in One Question Without Affecting Another Question

If a table is randomly sorted in Question 1, how can I make the order of the table consistent in subsequent questions?

For example, I have a table that is randomly sorted using JavaScript in Question 1. In Question 2, I want the rows of the table to be in the same order as in Question 1.

What is the best way to implement this so the table order is the same across multiple questions after the initial random sort?

I would appreciate any suggestions on how to maintain a consistent table order after doing an initial random shuffle.

Thank you!

Please Log in to join the conversation.

Joffm
Offline
LimeSurvey Community Team

More

1 year 3 months ago #251038 by Joffm

Replied by Joffm on topic Randomizing Table Row Order in One Question Without Affecting Another Question

You are talking about your HTML table, right?
I'd recommend to have the initial randomization in a (hidden - either by css class 'hidden' or in the script) question of short text.
Here the often shown way to do this:

Code:

<script type="text/javascript" charset="utf-8">function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
 
$(document).on('ready pjax:scriptcomplete',function(){
  var numberOfRows=10;  // Adapt to yout needs
  // Fill the array
  var arr = [];
  for (var i = 1; i <= numberOfRows; i++) {
    arr.push(i);
  }
  arr = shuffle(arr);
  $('#question{QID} input[type="text"]').val(arr);
  $('#question{QID}').hide();
});
</script>

Then use this to display the order of your rows.

Joffm

Volunteers are not paid.
Not because they are worthless, but because they are priceless

The following user(s) said Thank You: mrli999

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans

Get started

Welcome to the LimeSurvey Community Forum

Randomizing Table Row Order in One Question Without Affecting Another Question

File Attachment:

Lime-years ahead

Legal

About Us

Open Source