Ordering images based on number variables

Jun 07, 2021

Hi all

I am creating a resource where the user rates their confidence level in seven different tasks. They rate each task as 1-5 (so more than one task can have a ranking of 5 - very confident)

I would then like to display these tasks, either as icons or text, on the next screen, but ranked in order of confidence. Any tasks of equal ranking can be ranked together.

I fear the only way to do this is a HUUUGE amount of triggers (eg if Task A variable is eual or less than Task B, change state of image 1 to A and image 2 to B... repeated many, many, many times)

But does anyone know of a more elegant way of doing this?

4 Replies
Martin Sinclair

Hi Richard

thanks for the reply. Yeah that would work if I wasnt making it so complicated! 
The first part of the task is going to be more like one of those buzzfeed quizzes, where you are asked a series of questions, then on the back of that you get resources recommended to you. So the answers you give actually determine the 'confidence' the learner has in each topic and assigns a numeric variable.

I've gone down the JS path, using arrays. First time I have done it so there may be shortcuts or changes I could make, but will share below as this is currently working.

In the image of the JS, the RED section is taking the in course variables (Choice1-7) and assigning them to a JS variable. Each Choice variable is a value between 1-5, from low confidence to high confidence.

Next, the BLUE section creates the array. Two things here - it records the name of the task (navigator, compass etc) and links it to the confidence score each task scored. I did this so later on as well as ranking the score from high to low, it also displays the name of the task.
This section also sorts the scores from high to low at the end.

Finally the GREEN section takes the information back across to the player. It assigns the highest scoring vale in the array (and its label) to a new variable. I then use these new variables (First, Second, Third etc) to change the state of a row of buttons on my page. Each of these buttons click through to a resource.  By changing the state of them based on the order in the array, they appear on the screen in order of confidence ranking