Sort variables from highest to lowest

Hi,

Does anyone have a Javascript for taking a series of number variables, corresponding text variables of their labels, sorting them, then populating, say "varTop3_1_Label", "varTop3_1_Score", "varTop3_2_Label", "varTop3_2_Score", "varTop3_3_Label", and "varTop3_3_Score"?

I have been asked to create a "Top 3" from values selected on 18 sliders, displaying the top 3 Slider's "name"s and the Slider value.

I have tackled this before on a timed quiz using triggers, where each quiz question has a countdown timer and the user gets fewer points the longer it takes to answer if they answer correctly. Then their score is placed on a leaderboard. This was a mammoth task, and something I'm struggling to recreate with this sliders activity.

I'm guessing this can be accomplished more efficiently using Javascript. It doesn't need to be dynamic - what I'm aiming for is a "click this button to view your top 3" button.

I have little-to-no knowledge of Javascript, but this kind of request comes in from time-to-time, so I would like to have a working script that can be adapted whenever these self-evaluation type requests come in.

I'm guessing it would need to comprise of

  1. player.GetVars for variables of the slider names and their values,
  2. a JS var that creates a string from the values
  3. a .sort() function to reorder them
  4. the reordered string to be written to JS vars
  5. Those JS values be player.Setvar'd to the SL variables "varTop3_1_Label", "varTop3_1_Score", "varTop3_2_Label" etc.

I just don't know how to construct it, especially ensuring that the values are linked to their label.

I have tried adapting some found JS from elsewhere on ELH, but I think it was designed to operate differently to what I'm trying to accomplish:

var player = GetPlayer();
var Slider1 = player.GetVar("Slider1");
var Slider2 = player.GetVar("Slider2");
var Slider3 = player.GetVar("Slider3");
var Slider4 = player.GetVar("Slider4");
var Slider5 = player.GetVar("Slider5");
var Slider6 = player.GetVar("Slider6");
var Slider7 = player.GetVar("Slider7");
var Slider8 = player.GetVar("Slider8");
var Slider9 = player.GetVar("Slider9");
var Slider10 = player.GetVar("Slider10");
var Slider11 = player.GetVar("Slider11");
var Slider12 = player.GetVar("Slider12");
var Slider13 = player.GetVar("Slider13");
var Slider14 = player.GetVar("Slider14");
var Slider15 = player.GetVar("Slider15");
var Slider16 = player.GetVar("Slider16");
var Slider17 = player.GetVar("Slider17");
var Slider18 = player.GetVar("Slider18");

var Points = [Slider1, Slider2, Slider3, Slider4, Slider5. Slider6, Slider7, Slider8, Slider9, Slider10, Slider11, Slider12, Slider13, Slider14, Slider15, Slider16, Slider17, Slider18];

Points.sort(function(a , b){return b-a});
for ( i=O;i <Points.length;i++)
document. write(Points[i] + "<br >" ) ;
player.Setvar ("Points",Points) ;

3 Replies
Steven Chippendale

