diff --git a/assets/src/components/activities/ordering/OrderingDelivery.tsx b/assets/src/components/activities/ordering/OrderingDelivery.tsx index 12ca66a67d..d206f947e3 100644 --- a/assets/src/components/activities/ordering/OrderingDelivery.tsx +++ b/assets/src/components/activities/ordering/OrderingDelivery.tsx @@ -21,6 +21,7 @@ import { } from 'data/activities/DeliveryState'; import { Choices } from 'data/activities/model/choices'; import { initialPartInputs, studentInputToString } from 'data/activities/utils'; +import { elementsOfType } from 'data/content/utils'; import { configureStore } from 'state/store'; import { DeliveryElement, DeliveryElementProps } from '../DeliveryElement'; import { DeliveryElementProvider, useDeliveryElementContext } from '../DeliveryElementProvider'; @@ -95,6 +96,10 @@ export const OrderingComponent: React.FC = () => { }, 0); }, []); + // For Play All function used on ordering questions with audio choices + const [playingAll, setPlayingAll] = React.useState(false); + const player = React.useRef(null); + // First render initializes state if (!uiState.partState) { return null; @@ -111,6 +116,26 @@ export const OrderingComponent: React.FC = () => { ? (uiState.model as ActivityTypes.HasChoices).choices : studentInput.map((id) => Choices.getOne(uiState.model as OrderingSchema, id)); + // collect choice audio URL list in current order for the playAll function + const audioUrls = choices + .map((c) => elementsOfType(c.content, 'audio')[0]) + .filter((e) => e !== undefined) + .map((e: any) => e.src); + + const playAll = ([first, ...rest]: string[]): void => { + if (player.current) { + player.current.src = first; + player.current.onended = () => (rest.length > 0 ? playAll(rest) : setPlayingAll(false)); + player.current.play(); + setPlayingAll(true); + } + }; + + const stopPlayingAll = () => { + if (player.current) player.current.pause(); + setPlayingAll(false); + }; + return (
@@ -123,6 +148,18 @@ export const OrderingComponent: React.FC = () => { setChoices={(choices) => onSelectionChange(choices.map((c) => c.id))} disabled={isEvaluated(uiState) || isSubmitted(uiState)} /> + {audioUrls.length > 0 && ( +
+ +
+ )} dispatch(resetAction(onResetActivity, defaultPartInputs))} />