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 (