Sort HTML table displaying scores in descending order | XM Community
Skip to main content
Solved

Sort HTML table displaying scores in descending order

  • October 31, 2023
  • 5 replies
  • 810 views
S
Level 1 ●
Forum|alt.badge.img+2

Hi Community - 

I need some guidance on how to apply sorting to a table in which I display scores to respondent and I want to show them in descending order.  Full detail: Respondent completes survey about career skills/interests, survey scores responses,  and at survey end I have a table in a “Text/Graphic” question type that displays each category name in column A and corresponding score (piped in) in column B.  I need that table to sort before/as it displays to respondent so that rows are listed in descending order of scores for categories.  I found some HTML coding online for how to sort table, but all examples presume you “know” the value and it is hard coded in (literally,. as a value “4” as opposed to a variable).  So, I’m at a loss of how to translate that to a table using piped in values that of course change respondent to respondent.  Here is table.  TIA for guidance and recommendations.

Accounting Roles ${gr://SC_9QZAkIXimOoFX3U/Score}
Administrative Support ${gr://SC_9Sk1b7bsvGViI0C/Score}
HR Roles ${gr://SC_8e1FPLkGOhD9Xka/Score}
IT Roles ${gr://SC_1SnnTDgQYMdp50W/Score}
Medical Assistant ${gr://SC_9XpyOjAm22Vh4oK/Score}
OR Technician ${gr://SC_aY0vI2hxiXQJB5k/Score}
Patient Care Technician ${gr://SC_1AEhAHXq5R0q1z8/Score}
Pharmacy Technician ${gr://SC_cMFdcumXg46uWJo/Score}
Radiology Technician ${gr://SC_4GFVCFdGtUmydeK/Score}
RN ${gr://SC_1MluKM4Uup0pFBA/Score}
Sous Chef ${gr://SC_d6DfNj8MRgAvmD4/Score}

 

Best answer by Nam Nguyen

I presume your recommending putting it in the Question javascript in the onload section?  I have done so and table remains sorted as I have it programmed into table - it does not sort by value of score in column b.

@SeanMeegan How are you setting this up because it’s working on my size. This is how I set it up:
1. A HTML table in text/graphic question with scoring as value

Summary table<br>
&nbsp;
<table>
	<tbody>
		<tr>
			<td>Accounting Roles</td>
			<td>${gr://SC_5aITfras7ZkhW6y/Score}</td>
		</tr>
		<tr>
			<td>Administrative Support</td>
			<td>${gr://SC_eW1P1sDT7tHA7gG/Score}</td>
		</tr>
		<tr>
			<td>HR Roles</td>
			<td>${gr://SC_esq7a2R87JKZcJE/Score}</td>
		</tr>
		<tr>
			<td>IT Roles</td>
			<td>${gr://SC_2fXbsyTFII8UcTk/Score}</td>
		</tr>
		<tr>
			<td>Medical Assistant</td>
			<td>${gr://SC_8pjb2mCPd7buCBE/Score}</td>
		</tr>
		<tr>
			<td>OR Technician</td>
			<td>${gr://SC_1C7VKJIUVtVRb6K/Score}</td>
		</tr>
		<tr>
			<td>Patient Care Technician</td>
			<td>${gr://SC_eOPifFZVIHBeqVw/Score}</td>
		</tr>
		<tr>
			<td>Pharmacy Technician</td>
			<td>${gr://SC_3V1Uk4XQYZxbxnE/Score}</td>
		</tr>
		<tr>
			<td>Radiology Technician</td>
			<td>${gr://SC_erZQm06nFxtqUwm/Score}</td>
		</tr>
		<tr>
			<td>RN</td>
			<td>${gr://SC_daRw8dNI4z7uurQ/Score}</td>
		</tr>
		<tr>
			<td>Sous Chef</td>
			<td>${gr://SC_26rJGI1j6C3DELs/Score}</td>
		</tr>
	</tbody>
</table>

 

  1. Custom JavaScript in that text/graphic to sort the table as it load 
    Qualtrics.SurveyEngine.addOnload(function() {
        var table = document.querySelector('table');
        var rows = Array.from(table.querySelectorAll('tr'));

        rows.sort(function(a, b) {
            var scoreA = parseFloat(a.cells[1].textContent);
            var scoreB = parseFloat(b.cells[1].textContent);
            return scoreB - scoreA; // Sort in descending order
        });

        rows.forEach(function(row) {
            table.appendChild(row);
        });
    });

     

     

  2. Result

     

5 replies

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • Nam Nguyen
  • QPN Level 8 ●●●●●●●●
  • 1096 replies
  • October 31, 2023

Hi @SeanMeegan , You can put this sorting code in the custom JavaScript

Qualtrics.SurveyEngine.addOnload(function() {
    var table = document.querySelector('table');
    var rows = Array.from(table.querySelectorAll('tr'));

    rows.sort(function(a, b) {
        var scoreA = parseFloat(a.cells[1].textContent);
        var scoreB = parseFloat(b.cells[1].textContent);
        return scoreB - scoreA;
    });

    rows.forEach(function(row) {
        table.appendChild(row);
    });
});

Let me know if it works

Nam Nguyen - XM Technology Consultant | DXCON Vietnam
S
Level 1 ●
Forum|alt.badge.img+2
  • SeanMeegan
  • Author
  • Level 1 ●
  • 5 replies
  • October 31, 2023

I presume your recommending putting it in the Question javascript in the onload section?  I have done so and table remains sorted as I have it programmed into table - it does not sort by value of score in column b.

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • Nam Nguyen
  • QPN Level 8 ●●●●●●●●
  • 1096 replies
  • Answer
  • November 1, 2023

I presume your recommending putting it in the Question javascript in the onload section?  I have done so and table remains sorted as I have it programmed into table - it does not sort by value of score in column b.

@SeanMeegan How are you setting this up because it’s working on my size. This is how I set it up:
1. A HTML table in text/graphic question with scoring as value

Summary table<br>
&nbsp;
<table>
	<tbody>
		<tr>
			<td>Accounting Roles</td>
			<td>${gr://SC_5aITfras7ZkhW6y/Score}</td>
		</tr>
		<tr>
			<td>Administrative Support</td>
			<td>${gr://SC_eW1P1sDT7tHA7gG/Score}</td>
		</tr>
		<tr>
			<td>HR Roles</td>
			<td>${gr://SC_esq7a2R87JKZcJE/Score}</td>
		</tr>
		<tr>
			<td>IT Roles</td>
			<td>${gr://SC_2fXbsyTFII8UcTk/Score}</td>
		</tr>
		<tr>
			<td>Medical Assistant</td>
			<td>${gr://SC_8pjb2mCPd7buCBE/Score}</td>
		</tr>
		<tr>
			<td>OR Technician</td>
			<td>${gr://SC_1C7VKJIUVtVRb6K/Score}</td>
		</tr>
		<tr>
			<td>Patient Care Technician</td>
			<td>${gr://SC_eOPifFZVIHBeqVw/Score}</td>
		</tr>
		<tr>
			<td>Pharmacy Technician</td>
			<td>${gr://SC_3V1Uk4XQYZxbxnE/Score}</td>
		</tr>
		<tr>
			<td>Radiology Technician</td>
			<td>${gr://SC_erZQm06nFxtqUwm/Score}</td>
		</tr>
		<tr>
			<td>RN</td>
			<td>${gr://SC_daRw8dNI4z7uurQ/Score}</td>
		</tr>
		<tr>
			<td>Sous Chef</td>
			<td>${gr://SC_26rJGI1j6C3DELs/Score}</td>
		</tr>
	</tbody>
</table>

 

  1. Custom JavaScript in that text/graphic to sort the table as it load 
    Qualtrics.SurveyEngine.addOnload(function() {
        var table = document.querySelector('table');
        var rows = Array.from(table.querySelectorAll('tr'));

        rows.sort(function(a, b) {
            var scoreA = parseFloat(a.cells[1].textContent);
            var scoreB = parseFloat(b.cells[1].textContent);
            return scoreB - scoreA; // Sort in descending order
        });

        rows.forEach(function(row) {
            table.appendChild(row);
        });
    });

     

     

  2. Result

     

Nam Nguyen - XM Technology Consultant | DXCON Vietnam
S
Level 1 ●
Forum|alt.badge.img+2
  • SeanMeegan
  • Author
  • Level 1 ●
  • 5 replies
  • November 3, 2023

Thanks @Nam Nguyen - it worked perfectly.

Nam Nguyen
QPN Level 8 ●●●●●●●●
Forum|alt.badge.img+29
  • Nam Nguyen
  • QPN Level 8 ●●●●●●●●
  • 1096 replies
  • November 3, 2023

@SeanMeegan Glad to know it worked 😁

Nam Nguyen - XM Technology Consultant | DXCON Vietnam


Terms & ConditionsAccessibility statement