I have done some research, and I think I'm getting nearer to solving this, although it doesn't yet produce outputs into the variables (I get [object Object] for each. Maybe my syntax is out.

var player = GetPlayer();
var Slider1 = player.GetVar("Slider1");
var Slider2 = player.GetVar("Slider2");
var Slider3 = player.GetVar("Slider3");
var Slider4 = player.GetVar("Slider4");
var Slider5 = player.GetVar("Slider5");
var Slider6 = player.GetVar("Slider6");
var Slider7 = player.GetVar("Slider7");
var Slider8 = player.GetVar("Slider8");
var Slider9 = player.GetVar("Slider9");
var Slider10 = player.GetVar("Slider10");
var Slider11 = player.GetVar("Slider11");
var Slider12 = player.GetVar("Slider12");
var Slider13 = player.GetVar("Slider13");
var Slider14 = player.GetVar("Slider14");
var Slider15 = player.GetVar("Slider15");
var Slider16 = player.GetVar("Slider16");
var Slider17 = player.GetVar("Slider17");
var Slider18 = player.GetVar("Slider18");
var SliderName1 = player.GetVar("SliderName_1");
var SliderName2 = player.GetVar("SliderName_2");
var SliderName3 = player.GetVar("SliderName_3");
var SliderName4 = player.GetVar("SliderName_4");
var SliderName5 = player.GetVar("SliderName_5");
var SliderName6 = player.GetVar("SliderName_6");
var SliderName7 = player.GetVar("SliderName_7");
var SliderName8 = player.GetVar("SliderName_8");
var SliderName9 = player.GetVar("SliderName_9");
var SliderName10 = player.GetVar("SliderName_10");
var SliderName11 = player.GetVar("SliderName_11");
var SliderName12 = player.GetVar("SliderName_12");
var SliderName13 = player.GetVar("SliderName_13");
var SliderName14 = player.GetVar("SliderName_14");
var SliderName15 = player.GetVar("SliderName_15");
var SliderName16 = player.GetVar("SliderName_16");
var SliderName17 = player.GetVar("SliderName_17");
var SliderName18 = player.GetVar("SliderName_18");

var myarray = [{ key: SliderName1, val: Slider1 }, { key: SliderName2, val: Slider2 }, { key: SliderName3, val: Slider3 }, { key: SliderName4, val: Slider4 }, { key: SliderName5, val: Slider5 }, { key: SliderName6, val: Slider6 }, { key: SliderName7, val: Slider7 }, { key: SliderName8, val: Slider8 }, { key: SliderName9, val: Slider9 }, { key: SliderName10, val: Slider10 }, { key: SliderName11, val: Slider11 }, { key: SliderName12, val: Slider12 }, { key: SliderName13, val: Slider13 }, { key: SliderName14, val: Slider14 }, { key: SliderName15, val: Slider15 }, { key: SliderName16, val: Slider16 }, { key: SliderName17, val: Slider17 }, { key: SliderName18, val: Slider18}];

myarray.sort(function(a, b){return b.val - a.val});

var [var1, var2, var3, var4, var5, var6, var7, var8, var9, var10, var11, var12, var13, var14, var15, var16, var17, var18] = myarray;

Top31 = var1.toString();
Top32 = var2.toString();
Top33 = var3.toString();
Top3All = myarray.toString();

player.SetVar ("Top3_1" ,Top31);
player.SetVar ("Top3_2" ,Top32);
player.SetVar ("Top3_3" ,Top33);
player.SetVar ("Top3_All", Top3All);

Steven Chippendale

I have managed to get this to work.

For the benefit of anyone else wanting to sort variables into order, here is the Javascript  I used:

var player = GetPlayer();
var Slider1 = player.GetVar("Slider1");
var Slider2 = player.GetVar("Slider2");
var Slider3 = player.GetVar("Slider3");
var Slider4 = player.GetVar("Slider4");
var Slider5 = player.GetVar("Slider5");
var Slider6 = player.GetVar("Slider6");
var Slider7 = player.GetVar("Slider7");
var Slider8 = player.GetVar("Slider8");
var Slider9 = player.GetVar("Slider9");
var Slider10 = player.GetVar("Slider10");
var Slider11 = player.GetVar("Slider11");
var Slider12 = player.GetVar("Slider12");
var Slider13 = player.GetVar("Slider13");
var Slider14 = player.GetVar("Slider14");
var Slider15 = player.GetVar("Slider15");
var Slider16 = player.GetVar("Slider16");
var Slider17 = player.GetVar("Slider17");
var Slider18 = player.GetVar("Slider18");
var SliderName1 = player.GetVar("SliderName_1");
var SliderName2 = player.GetVar("SliderName_2");
var SliderName3 = player.GetVar("SliderName_3");
var SliderName4 = player.GetVar("SliderName_4");
var SliderName5 = player.GetVar("SliderName_5");
var SliderName6 = player.GetVar("SliderName_6");
var SliderName7 = player.GetVar("SliderName_7");
var SliderName8 = player.GetVar("SliderName_8");
var SliderName9 = player.GetVar("SliderName_9");
var SliderName10 = player.GetVar("SliderName_10");
var SliderName11 = player.GetVar("SliderName_11");
var SliderName12 = player.GetVar("SliderName_12");
var SliderName13 = player.GetVar("SliderName_13");
var SliderName14 = player.GetVar("SliderName_14");
var SliderName15 = player.GetVar("SliderName_15");
var SliderName16 = player.GetVar("SliderName_16");
var SliderName17 = player.GetVar("SliderName_17");
var SliderName18 = player.GetVar("SliderName_18");

var myarray = [
{ key: SliderName1, val: Slider1 },
{ key: SliderName2, val: Slider2 },
{ key: SliderName3, val: Slider3 },
{ key: SliderName4, val: Slider4 },
{ key: SliderName5, val: Slider5 },
{ key: SliderName6, val: Slider6 },
{ key: SliderName7, val: Slider7 },
{ key: SliderName8, val: Slider8 },
{ key: SliderName9, val: Slider9 },
{ key: SliderName10, val: Slider10 },
{ key: SliderName11, val: Slider11 },
{ key: SliderName12, val: Slider12 },
{ key: SliderName13, val: Slider13 },
{ key: SliderName14, val: Slider14 },
{ key: SliderName15, val: Slider15 },
{ key: SliderName16, val: Slider16 },
{ key: SliderName17, val: Slider17 },
{ key: SliderName18, val: Slider18 }
]

myarray.sort(function(a, b){
return b.val - a.val;
});

var Top1Object = myarray[0];
var Top2Object = myarray[1];
var Top3Object = myarray[2];

var Top1DestructuredLabel = Top1Object.key
var Top2DestructuredLabel = Top2Object.key
var Top3DestructuredLabel = Top3Object.key

var Top1DestructuredValue = Top1Object.val
var Top2DestructuredValue = Top2Object.val
var Top3DestructuredValue = Top3Object.val

Top1LabelForStoryline = Top1DestructuredLabel.toString();
Top2LabelForStoryline = Top2DestructuredLabel.toString();
Top3LabelForStoryline = Top3DestructuredLabel.toString();

Top1ValueForStoryline = Top1DestructuredValue.toString();
Top2ValueForStoryline = Top2DestructuredValue.toString();
Top3ValueForStoryline = Top3DestructuredValue.toString();

player.SetVar ("Top3_1_Label",Top1LabelForStoryline);
player.SetVar ("Top3_2_Label",Top2LabelForStoryline);
player.SetVar ("Top3_3_Label",Top3LabelForStoryline);
player.SetVar ("Top3_1_Value",Top1ValueForStoryline);
player.SetVar ("Top3_2_Value",Top2ValueForStoryline);
player.SetVar ("Top3_3_Value",Top3ValueForStoryline);


To reuse this, you just need to change the 'Slider1' etc. and 'SliderName_1' etc. in quotes to the names of your Storyline variables for the labels and values to rank, If you need more or less than 18 like I have, you need to add or delete rows - remember that the second paragraph ends with a ].

