diff --git a/cypress/e2e/shuffle.cy.ts b/cypress/e2e/shuffle.cy.ts index 05fa5d72..3645da49 100644 --- a/cypress/e2e/shuffle.cy.ts +++ b/cypress/e2e/shuffle.cy.ts @@ -79,6 +79,39 @@ describe('Shuffle', () => { }); }); + it('displays item with children shuffled when redirected', () => { + const root = FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items[0]; + cy.visit( + buildContentPagePath({ + rootId: root.id, + itemId: '', + searchParams: 'shuffle=true', + }), + ); + + cy.get(`.${FOLDER_NAME_TITLE_CLASS}`).should('contain', root.name); + + expectFolderLayout({ + rootId: root.id, + items: FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items, + }); + + // shuffled order is always the same for a given member + item id + const shuffledOrder = [2, 4, 5, 3, 1]; + + cy.get(`.${buildTreeItemClass(root.id)}`) + .siblings(`ul.${TREE_NODE_GROUP_CLASS}:first`) + .children('li') + .each(($li, index) => { + // assert the text of each li matches the expected order + cy.wrap($li).should( + 'have.text', + FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items[shuffledOrder[index]] + .name, + ); + }); + }); + it('displays item with children shuffled in the same order on a second visit', () => { const root = FOLDER_WITH_FIVE_ORDERED_SUBFOLDER_ITEMS.items[0]; cy.visit( diff --git a/docs/shuffling.md b/docs/shuffling.md new file mode 100644 index 00000000..6be8043f --- /dev/null +++ b/docs/shuffling.md @@ -0,0 +1,20 @@ +# Shuffling + +Shuffling is a hidden feature only available when adding a query parameter to the URL of the Graasp Player interface. +In this document, we describe how shuffling works. + +## Query Parameter + +The query parameter that needs to be added is `shuffle=true`. + +## Behavior + +Shuffling only shuffles the direct children of a root item, **excluding** the last child. +The last child is not shuffled to allow for experiments / learning experiences to have the same **first** and **last** items. +This means that the root item will always be displayed first and the last child will always be displayed last. +A member will always see an item shuffled in the same order. + +## Randomization + +Shuffling is achieved using the Fisher-Yates algorithm. +Randomization is based on seed that is calculated by adding the UUID of the member and the UUID of the root item. diff --git a/src/App.tsx b/src/App.tsx index 67616553..1de8b776 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -26,10 +26,19 @@ import PageWrapper from './modules/layout/PageWrapper'; const RedirectToRootContentPage = () => { const { rootId } = useParams(); + const [searchParams] = useSearchParams(); const { t } = usePlayerTranslation(); + if (rootId) { return ( - + ); } return (