interface IPortalClaims { class_hash: string; offering_id: number; platform_id: string; platform_user_id: number; user_id: string; user_type: "learner" | "teacher"; } interface IJwtClaims { alg: string; aud: string; class_info_url: string; domain: string; domain_uid: number; exp: number; externalId: number; iat: number; iss: string; logging: boolean; returnUrl: string; sub: string; uid: string; claims: IPortalClaims; } interface IJwtResponse { token: string; claims: IJwtClaims; } declare type ICustomMessageOptions = Record; declare type ICustomMessagesHandledMap = Record; interface ISupportedFeatures { aspectRatio?: number; authoredState?: boolean; interactiveState?: boolean; customMessages?: { handles?: ICustomMessagesHandledMap; }; } interface ICustomMessage { type: string; content: Record; } /** * That's the minimal set of properties that needs to be provided. * All the other properties provides go to the `extra` hash. */ interface ILogData { event: string; event_value?: any; parameters?: any; } /** * Log event handler. * @param logData Data logged by the code. */ declare type ILogEventHandler = (event: ILogData) => void; /** * Data passed to InteractiveAvailable event handlers. */ interface IInteractiveAvailableEvent { /** * Interactive container of the interactive that was just started. */ container: HTMLElement; /** * Availablility of interactive */ available: boolean; } /** * InteractiveAvailable event handler. */ declare type IInteractiveAvailableEventHandler = (event: IInteractiveAvailableEvent) => void; /** * Data passed to InteractiveSupportedFeatures event handlers. */ interface IInteractiveSupportedFeaturesEvent { /** * Interactive container of the interactive that was just started. */ container: HTMLElement; /** * Supported features */ supportedFeatures: ISupportedFeatures; } interface IPluginSyncUpdate { status: "started" | "working" | "failed" | "completed"; message?: string; } declare type PluginSyncUpdateCallback = (update: IPluginSyncUpdate) => void; interface IPluginSyncEvent { maxUpdateCallbackInterval: number; updateCallback: PluginSyncUpdateCallback; } /** * SupportedFeatures event handler. */ declare type IInteractiveSupportedFeaturesEventHandler = (event: IInteractiveSupportedFeaturesEvent) => void; /** * PluginSync event handler. */ declare type IPluginSyncRequestEventHandler = (event: IPluginSyncEvent) => void; declare const onLog: (handler: ILogEventHandler) => void; declare const offLog: (handler: ILogEventHandler) => void; declare const onInteractiveAvailable: (handler: IInteractiveAvailableEventHandler) => void; declare const offInteractiveAvailable: (handler: IInteractiveAvailableEventHandler) => void; declare const onInteractiveSupportedFeatures: (handler: IInteractiveSupportedFeaturesEventHandler) => void; declare const offInteractiveSupportedFeatures: (handler: IInteractiveSupportedFeaturesEventHandler) => void; interface IPlugin { } interface IRegisterPluginOptions { runtimeClass: new (runtimeContext: IPluginRuntimeContext) => IPlugin; authoringClass?: new (authoringContext: IPluginAuthoringContext) => IPlugin; } interface IPluginRuntimeContext { /** Name of the plugin */ name: string; /** Url from which the plugin was loaded. */ url: string; /** Plugin instance ID. */ pluginId: number; /** The authored configuration for this instance (if available). */ authoredState: string | null; /** The saved learner data for this instance (if available). */ learnerState: string | null; /** HTMLElement created by LARA for the plugin to use to render both its runtime and authoring output. */ container: HTMLElement; /** The run ID for the current LARA run. */ runId: number; /** The portal remote endpoint (if available). */ remoteEndpoint: string | null; /** The current user email address (if available). */ userEmail: string | null; /** URL of the resource associated with the current run (sequence URL or activity URL) */ resourceUrl: string; /**************************************************************************** Function that saves the users state for the plugin. Note that plugins can have different scopes, e.g. activity or a single page. If the plugin instance is added to the activity, its state will be shared across all the pages. If multiple plugin instances are added to various pages, their state will be different on every page. ``` context.saveLearnerPluginState('{"one": 1}').then((data) => console.log(data)) ``` @param state A string representing serialized plugin state; if it's JSON, remember to stringify it first. ****************************************************************************/ saveLearnerPluginState: (state: string) => Promise; /** Function that returns class details (Promise) or null if class info is not available. */ getClassInfo: () => Promise | null; /** Function that returns JWT (Promise) for given app name. */ getFirebaseJwt: (appName: string) => Promise; /** Wrapped embeddable runtime context if plugin is wrapping some embeddable and the plugin has the * guiPreview option set to true within its manifest. */ wrappedEmbeddable: IEmbeddableRuntimeContext | null; /** * Logs event to the CC Log Server. Note that logging must be enabled for a given activity. * Either by setting URL param logging=true or by enabling logging in Portal. * ``` * context.log("testEvent"); * context.log({event: "testEvent", event_value: 123}); * context.log({event: "testEvent", someExtraParam: 123}); * context.log({event: "testEvent", parameters: { paramInParamsHash: 123 }}); * ``` * This augments the logged data with plugin_id, and optionally, embeddable_type * and embeddable_id. * @param logData Data to log. Can be either event name or hash with at least `event` property. */ log: (logData: string | ILogData) => void; /** Flag denoting offline mode of an Activity Player activity */ offlineMode: boolean; /** The starting z-index the plugin should use */ startingZIndex: number; } interface IEmbeddableRuntimeContext { /** Embeddable container. */ container: HTMLElement; /**************************************************************************** Serialized form of the embeddable. Defined by LARA export code, so it's format cannot be specified here. Example (interactive): ``` { aspect_ratio_method: "DEFAULT", authored_state: null, click_to_play: false, enable_learner_state: true, name: "Test Interactive", native_height: 435, native_width: 576, url: "http://concord-consortium.github.io/lara-interactive-api/iframe.html", type: "MwInteractive", ref_id: "86-MwInteractive" } ``` ****************************************************************************/ laraJson: any; /** Function that returns interactive state (Promise) or null if embeddable isn't interactive. */ getInteractiveState: () => Promise | null; /**************************************************************************** Function that returns reporting URL (Promise) or null if it's not an interactive or reporting URL is not defined. Note that reporting URL is defined in the interactive state (that can be obtained via #getInteractiveState method). If your code needs both interactive state and reporting URL, you can pass interactiveStatePromise as an argument to this method to limit number of network requests. @param interactiveStatePromise? An optional promise returned from #getInteractiveState method. If it's provided this function will use it to get interacive state and won't issue any additional network requests. ****************************************************************************/ getReportingUrl: (interactiveStatePromise?: Promise) => Promise | null; /**************************************************************************** Function that subscribes provided handler to event that gets called when the interactive's availablity changes. Normally an interactive starts as available unless click to play is enabled. When click to play is enabled the interactive starts as not available and this handler is called when the click to play overlay is hidden. @param handler Event handler function. ****************************************************************************/ onInteractiveAvailable: (handler: IInteractiveAvailableEventHandler) => void; /** True if the interactive is immediately available */ interactiveAvailable: boolean; /**************************************************************************** Function that subscribes provided handler to event that gets called when the interactive's supported features are are available. @param handler Event handler function. ****************************************************************************/ onInteractiveSupportedFeatures: (handler: IInteractiveSupportedFeaturesEventHandler) => void; /**************************************************************************** Function that sends a custom message to the embeddable. @param message The message to be sent ****************************************************************************/ sendCustomMessage: (message: ICustomMessage) => void; /**************************************************************************** Function that enables or disables sharing of the embeddable answer with the whole class. Returns promise that resolves when sharing action is completed (since it involves network request). @param shared true enables sharing with class, false disables it ****************************************************************************/ setAnswerSharedWithClass: (shared: boolean) => Promise; } interface IPluginAuthoringContext { /** Name of the plugin */ name: string; /** Url from which the plugin was loaded. */ url: string; /** Plugin instance ID. */ pluginId: number; /** The authored configuration for this instance (if available). */ authoredState: string | null; /** Reserved HTMLElement for the plugin output. */ container: HTMLElement; /** The label of the plugin component. */ componentLabel: string; /**************************************************************************** Function that saves the authoring state for the plugin. ``` context.saveAuthoredPluginState('{"one": 1}').then((data) => console.log(data)) ``` @param state A string representing serialized author data; if it's JSON, remember to stringify it first. ****************************************************************************/ saveAuthoredPluginState: (state: string) => Promise; /** Wrapped embeddable runtime context if plugin is wrapping some embeddable and the plugin has the * guiPreview option set to true within its manifest. */ wrappedEmbeddable: IEmbeddableRuntimeContext | null; /** Function that returns JWT (Promise) for given app name. */ getFirebaseJwt: (appName: string) => Promise; /** Function that closes a plugin authoring form */ closeAuthoredPluginForm?: () => void; /** The starting z-index the plugin should use */ startingZIndex: number; } interface IUser { id: string; first_name: string; last_name: string; } interface IOffering { id: number; name: string; url: string; } interface IClassInfo { id: number; uri: string; class_hash: string; teachers: IUser[]; students: IUser[]; offerings: IOffering[]; } interface IInteractiveState { id: number; key: string; raw_data: string; interactive_name: string; interactive_state_url: string; activity_name: string; external_report_url: string; } /**************************************************************************** Register a new external script ``` registerPlugin({runtimeClass: DebuggerRuntime, authoringClass: DebuggerAuthoring}) ``` @param options The registration options @returns `true` if plugin was registered correctly. ***************************************************************************/ declare const registerPlugin: (options: IRegisterPluginOptions) => boolean; interface ISidebarOptions { content: string | HTMLElement; /** Icon can be 'default' (arrow) or an HTML element. */ icon?: string | HTMLElement; /** Text displayed on the sidebar handle. */ handle?: string; handleColor?: string; /** Title visible after sidebar is opened by user. If it's not provided, it won't be displayed at all. */ titleBar?: string; titleBarColor?: string; width?: number; padding?: number; onOpen?: () => void; onClose?: () => void; } interface ISidebarController { open: () => void; close: () => void; } declare const ADD_SIDEBAR_DEFAULT_OPTIONS: { /** Arrow pointing left. */ icon: string; handle: string; handleColor: string; titleBar: undefined; titleBarColor: string; width: number; padding: number; }; /**************************************************************************** Ask LARA to add a new sidebar. Sidebar will be added to the edge of the interactive page window. When multiple sidebars are added, there's no way to specify their positions, so no assumptions should be made about current display - it might change. Sidebar height cannot be specified. It's done on purpose to prevent issues on very short screens. It's based on the provided content HTML element, but it's limited to following range: - 100px is the min-height - max-height is calculated dynamically and ensures that sidebar won't go off the screen If the provided content is taller than the max-height of the sidebar, a sidebar content container will scroll. It returns a simple controller that can be used to open or close sidebar. ****************************************************************************/ declare const addSidebar: (_options: ISidebarOptions) => ISidebarController; interface IPopupOptions { content: HTMLElement | string; autoOpen?: boolean; closeOnEscape?: boolean; /** * Removes popup HTMLElement when it is closed by the user. * Otherwise, it will stay hidden and might be reopened programmatically. */ removeOnClose?: boolean; title?: string; closeButton?: boolean; color?: string; modal?: boolean; dialogClass?: string; draggable?: boolean; resizable?: boolean; /** Please see: https://api.jqueryui.com/dialog/#option-position */ position?: { my: string; at: string; of: Element; collision: string; }; width?: number; /** Number in px or "auto" */ height?: number | string; padding?: number; backgroundColor?: string; titlebarColor?: string; onOpen?: () => void; onClose?: () => void; /** Triggered when a dialog is about to close. If canceled (by returning false), the dialog will not close. */ onBeforeClose?: () => boolean; onRemove?: () => void; onResize?: () => void; onDragStart?: () => void; onDragStop?: () => void; } interface IPopupController { /** Opens popup (makes sense only if autoOpen option is set to false during initialization). */ open: () => void; /** Closes popup (display: none). Also removes HTML element from DOM tree if `removeOnClose` is equal to true. */ close: () => void; /** Removes HTML element from DOM tree. */ remove: () => void; } declare const ADD_POPUP_DEFAULT_OPTIONS: { title: string; autoOpen: boolean; closeButton: boolean; closeOnEscape: boolean; removeOnClose: boolean; modal: boolean; draggable: boolean; resizable: boolean; width: number; height: string; padding: number; /** * Note that dialogClass is intentionally undocumented. Styling uses class makes us depend on the * current dialog implementation. It might be necessary for LARA themes, although plugins should not use it. */ dialogClass: string; backgroundColor: string; titlebarColor: string; position: { my: string; at: string; of: Window & typeof globalThis; }; onOpen: undefined; onBeforeClose: undefined; onResize: undefined; onDragStart: undefined; onDragStop: undefined; }; /**************************************************************************** Ask LARA to add a new popup window. Note that many options closely resemble jQuery UI dialog options which is used under the hood. You can refer to jQuery UI API docs in many cases: https://api.jqueryui.com/dialog Only `content` is required. Other options have reasonable default values (subject to change, so if you expect particular behaviour, provide necessary options explicitly). React warning: if you use React to render content, remember to call `ReactDOM.unmountComponentAtNode(content)` in `onRemove` handler. ****************************************************************************/ declare const addPopup: (_options: IPopupOptions) => IPopupController; interface IEventListener { type: string; listener: (evt: Event) => void; } declare type IEventListeners = IEventListener | IEventListener[]; /**************************************************************************** Ask LARA to decorate authored content (text / html). @param words A list of case-insensitive words to be decorated. Can use limited regex. @param replace The replacement string. Can include '$1' representing the matched word. @param wordClass CSS class used in replacement string. Necessary only if `listeners` are provided too. @param listeners One or more { type, listener } tuples. Note that events are added to `wordClass` described above. It's client code responsibility to use this class in the `replace` string. ****************************************************************************/ declare const decorateContent: (words: string[], replace: string, wordClass: string, listeners: IEventListeners) => void; /** * Functions related to event observing provided by LARA. */ declare const events: { /** * Subscribes to log events. Gets called when any event is logged to the CC Log Manager app. */ onLog: (handler: ILogEventHandler) => void; /** * Removes log event handler. */ offLog: (handler: ILogEventHandler) => void; /** * Subscribes to InteractiveAvailable events. Gets called when any interactive changes its availability state. * Currently uses when click to play mode is enabled and the click to play overlay is clicked. */ onInteractiveAvailable: (handler: IInteractiveAvailableEventHandler) => void; /** * Removes InteractiveAvailable event handler. */ offInteractiveAvailable: (handler: IInteractiveAvailableEventHandler) => void; /** * Subscribes to InteractiveSupportedFeatures events. Gets called when any interactive calls setSupportedFeatures(). */ onInteractiveSupportedFeatures: (handler: IInteractiveSupportedFeaturesEventHandler) => void; /** * Removes InteractiveSupportedFeatures event handler. */ offInteractiveSupportedFeatures: (handler: IInteractiveSupportedFeaturesEventHandler) => void; /** * Subscribes to PluginSyncRequest events. Gets called when the plugins are commanded to sync their offline data. */ onPluginSyncRequest: (handler: IPluginSyncRequestEventHandler) => void; /** * Removes PluginSyncRequest event handler. */ offPluginSyncRequest: (handler: IPluginSyncRequestEventHandler) => void; }; export { ADD_POPUP_DEFAULT_OPTIONS, ADD_SIDEBAR_DEFAULT_OPTIONS, IClassInfo, IEmbeddableRuntimeContext, IEventListener, IEventListeners, IInteractiveAvailableEvent, IInteractiveAvailableEventHandler, IInteractiveState, IInteractiveSupportedFeaturesEvent, IInteractiveSupportedFeaturesEventHandler, IJwtClaims, IJwtResponse, ILogData, ILogEventHandler, IOffering, IPlugin, IPluginAuthoringContext, IPluginRuntimeContext, IPluginSyncEvent, IPluginSyncRequestEventHandler, IPluginSyncUpdate, IPopupController, IPopupOptions, IPortalClaims, IRegisterPluginOptions, ISidebarController, ISidebarOptions, IUser, PluginSyncUpdateCallback, addPopup, addSidebar, decorateContent, events, offInteractiveAvailable, offInteractiveSupportedFeatures, offLog, onInteractiveAvailable, onInteractiveSupportedFeatures, onLog, registerPlugin };