Add pagination to code block for improved UX

URL: https://kynk101.com/placeholder-test

Page password: AmberEggs123

I've created a "profiling" test using a code block where a user drags statements into order from top (most like me) to bottom (least like me) and eventually a corresponding message and colour are revealed for a subsequent offline activity.

The logic works as expected (though the code is very untidy!) but the UX is not going to be great.

There will be a total of 60 statements the user needs to arrange, and I would like to try and break this down into groups to make it less labour intensive. I think there are two options:

1. Groups of 10 statements are ranked, then subsequently ranked repeatedly until a final order of ranks 1-60 is achieved, then the rest of the revealColors logic runs.
2. Create initial group containers for "Most like me" to "Least like me" so the user can drag and drop into groups, then these groupings are ranked from 1-X (so a grouping of 3 would be 1-3 or a grouping of 10 would be 1-10), creating an eventual full list of 1-60, then the revealColors logic runs.

I don't know if either of these are possible in a code block. I got some bits to work but eventually gave up in favour of this stable code. Is it possible? Are there any different options with better UX that I could use to achieve the same end result? I do not want a Likert scale - I like the drag and drop format.

If it's not possible, is there at least a way to make it snap to the top of the code block after reveal?

On 7/26/2024 at 2:43 PM, DD-Kynk101 said:

URL: https://kynk101.com/placeholder-test

Page password: AmberEggs123

I've created a "profiling" test using a code block where a user drags statements into order from top (most like me) to bottom (least like me) and eventually a corresponding message and colour are revealed for a subsequent offline activity.

The logic works as expected (though the code is very untidy!) but the UX is not going to be great.

There will be a total of 60 statements the user needs to arrange, and I would like to try and break this down into groups to make it less labour intensive. I think there are two options:

1. Groups of 10 statements are ranked, then subsequently ranked repeatedly until a final order of ranks 1-60 is achieved, then the rest of the revealColors logic runs.
2. Create initial group containers for "Most like me" to "Least like me" so the user can drag and drop into groups, then these groupings are ranked from 1-X (so a grouping of 3 would be 1-3 or a grouping of 10 would be 1-10), creating an eventual full list of 1-60, then the revealColors logic runs.

I don't know if either of these are possible in a code block. I got some bits to work but eventually gave up in favour of this stable code. Is it possible? Are there any different options with better UX that I could use to achieve the same end result? I do not want a Likert scale - I like the drag and drop format.

If it's not possible, is there at least a way to make it snap to the top of the code block after reveal?

Not sure what is the result you want to achieve? Do you have any mockups or samples?

23 hours ago, HoaLT said:

Not sure what is the result you want to achieve? Do you have any mockups or samples?

I'm afraid I don't have mockups but I'll try to explain better.

Option A :

• Pages 1-6: 10 statements with a next button. User drags statements into order from 1 (most like) to 10 (least like).
  • These would then essentially become Group A Ranks 1-10, Group B Ranks 1-10, etc until all 60 statements have been displayed
• Pages 7-9: Statements recirculate based on initial ranking order (e.g. ranks 1-3 from each group on page 7, 4-7 from each group on page 8, 8-10 from each group on page 9) and the user again ranks them from 1-10 to further refine . e.g. Group A Rank #1 could move to #5, #3 from group B could move to #1
• Page 10: Final reveal of ranks based on the full 60.

Option B :

• Page 1: all 60 statements are shown but the drag and drop function is into "buckets" (e.g. Most Like, Kinda Like, Neutral, Not Really Like, Not At All Like), rather than the single vertical column like now
• Page 2: user to rank all statements in the Most Like bucket from 1-X
• Page 3: user to rank all statements from Kinda Like bucket from 1-Y (with the #1 rank becoming the next sequential number after X from Most Like)
• Pages 4-6: rank statements from other buckets per above
• Final reveal of ranks 1-60 using existing revealColors function.

Option C :

• Any other user-friendly format anyone can think of that isn't 60 statements in one column!