If you want to have a Top 5, Top 10 or whatever, you'll need to add additional lines to the last 6 paragraphs, mirroring the syntax. 

Then create these text variables in Storyline: called:
Top3_1_Label
Top3_2_Label
Top3_3_Label
Top3_1_Value
Top3_2_Value
Top3_3_Value
.. and insert them as references in the text box or table you want them displayed in.

If you're interested in how this works, the first paragraph brings in the labels and values from Storyline, the second organises them into an array ready for sorting, the third little paragraph sorts in reverse numerical order like a league table or scoreboard ( if you need to be in numerical order from least to most, substitute that part with
myarray.sort(function(a, b){
return a.val - b.val;
});
The fourth paragraph extracts the first, second and third from the sorted array (in Javascript, 0=First, 1=Second etc.)
The Fifth and Sixth pull apart the joined-up "Label-Value" into separate Label and Value variables
The Seventh and Eighth convert those variables into strings to make sure Storyline can understand them
The final paragraph updates the Storyline variables Top_3_1_Label etc. with the new variables.

I’ve been told, by people knowledgeable and helpful enough to advise me, that this could be done more efficiently by using dot notation in the fourth paragraph, eradicating the need for the 5th and 6th paragraphs (the erroneously named ‘destructured’ vars), but they were oddly reluctant to actually explain how, and I’m not a JavaScript developer, so it is what it is.